Использование слоев в анимации: создание фона, управление движением объекта в программе Adobe Flash .

Создание фона

Под фоном мы в данном случае понимаем статичные изображения, «декорации», которые не изменяются в процессе фильма. Фон может быть расположен как позади (с точки зрения наблюдателя), так и перед анимированным объектом. Простейший пример — использование в качестве фона циферблата часов, поверх которого перемещаются стрелки (на рис. 9.9 это слой Layer 2 (Циферблат)).

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

Рис. 9.9. Пример использования фонового слоя

Рис. 9.10. Кадры фильма, использующего фон

В качестве основы для построения фильма используем «мультик», завершающий кадр которого был приведен на рис. 8.18. Чтобы добавить к нему требуемый фон, следует выполнить следующие действия:

1. Щелкните правой кнопкой мыши на имени слоя Layer 1 и выберите в контекстном меню команду Insert Layer; в результате в список будет добавлен слой с именем Layer 2, расположенный над слоем Layer 1 и в списке, и на столе Flash.

2. Нарисуйте в новом слое изображение стола и стоящего на нем предмета; чтобы шар перемещался точно по поверхности стола, воспользуйтесь кнопкой Onion Skin; обратите внимание, что после того, как вы что-нибудь нарисуете в слое Layer 2, на его временной диаграмме появится последовательность простых кадров, равная по длине созданной ранее анимации.

3. Чтобы стоящий на столе предмет оказался за катящимся шаром, а правая ножка стола — за его осколком (см. рис. 9.10), необходимо поменять местами в списке слои Layer 2 и Layer 1; для этого достаточно перетащить мышью любой из них на место другого.

4. Чтобы добавить еще один слой, на котором будет изображен предмет, заслоняющий шар, повторите шаги 1 и 2.

Окончательный вид временной диаграммы созданного фильма показан на рис. 9.11.

Рис. 9.11. Временная диаграмма фильма с двумя фоновыми слоями

Совет

Поскольку изображение, созданное на фоновом слое, должно быть видимым на всем протяжении анимации, удобнее сначала создать анимацию, а затем добавить в фильм фоновый слой. Если вы хотите предварительно «набросать» фон, то сделайте это на другом столе (например, создав дополнительный FLA-файл), а затем скопируйте нужный кадр в основной фильм.

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

Управление движением объекта

Во Flash существует понятие «ведущего слоя» — Guide Layer. При выборе этого термина разработчики Flash воспользовались своеобраз ной игрой слов английского языка. Дело в том, что ведущий слой имеет два предназначения:

• во-первых, вы можете поместить на него какие-либо комментарии (даже с иллюстрациями), которые видны только в режиме редактирования фильма, но не экспортируются в формат SWF; в этом смысле слово Guide можно перевести как «руководство», «инструкция»;
• во-вторых, с помощью ведущего слоя можно управлять траекторией перемещения объекта, анимированного с помощью tweened-анимации движения.

Чтобы создать слой-инструкцию, необходимо:

1. В списке слоев на панели временной диаграммы щелкнуть правой кнопкой мыши на любом слое и в контекстном меню выбрать команду Insert Layer.

2. Щелкнуть правой кнопкой мыши на вновь созданном слое и в контекстном меню выбрать пункт Guide.

В результате в списке слоев возле имени слоя появится значок в виде молоточка. Он говорит о том, что содержимое данного слоя предназначено исключительно для разработчиков, но не для конечных пользователей («зрителей»). На рис. 9.12 показан пример слоя-инструкции, содержащего единственный элемент — текстовый блок.

Рис. 9.12. Пример слоя-инструкции

Как было сказано выше, второй тип ведущего слоя — это слой, описывающий траекторию, по которой движется объект. Особенность такого применения ведущего слоя состоит в том, что предварительно требуется создать tweened-анимацию прямолинейного движения объекта.

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

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

2. Выбрать в контекстном меню команду Add Motion Guide (Добавить слой, управляющий движением); в результате в списке слоев появится ведущий слой, помеченный специальным значком, а имя слоя с анимацией сдвинется вправо — это признак того, что он является ведомым слоем (рис. 9.13).

Рис. 9.13. Применение ведущего слоя для управления движением объекта

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

4. С помощью любого инструмента рисования (Pen, Pencil, Oval, Brush, Rectangle) изобразите траекторию движения объекта.

5. Щелкните левой кнопкой мыши в ячейке первого кадра анимации и в панели инспектора свойств кадра установите один из двух флажков:

o Orient to Path (Ориентировать по маршруту), если вы хотите, чтобы по нарисованному вами маршруту была сориентирована ось симметрии объекта;

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

6. Щелкните левой кнопкой мыши в ячейке последнего кадра анимации и в панели инспектора свойств кадра установите тот же флажок, что и для первого кадра.

Снимите выделение с анимированного объекта и воспроизведите фильм.

Замечание

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

Рис. 9.14. Самовольное изменение маршрута Flash

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

Ø

Основные понятия в программе Adobe Flash : ключевой кадр, временная диаграмма, слой, сцена, клип.

Ø Кадры и ключевые кадры

На Графике времени Adobe Flash время, отведенное на то или иное действие, определяется отведенными для действия кадрами.

Кадры на Графике времени обозначены маленькими прямоугольниками, расположенными на своих уровнях.

Исходя из количества кадров, определяется время (в сек), отведенное на то или иное действие. Так, если скорость мультипликации в настройках проекта установлена в 24 кадра в сек, то 24 кадра составят 1 сек мультипликации.

Красный движок (playhead), который передвигается по шкале времени, активирует каждый кадр при воспроизведении мультипликации.

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

Обычные кадры

Обычный кадр (или просто кадр) - кадр, в котором не происходит никаких изменений или происходят изменения, которые программа по нашему указанию создает автоматически в режиме создания плавных изменений.

Простой кадр на графике времени обозначается значком . Если таких кадров несколько, то значок ставится только в последнем кадре.

Ключевые кадры

Ключевые кадры - кадры, в которых мы сами определяем необходимые изменения.

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

При создании ключевых кадров нам нужно указать программе:
1. В каком ключевом кадре начинаются изменения
2. В каком ключевом кадре эти изменения заканчиваются.
Например, если в первом ключевом кадре мы определяем, что объект начинает движение, то во втором кадре нам нужно указать, что движение заканчивается или что объект начинает двигаться в другом направлении.

Когда Вы хотите поместить графический символ, запустить звук или запустить мультипликацию в определенном кадре Графика времени, Вы должен вначале создавать ключевой кадр (keyframe) в этом кадре.

Каждый новый уровень на Графике времени содержит по умолчанию единственный ключевой кадр в кадре 1.

⇐ Предыдущая891011121314151617Следующая ⇒

Поделиться: