Во флеше очень просто создать анимацию предмета по траектории. Что для этого нужно:

1.Рисуем объект для анимации – розовый мячик. Сохраняем его в символ (Выделение – F8 )

2. Нам нужно нарисовать траекторию, по которой будет двигаться мяч. Для этого кликаем по слою с мячом и добавляем новый слой-путеводитель (Add Classic Motion Guide):

На таймлайне слой Guide выглядит как дуга, нарисовання пунктиром:

3. Создаем анимацию мяча в 2 кадра, кликнув правой по первому кадру – Create Classic Tween . Во втором кадре сдвиваем мяч вправо

Без траектории (как видим, в слое Guide отсутсвует графика, он пустой) – анимация выглядит как простое перемещение объекта слева - направо

4.На слое Guide карандашом рисуем волнообразную линию. Это и будет путь для нашей анимации:

Начальное положение:

Конечное положение:

Важно: Чтобы мяч «поймал» свою траекторию, его точка трансформации (кружок в центре) должна полностью совпадать с концами линии траектории и в первом, и в конечном кадрах. Иначе объект будет игнорировать наличие траектории и двигаться по прямой слева – направо. Поэтому стоит поправить или положение объекта, или форму линии траектории.

Способы создания движения во Flash.

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

Анимация движения – в ключевых кадрах рисуется начало и окончание движения, в простых кадрах делается постепенный переход от одной ключевой фазы к другой. По умолчанию соответствующей командой автоматически создается прямолинейное и равномерное движение того, что содержится в слое между двумя ключевыми кадрами. В старых версиях, Macromedia Flash, использовалась командаСоздать анимацию движения (Create Motion Tween) . В новых версиях, Adobe Flash, надо использовать команду Создать классическую анимацию движения .

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

Но есть и другие, специальные виды движения.

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

В Adobe Flash специальный слой создавать не надо, а надо применить команду Создать анимацию движения .Траекторию стало легче рисовать, ее можно дополнить рядом эффектов (например, вращением). При этом она легко делается невидимой.

2. Движение с ускорением/замедлением. Для создания неравномерного движения на вкладкеСвойства есть движок Замедление (Easing) . Этот параметр может меняться от -100 до +100. Отрицательному значению соответствует увеличение скорости к концу движения, положительному – замедление к концу движения.

Для оформления начала и конца движения надо во временном интервале создать еще 1 или 2 ключевых кадра и сделать в начале ускорение, а в конце замедление. Лучше поставить предельные значения: ±100, промежуточные обычно малоэффективны. А для высоких скоростей и ускорений требуется покадровая анимация.

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

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

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

Анимация формы – происходит постепенный переход фигуры одной формы в фигуру другой формы. Одновременно могут изменяться размеры, местоположение, цвет.

Но на анимацию формы имеется много ограничений. Она не работает:

· с растровой графикой;

· с текстом;

· с группами объектов – нельзя деформировать сгруппированные объекты;

· с клипами – деформировать можно только статичный объект.

Анимация формы реализуется так же, как и анимация движения, только в окошке Properties → Tween надо выбрать не Motions , аShape (в новых версиях – Создать анимацию формы) . Цвет кадров с анимацией формы – зеленый.

В анимации формы важную роль играют точки подсказки. Их ставят в начальном и конечном ключевых кадрах. Они обозначаются буквами латинского алфавита: a, b, c, d и так далее. Всего может быть 26 точек подсказки, вплоть до z . Буквы ставят по часовой стрелке.

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

Вообще анимация формы – капризный процесс. Чтобы деформация протекала так, как задумано, часто приходится потратить много времени. К тому же бывает, что она требует больших вычислительных ресурсов, компьютер может зависнуть. Этот вид анимации имеет смысл применять тогда, когда анимация движения однозначно к хорошим результатам не приводит. А покадровая анимация будет слишком трудоемкой.

В качестве первого шага при создании анимации движения создаем для нее отдельный слой (правило "каждому анимированному объекту - отдельный слой" остается в силе). Затем в пустой ключевой кадр этого слоя (такой кадр можно создать клавишей 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. "Привязать", так как надо привязать точку регистрации объекта к направляющей движения (Без этого параметра объект не захочет двигаться по кривой!).
Протестировать фильм.

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

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

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

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

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

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

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

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

Рис. 7.3. Временная линейка с раскадровкой анимации движения

Рис. 7.4. Панель свойств при выборе анимации движения

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

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

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

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

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

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

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

o с помощью панели свойств кадра;

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

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

o Рисуем или вставляем любой объект в ключевой кадр.

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

o Создаем последний ключевой кадр в анимации движения и перемещаем, трансформируем объект.

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

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

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

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

19. В результате в списке слоев появится новый слой, помеченный специальным значком (рис. 7.5), а имя слоя с анимацией сдвинется вправо - признак того, что этот слой стал ведомым.

20. Щелкнуть на имени слоя-путеводителя, чтобы сделать его активным.

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

22. Выделить ключевые кадры анимации и в панели свойств кадра (включив анимацию движения) задать:

23. "Ориентировать по пути", если нужно сориентировать ось симметрии объекта по направляющей линии;

24. "Привязать", так как надо привязать точку регистрации объекта к направляющей движения (Без этого параметра объект не захочет двигаться по кривой!).

Протестировать фильм.

Рис. 7.5. Создание траекторий движения

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

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

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

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

8. Практическая работа: Пляшущие человечки:

Жизнь - движение. Можно анимировать шарики, круги, прямоугольники, линии и другие фигуры… Но давайте замахнемся на грандиозную задачу: заставим двигаться (танцевать) "человечка".

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

Движение по заданной траектории. Урок для Adobe Flash

Способы создания движения во Flash.

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