Как создать анимацию движения в Фотошопе?

В данном уроке мы научимся создавать простую анимацию движения объекта в Фотошопе .

Создадим новый документ размером 200 на 200 пикселей с прозрачным фоном. Для того, чтобы создать новый документ, выберем пункты меню «Файл» - «Новый», зададим ему ширину и высоту, и прозрачный фон. На панели инструментов выберем инструмент «Кисть», зададим ей главный диаметр – 15 пикселей и любой цвет. Теперь при помощи данного инструмента нарисуем траекторию, по которой будет двигаться наш объект.

Затем создадим новый слой.

При помощи инструмента «Кисть» аналогичным образом нарисуем насекомое, уменьшив немного размер кисти и изменив её цвет.

Теперь следует изменить положение насекомого таким образом, чтобы оно соответствовало направлению его движения. Для этого выберем пункты меню «Редактировать» - «Трансформирование» - «Поворот».

Создадим дубликат слоя с насекомым. Для этого щёлкнем по слою правой кнопкой мыши и выберем «Создать дубликат слоя». Зададим полученному слою произвольное имя. Далее немного изменим положение насекомого, снова применив к полученному слою «Трансформирование» - «Поворот».

Теперь будем повторять следующие действия: создание дубликата предыдущего слоя и изменение положения нашего насекомого таким образом, чтобы он «продвигался» вперёд по своей траектории. Данные действия будем повторять такое количество раз, пока не будет заполнена вся траектория движения.

Когда вся траектория будет «заполнена», перейдём к созданию анимации. Для этого выберем «Окно» - «Анимация».

В появившемся окне «Animation» на данный момент находится один кадр.

Сделаем все слои, кроме слоя с траекторией и слоя с насекомым, находящимся в начальном положении, невидимыми. Для того, чтобы сделать слой видимым или невидимым, нужно щёлкнуть мышью на «глаз», находящийся перед слоем в палитре слоёв. По умолчанию все слои являются видимыми.

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

Теперь выберем все имеющиеся кадры, зажав предварительно клавишу «Ctrl». Зададим время задержки для каждого кадра 0,2 секунды и сделаем слой с траекторией невидимым.

Анимация движения готова. Теперь сохраним полученное анимированное изображение. Для этого выберем пункты меню «Файл» - «Сохранить для web» и зададим файлу любое имя.

(0)

	1.	Простая текстовая анимация	1:48	1	4206
	2.	Переливающийся текст	2:44	0	5831
	3.	Мигание картинки	1:51	0	2509
	4.	Сверкающие фары	2:26	0	4255
	5.	Анимация дождя	2:12	0	2107
	6.	Падающий Снег	2:33	0	5344

В этом уроке рассмотрим, что такое анимация движения объекта по заданной направляющей траектории (guide). Создадим условный объект и нарисуем для него путь, по которому он будет проходить.

Создания нового документа ActionScript 3.0

Как обычно, создаем новый документ «Action Script 3.0» . На правой панели инструментов выбираем «Rectangle Tool» и размещаем его на сцене.

Полученый объект переводим в символ, выделив его инструментом «Selection tool» и нажав правую кнопку мыши.

Теперь на панели «timeline» нужно выбрать пятидесятый кадр и сделать его ключевым. Нажимаем правую кнопку мыши и вызываем контекстное меню, где выбираем «Insert Keyframe» .

Создадим направляющую, путь, по которому объект будет двигаться. Для этого нажимаем на слой правой кнопкой мышке и в появившемся контекстном меню выбираем «Add Classic Motion Guide» .

Должно получиться два таких слоя:

Теперь нужно на слое «Guide» нарисовать путь, по которому будет двигаться объект. При помощи инструмента «Pencil Tool» , который находится на правой панели, рисуем направляющую.

Если нарисованный путь получился немного неровным, то его можно сгладить при помощи инструмента «Smooth Tool» , который также как и карандаш находится на правой панели. Сначала используя инструмент «Selection Tool» дважды щелкните по направляющей, а затем нажмите «Smooth Tool» .

Размещаем объект для создания анимации движения

