Сделать анимацию движения во flash. Что важно знать. Последовательные движения и циклы ходьбы

Урок 4. Создание анимации

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. В результате получим следующий фильм (исходник к данному фильму находится в прилагаемом файле

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

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) в конечном ключевом кадре. А если в конечном кадре точки поставить в другие места, то деформация пойдет другим путем. Промежуточные фазы могут быть совершенно разными, в том числе нежелательными.

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

Тема: Анимация движения в системе Flash.

Тип урока : Урок-проект с элементами творческой работы.

Цель:

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

Развивающий аспект – творческое применение своих знаний в области двухмерной компьютерной графики.

Цели урока: Познакомить учащихся с типами анимации. Сформировать умение создавать простейшую анимацию в системе Flash.

Формы организации учебно-познавательной деятельности учащихся:

- индивидуальная – каждый ученик создает индивидуальный проект фрагмента сказки «Колобок»;

- групповая – индивидуальные проекты учеников позволяют реализовать групповой проект сказки «Колобок». Работа на перспективу – показ сказки детям ДОУ и начальной школы в рамках развития социокультурного центра в школе.

План урока:

1. Организация урока.
2. Постановка проблемы урока.
3. Получение сведений о классификации анимации во Flash (эвристическая беседа).
4. Актуализация знаний по созданию рисованных объектов в системе.
5. Демонстрация создания простой анимации.
6. Практическая работа учащихся за компьютером.
7. Подведение итогов урока.
8. Домашнее задание.

ХОД УРОКА

1. Организация урока

Учитель проверяет готовность учеников к уроку.

2. Постановка проблемы урока

Рассмотрим некоторые объекты и выясним, каким из них вы отдаете предпочтения. Какие вам нравятся больше и почему?

Просмотр некоторых Web-страниц, слайдов презентаций с анимацией и без нее.

В ходе беседы выясняем, что красивее, симпатичнее сайты и слайды презентаций с анимацией.

Как создать анимацию – это и есть тема сегодняшнего урока (Приложение 1 ).

3. Получение сведений о классификации анимации во Flash (эвристическая беседа с демонстрацией. Приложение 1 )

Основное назначение системы во Flash – «оживление» рисованных изображений.

Овладев основными приемами работы в системе, вы сможете:

Создать эффективную презентацию или обучающую программу;
- сделать Web-сайт или внести «живую изюминку» в оформление вашего сайта, т.е. создание рекламных web роликов (баннеры);
- создать мультфильм;
- запрограммировать свою первую игру.

Прежде чем начинать что то делать на практике, давайте рассмотрим базовые понятия в анимации: кадр (frames), ключевой кадр,слой (layers), и временная шкала (timeline), символы (symbols ) (Приложение 1 ).

Анимация - это изменение свойств объекта с течением времени (Анимация – процесс изменения размера, положения, цвета или формы объекта во времени).

Кадр. Все фильмы состоят из кадров (фреймов). Каждый кадр содержит одно статическое изображение. Иллюзия движения создается благодаря незначительным изменениям в рисунках от одного кадра к другому. Кадр может быть как составленным вручную, так и сгенерированным Flash

Ключевой кадр – кадр доступный для обработки (отображается чёрным кружочком, если в нём есть изображение, и белым, если нет никакого рисунка). Кадр, в котором создатель фильма выполняет смену анимированного изображения.

Слой – это блок фильма, состоящий из отдельных изображений, из анимации со своей шкалой времени.

Временная шкала – поле, на котором отображается информация о слоях, о том какие кадры являются ключевыми, а какие генерирует Flash.

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

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

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

Анимация на основе сценариев . Сценарий представляет собой описание поведения объекта на собственном языке Flash, который называется ActionScript.

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

Анимация формы

Сегодня мы познакомимся с принципами создания анимации формы.

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

Анимация движения

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

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

4. Актуализация знаний по созданию рисованных объектов в системе.

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

5. Демонстрация создания простой анимации.Алгоритм выполнения .

6. Практическая работа учащихся за компьютером

Создание мини-проекта по сказке «Колобок».

Комментарий для учителя. Каждому ученику выдается практическая работа для создания отдельного фрагмента сказки. Рекомендуется озвучить сказку «Колобок» заранее и разбить звуковой файл на отдельные сюжеты, чтобы в работе указать ученикам длительность анимации.

