задача: навчитися створювати флеш ролики, що займають все вікно броузера.
Рецепт розповідає про те, як організувати зміна розташування і розмірів кліпів в залежності від розмірів вікна флеш плеєра (або плагіна). Keep it simple. )
Давно вже нікого не здивуєш "гумовим" хтмл сайтом - сайтом, вміст якого змінюється для заповнення всього вікна броузера. Незважаючи на те, що зробити те ж саме з флешем досить просто, гумові флеш сайти зустрічаються не так часто.
Крім дизайнерських потреб, резиновость може знадобитися ще в одному випадку - якщо ви не знаєте заздалегідь, який може виявитися видима область ролика в сторінці, або припускаєте, що може знадобитися змінити розмір ролика на сторінці, не вдаючись до додаткової допомоги флеш-розробника. на початок
Головне - зробити так, щоб набір дій по позиціонуванню об'єктів виконувався при кожній зміні габаритів вікна.
Загальний механізм. За інформацію про розміри і настройках сцени ролика відповідає вбудований клас Stage. Цей клас володіє декількома статичними властивостями, які нам знадобляться:- Stage.width - ширина вікна ролика в хтмл сторінці або в флеш плеєрі.
- Stage.height - висота вікна ролика в хтмл сторінці або в флеш плеєрі.
- Stage.scaleMode - режим масштабування сцени. Можливі значення цієї властивості і докладний опис їх дії є в статті Хелп. Скажу тільки, що нам знадобиться режим Stage.scaleMode = "noScale". при якому флеш не намагатиметься масштабувати вміст ролика під габарити вікна.
- Stage.align - вирівнювання cодержімого ролика в вікні плеєра або броузера. Властивість вказує вирівнювання по вертикалі і горизонталі. У прикладах до цього матеріалу я буду використовувати вирівнювання по верхньому лівому кутку вікна, від є Stage.align = "TL" (T - top, L - left). Мені здається, це найзручніше. Але, в принципі, ви можете використовувати будь-який інший зручний вам вид вирівнювання, це не суттєво.
- Створити в об'єкті метод onResize
- Зв'язати цей об'єкт з класом Stage
Перше можна зробити так: Тепер необхідно повідомити класу Stage, що наш об'ект_реагірующій повинен отримувати сповіщення про зміни габаритів вікна. Це робиться так: Перекладаючи цю рядок скрипта буквально: "додати об'ект_реагірующій в ряди слухачів класу Stage". Варто відзначити, що "слухач" - це, в даному випадку, термін. Слухачами прийнято називати об'єкти, які передплатили повідомлень про якісь події.
Отже, рецепт підготовки об'єкта до реагування на зміни габаритів вікна: В принципі, не обов'язково створювати новий об'єкт для приміщення в нього методу onResize. Ви так само можете використовувати для це будь-який з існуючих об'єктів будь-якого типу, наприклад _root: Це зручніше і логічніше, якщо дій всього одне - два.
Спробуйте змінити розмір вікна броузера і переконайтеся, що підпис завжди залишається в правому нижньому кутку вікна флеш.
Прийом, який полегшує життя. Часто при розробці ролика до мінливих габаритами потрібно позиціонувати багато об'єктів в залежності від розмірів вікна. Причому досить часто потрібно пропорційне зміна габаритів / позиції кліпів. Це можна зробити так, як було показано в прикладі 1. а можна придумати що-небудь більш цікаве. )
Наприклад, створимо на сцені такі об'єкти:
Тепер змусимо всі ці об'єкти позиціонуватися пропорційно розмірам вікна, вважаючи "нормальним" розміром 400х300 (поки що поставимо тільки зміна позиції).
Результат 2: [переглянути].
Спробуйте розтягувати і стискати вікно броузера, і подивіться, як переміщаються при цьому об'єкти. Ми запам'ятали співвідношення координат кожного з об'єктів з нормальними розмірами сцени. При зміні габаритів вікна досить помножити відповідні габарити на записані часові пропорцій, щоб отримати шукані значення координат.
Тепер додамо зміна розмірів. Нехай кліп з колом завжди буде отмасштабовані пропорційно габаритам вікна, квадрат нехай буде розтягнутий тільки по горизонталі а трикутник витягнуть тільки по вертикалі. Щоб додати зміна розмірів, потрібно запам'ятати пропорції висоти і ширини так само, як ми запам'ятовували пропорції для координат. Додані частини відзначені жирним шрифтом.
Результат 3: [переглянути].
Спробуйте змінювати розміри вікна броузера і подивіться, як переміщаються і масштабуються об'єкти. Зверніть увагу, що букви в текстовому полі праворуч не деформуються при зміні властивості _width поля. Замість цього текстове поле перебудовує свої рядки відповідно до заданої шириною.
Останній штрих до нашої чудо-функції onResize: додамо кілька рядків для відображення поточного розміру сцени флеш. Тепер ми завжди будемо знати, який поточний розмір сцени флеш в пікселях.