В этом уроке вы узнаете, как создать анимацию, связанную с изменением местоположения объекта, используя возможности Tweened-анимации во FLASH Macromedia. Слои Motion Guide позволят Вам передвигать по нарисованной дорожке инстанции, группы, или блоки текста. (Но никак не другие типы объектов!) Вы можете присвязать множество слоёв к слою Motion Guide, чтобы передвигать множество объектов по одной и той же дорожке. Нормальный слой, который связан со слоем Motion Guide, становится управляемым слоем.
1. Познакомьтесь с образцом будущей вашей анимации: Butterfly.swf. Откройте программу Macromedia Flash. Откройте новый Flash-документ.
2. Откройте в меню Window палитру Property (Свойства), нарисуйте зеленый прямоугольник в качестве подложки.
3. Выбрав круглую кисть Brash Tool в палитре инструментов Tools, желым цветом нарисуйте середину цветка, а белым его лепестки так, чтобы цветок располагался в одном из углов кадра Stage.
4. Карандашом Pencil Tool темно-зеленого цвета из палитры инструментов Tools нарисуйте стебель цветка соответствующей толщины. Кистью Brash Tool вытянутой формы (из палитры инструментов Tools) тем же цветом нарисуйте листочки. (При желании можно нарисовать один листок, повернуть его трансформацией на угол 30-40 град.(Modify > Transform > Rotate), а затем, скопировав нужное число раз, распределить эти копии по всему стеблю.)
5. Создайте новый слой анимации, кликнув иконку Insert Layer в палитре Timeline. Вставьте в него изображение одной из бабочек из файлов butterfly1.gif, butterfly2.gif, butterfly3.gif (File > Import > Import to Stage).
6. Кликните вставленный вами объект, в открывшейся палитре Property (Свойства) установите нужные размеры бабочки (параметры: W-ширина и H-высота; лушче всего, скрепив их друг с другом рядом расположенным замочком, изменить один из этих параметров) и ее местоположение - в противоположном от цветка углу. Можно повернуть изображение бабочки, нацелив ее глазки на цветок (Modify > Transform > Rotate).
7. Кликните в Timeline на новом кадре, отступив в этом же слое на 30-50 кадров вправо. Еще раз кликните его же, но уже правой кнопкой, выберите опцию Insert Keyframe (Вставить Ключевой кадр). Повторите эту же процедуру для слоя с фоном.
8. Выделите первый кадр на Timeline в слое с бабочкой и в Property (Свойствах) назначьте опции Tween (Автоматическая анимация) значение Motion (Движение). Этого же эффекта можно достичь, кликнув кадр правой кнопкой мыши (опция Create Motion Tween). При правильных действиях в этом слое появится непрерывная стрелка от первого кадра к последнему, а его поле окрасится в бледно-фиолетовый цвет.
9. Выделите мышкой последний кадр в этом слое, а затем перенесите изображение бабочки на цветок. Кликните Play в палитре Control для проверки созданной вами анимации.
10. Для создания движения бабочки по сложному пути, создайте специальный слой, кликнув иконку Add Motion Guide (Добавить управляющий путь) в Timeline.
11. Кликните первый кадр в новом слое Guide, возьмите карандаш Pencil Tool из палитры Tools (а также любой другой инструмент рисования: Ручку, Линию, Круг, Прямоугольник или Кисть) и нарисуйте им некий путь движения бабочки от старта к цветку.(Чтобы путь бабочки не был ломаным, обратите внимание на настойки выбранного вами инструмента рисования. Выберите плавную линию).
Важно, чтобы начальная точка этого пути попала в центр бабочки в точке старта, а закончилась на нашем цветке.
12. Кликните первый кадр в слое с бабочкой и в его Свойствах (Properties) включите опции Snap (Приклеить к пути), Orient to Patch (Ориентировать по пути) и Sync (Синхронизировать).
Выделите последний кадр с бабочкой и подвигайте ее так, чтобы точка, появившаяся в центре рисунка (Точка регистрации) примагнитилась к нарисованному вами пути в слое Motion Guide, и пока вы этого не добьётесь, ваша анимация правильно работать не будет. Это самый важный пункт!
13. В слое Motion Guide кликните "глазик", чтобы сделать путь бабочки невидимым. Кнопкой Play проверьте работоспособность анимации.
14. Можно поиграть размерами бабочки и скоростью ее перемещения. В начале анимации бабочка может казаться нам крупнее (так как ближе к нам), по мере приближения к цветку пусть она становится меньше и перемещается медленнее (Ease=100).
А попробуйте сделать, вот так, сами!
Вы также можете ознакомиться с монтажным планом для нашего примера (необходим Macromedia Flash 6.0 и выше): Butterfly.fla
Можно в пунктах 2-4 вместо рисования фона использовать готовый рисунок с цветами. Для этого выполните File > Import > Import to Stage (Файл > Импорт > Импорт на Сцену), и в открывшемся окне импорта выберите рисунок с цветами.
Использование материалов возможно только при ссылке на их автора.
Статьи, переводы и изображения принадлежат их авторам.