Теперь давайте разместим наш объект на нарисованном пути. Чтобы это сделать, встаньте на первый кадр слоя, возьмите объект при помощи «Selection Tool» и поднесите его к левому краю линии, он как бы «прилипнет» к нему, вернее присоединится опорная точка объекта к направляющей.

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

Теперь нужно создать промежуточные кадры, чтобы программа сама разместила объект там где нужно в каждом кадре. Чтобы это сделать просто выбираем любой средний кадр на слое, где расположен объект, и нажимаем правую кнопку мыши, выбираем «Create Classic Tween» .

В итоге мы должны получить два таких слоя:

Запускаем анимацию движения объекта

Посмотрим, что получилось. Переходим в главное верхнее меню «File -> Publish Preview -> Flash» или нажимаем ctrl+enter на клавиатуре. Чтобы посмотреть прямо в программе — нажмите клавишу enter.

Давайте сделаем так, чтобы объект «поворачивал» , когда пробегает по пути. Для этого выберите первый кадр на слое, где расположен объект, и немного его поверните используя инструмент «Free Transform Tool» , который находится на правой панели.

Теперь в свойствах объекта, находясь на первом кадре, выберите «Orient to path» .

Выберите пятидесятый кадр на слое, где расположен объект, и также как в первом кадре немного поверните его.

Чтобы посмотреть, что получилось, нажмите ctrl+enter.

Macromedia Flash MX 2004 предоставляет несколько способов создания анимационных последовательностей:

Анимационные эффекты - программа сама создает последовательность кадров, имитирующую тот или иной эффект применительно к некоторому объекту;

Покадровая анимация - пользователь создает каждый кадр будущей анимации;

Автоматическая tweened-анимация, или анимация трансформации, - пользователь задает начальный и конечный кадр, а программа сама создает промежуточные кадры на основе программной интерполяции.

Анимационные эффекты

Flash MX 2004 включает предварительно подготовленные анимационные эффекты (timeline-эффекты), которые позволяют создавать сложные анимации, используя минимальное количество действий. Вы можете применять функцию Timeline Еffects к следующим объектам:

Графические объекты, включая формы, сгруппированные объекты и графические символы;

Растровые изображения;

Когда вы добавляете анимационные эффекты к объекту, Flash автоматически создает соответствующий слой и все трансформации движения и формы, необходимые для данного эффекта, реализуются в этом слое. Новый слой автоматически получает то же имя, что и эффект.

В качестве примера создадим эффект «взрыв» применительно к тексту. Для этого напечатаем некоторую фразу или слово (рис. 1), выделим его с помощью инструмента Arrow и выполним команду Insert => Timeline Effects => Effects => Explode .

Рис. 1. Выделенный текстовый объект

В результате появится одноименная панель (рис. 2), предоставляющая возможность настройки целого ряда параметров эффекта.

Рис. 2. Панель Explode

Наличие окна предпросмотра позволяет анализировать разные вариации эффектов, не покидая панели Explode . После того как вы выберете необходимые параметры, нажмите кнопку ОК и получите примерно такую анимацию .

Аналогично эффекты можно применить к растровому изображению. Рассмотрим пример с плавным исчезновением растровой картинки. Импортируем растровое изображение на сцену по команде File => Import => Import to stage (рис. 3) и применим эффект Вlur по команде Insert => Timeline Effects => Effects => Blur ролик .

Рис. 3. Растровое изображение, импортированное на сцену

Для того чтобы отредактировать анимационный эффект, выделите на сцене объект, ассоциированный с эффектом, и в появившемся окне Properties нажмите кнопку Edit (рис. 4) - в результате появится панель Blur .

Рис. 4. Кнопка Edit находится внизу на панели Properties

В панели Blur можно вновь поменять параметры эффекта и сохранить новые настройки (рис. 5).

Рис. 5. Панель Blur позволяет поменять настройки эффекта

Покадровая анимация

Рассмотрим простейший пример - листочек перемещается из одной точки экрана в другую с поворотом вокруг своей оси.

Рис. 6. Первый ключевой кадр анимации

Нарисуем кленовый листочек, например такой, как показано на рис. 6, - соответствующий кадр на панели Timeline окрасится в серый цвет и внутри него появится точка, указывающая на то, что это ключевой кадр. Ключевой кадр - это кадр, в котором происходит помещение содержимого или его изменение.

