Анимация элементов
Flash предлагает несколько различных путей анимации элементов, использующих методы покадровой (frame-by-frame) или автоматической (tweening) анимации. Во втором методе определяется, как элемент выглядит в первом ключевом кадре, затем определяется, как тот же самый элемент выглядит в следующем keyframe. Flash автоматически создает анимацию между этими двумя ключевыми кадрами. Для этого Учебника, Вы создадите два различных типа tweening-эффектов: движение бумажного змея (motion tweening эффект - анимация движения) и движение веревки (shape tweenin эффект - анимация формы).
Как узнать, какого именно из бумажных змеев анимировать, если клип имеет девять возможных комбинаций змеев (три модели змея, умноженные на три цвета змея)? Или потребуется сделать это со всеми девятью? К счастью, нет. Вместо этого, будем использовать специальный указатель места змея (placeholder), который поможет с установками анимации. Позже в этом Учебнике Вы создадите функцию, которая будет определять змея, выбранного заказчиком. На основании информации, полученной функцией, внешний клип с выбранным змеем появится в анимации, заменив собой placeholder.
В ходе подготовки анимации необходимо изменить точку отсчета у бумажного змея.
Изменение точки отсчета
По умолчанию, точка отсчета символа в SWF-файле находится в верхнем левом углу.
Предполагается, что змей будет вращаться во время полета. Необходимо переместить точку отсчета указателя места змея, таким образом, чтобы, когда указатель места будет заменен на изображение змея, он будет вращаться вокруг своего центра, а не вокруг верхнего левого угла.
Команда Edit Center позволяет переместить центр элемента в другое место, по сравнению с исходным символом.
| 1 | В слое labels линейки, найдите кадр с меткой "kite flight loop" (№ 168) и щелкните на нем, чтобы перейти на это место. | |
| 2 | Выделите змея, находящегося на сцене. | |
| 3 | Если панель Instance (Экземпляр) не открыта, нажмите на кнопку Instance Panel, в нижнем правом углу окна сцены.  | |
Обратите внимание, при выделении змея на сцене, в панели Instance появляется имя символа - placeholderKite и имя экземпляра - demoKite. В последствии, после того, как добавите ActionScript к Вашему клипу, выбранный заказчиком змей заменит собой экземпляр demoKite во время воспроизведения клипа.  | ||
| 4 | Выберите Modify > Transform > Edit Center. | |
| Появится изображение точки отсчета (маленькое перекрестие). | ||
| 5 | Перетащите точку отсчета примерно в центр змея.  | |
 |
