Создание анимационных эффектов в Macromedia Flash
Анимация во Flash основана на изменении свойств объектов, используемых в “мультике”. Например, объекты могут исчезать или появляться, изменять свое положение, форму, размер, цвет, степень прозрачности и т. д.
Во Flash предусмотрено три различных механизма анимирования объектов:
покадровая (“классическая”) анимация, когда автор сам создает или импортирует из других приложений каждый кадр будущего “мультика” и устанавливает последовательность их просмотра;
автоматическое анимирование (так называемая tweened-анимация), при использовании которой автор создает только первый и последний кадры мультипликации, а Flash автоматически генерирует все промежуточные кадры; различают два вида tweened-анимации: анимация, основанная на перемещении объекта (motion animation), и анимация, основанная на трансформации (изменении формы) объекта (shape animation);
анимация на основе сценариев; сценарий представляет собой описание поведения объекта на собственном языке Flash, который называется ActionScript; синтаксис этого языка напоминает синтаксис других языков сценариев, используемых в Web-публикациях (например, JavaScript и VBScript).
Каждый из этих механизмов имеет как достоинства, так и недостатки. В частности, tweened-анимация обладает двумя несомненными достоинствами:
во-первых, автор избавлен от необходимости создавать каждый кадр в отдельности;
во-вторых, для воспроизведения такого “мультика” Flash достаточно хранить только первый и последний кадры, что обеспечивает значительное уменьшение объема такого фильма.
Вместе с тем, tweened-анимация пригодна для создания лишь наиболее простых сюжетов, в которых свойства объектов изменяются равномерно.
С помощью сценариев на ActionScript можно описать достаточно сложное поведение объектов, однако... Однако для этого нужно изучить язык ActionScript.
Другими словами, прежде чем приступить к созданию собственного “мультика”, следует определиться с выбором механизма его реализации.
Шкала времени
Если в рабочей области редактируется графическое содержимое, то в шкале времени фактически пишется сценарий флэш-фильма.
Линейка - отображает все кадры по возрастающей. Числом отмечен каждый пятый кадр.
Указатель шкалы времени - выполняет ту же функцию, что и инструмент Стрелка в рабочей области. Он выделяет кадр, для последующей с ним работы.
Чтобы выделить конкретный кадр, щелкните по нему левой клавишей мыши.
Типы кадров
Наша анимация состоит из последовательности кадров. Кадр может быть как составленным вручную, так и сгенерированным Flash. Это относится к кадрам одного слоя. Так как сцены Flash состоят обычно из нескольких слоев, то итоговые "многослойные" кадры, могут содержать, как сгенерированные, так и "самодельные" слои.
Ключевой кадр - кадр доступный для обработки. В анимации этот кадр будет отображаться так, как нарисует пользователь. На временной шкале ключевой кадр отображается чёрным кружочком, если в нём есть изображение, и белым, если нет никакого рисунка.
Обычный кадр - кадр, который будет отображаться в анимации, но пользователь непосредственного участия в прорисовке кадра не принимал. Он будет таким же, как ключевой кадр слева или, если была проведена раскадровка, то кадр автоматически сформированный программой.
Раскадровка - автоматический переход изображения из одного ключевого кадра в другой.
Кадр-фантом - пустая клетка на временной диаграмме, в которой может быть установлен либо ключевой кадр, либо обычный кадр.
По кадровое формирование изображения.
Самое простое формирование анимации - это по кадровое изменение рисунка, т.е. на каждом кадре изменяется положение объекта, его характеристики, или добавляются новые и удаляются старые объекты.
Элементарные операции с кадрами:
Действие | Контекстное меню | Комбинация клавиш | Примечание |
Вставить пустой ключевой кадр | Вставить пустую клавиатуру | F7 | |
Ключевой кадр, повторяющий содержание предыдущего | Вставить клавиатуру | F6 | Если перед вставляемым кадром уже был ключевой кадр, содержащий объекты, то они будут скопированы в создаваемый кадр. |
Очистить ключевой кадр | Очистить клавиатуру | Shift-F6 | |
Вставить обычный кадр | Вставить кадр | F5 | Вставляя обычный кадр (не ключевой), увеличиваем время анимации или время отображения предыдущего ключевого кадра. |
Удалить кадр | Стереть кадры | Shift-F5 | |
Покадровая анимация
Покадровая анимация – это анимация, полностью составленная из ключевых кадров. Т.е. вы сами определяете, как содержимое кадра, так и его "длительность" (т.е. сколько таких статических кадров будет занимать изображение).
Достоинства: Покадровая анимация дает вам, в некотором смысле, больший контроль над анимацией, и если вы опытный аниматор, вы можете выгодно ею пользоваться. Это единственный способ организовать смену абсолютно независимых изображений – слайд-шоу (например, создавая обычный баннер средствами Flash).
И все остальное, что вытекает из возможности прорисовывать каждый кадр вручную.
Недостатки: Покадровую анимацию сложно модифицировать. Особенно, если это не дискретный набор изображений, а связанная анимация. Приходится модифицировать все кадры. На деле, у опытных Flasher-ов, такая ситуация практически не встречается.
Покадровая анимация занимает достаточно большой объем, так как приходится хранить информацию о каждом кадре.
Создание покадровой анимации
Рассмотрим технологию покадровой анимации на примере создания анимированного заголовка "Анимация во Flash".
1. Выберите Документ Flash.
2. Выберите инструмент Стрелка и кликните левой клавишей мыши в первом кадре шкалы времени (Выбор кадра).
3. Выберите инструмент Текст и задайте параметры его модификаторов (тип шрифта, размер, цвет и пр.).
4. Кликните левой клавишей мыши в левом верхнем углу сцены, чтобы установить текстовую метку.
5. На клавиатуре наберите заглавную букву А.
6. Для того, чтобы в анимации буквы в разных кадрах располагались на одной линии, воспользуемся инспектором объектов. Для этого выберите инструмент Стрелка и кликните левой клавишей мыши на букве А. Чтобы оптимизировать площадь заголовка, задайте нулевые координаты в строках X и Y. Буква А будет размещена в самой верхней левой точке основной сцены.
7. Для формирования следующего кадра, в котором будет появляться новая буква, необходимо выполнить следующие действия: Кликните левой клавишей мыши в следующем пустом кадре шкалы времени. (Он станет темным).
8. Выберите Вставить клавиатуру или просто нажмите на клавиатуре клавишу F6. В кадре шкалы времени появится черная точка.
9. Выберите инструмент Текст и если это необходимо задайте новые параметры его модификаторов (тип шрифта, размер, цвет и пр.). Для лучшего усвоения технологии покадровой анимации будем рассматривать пример без изменения параметров модификаторов текста.
10. Кликните левой клавишей мыши рядом с предыдущей буквой, чтобы установить текстовую метку.
11. На клавиатуре наберите следующую букву.
12. Выберите инструмент Стрелка и кликните левой клавишей мыши на новой букве. С помощью этого же инструмента букву, как графический объект, можно перемещать.
13. Задайте нулевую координату в строке Y, для того, чтобы все буквы располагались на одной прямой.
14. Повторяйте 8-13 операции для каждой новой буквы в заголовке. Для анимации такого заголовка потребуется 15 кадров.
Тестирование анимации
Для того чтобы протестировать полученную анимацию:
1. Выберите в главном меню Регулировака – Проверить клип или просто нажмите на клавиатуре клавиши Ctrl-Enter.
2. Просмотрев анимацию, нажмите левой клавишей мыши в правом верхнем углу окна тестирования кнопку Закрыть окно (Х).
Формирование оптимальной сцены анимации
Перед публикацией в Web обрежем все лишнее:
1. Выберите в главном меню Преобразовать – Документ или на клавиатуре нажмите клавиши Ctrl+J.
2. В открывшемся окне Характеристики документа нажмите на клавишу Содержимое.
В результате сцена примет размеры содержимого анимации.
3. Сохраните файл
Анимация с построением промежуточных кадров
Гораздо эффективнее другой тип анимации, когда создаются только начальный и конечный кадры некоторого фрагмента, а все промежуточные кадры система достраивает сама. Такой тип анимации называется автоматический (tweened-анимация).
При этом способе анимации Flash автоматически строит промежуточные кадры между ключевыми кадрами, заданными вами. Это означает, что вы рисуете объект, потом на другом кадре производите изменения и просите Flash рассчитать те кадры, которые лежат между этими двумя ключевыми кадрами. Он выполняет эту работу, и вы получаете плавную анимацию.
Скорость и плавность анимации зависят от количества кадров, которые вы отводите под движение и скорости вашего Flash фильма. Скорость фильма можно изменить здесь: Выберите в главном меню Преобразовать – Документ или на клавиатуре нажмите клавиши Ctrl+J. В открывшемся окне Характеристики документа параметр Частота смены кадра задает количество кадров в секунду. Для качественной анимации скорость должна быть не меньше 25-30 кадров в секунду.
Плавность и длительность задается количеством кадров, отведенных на анимацию (ее фрагмент). Например, если скорость вашего фильма - 30 кадров/сек., и вам нужно совершить перемещение, скажем, самолетика, из одного угла картинки - в другой за 2.5 секунды, то на это движение вам нужно отвести 75 кадров.
Во Flash существует два варианта построения промежуточных изображений - motion tweening (анимация движения) и shape tweening (построение анимации на основе изменения формы). Эти способы отличаются в корне. Первый используется чаще всего, т.к. с помощью него можно построить подавляющее большинство анимации. Второй применяется в случаях, когда нужно плавное изменение формы.
Анимация перемещения объекта
1. В левом верхнем углу нарисуйте квадрат.
2. Первый кадр шкалы времени видоизменился – окрасился в бледно-красный цвет, и в нем появилась жирная точка – признак того, что кадр стал ключевым.
3. Вызовете контекстное меню и выберите “Создать промежуточное изображение”.
4. Вызовете контекстное меню в кадре диаграммы времени, где предпочитаете закончить анимацию и выберите команду “Вставить клавиатуру”
5. С помощью инструмента “Средства Выделения” (V) переместите объект в новое положение, но в начале проверьте, что вы находитесь в последнем ключевом кадре.
6. Отмените выделение объекта, и нажмите Enter – объект пришел в движение.
7. Для замедления движения надо переместить влево конечный ключевой кадр, для ускорения – вправо. Выделите слой.
8. Нажмите и не отпускайте клавишу Ctrl. Наведите курсор на ключевой кадр – указатель превратился в двунаправленную стрелку.
9. Нажмите кнопку мыши и, не отпуская ее, передвигайте кадр.
10. Сохраните файл
Используемая литература
Вовк Е.Т. Информатика: уроки по Flash. – М.: КУДИЦ-ОБРАЗ, 2005, - 176 с.
П. Лапин. Самоучитель Flash MX. – Спб.: Питер, 2003. – 368 с.