Рис. 7. Второй кадр создадим перетаскиванием и трансформацией первого

Затем щелкнем правой кнопкой мыши по соседнему кадру и вставим еще один ключевой кадр, используя команду Insert Keyframe . В результате в этом кадре появится копия листочка; переместим ее вниз (пользуясь инструментом Arrow) и повернем, используя команду Modify => Transform => Free Transform (рис. 7).

Повторим процедуру таким образом, чтобы в 6-м кадре лист занимал конечное положение (рис. 8).

Рис. 8. Последний кадр анимации

Обратите внимание на панель Properties (рис. 8) - в левой ее части указывается тип объекта. В каждом кадре листок является объектом типа Shape (форма), о других типах объектов будет рассказано чуть позже.

Для того чтобы экспортировать фильм в виде SEF-файла (родной формат Macromedia для Flash-фильмов), выполним команду File => Export => Export Movie . В результате получим следующий фильм leave1.fla). Просмотреть получившийся фильм можно не покидая программы Flash по команде Control => Test Movie . Причем для того, чтобы просмотреть, какой объем занимают отдельные кадры фильма, следует выполнить команду . В результате мы увидим, что каждый из шести кадров занимает около 600 Кбайт (рис. 9). Таким образом, объем всего фильма составляет 3686 байт.

Рис. 9. Просмотр фильма в режиме Bandwidth Profiler

Для того чтобы оценить, много это или мало, рассмотрим, как аналогичный фильм можно сделать с помощью автоматической анимации, или анимации трансформации движения.

Автоматическая анимация

Рис. 10. Объект автоматически превращается в графический символ

Рассмотрим, как можно сделать ту же анимацию и получить более компактный результирующий файл. Выделим на экране нарисованный листок инструментом Arrow и выполним команду Insert => Timeline => Create Motion Tween , в результате листочек будет помещен в рамочку, а в панели Properties появится сообщение, что выделенный объект имеет свойства Grafic (рис. 10). Это означает, что анимируемый объект автоматически преобразован в графический символ. Теперь его уже невозможно произвольно редактировать инструментом Arrow как объект типа Shape. Использование символов является важным понятием во Flash. Однажды создав символ, его можно использовать несколько раз в фильме, не увеличивая размер результирующего файла. Символы делятся на графические (graphic), символы-кнопки (button) и символы-мувиклипы (movie clip). В данном уроке рассмотрим графический символ, а к другим типам символов вернемся позднее. Каждый новый символ сразу становится частью библиотеки текущего документа (рис. 11).

Рис. 11. Каждый новый символ становится частью библиотеки

Если выполнить команду Window => Library , то можно убедиться, что в библиотеке появился символ и ему по умолчанию присвоено имя Tween 1. Для того чтобы присвоить символу другое имя, достаточно дважды щелкнуть по названию и заменить его на желаемое. После того как мы сформировали графический символ, перейдем в конечный кадр нашей анимации (пусть это будет 15-й кадр) и вставим ключевой кадр (по команде Insert Keyframe ). В этом кадре появится копия символа, которую мы переместим и повернем вокруг оси (по команде Modify Transform=>Free Transform ), как в предыдущем примере. Как видно из рис. 12, все кадры между двумя ключевыми окрасились в голубой цвет и от первого ключевого кадра к последнему протянулась стрелка, что указывает на создание анимации Motion Tween .

Рис. 12. Стрелка на голубом фоне свидетельствует о создании анимации Motion Tween

Выполнив команду Control => Test Movie , получим информацию, представленную на рис. 13.

Рис. 13. Просмотр фильма в режиме Bandwidth Profiler

Несмотря на то что в этом примере у нас 15, а не шесть кадров, как в предыдущем, и анимация получилась более плавная, размер результирующего файла оказывается меньше - всего 900 байт. Как видно из диаграммы (рис. 13), информация об объекте хранится только в первом кадре, а в каждом новом кадре необходимо запоминать лишь новые положения листка. На это уходит в среднем всего по 20 байт.