Создание анимации движения для змея.
После того, как заказчик выбрал змея, он нажимает кнопку Fly It! и ему выводится счет и демонстрируется полет змея. Чтобы получить эффект летящего в небе змея, добавьте анимацию движения в Ваш клип.
Для этого движения, Вы зададите свойства змея, такие как позиция, размер и поворот для экземпляра в одной точке линейки, затем измените эти свойства в ключевом кадре, который вставите в линейку. Flash автоматически создаст содержание всех кадров между ключевыми.
Добавление ключевого кадра в конец анимации
При добавлении ключевых кадров, имейте в виду, что для изменения анимации Вы можете вставлять их где хотите. Кроме первого и последнего ключевого кадра, нет необходимости вставить ключевые кадры именно в те места, которые определены в этом Учебнике.
| 1 | На линейке, удостоверьтесь, что находитесь в кадре № 168 слоя kite. |
| Обратите внимание на ключевой кадр, указывающий начало Вашей анимации. Также обратите внимание на направляющую линию на Сцене, задающую путь змея. На линейке этот путь находится в слое Guide:kite, который является направляющим (guide) слоем, облегчающем размещение объектов на Сцене. | |
Направляющая призвана только помогать перемещать объект по заданному пути и при воспроизведении клипа ее не видно. Направляющие слои на линейке обозначаются специальным значком.   |
|
| 2 | Используйте меню масштабирования в нижнем левом углу окна сцены для ее увеличения до 800%.  |
| Теперь обратите внимание на то, что направляющая пути не сплошная замкнутая линия, она имеет небольшой разрыв для окончания анимации. | |
| 3 | В слое kite на линейке, перейдите на кадр № 229 и выберите Insert > Keyframe. |
| Проверьте показание номера кадра внизу линейки, чтобы убедиться в том, что Вы находитесь в нужном кадре. | |
| Ключевой кадр окончания анимации появиться в кадре № 228. | |
| 4 | На увеличенной, как было указано ранее, сцене, в кадре № 229 слоя kite, перетащите изображение змея немного направо, таким образом, чтобы точка отсчета оказалась на другой стороне пути. |
Вы определили положение элемента в конце анимации.  |
|
| Примечание: Если точка отсчета уже была расположена на правой стороне пути, анимация не будет работать. Сделайте последовательную отмену до момента определения точки отсчета и переместите ее левее того места, где она была установлена Вами. | |
| 5 | Восстановите масштаб сцены до 100%. |
|
Задание анимации движения
Теперь, когда Вы определили начало и конец анимации, используете панель Frame (кадр) для задания ее типа.
| 1 | В слое kite на линейке, нажмите на любой кадр между № 168 с началом анимации и № 228, ее окончанием, для выделения этого кадра. |
| 2 | Выберите Window > Panels > Frame и на открывшейся панели выберите Motion (движение) из списка Tweening. |
| 3 | Удостоверьтесь, что включена опция Snap . |
Включение опции Snap гарантирует, что змей будет присоединен к направляющей своей точкой отсчета.  |
|
| Если сплошная линия появилась между ключевыми кадрами на линейке и кадры имеют светло синий фон, значит анимация движения сделана корректно. | |
Если между ключевыми кадрами появляется штриховая линия, это указатель того, что анимация движения выполнена не правильно, обычная причина этого, случайное удаление начального или конечного ключевого кадра.  |
|
|
Теперь добавьте промежуточные ключевые кадры, которые укажут места, где анимация будет изменена.
| 1 | В слое kite линейки, перейдите на кадр № 175 и нажмите F6, чтобы вставить ключевой кадр. |
Змей на сцене передвинут вдоль заданного пути в позицию, определенную кадром № 175.  |
|
| 2 | В слое kite, аналогично вышеописанному, вставьте ключевые кадры в кадры №№ 184, 198, 207 и 214. |
|
Анимация будет более реалистична, если змей будет изменять свой размер и вращаться по ходу движения по заданному пути. Для достижения этого эффекта, сделайте увеличение и уменьшение размеров змея, в добавленных Вами ключевых кадрах и его поворот на некоторый угол.
| 1 | В слое kite перейдите на кадр № 175. |
|
| 2 | На панели инструментов выберите инструмент Arrow (Стрелка) и модификатор Scale (Масштаб). На Сцене, нажмите и перетащите один из угловых маркеров установки размера, расположенных вокруг изображения змея, чтобы немного увеличить его размер.  |
| 3 | Включите модификатор Rotate (Вращение). На Сцене, поместите курсор поверх одного из угловых маркеров поворота.  |
Курсор изменит свой вид на четыре стрелки, замкнутые в круг.  |
|
| 4 | Нажмите и потащите маркер для поворота змея примерно на 30° по часовой стрелке. |
| 5 | Перейдите на кадр № 184. На Сцене, используйте модификатор вращения для поворота змея приблизительно на 60° против часовой стрелки. Используйте модификатор масштаба для уменьшения размера изображения. |
| Во время воспроизведения анимации, змей будет удаляться. | |
| 6 | Перейдите на кадр № 198. На Сцене, используйте модификатор масштаба, чтобы сделать размер змея меньше.  |
| 7 | В ключевых кадрах №№ 207 и 214, используйте модификатор масштаба для увеличения изображения. |
| 8 | Для просмотра анимации змея в полете, протащите playhead от кадра № 168 до кадра № 228. |
|
Примечание: Не забывайте периодически записывать Вашу работу.
Зацикливание анимации
По достижению кадра № 229 анимация останавливается. Чтобы змей летал непрерывно, анимацию необходимо зациклить.
| 1 | В слое actions линейки, вставьте ключевой кадр в кадр № 228, и двойным щелчком откройте панель Frame Actions. |
| 2 | Нажмите на значок Actions для открытия этой категории, затем в списке команд дважды щелкните на команде goto.  |
| 3 | В списке Type (тип), выберите Frame Label. |
| 4 | В списке Frame, выберите kite flight loop. |
| Линейка содержит метку "kite flight loop", расположенную в кадре № 168. Вы задаете переход воспроизведения от кадра № 228, в который вставили ключевой кадр, обратно к кадру № 168 на начало анимации. | |
| 5 | Удостоверьтесь, что включена опция Go to and Play и закройте панель Frame Actions. |
|
Для оживления полета змея, Вы использовали анимацию движения (motion tweening). Чтобы оживить веревку, за которую привязан змей, используем анимации формы (shape tweening). Для этого Вы нарисуете форму, в данном случае веревку, в одной точке линейки и измените ее в других точках. Для создания анимации, Flash автоматически сделает изменения формы во всех кадрах между начальным и конечным ключевыми кадрами.
| 1 | В слое string на линейке, вставьте ключевой кадр (F6) в кадр № 168, место начала анимации полета. |
| 2 | На панели инструментов выберите инструмент Pencil (карандаш). Нажмите на палитру цветов для ее открытия и выберите бледный оттенок желтого. |
| 3 | В модификаторе Pencil Mode (режим), выберите Smooth (сглаженный). |
| 4 | Для открытия панели Stroke, выберите Window > Panels > Stroke. В меню Stroke Size переместите ползунок на 2 или введите число 2 в текстовом поле. |
| 5 | На Сцене, проведите плавную линию от бобины, приблизительно до "яблочка мишени" в центре змея.  |
| 6 | При необходимости, воспользуйтесь инструментом Arrow (Стрелка) для выделения и сглаживания линии при помощи модификатора Smooth (сглаживание).  |
| 7 | В слое string линейки, вставьте ключевой кадр в кадр № 230. |
| В дополнение к ключевому кадру в кадре 230, конечный ключевой кадр появится в кадре 229. . | |
| 8 | В кадре № 231, выберите Insert > Blank Keyframe, таким образом, начиная с этого кадра, веревка показана не будет. |
|
Создание анимации формы для веревки
Перед началом создания анимации формы, блокируйте на линейке слои kite, sky и Guide:kite, чтобы случайно не сдвинуть какие-нибудь объекты на сцене.
| 1 | В слое string, нажмите для выделения на любой кадр между кадрами №№ 168 и 229. |
| 2 | Если панель Frame (Кадр) не открыта, выберите Window > Panels > Frame и на панели в списке Tweening, выберите Shape (Форма). |
| Как и в предыдущем случае с анимацией движения, появившаяся сплошная линия между ключевыми кадрами, сообщает, что все сделано правильно. Кадры под ней приобретут светло зеленый цвет - признак анимации формы. | |
| 3 | Перейдите на кадр № 168. Медленно протащите playhead направо вдоль линейки до тех пор, пока веревка не отделится от змея. Добавьте другой ключевой кадр в этой точке линейки. |
|
| 4 | Выберите инструмент Arrow (Стрелка) в инструментальной панели. Если веревка выделена, щелкните где-нибудь на Сцене для снятия выделения, затем перетащите верхний конец веревки в такую позицию, чтобы он снова касалась яблочка мишени. |
| 5 | Используйте инструмент Arrow (Стрелка), с выбранным модификатором Smooth (Сглаживание), чтобы поддерживать требуемый изгиб веревки, подцепляя ее указателем мыши за середину и перемещая в нужном направлении. |
Сделайте анимацию так, чтобы веревка, во время движения змея, не смотрелась оторванной от него.  |
|
| 6 | По мере медленного перемещения playhead направо, вставляйте ключевой кадр в слой string каждый раз, когда образуется промежуток между змеем и веревкой, затем повторяйте шаги 4 и 5, и так до тех пор, пока не достигнете конца анимации в кадре № 229. |
| 7 | Для просмотра получившегося результата, перейдите на кадр № 168 и выберите Control > Play. По окончанию просмотра анимации, выберите Control > Stop. |
|
