Заканчиваем Blinkie с помощью Flash Motion Tweens

• May 1, 2024

Когда мы в последний раз работали над анимацией Flash, мы только что закончили текстовые эффекты. Последним текстовым эффектом анимации было появление и исчезновение названия сайта «J3 Designs». Он исчезает со сцены слева с эффектом перехода временной шкалы (переход 3 на временной шкале). Для этого была причина, и вы собираетесь выяснить, что это была за причина.

Помните, что как часть деталей дизайна у нас есть эти две божьи коровки. Что ж, пришло время заставить их работать. Когда мы создали слои для нашего проекта blinkie, мы добавили золотую божью коровку в слой Bug 1. Теперь, первое, что мы сделаем, это добавим вторую божью коровку к новому слою, который мы назовем Ошибка 2. Мы хотим, чтобы эта красная божья коровка появилась из-под камеи. Поэтому нам нужно будет разместить новый слой под слоем Static Details.

Откройте blinkie2.fla во Flash CS3 и приступим к работе. Мы хотим, чтобы божья коровка начала двигаться из-под камеи, поскольку имя веб-сайта начинает исчезать. Мы хотим, чтобы это выглядело так, как будто текст исчезает из-за божьей коровки. Поэтому мы добавим эту новую божью коровку на 110-й кадр, когда текст начинает исчезать.

1. Нажмите Файл - Импорт - Импорт в библиотеку, чтобы открыть диалоговое окно Импорт и добавить красную божью коровку в нашу библиотеку.
   
   
2. Добавьте новый слой под слоем Static Details и назовите его «Bug 2». Добавьте ключевой кадр («Вставка - Временная шкала - Ключевой кадр») в кадр 110. Перетащите красную божью коровку из Библиотеки под камею и пока не видите ее.
   
   Мы хотим, чтобы эта божья коровка двигалась влево, пока не исчезнет со сцены, как исчезнет текст. Итак, мы хотим, чтобы божья коровка была полностью слева от сцены, когда мы дойдем до кадра 160.
   
   
3. Нажмите на кадр 160 в слое Bug 2, добавьте ключевой кадр и перетащите красную божью коровку влево и полностью за пределы сцены. Щелкните правой кнопкой мыши между кадрами 110 и 160 и выберите «Создать анимацию движения» во всплывающем меню.
   
   Протестируйте фильм, и вы увидите, как текст исчезает, когда божья коровка двигается над ним. Как только красная божья коровка сошла со сцены, мы будем двигать золотую божью коровку (слой жуков 1) вверх и вправо, пока она также не исчезнет со сцены.
   
   
4. Нажмите на кадр 160 в слое Bug 1 и добавьте ключевой кадр для начальной точки анимации золотой божьей коровки. Давайте используем 20 кадров, чтобы убрать золотую божью коровку со сцены. Нажмите на кадр 180 и добавьте ключевой кадр. Переместите золотую божью коровку вверх и со сцены.
   
   
5. Щелкните правой кнопкой мыши между кадрами 160 и 180 и создайте анимацию движения. Нажмите на Frame 180 и добавьте Frame к слоям Static Details и Background, чтобы содержимое этих слоев снова стало видимым.
   
   Наконец, мы хотим вернуть золотую божью коровку в исходное положение в левом нижнем углу сцены. Но мы не хотим, чтобы жук смещался с вершины сцены. Мы хотим, чтобы он поднялся из-под сцены. Поэтому нам нужно сначала поместить золотую божью коровку слева и под сценой. Затем все, что нам нужно сделать, это переместить его обратно в исходное положение, чтобы анимация могла повторяться. Мы будем использовать 10 кадров, чтобы вернуть божью коровку на место.
   
   
6. Вернитесь к кадру 1 на слое жуков 1 и выберите золотую божью коровку. Нажмите Edit - Copy, чтобы сохранить исходную позицию золотой божьей коровки.
   
   
7. Находясь на слое «Ошибка 1», добавьте ключевой кадр в кадр 190. Нажмите «Изменить» - «Очистить», чтобы удалить золотую божью коровку, которая уже есть. Затем нажмите «Правка» - «Вставить на месте», чтобы вернуть золотую божью коровку в исходное положение.
   
   
8. Все еще на слое Bug 1, нажмите на кадр 181 и добавьте ключевой кадр. Затем удалите золотую божью коровку, которая уже там. Поместите золотую божью коровку обратно в исходное положение на этом кадре (Вставить на месте). Затем перетащите эту божью коровку под сцену. Добавьте анимацию движения между кадрами 181 и 190, которая переместит эту божью коровку на сцену.
   
   
9. Нажмите на рамку 190 и добавьте рамку к слоям Static Details и Background, чтобы содержимое этих слоев снова стало видимым.
   
   

Проверьте и сохраните blinkie как blinkie3.fla. Затем опубликуйте свой blinkie в формате .swf и наслаждайтесь новым blinkie.

J3 Designs

Copyright 2018 Adobe Systems Incorporated. Все права защищены. Снимки экрана продукта Adobe перепечатаны с разрешения Adobe Systems Incorporated. Adobe, Photoshop, альбом Photoshop, элементы Photoshop, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, фейерверки, содействие, увлечение, Flash Catalyst и Flash Paper является или является [a] зарегистрированным товарным знаком (-ами) или товарным знаком (-ами) Adobe Systems Incorporated в США и / или других странах.