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

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

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

Чтобы двигаться дальше разберемся в двух терминах. Дело в том, что в программе Flash можно создавать кадры двух типов. Ключевые кадры KeyFrames и обычные кадры. Ключевые кадры независимы друг от друга и могут содержать любое изображение. Обычные кадры в общем случае содержат то же изображение, что и предыдущий ключевой кадр. Первый кадр ролика по умолчанию является ключевым.

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

Теперь давайте создадим второй ключевой кадр и сделаем его пустым. Для этого выделим мышью вторую позицию шкалы. И выполним команду Insert - Blank Keyframe пустой ключевой кадр, то же самое можно сделать нажав клавишу F7.

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

Теперь давайте опубликуем ролик, создав файл с расширением *.swf. Для этого выполним команду Control - Test Movie. Или нажмем сочетание клавиш CTRL+Enter. Вот вам пожалуйста мигающий круг. Закроем тестовое окно и вернемся к основной сцене. Выделим пустой ключевой кадр во второй позиции и удалим его. Выполнив команду Insert - Remove Frames или нажмем сочетание Shift+F5. Снова выдели вторую позицию и проделаем несколько иную операцию. Выполним команду Insert-Keyframe вставить ключевой кадр или нажмем клавишу F6. Теперь во втором кадре мы имеем точную копию первого кадра. Поскольку изображения в ключевых кадрах не зависят друг от друга, мы можем изменить рисунок во втором кадре. Например, передвинуть его.

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

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

Заключительный кадр в цепочке обычных кадров обозачается белым прямоугольником. Операцию по вставке обычных кадров полезно делать в тех слоях, где объекты не изменяются в течении анимации, например для фона. Можно, конечно, копировать и ключевые кадры, не меняя содержание в них, но большое количество ключевых кадров в ролике заметно увеличивает его размер. Итак настоятельно рекомендую запомнить три клавиши, которыми вы будете очень часто пользоваться. Клавиша F7 вставляет в выделенную позицию пустой ключевой кадр. Клавиша F6 создает копию предыдущего ключевого кадра. А клавиша F5 заполняет шкалу обычными кадрами, в которых отображается содержание предшествующего ключевого кадра.

А теперь в целях закрепления пройденного материала, создадим простую покадровую анимацию, которая иллюстрирует растущую Луну. Удерживая клавишу Shift, выделим все кадры со второго по 10 и удалим их комбинацией Shift+F5. Перейдем в первый кадр. И удалим из него всю графику. На панели Properties установим синий цвет фона. Выделим вторую позицию шкалы и клавишей F7 вставим туда пустой ключевой кадр. Выберем инструмент Овал. Определим светло-желтый цвет заливки. И нарисуем круг, котрый будет являться заготовкой нашей Луны. Нажмаем клавишу V, для быстрого выбора инструмента Стрелка. И выделим объект двойным щелчком.

На панели Properties или с помощью панели Info установим диаметр фигуры, равный 100 пикселам. Создадим еще 5 копий второго ключевого кадра. Выделим третью позицию на шкале и нажмем клавишу F6 - эта операция скопирует предыдущий ключевой кадр в выделенную позицию. Аналогичным образом вставим ключевые кадры в позиции, начиная с 4-ой по 6-ую. Таким образом, мы получили один пустой и пять ключевых кадров с одинаковым изображением. Передвинем маркер во второй кадр и выделим только контур фигуры. Затем переместим контур на 20 пикселов вправо. Это удобно делать с помощью клавиатуры. Удерживая клавишу Shift, дважды нажмем на клавишу со стрелкой вправо. Каждое нажатие переместит выделенный объект на 10 пикселов в соответствующем направлении. Без клавиши Shift контур перемещался бы на один пиксел. Теперь снимем выделение. Вы уже знаете, что при этом контур разрежет нашу заливку на две части. Выделим весь контур и правую часть заливки, и удалим их.

В результате, мы получили заливку в виде узкого желтого полумесяца. Проделаем похожие операции в других ключевых кадрах. В третьем кадре выделим и переместим контур на 40 пикселов. После снятия выделения также удалим лишнюю часть графики. В четвертом кадре переместим контур на 60 пикселов. И затем проделаем те же операции. В 5 кадре сместим контур на 80

пикселов и повторим процедуру. Шестой кадр оставим практически без изменения. Удалим лишь контур фигуры. Теперь протестируем ролик, нажав CTRL+Enter. Как видите, мы получили покадровую анимацию лунных фаз. Конечно, полученный ролик можно до бесконечности совершенствовать.

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

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

Теперь здесь можно создавать любой фон, который будет отображаться во всех кадрах анимации. Не мудрствую лукаво, изобразим закатное небо. Выберем инструмент прямоугольник и нарисуем соответствующую фигуру. Выделим и удалим его контур. Затем выберем инструмент Заливка и откроем панель Mixer. Установим линейный градиент и настроим переход цвета от светло-розового до темно-синего. Заполнм фигуру полученной заливкой. И повернем градиент таким образом, чтобы розовый цвет находился внизу. Эту операцию можно сделать и с помощью инструмента Fill Transform.

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

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

Вы можете сделать это щелкнув по кнопке Onion Skin. Дословно луковая кожура, но мы лучше назовем эту кнопку шлейфом. При этом вокруг маркера появятся границы шлейфа, имеющие вид квадратных скобок. Все кадры внутри скобок отобразятся в области рисования. Текущий кадр будет показан четко, а остальные выглядят полупрозрачными. Для наглядности выберем инструмент Zoom и увеличим масштаб. Теперь эффект хорошо заметен. Скобки, ограничивающие шлейф, можно перемещать мышью. И таким образом настраивать область отображения.

При перемещении маркера, перемещаются и границы шлейфа, оставаясь на том же расстоянии от маркера. Щелчок по кнопке Onion Skin Outlines контурный шлейф, дает похожий эффект, только все кадры кроме текущего будут отображаться в контурном виде. Это уменьшает нагрузку на компьютер и увеличивает скорость работы редактора на слабых машинах. Кнопка Edit Multiple Frames, включает режим одновременного редактирования нескольких кадров.

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

Включим режим Edit Multiple Framesи настроим границы шлейфа так, чтобы они охватывали все кадры анимации. Перетаскиванием инструмента Arrow, произведем выделение объекта. При этом проследим, чтобы черным цветом были отмечены все кадры, которые мы хотим одновременно редактировать. Затем выберем модификатор Scale.

И самым обычным способом отмасштабируем фигуру. Аналогичным образом можно одновременно изменить координаты объекта во всех кадрах. Цвет и т.д. Протестируем ролик. Как видите, никаких недоразумений не

произошло и синхронность анимации не нарушена. Закроем тестовое окно и выключим режим Edit Multiple Frames. Щелчок по самой правой кнопке данного ряда вызывает меню настроек шлейфа. Его нижняя секция позволяет устанавливать определенное расстояние от маркера до границы шлейфа. Так выбор пункта Onion 2. Определит расстояние в 2 кадра от маркера до границы шлейфа. А Onion All распространит шлейф на все созданные кадры. В этом меню имеется также установка, позволяющая показывать маркеры шлейфа всегда, даже когда режим отображения шлейфа отключен.

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

⇐Инструменты "перо", "астичное выделение" | TeachPro WEB-дизайн | Раскадровка формы (морфинг)⇒