Создание анимации в программе Macromedia Flash (стр. 4 )

Создайте надпись и преобразуйте ее в графическое изображение, дважды выбрав в меню Modify команду Break Apart. Выберите инструмент Paint Bucket (Заливка) и залейте выделенные буквы градиентным заполнением. Возможны 2 варианта заливки – при выключенном (а) или включенном (б) модификаторе Lock Fill. Затем с помощью инструмента Ink Bottle (Чернильница) создайте контур вокруг букв.

г) Искажение текста

Создайте какую-нибудь надпись и преобразуйте ее в графическое изображение, дважды выбрав в меню Modify команду Break Apart. Выберите команду Modify – Transform – Envelope. Ваша надпись будет окружена черной рамочкой со множеством маркеров, позволяющих плавно изменить очертания фигуры. Попробуйте придать надписи такой же вид, как на рисунке (каждое слово обрабатывается отдельно).

IV. Анимация в среде Macromedia Flash

Типы кадров

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

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

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

Команды для работы с кадрами. Все команды выбираются из контекстного меню кадра на временной шкале.

Действие	Команда	Горячие клавиши
Вставка обычного кадра	Insert Frame (Вставить кадр)	F5
Вставка ключевого кадра	Insert Keyframe (Вставить ключевой кадр)	F6
Вставка пустого ключевого кадра	Insert Blank Keyframe (Вставить пустой ключевой кадр)	F7
Очистка ключевого кадра	Clear Keyframe (Очистить ключевой кадр)	Alt+Backspace
Удаление кадров	Remove Frame (Удалить кадры)	Shift+F5
Выделение всех кадров	Select All Frames (Выделить все кадры)	Ctrl+Alt+A
Вырезание кадров	Cut Frames (Вырезать кадры)	Ctrl+Alt+X
Копирование кадров	Copy Frames (Копировать кадры)	Ctrl+Alt+C
Вставка кадров из буфера обмена	Paste Frames (Вставить кадры)	Ctrl+Alt+V

Типы анимации

В программе Flash доступны два вида анимации:

·  Автоматическая анимация - автоматическое создание промежуточных кадров между двумя ключевыми;

·  Ручная анимация - прорисовка каждого кадра фильма без использования автоматической анимации)

Автоматическая анимация бывает трех видов:

·  motion tweening – анимация движения;

·  shape tweening – анимация изменения формы или морфинг;

·  встроенные эффекты временной шкалы – готовые анимационные эффекты, предлагаемые разработчиками программы Flash.

Ручная (покадровая) анимация

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

Рассмотрим процесс создания ручной анимации на примере.

Улыбающийся Смайлик (рис.36).

а)	б)	в)	г)	д)
Рис.36 Содержимое ключевых кадров

1.  Создайте новый фильм с именем Smail.fla

2.  В первом кадре нарисуйте рожицу (а) при помощи инструментов Oval (овал) и Line (Линия). Обязательно используйте режим рисования Objekt Drawing!

3.  Выделите на временной шкале следующий кадр. Сделайте его ключевым (нажмите клавишу F6).

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

5.  Повторите действия 3 и 4 для третьего, четвертого и пятого ключевых кадров. Рис. в, г, д.

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

7.  Посмотрим, что же у нас получилось. Мы можем посмотреть результат не выходя из рабочей среды Flash. Для этого в меню Control (Управление) выберите Play. Можно также посмотреть, как будет выглядеть ваш ролик при проигрывании с помощью Flash – плеера, в формате SWF. Для этого в меню Control (Управление) выберите Test Movie. При этом в той же папке, где был сохранен файл Smail.fla появится файл Smail.swf.

Практическая работа «Создание фильма с покадровой анимацией»

Задание: создайте следующие фильмы с применением метода покадровой анимации:

а) Вечернее небо

На вечернем небе одна за другой зажигаются звезды.

б) Новогодняя елка

Украшаем новогоднюю елку – игрушки, огоньки появляются один за другим. Изображение елки и елочных игрушек мы уже создали, выполняя Практическую работу «Создание и редактирование градиентов». Чтобы использовать их в новом фильме, откройте файл с этими изображениями. Выделите на рабочем поле изображение елки (или игрушки), выберите в контекстном меню команду Copy (Копировать), затем перейдите в новый фильм, щелкните на рабочем поле правой кнопкой мыши и выберите в контекстном меню команду Paste (Вставить).

Рис. 37. Вечернее небо	Рис. 38. Новогодняя елка

в) Схема бисероплетения

