Оздоблення Blinkie за допомогою Flash Motion Tweens

• Квітня 29, 2024

Коли ми востаннє працювали над анімацією Flash blinkie, ми лише закінчили текстові ефекти. Останнім текстовим ефектом, що виник в анімації, була поява та зникнення назви веб-сайту “J3 Designs”. Він зникає зі сцени зліва з ефектом переходу часової шкали (перехід 3 на часовій шкалі). Це було причиною, і ви збираєтесь з’ясувати, що це було.

Пам'ятайте, що як частина деталей дизайну, у нас є ці дві сонечко. Ну, настав час налагодити їх роботу. Коли ми створили шари до нашого проекту blinkie, ми додали золоту корівку до шару Bug 1. Тепер, перше, що ми зробимо, - це додати другу сонечку до нового шару, який ми будемо називати Bug 2. Ми хочемо, щоб ця червона сонечко з’явилася з-під камені. Тому нам знадобиться розмістити новий шар під шаром Статичні деталі.

Відкрийте blinkie2.fla у Flash CS3 і приступайте до роботи. Ми хочемо, щоб сонечко почало рухатися з-під камені, коли назва веб-сайту починає зникати. Ми хочемо, щоб це виглядало так, що текст зникає через сонечко. Тож ми додамо цю нову корівку до Frame 110, яка коли текст починає зникати.

1. Клацніть файл - імпорт - імпорт до бібліотеки, щоб відкрити діалогове вікно імпорту та додати червону сонечку до нашої бібліотеки.
   
   
2. Додайте новий шар під шаром Статичні деталі та назвіть його "Помилка 2". Додайте ключовий кадр (Insert - Timeline - Keyframe) в кадр 110. Перетягніть червону сонечку з бібліотеки під камею та поза зоною.
   
   Ми хочемо, щоб ця сонечко перемістилася ліворуч, поки вона не зникне зі сцени, коли текст зникне. Отже, ми хочемо, щоб божа корівка була вліво та поза сценою до моменту, коли ми досягнемо Frame 160.
   
   
3. Клацніть на кадр 160 на шарі помилки 2, додайте ключовий кадр і перетягніть червону сонечко ліворуч і повністю зі сцени. Клацніть правою кнопкою миші між кадрами 110 та 160 та виберіть у спливаючому меню пункт Create Motion Tween.
   
   Перевірте фільм, і вам слід побачити, як текст зникає, коли сонечко переміщається по ньому. Як тільки червона сонечка зійде зі сцени, ми перемістимо золоту сонечку (шар 1 помилки) вгору і вправо, поки вона також не зникне зі сцени.
   
   
4. Клацніть на кадр 160 на шарі помилки 1 і додайте ключовий кадр для початкової точки анімації золотої корівки. Давайте використаємо 20 кадрів, щоб перемістити золоту сонечку зі сцени. Клацніть на кадр 180 та додайте ключовий кадр. Перемістіть золоту сонечку вгору та зі сцени.
   
   
5. Клацніть правою кнопкою миші між рамками 160 та 180 та створіть Motion Tween. Клацніть на кадр 180 і додайте кадр до шарів статичних деталей та фону, щоб зробити вміст цих шарів знову видимим.
   
   Нарешті, ми хочемо перенести золоту сонечку назад у вихідне положення в лівій нижній частині сцени. Але ми не хочемо, щоб помилка рухалася вниз з вершини сцени. Ми хочемо, щоб він рухався вгору з-під сцени. Тож нам потрібно спочатку розмістити золоту сонечку зліва та під сценою. Тоді все, що нам потрібно зробити, - це перенести її вгору назад у вихідне положення, щоб анімація могла повторюватися. Ми будемо використовувати 10 кадрів, щоб повернути сонечко назад на місце.
   
   
6. Поверніться назад до Frame 1 на шарі Bug 1 і виберіть золоту сонечко. Клацніть Редагувати - Скопіюйте, щоб зберегти початкове положення золотої корівки.
   
   
7. Все-таки на шарі Bug 1 додайте ключовий кадр до Frame 190. Клацніть Редагувати - Очистити, щоб видалити золоту сонечку, яка вже є. Потім натисніть «Правка - Вставити на місце», щоб повернути золоту сонечку до початкового положення.
   
   
8. Все-таки на шарі Bug 1 натисніть на кадр 181 та додайте ключовий кадр. Потім видаліть золоту сонечку, яка вже є. Поставте золоту сонечку назад у вихідне положення на цій рамці (Вставте на місце). Потім перетягніть цю сонечку до сцени. Додайте рух між рамками 181 та 190, який перемістить цю сонечко вгору та на сцену.
   
   
9. Клацніть на Frame 190 і додайте кадр до шарів статичних деталей та фону, щоб зробити вміст цих шарів знову видимим.
   
   

Перевірте і збережіть blinkie як blinkie3.fla. Потім опублікуйте своє blinkie у форматі .swf та насолоджуйтесь новим blinkie.

J3 Конструкції

Авторські права 2018 Adobe Systems Incorporated. Всі права захищені. Знімки екрана продуктів Adobe передруковані з дозволу Adobe Systems Incorporated. Adobe, Photoshop, альбом Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst та Flash Paper є або є [a] зареєстрованою торговою маркою (ими), або торговою маркою (іми) Adobe Systems Incorporated у США та / або інших країнах.