Як ви пам’ятаєте, кількома уроками раніше ми навчалися додавати найпростішу текстову анімацію у банери, застосовуючи при цьому ефекти motion tween. У сьогоднішньому уроці ми також будемо працювати з текстом, який можна додати у банери, але спробуємо створити дещо складніший ефект – змусимо пробігати по тексту відблиски.
Я майже впевнений, що раніше вам неодноразово доводилося зустрічатися з цим ефектом, оскільки він дуже гарно виглядає і робить банер більш пишним. Дизайнери настільки закохані у цей прийом, що, складається враження, готові використовувати його всюди, де це тільки можливо.
Шар маска (mask layer)
Для того, щоб засвоїти цей урок, нам знадобиться вивчити принципи функціонування нового поняття – маскувального шару у Flash. Таким чином ми вбиваємо двох зайців – навчаємося створювати текст з анімованим відблиском (який «пробігатиме» по всій довжині тексту) і знайомимося із шаром-маскою (mask layer) (який ще неодноразово знадобиться нам у наступних уроках).
- Перше, що нам потрібно, це створити новий флешовий документ і додати у нього будь-який текст. Шрифт для тексту, який буде анімуватися відблиском, зазвичай вибирається досить великим і помітним (хоча це й не обов’язкова умова). Наприклад, ось такий:
- Додайте ще один шар (layer) і скопіюйте туди текст. Розташуйте цей текст таким чином, щоб він повністю закривав попередній. Виберіть для нього світлий колір (який буде кольором відблиску). В ідеалі – білий.
- Відконвертуйте другий шар у символ (тип graphic) і поставте для нього рівень прозорості (opacity) 60-70%. (Детальніше про принципи функціонування символів у флеш читайте у відповідній статті). Для того, щоб в результаті нашої анімації текст виглядав трішки об’ємним, зсуньте верхній шар з текстом на два пікселі вгору і на два праворуч, по відношенню до основного тексту. Таким чином, щоб тести накладалися не ідеально, а між ними виникав невеличкий пробіл. У мене вийшло щось таке:
- Розтягніть обидва шари на 30 кадрів (рівно стільки триватиме анімація), оскільки жоден з них не змінюватиметься. Для цього вставте ключовий кадр у 30-му кадрі обидвох шарів.
- А тепер починається найцікавіше. Додайте третій шар вгорі над двома наявними і клікніть правою клавішею по його назві. У випадаючому меню виберіть опцію маска (Mask)
- Починаємо редагувати третій шар (той, що знаходиться найвище). Додаємо туди два прямокутники (з виключеними контурами для зручності). Колір прямокутників не має значення. Власне, ці прямокутники і будуть створювати наші відблиски, і саме їх ми будемо анімувати. У мене ці прямокутники виглядають приблизно так:
- Для третього шару, де знаходяться наші два прямокутники, створюємо motion (classic) tween, в якому рухаємо прямокутники з лівого боку в правий. Сподіваюся, ви вже вмієте це робити. Детальніше про принципи функціонування автоматичної анімації руху (motion tween) ви також можете прочитати у відповідній статті.
- Якщо ви все зробили правильно, то у вас вийшов ось-такий кліп:
При цьому шар перетвориться на маску Це означає, що будь-які елементи, які будуть розташовані на нижчому шарі (безпосередньо над шаром маскою), стануть невидимими до тих пір, поки на них не буде розташовано об’єктів із маски. Звучить трохи складно. Але зараз все стане зрозуміло на прикладі.
Конвертуємо обидва прямокутники у єдиний символ (тип graphic). Вся суть полягає в тому, що бачити наш другий шар (із світлим фоном тексту) ми будемо тільки у тому місці, де знаходяться ці прямокутники (тобто тільки під ними). А отже, «пробігання» прямокутників над текстом буде створювати ілюзію відблисків.
Зберігаємо і публікуємо його! Насолоджуємося результатом.
Зрозуміла річ, що форма маски відіграє тут найважливішу роль. Ми можемо як завгодно змінювати маску, перевертати її, робити напівпрозорою чи по-різному розмивати (щоб тінь від відблисків виглядала більш природньою). Але основні принципи вже зрозумілі. Експериментуйте і використовуйте, на здоров’я!
Вересень 20, 2009 о 20:42
Цікава інформація. Велика подяка автору за мануал.