Початкову інформацію про створення простих банерів у флеш, а зокрема про те, як створити основу з границями і вставити лінк, читайте у попередній статті про створення банерів. Сьогоднішня публікація, по-суті, є її продовженням і сьогодні ми навчимося додавати анімацію в банери.
Передусім нам потрібна заготовка, з якою ми закінчили попередній урок. Це основа банеру, залита однотонним фоном і обмежена границями, окрім того, на ній присутнє активне посилання. Все дуже просто:
Тепер спробуємо додати в цей банер трохи життя. Для цього ми скористаємося функціями motion tween, детально описаними у одному з попередніх уроків. Для простоти я обрав текстову анімацію (тобто працювати ми будемо з текстом).
- Перш за все потрібно вигадати короткий салоган, який з’являтиметься на банері. Можливо – кілька влучних фраз або словосполучень, які можна умовно розділити на логічні одиниці. Я вирішив обмежитись трьома фразами, які почергово з’являтимуться на банері. «Анімація, ігри, банери -> Flash для новачків -> Просто, доступно і абсолютно безкоштовно».
- Вибираємо самий нижній шар (layer) і додаємо туди першу фразу. Для цього скористаємося інструментом Text Tool. Колір і розмір, а також шрифт обираємо самостійно. А можна й взагалі зробити напис різнокольоровим!
- Вибираємо в панелі інструментів Selection Tool і конвертуємо текст в символ (детальніше про символи у Flash ви можете прочитати у відповідній статті). Тип символа ОБОВ’ЯЗКОВО вибираємо Movie Clip, оскільки саме в ньому відбуватиметься вся анімація. Назву можете вибирати будь-яку. Клікаємо двічі на щойно створеному символі і заходимо в режим його редагування.
- Зверніть увагу, що в режимі редагування створеного нами Movie Clip текст перестав бути символом. Ще раз конвертуємо його в символ, цього разу обираючи тип поведінки Graphic.
- Тепер ми можемо додати анімацію motion tween (classic tween). Давайте зробимо так, щоб текст «виїжджав» на сцену з лівого боку, кілька секунд знаходився на сцені (щоб відвідувач встиг його прочитати) і потім зникав у правому кутку. Для цього у першому ключовому кадрі переносимо символ ліворуч за рамки сцени. У другому ключовому кадрі (на віддалі, скажімо, 15-ти кадрів) текст переносимо на центр банера. Клікаємо правою клавішею на проміжку між двома ключовими кадрами і обираємо Classic Tween (для більш давніх версій Flash – Motion Tween).
- Визначте час, який потрібен вашому відвідувачеві для того, щоб прочитати повідомлення. Наприклад – 2 секунди! Множимо кількість секунд на вибрану вами частоту кадрів (за замовчуванням – 12, у моєму випадку - 24) і вставляємо черговий ключовий кадр через ту кількість кадрів, яка у нас вийшла (у моєму випадку 15+48 = 63(65) кадр).
- Додаємо останній ключовий кадр через 15 кадрів (у 80-му кадрі). В ньому виносимо наш текст праворуч за рамки банера. Створюємо Classic Tween. Маємо повний цикл «поїздки» тексту. Можна протестувати кліп. У моєму випадку він виглядає так:
- Настав час додати інші дві фрази. Оскільки обидві ці фрази також будуть графічними символами, щоб не виникало проблеми з їхнім відображенням та рухом, краще створити кожен з них у своєму власному шарі (layer). Просто створіть ще два шари і додайте у кожен з них по графічному символу з текстом (за аналогією до того, як ви додали перший графічний символ).
- Повторюємо анімацію, яку зробили з першим символом, для другої та третьої фрази. Єдине застереження (хоча воно повинно бути очевидним): оскільки рух наших фраз буде послідовним (перша пішла – друга прийшла), то початок анімації другого символу повинен припадати на закінчення анімації першого (80-ий кадр), а третього – на закінчення другого (160-ий кадр). У вас повинно вийти щось приблизно таке:
- Тестуємо і публікуємо банер.
Ви створили першу анімацію – тепер текст виїжджає на сцену з лівого боку банера. Можете протестувати кліп, натиснувши комбінацію клавіш Ctrl+Enter. (Детальніше про створення автоматичної анімації classic (motion) tween ви можете прочитати у відповідній статті).
По суті наш банер готовий. Щоправда – це найпростіший його варіант (який, тим не менше, вже можна використовувати на сайтах). Експериментуючи з різними варіантами автоматичної анімації (motion tween), ви можете додати практично будь-які ефекти (прозорості, кольору, трансформації, тощо) і буквально за кілька митей змінити ваш банер до невпізнаваності. Наприклад, ось так:
Сподіваюся цей урок був для вас корисним. Найближчим часом очікуйте більш складних і водночас – цікавих тем.
Липень 10, 2009 о 23:30
Радий, що продовжуєш писати і тут - хоча я флеш не дуже люблю, однак слідкую за розвитком цього проекту. Щиро бажаю успіхів.