Для того чтобы проиллюстрировать падение листа с поворотом вокруг плоскости листа, повторим предыдущий пример, только при модификации последнего ключевого кадра добавим команду Modify => Transform => Flip Horizontal. В результате получим следующий фильм .

Теперь рассмотрим пример, когда листочек приближается к зрителю. Для этого в конечном кадре вместо зеркального отображения (Flip Horizontal ) будем увеличивать размер листка. Для того чтобы не возникало ощущения замедления движения при приближении объекта к зрителю, скорость его движения необходимо увеличивать. Для того чтобы добиться этого эффекта, необходимо щелкнуть по первому кадру и обратиться к разделу Ease в панели Properties . Положительные значения параметра Ease приводят к замедлению движения, а отрицательные - к ускорению. Выберем максимальное ускорение объекта.

Рис. 14. Выберем максимальное ускорение объекта Ease = –100

Для этого выставим значение параметра Ease равным –100 (рис. 14). В результате получим фильм . Отметим, что первый кадр можно поместить и за сценой, тогда мы получим фильм, в котором листок будет влетать в кадр и двигаться навстречу зрителю. Можно моделировать вращение листа вокруг смещенного центра симметрии. Надеюсь, читатель сам сможет поэкспериментировать, усложняя модификацию конечного кадра и изменяя таким образом характер движения листа.

Из представленных примеров очевидно, что автоматическая анимация движения эффективна, когда трансформация объекта при его движении задается простыми функциями (поворот, масштабирование и т.п.). Если же необходимо анимировать сложные движения (например, движение руки героя мультфильма), то здесь анимация трансформации движения не применима. Каждый кадр приходится рисовать вручную, то есть применять покадровую анимацию, состоящую из набора ключевых кадров. Таким образом, покадровая анимация - это наиболее универсальный, но вместе с тем и самый трудоемкий вид анимации, кроме того, он создает наиболее «тяжелые» файлы. Всегда, когда можно заменить покадровую анимацию автоматической, - это предпочтительно. Рассмотрим ряд примеров, которые позволяют использовать автоматическую анимацию движения при имитации полета.

Движение по заданной траектории

Flash позволяет задать движение объекта вдоль заданной траектории. Для того чтобы задать эту траекторию, выполните команду Insert => Timeline => Motion Guide .

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

Щелкнем мышью по слою траектории и с помощью инструмента «карандаш» нарисуем линию, вдоль которой планируется перемещение листка (рис. 15).

Рис. 15. Пример задания траектории движения

Теперь перейдем в первый кадр (щелкнем по нему мышью) и в появившейся панели Properties установим флажок Snap (задает режим привязки к траектории движения) - рис. 16.

Рис. 16. Параметр Snap задает режим привязки к траектории движения

После того как вы поставите флажок Snap , центр листа совместится с траекторией движения. Пользуясь инструментом Arrow, можно переместить листочек вдоль кривой движения, но если вы попробуете оторвать листок от траектории и расположить его рядом с ней, он будет притягиваться назад и вновь «прилипать» к траектории движения (рис. 17).

Рис. 17. Объект как бы прилипает к траектории движения своим центром

Перейдите на последний кадр и аналогично привяжите листок к конечной точке траектории движения. Для придания фильму объемности добавим трансформацию Flip Horizontal , - в результате получим фильм .

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

Очевидно, что если мы хотим анимировать полет самолета или птицы, то нам нужно, чтобы они все время двигались носом вперед. Во Flash такой характер движения задать очень просто (рис. 18).

Рис. 18. Если поставить флажок Orient to Path , птица будет лететь головой вперед

Необходимо поставить флажок Orient to Path , и движение птицы изменится на вполне привычное (исходник к данному ролику - полет птицы.fla).

Рис. 19. Добавление одноцветного фона

Если вы хотите добавить одноцветный фон, щелкните мышью по фону и в появившейся панели Properties (рис. 19) в поле Background выберите необходимый цвет фона.

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

Расположив фоновое изображение и каждый анимируемый объект на своем слое, добиться контроля над ними гораздо проще. Итак, для того чтобы добавить фоновый рисунок, создадим для него новый слой. Для этого щелкнем правой кнопкой мыши по слою, который на рис. 19 обозначен как layer 1, и в выпадающем меню выберем строку Insert layer. В добавленном слое нарисуем солнце. Чтобы не запутаться в номерах слоев, дадим слою название «фон». Для этого необходимо щелкнуть на текущем названии и ввести необходимое имя (рис. 20).