В каждом ключевом кадре добавить либо бусину, либо кусочек нити. На рисунке представлены 7, 12, 16 и 20 ключевые кадры. Для того, чтобы схема демонстрировалась не очень быстро, настройте частоту показа кадров = 1 кадр в секунду. Для этого щелкните мышью по серой области экрана (за пределами сцены) и в инспекторе свойств измените значение Frame Rate (частота кадров).

а) 7 ключевой кадр	б) 12 ключевой кадр	в) 16 ключевой кадр	г) 20 ключевой кадр
Рис. 39. Схема бисероплетения

Символы

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

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

- символ хранится в рабочей библиотеке документа или в библиотеке программы, а не в кадре фильма;

- в фильме можно разместить множество копий выбранного символа, доступных для независимого редактирования, которые называются экземплярами символа.

Символы бывают трех типов: графический (graphic) – изображение, кнопка (button) – интерактивный элемент, который реагирует на нажатие мыши, символ-клип (movie clip) – фрагмент анимации, имеющий собственную временную шкалу. Символ-клип может иметь звуковое сопровождение и содержать сценарий на ActionScript. Анимация в клипе выполняется в цикле и не связана с основным фильмом. Клип может состоять из других вложенных клипов, содержать кнопки. (Пример символа-клипа: пусть действие вашего фильма происходит в помещении, где висят часы. Стрелки на часах вращаются с одинаковой скоростью, независимо от того, что происходит в фильме. Вот это самое вращение стрелок вокруг циферблата можно оформить как символ-клип.).

Экземпляр символа можно перемещать в фильме и изменять его некоторые свойства; это не приводит к изменению исходного символа. Но если вы измените исходный символ (т. е. тот, что хранится в библиотеке), то все его экземпляры в вашем фильме тоже изменятся!

Создание символа

1. Для того, чтобы создать символ (любого типа) «с нуля», нужно выполнить команду: Insert à New Symbol (Вставить à Новый символ), после чего откроется диалоговое окно в котором нужно указать тип символа и его имя. Затем вам будет предложено поработать в режиме редактирования символа – создать новый символ в отдельном окне.

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

2.  Чтобы преобразовать изображение в графический символ выделите объект или объекты, которые вы хотите преобразовать в символ и выполните команду: Modify à Convert to Symbol (Изменить à Преобразовать в символ), или нажмите клавишу F8. Появится точно такое же окно, как и в предыдущем случае, где необходимо указать тип и имя символа. Выберите тип символа Graphik. Он немедленно появится в библиотеке фильма, рядом с его названием вы увидите такую пиктограмму:

3.  Чтобы преобразовать анимацию в символ - клип выделите на временно шкале все кадры анимации (если фильм имеет несколько слоев, то на всех слоях) и выберите в контекстном меню команду Copy Frames (Копировать кадры). Затем выполните команду -Modify à Convert to Symbol (Изменить à Преобразовать в символ) или нажмите клавишу F8. Выберите тип символа Movie clip. В библиотеке фильма появится ваш символ, рядом с его названием вы увидите пиктограмму, но он будет содержать только первый кадр анимации. Найдите в списке объектов библиотеки только что появившийся символ и дважды щелкните мышью по его пиктограмме. Вы попадете в окно редактирования символа. Выделите на временной шкале первый кадр и в контекстном меню выберите команду Paste Frames. Теперь символ содержит всю необходимую анимацию.

Вернуться к рабочему полю можно, щелкнув по имени сцены в левом углу панели Edit Bar.

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

Упражнения

1) преобразуйте улыбающийся смайлик из предыдущего примера в символ – клип.

2) вернемся к практической работе «Создание фильма с покадровой анимацией». Сделайте задания под буквами а) и б) в новых фильмах, но теперь предварительно преобразуйте изображение звездочки и изображение каждой елочной игрушки в символ.

Практическая работа «Создание символа-клипа
и использование его множественных экземпляров»

Задание 1: Создайте фильмы, используя множество копий (экземпляров) каждого символа – клипа.

а) Фрагменты новогодней открытки

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

а) изображение новогодней елки;

б) рамку для открытки;

а) новогодняя елка	б) рамка для открытки
Рис. 40 Фрагменты новогодней открытки

б) Лес

Рис. 41. Лес

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

Изменить размер экземпляра символа можно с помощью инструмента Free Transform (также, как мы делали это с обычными изображениями).

Чтобы изменить яркость (оттенок, прозрачность) экземпляра символа или все эти параметры сразу, нужно:

- поместить на рабочее поле экземпляр символа;

- выделить его, если он не выделен;