Практическая работа по теме «Простейшая анимация движения в системе Flash»

Вариант – 1

Задание . Картинка1.jpg) по тропинке катиться колобок и при этом звучат следующие слова:

Колобок полежал, полежал да и покатился с окна на лавку, с лавки на пол, по полу к двери, прыг через порог – и дальше по дорожке.

Звук занимает 9 секунд. 13 кадров – 1 секунда. Анимируйте картинку в течении всего этого времени (117 кадров) и экспортируйте фрагмент фильма в каталог D:/User/_ под именем побег.avi

Алгоритм выполнения

1. Откройте программу Flash MX 2004 (D:/SCHOOL/ Flash MX 2004/*.exe).
2. При помощи панели инструментов на рабочем поле создайте колобка из сказки.
3. Добавьте фоновую картинку:

- Создайте новый слой, выбрав команду Вставить – Шкала времени – Слой (перейти на второй слой, щелкнув клавишей мыши на название слоя).
- Импортируйте фоновую картинку Файл – Импорт – Импортировать на стадию. (Картинку выбрать из каталога D:/FOTO/Колобок/Рисунок1.jpg).
- Измените размеры картинки, используя инструмент «свободная трансформация» , до размеров кадра.

Вариант – 2

Задание . Создайте фрагмент сказки «Колобок», где на фоновой картинке (D:/FOTO/Колобок/Картинка2.jpg) по тропинке катиться колобок навстречу зайцу и при этом звучат следующие слова:

Катиться колобок, а навстречу ему заяц:

- Не ешь меня, косой, я тебе песенку спою.

Вариант – 3

Задание . Создайте фрагмент сказки «Колобок», где на фоновой картинке (D:/FOTO/Колобок/Картинка3.jpg) колобок убегает от зайца и при этом звучат следующие слова: И покатился колобок дальше – только заяц его и видел.

Вариант – 4

Задание . Создайте фрагмент сказки «Колобок», где на фоновой картинке (D:/FOTO/Колобок/Картинка4.jpg ) по тропинке катиться колобок навстречу волку и при этом звучат следующие слова:

Катиться колобок по тропинке в лесу, а навстречу ему заяц:

- Колобок, колобок! Я тебя съем!
- Не ешь меня, серый волк, я тебе песенку спою.

Вариант – 5

Задание . Создайте фрагмент сказки «Колобок», где на фоновой картинке (D:/FOTO/Колобок/Картинка5.jpg ) колобок убегает от волка и при этом звучат следующие слова:

Вариант – 6

Задание . Создайте фрагмент сказки «Колобок», где на фоновой картинке (D:/FOTO/Колобок/Картинка6.jpg ) по тропинке катиться колобок навстречу медведь и при этом звучат следующие слова:

Катиться колобок по лесу, а навстречу ему медведь:

- Колобок, колобок! Я тебя съем!
- Ну где тебе, косолапому, съесть меня!

Вариант – 7

Задание . Создайте фрагмент сказки «Колобок», где на фоновой картинке (D:/FOTO/Колобок/Картинка7.jpg ) колобок убегает от медведя и при этом звучат следующие слова:

И опять покатился колобок – медведь только вслед ему посмотрел.

Вариант – 8

Задание . Создайте фрагмент сказки «Колобок», где на фоновой картинке (D:/FOTO/Колобок/Картинка8.jpg ) по тропинке катиться колобок навстречу лиса и при этом звучат следующие слова:

Катиться колобок, а навстречу ему лиса:

- Здравствуй, колобок! Спой мне песенку!

Колобок и запел свою песенку, Алиса слушает да все ближе подкрадывается.

Вариант – 9

Задание . Создайте фрагмент сказки «Колобок», где на фоновой картинке (D:/FOTO/Колобок/Картинка9.jpg ) колобок прыгает на нос лисе и при этом звучат следующие слова:

Славная песенка! – сказала лиса.- Да стара я стала – плохо слышу. Сядь ко мне на носочек да пропой еще разочек.

Вариант – 10

Задание . Создайте фрагмент сказки «Колобок», где на фоновой картинке (D:/FOTO/Колобок/Картинка10.jpg ) лиса съела колобка и при этом звучат следующие слова:

Колобок прыгнул лисе на нос и запел:

- Я колобок, колобок!..
Алиса его – ам! – и съела.

7. Подведение итогов урока

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