Главная » Flash-анимация » Урок 6. Анимация

Урок 6. Анимация

Вопросы и задания к уроку:

Где располагается линейка времени (временная линейка)?
Какой кадр называется ключевым, а какой – статичным?
Как создается статичный кадр и как ключевой?
Как удалить статичные кадры и как ключевые?
Где располагается палитра слоев?
С помощью каких кнопок можно управлять созданием и удалением слоев?
Задание 1: создать анимацию движения лучей у солнца (подробно рассматривается в п.6.2).
Задание 2: создать символ, в котором будет храниться изображение машины и задать анимацию движения, чтобы машина проехала по рабочей области ролика от одного края до другого (п.6.3).

6.1. Монтажный стол и покадровая анимация
Анимация – это последовательность изображений, которые создают иллюзию движения при быстром просмотре. Самый простой способ создания анимации во Flash – это размещение изменяющихся изображений на временной линейке. Для работы с анимацией во Flash используют монтажный стол. Рассмотрим его более подробно. Временная линейка представляет собой последовательность кадров.

В данный момент здесь создан только один кадр. Он представляет собой закрашенный серым цветом прямоугольник с черным кругом внутри, что означает, что кадр непустой.
Чтобы добавить на линейку времени еще несколько кадров, щелкните левой кнопкой мыши по кадру, до которого хотите продлить анимацию (например, 40-й кадр) и нажмите клавишу F5.
Как видно, появившиеся кадры отличаются от первого. Ни один из них не содержит черного маркера. Кадр, помеченный маркером, является ключевым, а непомеченные кадры являются статичными. Их содержание зависит от содержания ключевого кадра, стоящего перед ними.

Чтобы вставить ключевой кадр, щелкните левой кнопкой мыши по нужному кадру (например, 20-й кадр) на ленте времени и нажмите клавишу F6.

Изменения, которые будут произведены в ключевом кадре, повлияют на содержимое следующих за ним статичных кадров, но не повлияют на предыдущие и последующие ключевые кадры.
Удалять статичные кадры можно, одновременно нажимая клавиши <Shift> и <F5>, а ключевые - клавишами <Shift> и <F6>. В левой части монтажного стола находится палитра слоев.

В компьютерной графике слои используются очень часто. Представьте, что вы рисуете на прозрачных листах, а потом накладываете их друг на друга. То, что находится на верхних слоях, закрывает содержимое нижних слоев. Слои можно сделать невидимыми или недоступными, чтобы облегчить редактирование сцены в целом. Во Flash слои используются также для разделения анимированных объектов, а так же существует пара необычных типов слоев: слой, направляющий движение, и слой-маска. С помощью кнопок палитры слоев можно:

создать новый слой ;
создать слой, направляющий движение ;
создать папку слоев для их упорядочивания ;
удалить активный слой ;
сделать слой невидимым ;
заблокировать слой
и отобразить содержание слоя в контурном виде .

Итак, самый простой способ создания – это покадровая анимация. Изобразим покадрово движение дерева на ветру. Дважды щелкните мышью по дереву, чтобы войти в режим редактирования символа.
Покадровая анимация полностью состоит из ключевых кадров. Чтобы добавить следующий ключевой кадр, щелкните левой кнопкой мыши по 3-му кадру и нажмите F6.
В каждом следующем ключевом кадре изображение нужно немного изменить.
Таким же образом создаются остальные ключевые кадры анимации.

Запустите анимацию, нажав клавишу <Enter> на клавиатуре.

6.2. Анимация с просчетом промежуточных кадров
Покадровый способ создания анимации достаточно трудоемкий и не всегда удобный. Например, если нужно переместить готовый объект, удобнее воспользоваться анимацией с построением промежуточных кадров «Tween». Существует два способа построения промежуточных кадров. Один используется для изменения формы графических примитивов, а другой – для перемещения, масштабирования и поворота группированных объектов и символов.
Используем анимацию формы, чтобы «оживить» солнышко.
Дважды щелкните по нему, чтобы войти в режим редактирования символа. Изменим длину некоторых лучей солнца.

Чтобы добавить следующий ключевой кадр, щелкните левой кнопкой мыши по 5-му кадру и нажмите F6. Теперь наоборот, уменьшим длинные лучи и вытянем короткие.

Теперь вернитесь в первый ключевой кадр анимации, щелкнув по нему левой кнопкой мыши.
В инспекторе свойств раскройте список «Tween» и выберите пункт «Shape» («Форма).

Обратите внимание, что вид кадров на ленте времени изменился: появилась стрелка, соединяющая кадры, и кадры поменяли цвет.

Стрелка на ленте времени – важный показатель. Если анимация будет создана неправильно, то стрелка будет нарисована пунктиром. Чтобы анимация солнца не выглядела рваной, солнечные лучи должны плавно вернуться в свое первоначальное положение. Самый простой способ добиться этого – скопировать первый кадр анимации. Для этого щелкните на первом кадре правой кнопкой мыши и в появившемся меню выберите пункт «Copy Frames» («Копировать кадры»).
Теперь щелкните правой кнопкой мыши по кадру номер 10 и в появившемся меню выберите пункт «Paste Frames» («Вставить кадры»).
Щелкните мышью по кадру номер 5.

В инспекторе свойств раскройте список «Tween» и выберите пункт «Shape» («Форма).
Теперь вернитесь в первый ключевой кадр анимации.

Чтобы просмотреть полученную анимацию нажмите клавишу <Enter>.
Просчетом промежуточных кадров можно управлять с помощью подсказок формы. Чтобы добавить на сцену подсказку формы, перейдите в первый кадр анимации.
Войдите в меню «Modify» («Изменить»). Затем раскройте подменю «Shape» («Форма») и выберите вариант «Add Shape Hint» («Добавить подсказку формы»).
На сцене появится красный маркер с буквой.

Нужно установить его на ключевую вершину в первом кадре анимации,

затем перейти в следующий ключевой кадр, и поместить второй маркер с тем же обозначением, в ту точку, куда должна перейти выбранная вершина после анимации.

Таким образом, можно добавить несколько подсказок.

Чтобы просмотреть полученную анимацию нажмите клавишу <Enter>.

6.3. Анимация движения
Анимация формы не подходит для работы с группированными объектами и символами. В этом случае нужно использовать анимацию движения, которая применяется к слоям, содержащим символы или группы объектов, поэтому если два объекта должны двигаться неодинаково, то они должны находиться на разных слоях. Нажмите на кнопку «Insert Layer» («Вставить слой») на палитре слоев, чтобы добавить новый слой для движущегося объекта.
Обратите внимание, что вновь созданный слой стал активным слоем

и объекты сейчас будут создаваться и размещаться именно на нем. Дважды щелкните по имени слоя, чтобы переименовать его. Имя слоя станет доступным для редактирования. Теперь следует ввести другое имя (например, car) и нажать клавишу < Enter>.
Теперь щелкните мышью по кнопке «Library», чтобы открыть библиотеку символов.
Поместим на слой символ, который будем анимировать.

Теперь нужно задать положение объекта в конечном кадре анимации. Задайте в 20-м кадре ключевой кадр (F6).
Сейчас у нас маркер временной линейки стоит на 20 кадре, соответственно, изменения, которые мы сделаем с машиной, будут относиться именно к 20 кадру. Можно, например, переместить машину к дереву.

Теперь нужно настроить расчет промежуточных ключевых кадров, но делать это нужно в начале анимации. Чтобы переместиться в первый кадр, щелкните мышью по нему.
Теперь раскройте список «Tween» и выберите пункт «Motion» («Движение»).