- в инспекторе свойств в раскрывающемся списке Color выбрать параметр: Brightness (яркость), Tint (оттенок), Alpha (непрозрачность), Advanced (расширенная настройка, все параметры сразу). В зависимости от выбранного параметра вы получите возможность изменить качества экземпляра символа: для яркости и прозрачности - Brightness Amount и Alpha Amount (количество (интенсивность) яркости и непрозрачности соответственно, выраженное в %). Для настройки оттенка (Tint) вы должны выбрать цвет и его интенсивность в % (рис.42).

Рис.42 Настройка оттенка символа

Вложенная анимация

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

Универсальный способ создания вложенной анимации таков: сначала постройте по привычной схеме ту анимацию, которая затем будет участвовать в более сложном движении – внутреннюю анимацию. (Например, автомобиль, у которого крутятся колеса). Затем преобразуйте эту анимацию в символ-клип. Теперь он появился в библиотеке, и вы сможете перенести его на рабочее поле и использовать как обычный объект - например, создать анимацию. (В нашем случае – заставить автомобиль перемещаться по экрану по какой – либо траектории.)

Обратите внимание: когда происходит настройка внутренней анимации, вы «находитесь» не внутри фильма, а внутри символа,
который сам содержит внутреннюю шкалу времени. Это видно из надписи под шкалой времени: обычно там указано лишь название сцены (Scene), а теперь после названия сцены указывается и название символа.

Дважды щелкнув по созданному символу, вы переместитесь «внутрь» него и получите возможность изменить его вложенную анимацию.

Практическая работа «Создание символа - клипа
с вложенной анимацией»

Задание: создайте следующие символы - клипы с использованием вложенной анимации (рис. 43):

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

Автоматическая анимация

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

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

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

·  расположение на рабочем поле;

·  параметры трансформации, включая масштаб, угол поворота и углы наклона объекта;

·  для символов - яркость, оттенок и уровень непрозрачности объекта.

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

Ошибки анимации движения возникают в следующих случаях:

- не создан завершающий ключевой кадр;

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

Порядок создания автоматической анимации движения

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

2.  Создайте завершающий ключевой кадр, выделив на временной шкале нужный кадр и нажав кнопку F6. Между первым и завершающим ключевыми кадрами образовалась последовательность кадров необходимой длины (чем меньше кадров в последовательности, тем быстрее будет происходить трансформация).

3.  Измените положение цвет или форму (или все вместе) в этом ключевом кадре.

4.  Откройте инспектор свойств и в поле Tween выберите тип автоматической анимации Motion. В поле Ease можно установить уровень изменения скорости процесса раскадровки. В поле Rotate (Поворот) можно выбрать ориентацию возможного поворота объекта и количество поворотов объекта.

Для символов при анимации движения возможно плавное изменение яркости, прозрачности и оттенка объекта. Для этого выделите символ, находящийся в первом или завершающем ключевом кадре и в инспекторе свойств в поле Color (Цвет) установите тип изменения (Alpha – прозрачность; Brightness – яркость; Tint – Оттенок) и количественные характеристики изменения.

Практическая работа «Создание фильма
с автоматической анимацией движения»

Задание: создайте фильмы с использованием автоматической анимации движения:

а) Звездное небо

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

б) Звездопад

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

в) Уплывающий вдаль корабль

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

г) Падающий снег

Для создания эффекта снегопада создадим прямоугольник с большей высотой, чем у сцены, внутри него нарисуем снежинки (Как нарисовать снежинку – см. Практическую работу «Создание рисунков с использованием различных преобразований графических объектов») и будем медленно двигать его сверху вниз. При проигрывании ролика в зацикленном режиме полотно со снежинками будет перемещаться от первого кадра (положение а рис.44) до последнего
(положение б рис.44) вновь и вновь, благодаря чему будет создан
эффект непрерывного снегопада.

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

а)	б)
Рис. 44. Положение полотна со снежинками относительно сцены в первом и последнем кадрах анимации

Чтобы добиться непрерывности движения снежинок, будем располагать снежинки в прямоугольнике особым образом. Разделим прямоугольник на три части и добьемся того, чтобы узор в верхней части полотна, равной по размеру сцене (400*500 пикселов), в точности совпадал с узором в его нижней части такого же размера. Тогда в первом и последнем кадрах изображение будет полностью совпадать. Если запустить такой ролик, то в момент перехода от последнего кадра к первому все снежинки замрут на время длительности одного кадра (1/12 секунды), а потом опять полетят вниз. Если сделать полотно со снежинками не только больше по высоте, чем сцена, но и шире ее, получится движение снежинок наискосок, сверху вниз и слева направо.