Технология разработки анимированных объектов в среде Macromedia Flash

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

Одним из самых первых форматов записи фильмов был QuickTime, разработанный фирмой Apple для компьютеров Macintosh и позднее перенесенный на Microsoft Windows. Фирма Microsoft в ответ разработала программный пакет Video for Windows и формат записи фильмов AVI, позволяющий использовать различные алгоритмы сжатия. Несколькими годами позднее, когда мощности персональных компьютеров еще возросли, независимая группа MPEG разработала очень сильный для своего времени алгоритм сжатия MPEG 1. Именно в этом формате записывались диски VideoCD - первый и не слишком удачный опыт создать цифровое кино для обычных пользователей. 

Существуют также альтернативные форматы записи видео на обычные компакт-диски. Разработан SuperVideoCD на который помещается до двух часов видео, сжатого по алгоритму MPEG 2 создан великий и ужасный DivX альтернативная реализация алгоритма MPEG 4 - позволяющий записывать полноразмерный фильм отличного качества на один CD. Эти форматы, в основном DivX, составляют серьезную конкуренцию DVD, будущее которого сегодня выглядит не так уж и безоблачно.

 

Временная шкала

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

Временная шкала

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

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

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

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

Символы

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

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

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

Существует три вида символов: анимация, кнопка и изображение:

1. Изображение, представляет собой символ, состоящий из единственного кадра. Отсюда следует его статичное название. Если символ действительно представляет собой статичный (не анимирующийся) объект, лучше сделать его изображением.
2. Кнопка. Во Flash есть специально приспособленный под функции кнопки вид символа. В нем имеется 4 кадра: Up, Over, Down, Hit, которые содержат следующие состояния кнопок:

• Up - обычное состояние кнопки.

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

3. Анимация. Это самый "полноценный" тип символа. В нем может быть любое количество кадров. Символ этого типа может восприниматься как объект типа Movie в ActionScript (это встроенный язык Flash).

Символы могут быть вложенными вне зависимости от типа. Это является самым главным их достоинством. Например, можно сделать кнопку, которая начнет двигаться, когда над ней будет "пролетать" курсор мыши, просто поместив в кадр Over символ - анимацию. Или на изображение поместить бегущую кошку. Все остальное - дело вашей фантазии.

Символы можно создавать как "с нуля" (Insert->New Symbol, Ctrl+F8), так и используя текущее выделение, поместив его сразу в символ (Insert->Convert to Symbol, F8). Второй прием используется гораздо чаще, чем первое, т.к. в этом случае отпадает надобность его позиционировать и изменять под нужный размер.

Для управления символами используется так называемая библиотека. Библиотеки находится по адресу Window->Library (или Ctrl-L).

Покадровая анимация

Flash - пакет, предназначенный, прежде всего, для создания именно  анимации. Для создания неподвижной  графики существуют Adobe PhotoShop, Adobe Illustrator, Macromedia Freehand, Macromedia Fireworks и другие  программы. Они приспособлены для  этого лучше, чем Flash.

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

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

Покадровая анимация

Достоинства:

1. Покадровая анимация дает вам, в некотором смысле, больший контроль над анимацией, и если вы опытный аниматор, вы можете выгодно ею пользоваться.
2. Это единственный способ организовать смену абсолютно независимых изображений - слайд шоу (например, создавая обычный баннер средствами Flash).
3. И все остальное, что вытекает из возможности прорисовывать каждый кадр вручную.

Недостатки:

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

Анимация с построением промежуточных кадров

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

Скорость и плавность анимации зависят от количества кадров, которые вы отводите под движение и скорости вашего Flash фильма (movie). Скорость фильма можно изменить здесь: Modify->Movie:, Ctrl+M - там параметр Frame Rate задает количество кадров в секунду. Для качественной анимации скорость должна быть не меньше 25-30 кадров в секунду.

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

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

Shape tweening

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

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

После того как у вас есть два ключевых кадра, вы делаете активным первый из них, и выбираете на панели Frame (Ctrl+F) в списке Tweening строку Shape:

Shape tweening

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

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

Анимация на основе Shape tweening

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

Немного о параметрах shape tweening. Вы, наверное, заметили, что появилась пара других параметров, когда вы выбрали shape tweening в панели Frame - Easing и Blend. Поле Label содержит метку кадра. О метках мы поговорим в статье, посвященной анимации с помощью ActionScript.

Easing задает обратное экспоненциальное  ускорение. Величина этого параметра  может изменяться от - 100 до + 100. Это  означает, что если вы зададите  отрицательный easing, движение будет  происходить с положительным  ускорением, скорость будет увеличиваться. И наоборот, если easing будет положительным, анимация будет замедляться.

Easing: -100

Easing: +100

Параметр Blend, определяет алгоритм перехода: Distributive (распределяющий, общий) и Angular (угловатый). Первый старается максимально смягчить, сгладить переход от одной фигуры к другой. Второй же пытается сохранить пропорции углов. Если переход вас не удовлетворяет, можно поэкспериментировать с этим параметром.

И, наконец, последний инструмент в анимации shape tweening - контрольные точки. Это точки, с помощью которых вы помогаете Flash правильно осуществить переход. Без них не обойтись в случае сложных форм. Пользоваться ими очень легко:

На первом ключевом кадре вы добавляете контрольную точку (Modify->Transform->Add shape hint, Ctrl+Shift+H). На сцене появится маленькая красная точка, обозначенная буквой латинского алфавита. Вы прикрепляете ее к той части изображения, которая двигается не так, как вы хотели. Затем вы переходите на второй ключевой кадр, и прикрепляете эту же точку к части, в которую должна была перейти часть на начальном кадре. Точка будет уже зеленого цвета, а на начальном кадре она станет желтой. Так вы можете отличать начальные и конечные ключевые точки, так как на одном кадре могут присутствовать и те и другие.

Удалить все точки можно с помощью Modify->Transform->Remove All Hints. Удалить же единственную точку можно, нажав на ней правую кнопку мыши, и в контекстном меню выбрав Remove Hint.

Так как контрольные точки обозначаются буквами латинского алфавита, то их может быть максимум 27.

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

Shape tweening без использования  контрольных точек

 

Shape tweening c использованием  контрольных точек

При использовании анимации на основе изменения формы (shape tweening) могут модифицироваться следующие параметры фигуры:

• форма
• расположение
• размер (любые пропорции)
• цвет
• угол поворота