Лабораторная работа № 2
Информация
Анимировать объект – значит заставить его плавно изменять свои свойства. Состояние объекта характеризуется его размером, цветом, положением в пространстве, формой. При создании простейшей анимации объекта инструментами программы Flash изменяются эти свойства. Программа Flash позволяет рисовать плоские, двухмерные объекты.
При создании анимации необходимо учитывать и время. Для учета времени используется шкала времени. Каждая клеточка шкалы соответствует одной абстрактной единице времени. Это не минута и не секунда – это кадры (frames). Это момент времени, которому соответствует моментальный снимок состояния объектов.
Если шкала времени отсутствует на экране, то необходимо выполнить команду W indow → Tim eline (Окно → Монтажный стол)
Программа Flash позволяет создавать фильм, рисуя каждый кадр по отдельности, как в былые времена поступали художники-мультипликаторы. Такая анимация называется покадровой . Есть и другой тип анимации, когда создаются только начальный и конечный кадры некоторого фрагмента, а все промежуточные кадры программа достраивает сама. Такой тип анимации называется автоматической (tweened-анимация) .
Flash поддерживает следующие типы анимации:
ü Анимации движения. Можно воспользоваться элементами анимации движения, чтобы задать свойства объекта, такие как положение и альфа-прозрачность в одном кадре, а затем снова в другом кадре. Flash затем интерполирует значения свойств для кадров, находящихся в промежутке между указанными кадрами. Анимация движения полезна в тех случаях, когда анимация состоит из непрерывного движения или преобразования объекта. Анимация движения отображается на временной шкале как непрерывный диапазон кадров, который по умолчанию может быть выбран как один объект.
ü Классическая анимация. Классическая анимация похожа на анимацию движения, но более сложна в создании. Классическая анимация позволяет создавать некоторые анимированные эффекты, которых невозможно добиться с использованием диапазонов анимированных кадров.
ü Позы обратной кинематики. Позы обратной кинематики позволяют растягивать и поворачивать объекты фигур, а также соединять группы экземпляров символов, чтобы перемещать их одновременно, обеспечивая тем самым естественность движения. Можно разместить объект фигуры или связанные экземпляры различным образом в отдельных кадрах, а Flash произведет интерполяцию положений в промежуточных кадрах.
ü Анимация формы. При анимации формы в отдельном кадре на временной шкале рисуется форма, а в другом кадре эта форма изменяется, либо рисуется новая форма. Flash затем интерполирует формы для промежуточных кадров, создавая анимацию одной формы, перетекающей в другую.
ü Покадровая анимация. Такая техника анимации позволяет указывать различные объекты для каждого кадра временной шкалы. Эта техника используется для создания эффекта, при котором создается впечатление быстрого воспроизведения кадров фильма. Эта техника полезна при создании комплексной анимации, где графические элементы каждого кадра должны быть различны.
Идентификация анимаций на временной шкале
Flash отличает tween-анимацию от покадровой анимации на временной шкале путем показа различных индикаторов в каждом кадре с содержимым.
На временной шкале появляются следующие индикаторы содержимого кадра:
ü Диапазон кадров с синим фоном указывает на анимацию движения. Черная точка в первом кадре означает, что диапазону анимации присвоен целевой объект. Черные ромбы указывают последний кадр и другие ключевые кадры свойств. Ключевые кадры свойств - это кадры, содержащие изменения, явно определенные пользователем. Можно выбрать тип отображаемых ключевых кадров свойств, щелкнув диапазон анимации правой кнопкой мыши и выбрав из контекстного меню пункт «Показывать ключевые кадры» → тип. По умолчанию Flash отображает все типы ключевых кадров свойств. Все остальные кадры диапазона содержат интерполированные значения, относящиеся к свойствам анимации целевого объекта.
ü Диапазон кадров с зеленым фоном указывает на использование слоя позы обратной кинематики (IK). Слои позы содержат каркасы IK и позы. Все позы отмечены на временной шкале черными ромбами. Flash интерполирует положения каркаса в кадрах между позами.
ü Пунктирная линия означает, что классическая анимация движения прервана или неполна, например пропущен последний ключевой кадр.
ü Черная точка означает отдельный ключевой кадр. Содержимое кадров светло-серого цвета после отдельного ключевого кадра остается точно таким же, без изменений. Эти кадры содержат вертикальную черную линию и пустой прямоугольник в последнем кадре диапазона.
Пример 1. Анимация перемещения объекта
1. Нарисовать в углу кадра какой-нибудь объект, например, прямоугольник.
Первый кадр шкалы времени видоизменился – в нем появилась жирная черная точка. Это признак того, что кадр стал ключевым. В ключевом кадре система фиксирует объект вместе со всеми его свойствами. Только в ключевом кадре можно редактировать свойства объекта.
2. Щелкнуть правой кнопкой мыши по этому кадру и в открывшемся контекстном меню выбрать команду Create Classic Tween (Создать классическую анимацию движение) .
3. Вокруг объекта появилась голубая рамка, в его центре – окружность с крестом.
4. Рисованный объект превратился в так называемый символ.
Кадры, расположенные между начальным и конечным ключевыми кадрами, окрасились в серый цвет. Между ключевыми кадрами появилась сплошная стрелка.
6. В последнем ключевом кадре (он должен быть выделен – подсвечен черным цветом) инструментом Selection Tool (Указатель) переместить объект в новое положение, например, в другой угол кадра.
Описание перемещения объекта закончено. Надо проверить, правильно ли все получилось. Отменить выделение объекта, щелкнув мышкой вне его границ. Нажать клавишу Enter – объект начал движение.
Для смены скорости движение объекта надо переместить конечный ключевой кадр: для ускорения движения – влево (уменьшая время, отведенное на перемещение), для замедления – вправо (увеличивая диапазон времени, в течение которого происходят изменения характеристик объекта).
Чтобы передвинуть ключевой кадр необходимо выполнить следующие действия:
ü выделить слой, на котором находится объект;
ü навести курсор мыши на ключевой кадр и зажать клавишу Ctrl (курсор превратится в двунаправленную стрелку);
ü нажать левую кнопку мыши и, не отпуская ее, передвинуть кадр.
Пример 2. Анимация изменения размера объекта
1. Нарисовать объект, например, прямоугольник и применить к нему изложенные выше правила анимации:
ü в первом ключевом кадре создать анимацию – Create Motion Tween (Создать анимацию движения) ;
ü в последнем ключевом кадре анимации – Insert Key frame →Zoom (Вставить ключевой кадр→Изменить масштаб) .
2. Выделить последний ключевой кадр и изменить размер объекта в 1,5 – 2 раза с помощью инструмента Free Transform Tool (Свободная трансформация)
3. Нажать клавишу Enter.
Пример 3. Анимация изменения цвета объекта
1. Создать новый файл, нарисовать объект и применить к нему правила создания анимации классического движения.
2. Находясь в конечном ключевом кадре, выделить объект, т.е. щелкнуть по нему левой кнопкой мыши при активном инструменте Selection Tool (Указатель)
В панели Properties (Свойства) появится поле Color Effect (Цветовой эффект).
Пример 4. Анимация изменения прозрачности объекта
1. Создать новый файл, нарисовать объект и применить к нему правила создания анимации движения.
2. Находясь в конечном ключевом кадре, выделить объект.
В панели Свойства появится поле Color Effect (Цветовой эффект).
![]() |
Если в раскрывающемся списке остановиться на варианте Alpha (Прозрачность), появится дополнительное поле, в котором можно задать значение прозрачности в процентах (100% - абсолютно непрозрачный цвет; 0% - полная прозрачность).
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).
Изменение положения центра вращения можно изменить инструментом "Свободное преобразование".
Заставим объект двигаться по кругу.
Вот и все. Просмотрим (протестируем) фильм. Если требуется, внесем изменения. Да, внесем. Причем такие: в некоторой точке наш объект должен уменьшиться, а потом вернуться в первоначальный размер. Для этого:
Можно создать анимацию движения двумя способами:
Для анимации движения с помощью команды контекстного меню выполняем следующие действия:
Но очень часто нельзя описать движение перемещением по прямой линии. При описанной анимации движения в любом случае наши объекты двигаются по отрезкам прямой между ключевыми кадрами (или кривую достаточно трудно задать). Если необходимо движение по сложной траектории, в принципе, можно разбить это движение на массу отдельных кусочков и… получить анимацию, близкую к покадровой. Впрочем, бывают такие ситуации, когда это единственный выход.
Но существует еще один способ - задать траекторию движения. Для этого используется специальный слой, управляющий движением: путеводитель, на котором рисуется линия - направляющая или траектория движения.
Чтобы заставить объект двигаться по определенной траектории, необходимо выполнить следующие действия.
Основные ошибки при направлении объекта по заданному пути две: учащиеся не привязывают объект во втором ключевом кадре или направляющая линия имеет мелкие (видимые только при большом увеличении) разрывы .
Выполним еще одно мини-упражнение - движение карандаша по бумаге. Для этого:
Обратите внимание: траектория пути объекта невидима в режиме тестирования фильма и не будет видна в готовом фильме. Если вы хотите видеть траекторию в фильме, ее надо скопировать и вставить на любой другой (видимый) слой (в меню редактирования существует команда "Вставить на место").
Вот и все! Основы автоматической анимации в программе Flash нами изучены. Осталось только познакомиться с более сложными приемами, чтобы стать настоящими профессионалами.
Во флеше очень просто создать анимацию предмета по траектории. Что для этого нужно:
1.Рисуем объект для анимации – розовый мячик. Сохраняем его в символ (Выделение – F8 )
2. Нам нужно нарисовать траекторию, по которой будет двигаться мяч. Для этого кликаем по слою с мячом и добавляем новый слой-путеводитель (Add Classic Motion Guide):
На таймлайне слой Guide выглядит как дуга, нарисовання пунктиром:
3. Создаем анимацию мяча в 2 кадра, кликнув правой по первому кадру – Create Classic Tween . Во втором кадре сдвиваем мяч вправо
Без траектории (как видим, в слое Guide отсутсвует графика, он пустой) – анимация выглядит как простое перемещение объекта слева - направо
4.На слое Guide карандашом рисуем волнообразную линию. Это и будет путь для нашей анимации:
Начальное положение:
Конечное положение:
Важно: Чтобы мяч «поймал» свою траекторию, его точка трансформации (кружок в центре) должна полностью совпадать с концами линии траектории и в первом, и в конечном кадрах. Иначе объект будет игнорировать наличие траектории и двигаться по прямой слева – направо. Поэтому стоит поправить или положение объекта, или форму линии траектории.
Вся работа по созданию фильма происходит с помощью панели Timeline (Шкала времени), изображение которой приводится ниже. Панель Timeline разделена на две части вертикальной линией, которую можно перемещать мышкой. Правая часть панели представляет собой так называемую "линейку кадров" — линейку, на которой располагаются символы кадров, имеющие вид небольших прямоугольников. Содержанием кадров являются сменяемые во времени статические картинки, появляющиеся на рабочем поле. Нумерация кадров представлена в верхней части линейки. Под линейкой кадров располагается "строка состояния".
Ключевые кадры
— это кадры, в которых размещаются статические картинки, "оживающие" при анимации. Нажатие клавиши
— основной инструмент при работе с анимацией во Flash. На ней отображается информация о слоях, о том какие кадры являются ключевыми, а какие генерирует Flash. С помощью временной шкалы можно понять, какие кадры содержат действия или метки. Она позволяет перемещать ключевые кадры и целые куски анимации.
Основные возможности временной шкалы:
Ниже приводится пример анимационного ролика, в котором в разных слоях со сдвигом в 25 кадров, помещён разный фон (пейзаж) с соответствующим текстовым блоком. Пейзаж получен заливкой фона растровым изображением Color Mixer->Bitmap с последующей обработкой инструментом Трансформатор заливок.
Это анимация, полностью составленная из ключевых кадров. Т.е. Вы сами определяете, как содержимое кадра, так и его "длительность" (т.е. сколько таких статических кадров будет занимать изображение).
Перед тем как нарисовать очередной кадр надо вставить пустой ключевой кадр (
К достоинствам этого способа можно отнести:
К недостаткам можно отнести следующее:
Создадим многослойный фильм с пошаговой анимацией «Жизнь цветка». 1-й слой — рамка, 2-й слой — горшок, 3-й слой — цветок. Можно 3-й слой представить тремя слоями: лист, стебель, соцветие.
Горшок и рамка находятся всё время перед нашими глазами, а цветок за 25 ключевых кадров успевает вырасти и увять. В слое «цветок» каждый кадр отличается от предыдущего, но можно сделать изменение состояния цветка чере один кадр.
Публикация ролика происходит с помощью File->Publish Setting. На вкладке Formats выбираются варианты публикации, их можно выбрать несколько, на соответствующих вкладках задаются параметры для выбранного варианта публикации, затем нажимается кнопка Publish. При этом, созданные файлы сохраняются в той же папке, что и исходный файл с расширением.fla. В нашем примере для публикации выбран вариант Gif-анимированный файл, как и во всех последующих примерах.
Второе задание попробуйте выполнить самостоятельно, используя ниже приведённый алгоритм. Это будет создание анимации «Движущийся автомобиль»:
В качестве ещё одного самостоятельного задания можно предложить создать пошаговую анимацию "Горение спички":
Во Flash существует два варианта построения промежуточных изображений — motion tweening (построение анимации на основе модификации символов) shape tweening (построение анимации на основе изменения формы). Эти способы отличаются в корне.
При таком способе анимации задают начальное положение, цвет, размеры, ориентацию и конечные параметры, а программа сама осуществляет это движение. При этом способе анимации Flash автоматически строит промежуточные кадры между ключевыми кадрами, заданными вами. Это означает, что Вы рисуете объект, потом на другом кадре производите изменения, о которых мы поговорим ниже, и просите Flash рассчитать те кадры, которые лежат между этими двумя ключевыми кадрами. Он выполняет эту работу, и Вы получаете плавную анимацию.
Скорость и плавность анимации зависят от количества кадров, которые отведены под движение и скорости Flash фильма (movie). Скорость фильма можно изменить следующим образом: Modify->Movie…,
Рассмотрим анимацию с построением промежуточных кадров (tweened motion). Это наиболее часто используемая техника анимации во Flash. В этом случае анимация строится на основе модификации символов, т.е. объектом анимации является символ. Как и в анимации shape tweening, на каждый объект в один момент времени, нам нужен один слой. На этом слое должен находиться один символ, с которым и будут происходить все изменения.
Включить motion tweening можно несколькими способами (а отключить, к сожалению, только одним). Для того, чтобы включить motion tweening, нужно сделать активным начальный кадр вашего перехода, затем, нажав правую клавишу мыши, в контекстном меню выбрать Create motion tween (это же можно сделать, выбрав Insert->Create motion tween). Универсальный способ включения/выключения motion tweening — с помощью панели Frame, выбрав Motion в поле Tweening. Там же можно контролировать параметры анимации:
В случаях, когда количество кадров основной сцены не бывает кратным количеству кадров символа, флажок Synchronize позволяет синхронизировать эти две анимации.
Слои, которые содержат кривую, по которой должен двигаться объект называются направляющими слоями (guide layers) (т.е. они содержат траекторию движения объекта). Для того, чтобы добавить направляющий слой, нужно Выбрать слой, на котором находится ваш символ; затем Нажав правую клавишу мыши, в контекстном меню выбрать Add Guide. При этом исходный слой становится направляемым (guided layer). Это далеко не единственный способ создать направляющий слой (guide layer). Любой слой можно сделать направляющим, указав это в его свойствах, или направляемым, перетащив нужный слой мышкой, так, чтобы он находился под направляющим.
Далее, нужно нарисовать траекторию движения. Траекторией может быть любая кривая, не являющаяся областью заливки. Всё! Управляющий слой готов. Вы можете его запретить для редактирования, чтобы было удобней работать, а в дальнейшем и вовсе сделать его невидимым.
Теперь, чтобы использовать этот слой, нужно взять символ за центральную точку (это такой маленький кружочек) и перетащить ее на траекторию. Вы почувствуете, когда символ "зацепится" за нее, и увидите, как он будет по ней скользить.
Далее все по знакомому сценарию — ключевые кадры, включаем motion tweening… Если нужно, чтобы объект поворачивался согласно траектории, а не просто двигался по ней, то на панели Frame нужно включить флажок Orient to path.
Motion tweening позволяет использовать различные цветовые эффекты применительно ко всему символу. Эта возможность отсутствует в shape tweening. Для того, чтобы применить эффект к символу, нужно выделить этот символ, и на панели эффектов (Windows ->Panels ->Effects), выбрать нужный эффект, установив яркость, цветовое смещение, оттенок.
Создайте самостоятельно очень простой пример анимации движения шара по кругу, пользуясь ниже приведённым алгоритмом:
Следующий пример несколько сложнее — это создание анимации движения букв текста:
Анимация формы — это плавное изменение объекта анимации на рабочем поле. Под объектом понимаем здесь не группу или текстовый блок, как при анимации движения, а обычный многоцветный рисунок, который может состоять из нескольких фрагментов. Более того, количество таких фрагментов в начале и в конце анимации может быть различным.
В процессе анимации формы рисунок может распадаться на песколько независимых фрагментов, каждый из которых постепенно преобразится во что-то неожиданное. Или, наоборот, несколько независимых изображений, находящихся на рабочем поле, в процессе анимации, постепенно меняя свой облик (размеры, цвет, форму), становятся частью единого изображения. Скажем, нужно, чтобы квадрат плавно превратился в круг, или силуэт кролика плавно перетёк в силуэт волка. В этих случаях используется shape tweening.
Как обычно, Вы задаете два ключевых кадра на некотором расстоянии друг от друга. В этом варианте анимации есть жесткое ограничение: анимация должна занимать отдельный слой и быть единой нарисованной фигурой (не должно быть групп или символов).
После того как есть два ключевых кадра, надо сделать активным первый из них (просто переходите на него), и выбирать на панели Frame (Windows->Panels->Frame,
При использовании shape tweening необходимо задать два параметра:
Последний инструмент в анимации shape tweening — контрольные точки (shape hints, дословно — подсказки для форм). Это точки, с помощью которых Вы помогаете Flash правильно осуществить переход. Без них не обойтись в случае сложных форм.
Пользоваться ими очень легко. На первом ключевом кадре (с которого начинается анимация) Вы добавляете контрольную точку (Modify->Transform->Add shape hint, Удалить все точки можно с помощью Modify->Transform->Remove All Hints. Удалить же единственную точку можно, нажав на ней правую кнопку мыши, и в контекстном меню выбрав Remove Hint.
Так как контрольные точки обозначаются буквами латинского алфавита, то их может быть максимум 27. Вариантов перехода из одной формы в другую может быть множество, поэтому анимация может пойти и по тому пути, который устроит Вас в меньшей степени. Даже преобразование такой простой геометрической фигуры, как прямоугольник, расположенный вертикально, в такой же прямоугольник,
но расположенный горизонтально, может происходить по разному. Например, в процессе такого преобразования фигура может побывать в форме овала или даже круга. Для контроля анимационного процесса нужно постараться упростить анимацию, разделив рисунки на несколько
независимых фрагментов, расположенных в разных слоях, но одновременно участвующих в анимации. Более координальным приёмом является применение меток формы, о которых говорилось выше. Если вам нужно отключить shape tweening, в панели Frame выберите Tweening: None. Ниже приводится на этот способ анимации пример «превращения» слона в овцу и обратно. Попробуйте самостоятельно создать анимацию формы "превращения" змеи в орла и обратно: Часто в процессе анимации необходимо, чтобы объект двигался не по прямой, а по заданной траектории. Анимация в этом случае создаётся обычным образом, а траектория рисуется в отдельном слое. Слой траекторий может обслуживать несколько разных анимаций, каждая из которых размещена в отдельном слое,
но все эти слои с анимацией должны располагаться под слоем траекторий. Для рисования траектории можно использовать различные инструменты: Карандаш, Кисть, Перо, Эллипс, или Прямоугольник.
Чтобы привязать движущийся объект к этой траектории нужно в начальном и конечном ключевых кадрах анимации просто перенести этот элемент на траекторию.
При этом в панели Properties следует подкорректировать параметры анимации таким образом, чтобы был включён флажок Snap (привязать). Для этого нужно предварительно выделить первый ключевой кадр анимации,
полезно также выбрать команду View/Snap to Objects. Для примера, создадим ролик «Полёт бабочки над цветком», по ниже приведённому алгоритму: Этот слой призван закрывать и делать невидимой часть изображения, расположенного непосредственно под ним. Если слой-маска не содержит никакого изображения, то он полностью закрывает
собой (маскирует) расположенный ниже и связанный с ним слой, который называется маскируемым слоем
. Если же в слое-маске что-то нарисовано, то любая заливка этого рисунка становится прозрачной частью слоя.
Если анимировать изображение, созданное в слое-маске, то прозрачная часть маски будет перемещаться по экрану. Слой-маска может маскировать несколько слоёв. Сделать обычный слой маскируемым можно,
изменив его положение в стеке слоёв. Нужно просто перенести мышкой обычный слой под слой-маску.
Анимация в этом случае может быть двух видов. Либо анимация объектов, расположенных на маскируемых слоях. Либо анимация изображения, находящегося на слое-маске. Пример создания эффекта постепенного появления текста на экране буква за буквой. Для этого используем анимацию движения изображения, находяшегося в слое-маске, используя следующий алгоритм: Ниже приводится gif-анимированный файл, в котором используется анимация формы букв текста "С Новым Годом", а затем появившийся текст "стирается", с использованием слоя-маски, прямоугольника с градиентной заливкой,
поэтому получается эффект "переливчатости" букв. Фоном является фрагмент растровой графики. Следующий пример демонстрирует «вырастание» из точки слова, где в качестве маскируемого слоя используется импортированная растровая графика, а в слое-маске создана анимация, в которой из точки вырастает слово, а затем оно опять уменьшается.
В данном примере также используется анимация формы. Кнопка — специальный вид символа, предназначенный для реагирования на действия пользователя, например, нажатия на саму кнопку, её клавишный аналог или активную область в фильме.
Временная шкала кнопки содержит следующие четыре кадра: Если необходимо создать несколько одинаковых кнопок, то в этом случае достаточно создать только один образец кнопки. А далее нанести на него необходимые надписи, менять цвет или размер.
Если кнопка должна содержать анимированные объекты, для этого необходимо заранее создать символы Movie clip, а затем просто разместить их в соответствующем кадре кнопки. В качестве примера создадим кнопку со встроенной анимацией по ниже приведённому алгоритму: Публикация данного объекта выполнена в режиме HTML с указанием на соответствующий swf-файл. Создадим кнопки, управляющие работой слайд-шоу: On (release) { GotoAndStop(k); — цифра в скобках указывает на номер соответствующего кадра. On (press) { GotoAndStop("begin)"; On (press) { Root.prevFrame (); On (press) { Root.nextFrame (); On (press) { GotoAndStop("end"); Ниже приводится результат нашей работы: При создании анимаций с использованием языка ActionScript часто используется трёхкадровый цикл. В первом кадре (подготовка) записываются начальные данные, во втором кадре
размешаются элементы тела цикла, а втретьем кадре пишется команда вернуться во второй кадр gotoAndPlay (2);. Работа трёхкадрового цикла заключается в попеременном просмотре
кадров, участвующих в цикле, до тех пор пока не будет выполнено условие выхода из цикла. Рассмотрим использование трёхкадрового цикла на примере создания движения маски. Наш фильм будет состоять из трёх слоёв:
<маскируемый клип>.setMask (<клип-маска>) При каждом обращении ко второму кадру клип Mask будет поворачиваться на 2°. Перед глазами пользователя вращается окно, имеющее форму клипа Mask,
сквозь которое видна часть клипа Masked. Научимся управлять цветом экземпляра библиотечного клипа. Создадим фильм, в котором на фоне восходящего солнца разнонаправленно вращаются звёзды, изменяя свой цвет. Экземпляр объекта Color создаётся с помощью конструктора в среде ActionScript и имеет следующий формат: <имя экземпляра объекта Color> = new Color (<имя экземпляра клипа>) OnClipEvent (load) { Star1Color = new Color(this); ColorTransform = {rb:0, gb:255, bb:255}; G = 255; B = 255; Step = 5; OnClipEvent (enterFrame) { G -= step; ColorTransform.gb = g; If (r >=0 && b == 255 && g == 0) { R += step; ColorTransform.rb = r; If (g == 0 && r == 255 && b B -= step; ColorTransform.bb = b; If (b == 0 && r == 255 && g >=0) { G += step ; ColorTransform.gb = g; If (g == 255 && b == 0 && r R -= step; ColorTransform.rb = r; If (r == 0 && g == 255 && b>=0) { B += step; ColorTransform.bb = b; Star1Color.setTransform(colorTransform); This._rotation -= 3; Кнопки и меню — это одна из самых главных частей сайта и любого другого приложения, где важна интерактивность. Создадим Flash-меню. on (release) {getURL ("1.html", "_self");}При использовании shape tweening могут модифицироваться следующие параметры фигуры:
Направляющий слой и слой траекторий
Маскируемый слой и слой-маска
Создание кнопок
Основные типы действий:
Алгоритм создания кнопки (алг1):
Алгоритм создания кнопки для перехода на указанную Web-страницу:
Алгоритм создания кнопки для остановки клипа:
Создание сценариев с помощью языка ActionScript