Предлагаю коллегам

И.А. Бутенина,
школа № 510, Москва

Продолжение. Начало в № 6, 7, 8/2007

Занятие 4. Создание анимации движения типа Mootion Tween

На этом занятии мы наконец займемся собственно анимацией. Ведь среда Macromedia Flash получила наибольшую известность именно как средство создания “мультиков”.

План занятия

4.1. Понятие анимации. Виды анимации. Кадры.

4.2. Пример создания анимации движения.

Анимация — это последовательное изменение состояния объекта. С точки зрения Macromedia Flash имеется несколько видов анимации: простая покадровая анимация, Tweening (анимация с построением промежуточных кадров), анимация формы и анимация с использованием эффектов шкалы времени (Timeline Effects).

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

Рис. 1

· Tiny (Очень маленький)

· Small (Маленький)

· Normal (Обычный)

· Medium (Средний)

· Large (Большой)

· Short (Короткий) — уменьшение высоты кадров

Кадры бывают двух типов: ключевые и статические. Ключевые кадры играют особую роль — в них и могут содержаться изображения (статические кадры проигрываются как бы “впустую”). На шкале времени ключевые кадры изображаются маленькими кружочками. Если кружочек не закрашен — в ключевом кадре ничего нет, он пуст. Если в ключевом кадре содержится хотя бы один объект, кружочек ключевого кадра закрашен (см. рис. 2).

Рис. 2

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

На рис. 2 показана анимация движения между кадрами 9 и 34. Для создания подобной анимации необходимо проделать следующее: щелкнуть по начальному ключевому кадру (в нашем случае — по 9-му), выбрать команду Create Motion Tween (Создать анимацию движения) — см. рис. 3, затем щелкнуть по конечному кадру (в нашем случае — по 34-му) и вставить в него ключевой кадр (см. рис. 4).

Рис. 3

Рис. 4

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

Последнее, что нужно сделать, — протестировать фильм либо с помощью комбинации клавиш + , либо командой меню Сontrol Test Movie (Управление — Тестирование фильма).

С помощью панели Properties (Свойства), которая показана на рис. 5, можно установить различные характеристики движения:

· Ease (Замедление хода), положительное значение замедляет ход объекта в конце движения, отрицательное — в начале, допустимые значения выбираются в диапазоне от –100 до 100);

· Rotate (Вращение) позволяет установить режимы вращения: CW (По часовой стрелке) и CCW (Против часовой стрелки), либо Auto (Автоматически), объект поворачивается один раз в направлении поворота на наименьший угол;

· Orient to Path (Ориентация относительно пути) позволяет ориентировать движение объекта по заданной траектории.

Рис. 5

4.2. Пример создания анимации движения

Вернемся к нашему проекту, который мы начали создавать на прошлых занятиях. Сегодня мы поработаем со сценой 2, на которую мы попадем, если нажмем кнопку основного меню “Рафаэль Санти (галерея)”. На сцене (рис. 6) разместим галерею картин Рафаэля Санти. Смену картин будем осуществлять посредством анимации движения.

Элементы фильма располагаются на слоях: foto — сами картины, krug-maska — в дальнейшем этот слой будет преобразован в маску, action — слой для размещения скриптов.

Рис. 6

Рассмотрим пошаговый алгоритм создания Сцены 2.

4.2.1. Создадим 3 слоя, которые назовем так, как было описано выше.

4.2.2. Импортируем несколько растровых изображений непосредственно в библиотеку фильма (см. рис. 7). (Пункт Import находится в меню File.)

Рис. 7

Библиотека фильма примет вид как на рис. 8.

Рис. 8

Заметим, что растровые изображения предварительно должны быть обработаны, в частности, размер иллюстрации должен быть небольшим — около 300 пикселей в ширину. Поместим первую иллюстрацию из библиотеки на сцену в слой foto.

4.2.3. На слое krug-maska нарисуем окружность любого цвета слева от изображения. Этот слой в дальнейшем сделаем маской. Вид Сцены 2 в первом ключевом кадре показан на рис. 9.

Рис. 9

4.2.4. Зададим во всех трех слоях длину фильма равной, например, 105 кадров (все слои можно выделить, удерживая клавишу ).

4.2.5. На слоях foto и krug-maska создадим через каждые 15 кадров ключевые кадры.

Рис. 10

4.2.6. В этих ключевых кадрах создадим анимацию движения приближения и удаления изображения и круга. Для этого будем щелкать правой клавишей мыши по ключевым кадрам и в контекстно-зависимом меню выбирать Create Motion Tween (Создать Motion Tween), см. рис. 11.

Рис. 11

4.2.7. Для плавности анимации движения фотографий сделаем, начиная с 30-го кадра, по два рядом идущих ключевых кадра, т.е. 30 и 31, 45 и 46 и т.д., см. рис. 12.

Рис. 12

4.2.8. Теперь рассмотрим создание анимации приближения и удаления фотографии. В первом ключевом кадре Сцена 2 выглядит так, как показано на рис. 9.

А в 15-м кадре — уже как на рис. 13, — окружность мы наложим на изображение.

Рис. 13

4.2.9. Начиная с 30-го кадра и по 60-й происходит сначала плавное увеличение круга (изображения в смежных кадрах, например 30 и 31, одинаковые), а затем симметричное уменьшение (с 75-го по 105-й кадры).

4.2.10. Начиная со 106-го кадра вставляем из библиотеки следующее растровое изображение (рис. 14) и проделываем с ним все те же шаги, что и с предыдущим изображением.

Рис. 14

План занятия

5.1. Назначение масок в фильме.

5.2. Создание слоя-маски.

5.1. Назначение масок в фильме

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

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

Рис. 1

5.2. Создание слоя-маски

На предыдущем занятии мы не зря назвали второй слой krug-maska. Мы обещали преобразовать его в слой-маску, что сейчас и сделаем.

5.2.1. Выделим слой krug-maska и правой клавишей мыши выберем команду Mask. Этот слой становится слоем-маской, а нижележащий слой foto становится маскированным. Автоматически оба слоя становятся заблокированными.

5.2.2. В слое аction в последнем ключевом кадре Сцены 2 запишем скрипт для возврата на Сцену 1 и остановки фильма во втором кадре (т.е. возвращаемся в главное меню), см. рис. 2.

Рис. 2

5.2.3. На Сцене 3 (рис. 3) имеются аналогичные слои, в которых расположены только другие изображения (описывать ее мы не будем). На этой сцене представлена галерея картин художника-импрессиониста Клода Моне.

Рис. 3

5.2.4. Протестируем наш фильм. Если все сделано правильно, мы увидим проигрывание фильма для кнопок “Рафаэль Санти (галерея)” и “Моне (галерея)”.

Рис. 4

Окончание