Рис. 20. На новом слое создадим неподвижный фоновый объект

Как видно из рис. 20, птица находится за солнцем, что противоречит здравому смыслу. Для того чтобы поменять местами слои, достаточно в режиме drag-and-drop перетащить слой с именем «фон» вниз.

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

Рис. 21. Для анимации облака создадим отдельный слой

Теперь добавим к нашей анимации подвижные объекты, например облако. Для облака создадим новый слой и на нем зададим анимацию трансформации движения. Для того чтобы облако влетало в сцену, расположим его, как показано на рис. 21. В результате получим следующий фильм (исходник к данному фильму находится в прилагаемом файле

В качестве первого шага при создании анимации движения создаем для нее отдельный слой (правило "каждому анимированному объекту - отдельный слой" остается в силе). Затем в пустой ключевой кадр этого слоя (такой кадр можно создать клавишей F7 в любом месте слоя) помещаем или создаем объект анимации: группу, текстовый блок или экземпляр символа.

На достаточном удалении по линейке кадров (простой подсчет: частота кадров, умноженная на секунды. Т е. если анимация будет идти 3 секунды, надо найти 36-й кадр) с помощью клавиши F6 создаем копию этого ключевого кадра. Здесь будет конечная фаза анимации.

Редактируя в этом ключевом кадре изменения расположения, размеров, пропорций или ориентации объекта анимации, получим конечную фазу анимации. Более "глубокие" виды редактирования, например с применением режима редактирования групп или с применением команды меню "Разделить" - не допускаются. Начальная и конечная фазы анимации должны быть получены из одного и того же объекта.

Перейдем к первому ключевому кадру, щелкнув в ячейке кадра. В панели свойств выберем из списка "Анимация - Движение". Такой выбор, как хорошо видно на рис. 7.3 , немедленно определяет сиреневый цвет промежуточных кадров временной шкалы, и появляется стрелка, соединяющая начало и конец анимации. Если вместо стрелки появляется штриховая линия, значит, что-то сделано не так и анимации скорее всего не будет. Даже если анимация и получится, очевидно, сбой произойдет позднее. Вот некоторые причины ошибки: в кадре находится неподходящий объект (например, просто несгруппированный рисунок), в кадре сохранились "остатки" каких-то объектов, движение применяется, например, к двум группам сразу. Взгляните на панель свойств кадра: если там появилась желтая треугольная кнопка с предупреждающим знаком (!), то Flash пытается сообщить вам об ошибке.

Рис. 7.3.

При выборе "Движение" в панели свойств открываются дополнительные параметры настройки "анимации движения" (рис. 6 4).

• Чтобы анимация шла корректно, проследим за тем, чтобы был установлен флажок "Масштаб", иначе не будет возможности изменения пропорций.
• При выборе положительных значений параметра "Замедлить" анимация будет идти замедленно, а при выборе отрицательных - ускоренно.
• В списке "Поворот" можно предусмотреть принудительный поворот по часовой стрелке или против. В окошке рядом можно задать количество таких принудительных оборотов объекта в процессе анимации.

  Изменение положения центра вращения можно изменить инструментом "Свободное преобразование".

  Заставим объект двигаться по кругу.

  1. Начнем с того, что нарисуем в первом кадре квадрат (звезду, круг…). Удалим у фигуры контур (если он нарисован).
  2. Сгруппируем рисунок. Зачем? У нас всего один объект? Но этот объект - не группа, не текстовый блок и не экземпляр символа. Поэтому - группируем.
  3. Выделим группу инструментом преобразования и перенесем центр будущего вращения на некоторое расстояние, а сам объект-группу сдвинем от центра монтажного стола.
  4. Оценим длительность анимации - если наша анимация будет длиться в течении 4-6 кадров, даже компьютер не сможет сделать ее плавной. Условимся, что в данном случае нам "хватит" 30 кадров.
  5. Перейдем в тридцатый кадр. Вставим ключевой кадр - копию первого кадра - с помощью клавиши F6.
  6. Вернемся в первый кадр.
  7. В панели свойств кадра выберем анимацию движения. В дополнительном списке "Поворот" обязательно выберем принудительное вращение либо по часовой, либо против часовой стрелки. Количество принудительных оборотов - один.

  Вот и все. Просмотрим (протестируем) фильм. Если требуется, внесем изменения. Да, внесем. Причем такие: в некоторой точке наш объект должен уменьшиться, а потом вернуться в первоначальный размер. Для этого:

  1. поставим считывающую головку в середину "сиреневой полоски" на временной шкале;
  2. на монтажном столе видим некоторое промежуточное положение нашего объекта. В этом месте нет ключевого кадра, но его легко сделать, просто выполнив одним из способов вставку ключевого кадра;
  3. во вновь созданном ключевом кадре изменим масштаб нашего объекта;
  4. можно тестировать фильм.

  Можно создать анимацию движения двумя способами:

  • с помощью панели свойств кадра;
  • с помощью команды "Создать анимацию движения" контекстного меню по правой кнопке мыши на кадре.

  Для анимации движения с помощью команды контекстного меню выполняем следующие действия:

  • Рисуем или вставляем любой объект в ключевой кадр.
  • Щелкаем правой кнопкой мыши в ячейке первого кадра и в контекстном меню выбираем команду "Создать анимацию движения". При этом все изображение в кадре будет автоматически преобразовано в графический символ с именем "Построение анимации1" (появляется голубая выделяющая рамка и точка привязки в центре рамки).
  • Создаем последний ключевой кадр в анимации движения и перемещаем, трансформируем объект.

  Но очень часто нельзя описать движение перемещением по прямой линии. При описанной анимации движения в любом случае наши объекты двигаются по отрезкам прямой между ключевыми кадрами (или кривую достаточно трудно задать). Если необходимо движение по сложной траектории, в принципе, можно разбить это движение на массу отдельных кусочков и… получить анимацию, близкую к покадровой. Впрочем, бывают такие ситуации, когда это единственный выход.

  Но существует еще один способ - задать траекторию движения. Для этого используется специальный слой, управляющий движением: путеводитель, на котором рисуется линия - направляющая или траектория движения.

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

  1. Создать ключевые кадры с начальным и конечным положениями объекта, задать между ними анимацию движения.
  2. Щелкнуть правой кнопкой мыши на имени слоя, содержащего анимацию движения. В контекстном меню выбрать "Добавить путеводитель" или щелкнуть по соответствующей пиктограмме внизу слева.
  3. В результате в списке слоев появится новый слой, помеченный специальным значком (рис. 7.5), а имя слоя с анимацией сдвинется вправо - признак того, что этот слой стал ведомым.
  4. Щелкнуть на имени слоя-путеводителя, чтобы сделать его активным.
  5. В ключевом кадре этого слоя любым инструментом рисования контуров нарисовать траекторию движения объекта. Эта линия не должна содержать пересекающиеся участки, разрывы и не должна быть замкнутой.
  6. Выделить ключевые кадры анимации и в панели свойств кадра (включив анимацию движения) задать:
  7. "Ориентировать по пути", если нужно сориентировать ось симметрии объекта по направляющей линии;
  8. "Привязать", так как надо привязать точку регистрации объекта к направляющей движения (Без этого параметра объект не захочет двигаться по кривой!).
• Протестировать фильм.

Основные ошибки при направлении объекта по заданному пути две: учащиеся не привязывают объект во втором ключевом кадре или направляющая линия имеет мелкие (видимые только при большом увеличении) разрывы .

Выполним еще одно мини-упражнение - движение карандаша по бумаге. Для этого:

1. В первом ключевом кадре нарисуем карандаш или импортируем его изображение из клип- арта в векторном формате.
2. Сгруппируем изображение карандаша, инструментом "Свободное преобразование" повернем карандаш так, как он выглядит со стороны при письме (можно расположить карандаш в левой части монтажного стола, поскольку пишем мы слева направо).
3. В данном случае очень важно расположение точки регистрации нашего объекта - поставим ее на кончик грифеля карандаша.
4. Через 30-40 кадров создадим последний ключевой кадр анимации.
5. В нем перенесем изображение карандаша в другое место монтажного стола, Можно чуть-чуть повернуть его.
6. Выделим все кадры одновременно, "протянув" курсор мыши вдоль полоски кадров, и в панели свойств выберем анимацию движения и поставим "галочки" рядом с параметрами "Ориентировать по пути" и "Привязать".
7. Добавим слой, управляющий движением, - путеводитель.
8. В ключевом кадре этого слоя нарисуем траекторию движения. Проверим, что полоска промежуточных кадров совпадает с длиной нашей анимации; ключевого кадра в конце не нужно.
9. Протестируем фильм.
10. Возможно, вы все сделали аккуратно и карандашик начал движение по нарисованному пути, но наш карандаш вертится вокруг кривой как ненормальный. Отключим галочку около параметра "Ориентировать по пути" - движение карандаша стало реалистичней.

Обратите внимание: траектория пути объекта невидима в режиме тестирования фильма и не будет видна в готовом фильме. Если вы хотите видеть траекторию в фильме, ее надо скопировать и вставить на любой другой (видимый) слой (в меню редактирования существует команда "Вставить на место").

Вот и все! Основы автоматической анимации в программе Flash нами изучены. Осталось только познакомиться с более сложными приемами, чтобы стать настоящими профессионалами.

Примерные вопросы для контроля

1. Как отредактировать текст?
2. Как превратить текст в "нарисованные буквы"?
3. Для каких целей применяют анимацию движения?
4. Чем анимация движения отличается от анимации формы?
5. Чем анимация движения отличается от пошаговой анимации?
6. Для каких объектов можно создать анимацию движения?
7. Каким образом задаются настройки анимации движения?
8. Для чего и как создается слой-путеводитель?

При создании мультипликации движения можно определить движение объекта по определенной траектории - по прямой линии, по ломанной кривой, состоящей из отрезков прямой линии, и по гладкой кривой линии.

Анимация движения по прямой

Пример 1:
См. Пример 2

Создадим движение самолета по прямой линии.

В монтажном кадре вставьте изображение самолета на левой стороне сцены. Векторное изображение самолета можно создать в Adobe Flash (см. Рисование ) или импортировать изображение, созданное на стороне (в формате.png с прозрачным фоном).

Выделите самолет на сцене. В контекстном меню самолета выбираем Преобразовать в символ (Convert to Sumbol). Выбираем графический тип символа.

В контекстном меню изображения выбираем Создать анимацию движения (Create Motion Tween). Программа автоматически создает 24 кадра для плавного изменения.
Перемещаем изображение на правую сторону сцены.
Можно настроить продолжительность анимации и другое - см. Работа с кадрами .

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

Из этого примера можно сделать такие выводы:

Длина любого нового участка изменения (tween span), который автоматически создается програмой, по умолчанию соответствует установленной скорости мультипликации. Если скорость мультипликации выбрана 24 кадра в сек., то будет по умолчанию создан участок изменения в 24 кадра (1 сек мультипликации). Если выбрана скорость 30 кадров в сек. - участок изменения по умолчанию составит 30 кадров.

Чтобы программа смогла создать плавное изменение, вставленный на сцену объект должен быть преобразован в символ. При этом объект может быть любым - созданный в Adobe Flash векторный рисунок, текст, импортированное растровое изображение и пр. Если Вы пытаетесь создать плавное изменение на несимволе, программа попросит Вас преобразовывать элемент в символ ().

Только к одному символу может быть примененно плавное изменение (tweened) за один раз. Если Вы попытаетесь применить изменение к уровню с несколькими объектами, программа запросит Вас преобразовать графические символы в единственный символ.

Плавное изменение можно применить для изменения размеров/масштабирования, изменения цвета и применения фильтров.

Примечание: плавное изменение для эффектов фильтров применимо только к символам клипов и кнопок, не применимо к символам графики.

Примечания:
1. При создании классической анимации движения порядок действий иной - см. Создание классической анимации движения .
2. Создание движения объектов при покадровой мультипликации - см. Покадровая мультипликация
3. В нашем примере самолет двигался в пределах сцены. Но начальное положение самолета (или другого объекта) может быть вне сцены, при этом самолет может выскакивать "из-за кулис" (справа, слева, сверху. снизу). Точно также он может исчезать со сцены "за кулисами". В принципе, и начальное и конечное положение объекта может быть вне сцены, т.е. объект выскакивает "из-за кулис", показывает на сцене свои трюки и снова исчезает "за кулисами".

Анимации движения по кривой

Есть несколько способов создать движение объекта по кривой:

5. Выделяем созданный путь и копируем его в буфер обмена. После этого сам путь можно удалить.

6. Возвращаемся в слой самолета. Выделяем самолет на сцене, в контекстном меню выбираем "Создать анимацию движения " (Create Motion Tween).

7. Выделяем самолет на сцене, в меню Правка (Edit) выбираем "Вставить" или "Вставить по месту" (Paste in Place).
К изображению самолета добавляется изображение пути движения.

8. Для просмотра ставим красный движок на 1-й кадр, щелкаем по клавише Enter .

Редактирование пути движения

Вы можете преобразовать путь движения так же, как и другого графического объекта.

Выберите инструмент свободного преобразования (Free Transform) на панели инструментов и щелкните по пути движения.
Маркеры преобразования появляются вокруг пути движения.

Можно изменять масштаб или повернуть путь движения. Можно создать кривизну пути, используя инструменты выбора и инструмент Преобразовать узловую точку (Convert Anchor Point) - этот инструмент скрыт под инструментом Перо (Pen) .

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

3 Для коррекции пути выберите инструмент спецвыделения (Subselection) на панели инструментов.
4 Щелкните и перетащите маркер, чтобы редактировать кривую пути.
Примечание: путем движения можно также непосредственно управлять с инструментом выделения ().
Выберите инструмент выделения () и переместите его близко к пути движения. Значок кривой появляется рядом с Вашим курсором, указывающий, что Вы можете редактировать путь. Щелкните и перетащите путь движения, чтобы изменить искривление.

Можно выделить объект, щелкнуть по нему правой кнопкой мыши, в меню выбрать Создать анимацию движения . После этого передвигать движок по Временной шкале и синхронно передвигать объект по созданной кривой.

Примечание:
Если Вы своей дрожжащей рукой нарисовали слишком корявый путь и одновременно для движения по этому пути отвели слишком мало кадров, то программа не сможет выполнить задачу и повторить все изгибы пути.
В этом случае появится объявление:
"The curve must be simplified to fit the number of frames available in the current motion tween. Please choose one of the following methods"
Или: "Кривая должна быть упрощена, чтобы соответствовать числу кадров, доступных в текущей анимации движения. Пожалуйста выберите один из следующих методов..." и предлагается два варианта, первый из которых - упростить путь.

См. Дополнительно:
Создание собственного анимационного пути


Реверс направления движения

Чтобы объект двигался от конечной точки к начальной, в контекстном меню объекта выберите Траектория движения ( Motion Path ) - Обратная траектория (Reverse Path).

Ориентация объекта при движении

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

1 Щелкните по слою плавного изменения движения (motion tween) на Временной шкале (Графике времени). В нашем примере это слой "самолет".

2. Выделите путь движения, используя инструмент выделения ()

3. Правильно установите объект относительно пути движения в 1-и и последнем кадрах анимации.

4. В Инспекторе свойств выберите Ориентацию по траектории (Orient to path) в опции пути.

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

Программа автоматически добавляет ключевые кадры, разворачивая самолет по траектории.

Временная шкала будет выглядеть так:

Отметьте: Чтобы опция ориентации работала правильно, самолет в начальной позиции должен быть установлен правильно, т.е. его нос должен быть направлен вдоль пути движения.
Для этого используйте инструмент свободного преобразования , поворачивайте самолет, чтобы установить его правильно.

Удостоверьтесь, что и старт и окончание движения объекта зафиксированы непосредственно на созданном пути.

Удостоверьтесь, что Ваш путь движения не объект рисунка, группа или символ. Путь движения создается только в режиме рисования "Merged Drawing".
Избегайте использовать при создании пути необычные штриховые стили, такие как черточки, точки и пр. Это приводит к непредсказуемому поведению объекта при движении по такому пути.