Создание банера в мультимедии

Кадры, слои, символы, временная шкала

Базовыми понятиями являются кадры (frames), символы (symbols), слои (layers) и временная шкала (timeline).

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

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

Ее основные возможности:

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

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

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

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

Слои

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

Во Flash есть пара особенных типов слоев: слои, содержащие траектории движения и слои - маски. Есть достаточно большое количество приемов, в которых используются слои, но во Flash без них просто нельзя обойтись по одной важной причине: в один момент времени для каждого объекта анимации нужен отдельный слой. Объектом анимации считается фигура (shape) или символ (symbol). Каждая линейка кадров принадлежит конкретному слою. От того, на каком слое находится объект, зависит, будет ли он виден на первом плане или находится позади других объектов. Используя слои, можно без труда создать ощущение многоплановости сцены. Слои могут быть не только носителями линейки кадров: направляющие слои служат для задания траекторий и параметров анимации, маскирующие слои позволяют задать маску, ограничивающую видимую часть изображения подчиненных слоев, слои кнопки описывают состояния чувствительных к щелчкам мыши областей. Многослойная модель позволяет довольно простыми способами получать очень красивые зрительные эффекты.

Кадры

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

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

Элементарные операции с кадрами:

Вставить пустой ключевой кадр - Insert->Blank keyframe, F7

Ключевой кадр, повторяющий содержание предыдущего - Insert->Keyframe, F6

Очистить ключевой кадр - Insert->Clear keyframe, Shift-F6

Вставить обычный кадр - Insert->Frame, F5

Удалить кадр - Insert->Remove Frames, Shift-F5

 

Символы

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

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

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

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

- Кнопка (button). Во Flash есть специально приспособленный под функции кнопки вид символа. В нем имеется 4 кадра: Up, Over, Down, Hit, которые содержат следующие состояния кнопок:

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

• Over - когда курсор мышки находится над кнопкой.

• Down - когда курсор находится над кнопкой и нажата клавиша мыши.

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

- Анимация (movie clip). Это самый "полноценный" тип символа. В нем может быть любое количество кадров. Символ этого типа может восприниматься как объект типа Movie в ActionScript (это встроенный язык Flash).Символы могут быть вложенными вне зависимости от типа. Это является самым главным их достоинством. Например, можно сделать кнопку, которая начнет двигаться, когда над ней будет "пролетать" курсор мыши, просто поместив в кадр Over символ - анимацию. Или (парадокс!) на изображение поместить бегущую кошку. 

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

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

Анимация

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

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

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

• Покадровая анимация дает, в некотором  смысле, больший контроль над анимацией, и если вы опытный аниматор, вы можете выгодно ею пользоваться.

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

• И все остальное, что вытекает из возможности прорисовывать каждый кадр вручную.

Недостатки:

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

• Покадровая анимация занимает достаточно большой объем, так как приходится хранить информацию о каждом кадре.

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

При этом способе анимации 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 (Windows->Panels->Frame, Ctrl+F) в списке Tweening строку Shape. Кадры на временной шкале должны окраситься в зеленоватый цвет и от первого кадра ко второму должна протянуться стрелочка .

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

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

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

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

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

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

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

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

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

• форма

• расположение

• размер (любые пропорции)

• цвет

• угол поворота

Motion Tweening

И, наконец, наиболее часто используемая техника анимации во Flash - Motion Tweening. В этом случае анимация строится на основе модификации символов, т.е. объектом анимации является символ.

Как и в анимации shape tweening, на каждый объект в один момент времени, нам нужен один слой. На этом слое должен находиться один символ, с которым и будут происходить все изменения.

Вот какие параметры символа  могут модифицироваться при использовании  Motion Tweening:

• размер (как пропорционально, так  и непропорционально - отдельно высоту и ширину)

• наклон

• расположение

• угол поворота

• цветовые эффекты (см. ниже)

• можно использовать направляющие слои для задания траектории движения объекта

Включить motion tweening можно несколькими способами (а отключить, к сожалению, только одним). Для того, чтобы включить motion tweening, нужно сделать активным начальный кадр  перехода, затем, нажав правую клавишу мыши, в контекстном меню выбрать Create motion tween (это же можно сделать, выбрав Insert->Create motion tween). Универсальный способ включения/выключения motion tweening - с помощью панели Frame, выбрав Motion в поле Tweening. Там же можно контролировать параметры анимации.

Easing - обратное экспоненциальное ускорение, работает абсолютно так же, как и в shape tweening.

Rotate позволяет управлять вращением. Auto - Flash автоматически пытается определить количество витков. CW (Clockwise, по часовой стрелке) и ССW (Counter Clockwise - против часовой стрелки). При этом рядом в поле справа появляется возможность ввести количество оборотов. Можно использовать только целые значения. Можно отключить вращение, выбрав None.

Orient to path - поворачивает символ в соответствии с направляющей линией. Snap привязывает символ к этой направляющей. (см. ниже)

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

Направляющие слои(guide layers). Это слои, которые содержат кривую, по которой должен двигаться объект. Например, нужно анимировать самолетик, который выписывает виражи по небу. На создание этого движения может уйти много времени. При этом анимация будет состоять из маленьких отрезков motion tweening и отдельных кадров. Вместо этого можно нарисовать траекторию на специальном слое и привязать символ самолетика к ней.