Flash Анимация

Вот, наконец, и добрались до анимации. Анимация и маленький размер файла – это то, что сделало Flash таким популярным.

В первой статье я описывал интерфейс. И там, если ты помнишь, была панель TimeLine. Вот с ней сейчас и разберемся.
В панели инструментов ты уже наверно разобрался, так что бери линию и рисуй на белом листе 2 прямые параллельные линии. Теперь одну из них вытянем чуть-чуть вверх.

Нажми клавишу F6. Теперь посмотри на панель TimeLine. Ты увидишь то, что там появился еще один кадр. Т.е. при нажатии F6 создается следующий кадр и туда копируется все содержимое предыдущего. Теперь в новом кадре можно изменять наши линии дальше, не боясь, что изменится вся анимация. Изменил линию, нажми F6, Изменил линию, нажми F6. И т.д. постепенно у тебя получится первая анимация «изгибающиеся линии» ;)). Чтобы посмотреть готовую анимацию нажми просто
Enter, или Ctrl+Enter (об этом попозже)

Каждый кадр можно выбрать, нажав левой кнопкой, и все, что находится в этом кадре, будет показано, и его содержимое можно будет изменять.
Если в кадре что-нибудь нарисовано, то он будет отображаться с маленьким черным кружком. А если в кадре ничего нет, то кружок будет белым.

Кадры можно вставлять самому. Нажми на место, где нет еще кадра правой нопкой, и в появившемся контекстном меню выбери Inset keyframe. Этот выбор равнозначен нажатию на F6. Если выбрать Insert blank keyframe, то вставится пустой кадр.

Во Flash-е обычно работают со слоями. Линии, которые ты анимировал только что, ты рисовал на одном слое. На панели TimeLine при запуске по умолчанию всегда стоит слой Layer1, на котором ты и рисовал. Слои можно добавить, нажав на Insert Layer.
Нажми правой кнопкой на любом слое и выбери пункт Properties. Откроется окно свойств выбранного слоя. Слой можно переименовать в поле Name. Можно поменять тип слоя, цвет и ширину.
Напротив имени слоя стоят 4 параметра:
• Карандаш – если напротив слоя нарисован, то ты рисуешь именно на этом слое.
• Изображение в виде глаза. Если нажать на слое на точку под этим изображением, то слой станет не видимым. Т.е. все, что было нарисовано на этом слое, ты не увидишь.
• Замок. Если нажать на слое на точку под замком, то на слое нельзя будет рисовать.
• Изображение квадрата. Если нажать на слое на точку под этим квадратом, то в кадрах слоя будут отображаться только очертания рисунка.

Теперь перейдем опять в анимации.
Нарисуй круг или напиши какой-нибудь текст. Можно сделать как у меня на рис 4. Нарисовать круг, и поверх него написать текст. Изменить цвета и сгруппировать, выбрав в меню Modify пункт Group.

Далее. Выбери на слое 25 или 30 кадр. И нажав на нем правую кнопку, в контекстном меню выбери Insert keyframe. При этом у тебя получится так, что все кадры будут заполнены одним и тем же изображением. Теперь на этом последнем кадре перемести свое изображение в противоположный угол листа рисования. Теперь выдели все кадры. Выделить кадры можно, нажав на первый кадр и удерживая клавишу Shift нажать на последний кадр (т.е. на 25 или 30, который ты выбрал).
Теперь в главном меню Insert выбери пункт Create Motion Tween. У тебя должна получится в слое такая стрелка.
А теперь проиграй анимацию и посмотри, как плавно и равномерно передвигается твое изображение. Такое равномерное движение само собой не сделаешь при помощи ручного движения и F6. Хотя если постараться, то можно :).

Ну и напоследок сделаем анимацию по заданному пути.
Опять рисуй какой-нибудь кружок или изображение. Выдели свое изображение и в меню Modify выбери пункт Group. Теперь добавим новый слой, нажав на Add Motion Guide. Выбери появившийся слой. И нарисуй на нем какую-нибудь линию.
Теперь выбери свое изображение и перемести его к линии так чтобы середина изображения совпадала с началом линии. Выбираем кадр 25-40 или 50 :). Вот здесь нужно выделить кадры всех слоев (т.е. выбрать кадр у первого слоя и держа Shift выбрать кадр второго слоя). Нажимаем правую кнопку на выбранных кадрах. В появившемся контекстном меню выбираем Insert keyframe. Все анимация готова. Жми Enter или Ctrl+Enter.

Что значит Ctrl+Enter?. Сохрани свое творение в любое место, под любым именем (File|save as…). Вот теперь нажми Ctrl+Enter на своей анимации. Загляни в то место, куда ты сохранил свой файл. Там появится файл с таким же именем, только с расширением *.swf. SWF-файлы можно вставлять в Html и выкладывать в Интернет.
Как вставить swf в HTML.
Зайди в меню File|Publish preview там в списке выбери пункт HTML. У тебя появится сгенерированные HTML и swf файлы, в том месте куда ты сохранил анимацию.

При просмотре анимации в swf или html файле, она проигрывается бесконечно. Т.е. нужно поставить какой-то останавливающий элемент.
Выбери последний кадр своей анимации и нажми на правую кнопку. В контекстном меню выбери пункт Actions. Появиться панель, в которой вставим сейчас маленькую строчку кода, которая и будет останавливать анимацию на последнем (или выбранном) кадре.
Окно разделено на 2 части. В первой части, как ты видишь, расположено дерево содержащее все функции, операторы, свойства и различные действия, которые можно применить к твоей сцене.
Раскрой дерево Actions->Movie Control и двойным щелчком нажми на «Stop». При этом данная функция добавиться в редактор кода, который находится во второй части панели.
Закрой панель. Посмотри на выбранный до этого кадр. На нем написана теперь буква «а», что значит, на этом кадре действует Action script. Теперь при каждом просмотре анимация будет останавливаться на последнем кадре.

Ну, вот и все основы анимации. Можешь поэкспериментировать со скриптами. Например, GotoAndPlay(). Данная функция переводит проигрывание анимации на заданный в параметрах этой функции кадр или сцену. Пробуй, в общем.

creAgen (creAgen@rambler.ru)