1 Простая покадровая анимация

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

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

Инструменты:

Line Tool (N) (Инструмент Линия),

Subselection Tool (A) (Инструмент Подвыделение),

Pencil Tool (Y) (Инструмент Карандаш),

Brush Tool (B) (Инструмент Кисть),

Rectangle Tool (R) (Инструмент Прямоугольник),

Selection Tool (V) (Инструмент Выделение),

Oval Tool (R) (Инструмент Овал),

PolyStar Tool (Инструмент Полизвезда),

Text Tool (T)TT (Инструмент Текст),

Eraser Tool (E) (Инструмент Ластик).

Панели:

Properties (Свойства).

Операции:

сграфическими формами: Envelope (Граница);

скадрами:

Convert to Keyframe (F6) (Преобразовать в ключевой кадр),

Control (Управление) Ö Play (Enter) (Воспроизведение),

1

Курс: «Компьютерная графика» Преподаватель: Костюкевич Елена Сергеевна

Adobe Flash CS3 Professional

Control (Управление) Ö Test Movie (Ctrl+Enter) (Тестировать ролик),

Control (Управление) Ö Step Forward One Frame (ю) (Сделать шаг вперед на один кадр),

Control (Управление) Ö Step Backward One Frame (б) (Сделать шаг назад на один кадр),

Insert Frame (F5) (Вставить кадр).

2

0-й шаг. Создание нового документа Flash.

После загрузки программы в окне приветствия в разделе Create New (Создать новый)

выберите пункт Flash File (ActionScript 3.0).

1-й шаг. Создание первого кадра анимации, на котором нарисован фрагмент контура ствола дерева.

Инструменты: Pencil Tool (Y) (Инструмент Карандаш).

Панели: Properties (Свойства).

Выбрав Pencil Tool (Y) (Инструмент Ка-

рандаш) на панели

Properties (Свойства) ус-

тановите коричневый цвет линии и толщину линии 2. Проследите, чтобы стиль линии был

Solid (Сплошная).

Из меню Pencil Mode (Режим карандаша) выберите режим Straighten (Выпрямление), в котором производится преобразование проведенной от руки кривой в набор прямолинейных сегментов.

Начните рисовать ствол дерева.

3

2-й шаг. Создание следующих 5 кадров анимации: завершаем рисовать контур ствола дерева.

Операции с кадрами: Convert to Keyframe (F6) (Преобразовать в ключевой кадр).

Для превращения следующего протокадра в ключевой вызовите контекстное меню для второго кадра и выберите команду Convert to Keyframe (F6)

(Преобразовать в ключевой кадр). После вы-

полнения команды текущий кадр будет обозначен черным кружком так же, как и предыдущий.

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

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

4

3-й шаг. Создание следующих примерно 8 кадров анимации, на которых рисуется контур кроны дерева и ветки.

Продолжаем использовать инструмент Карандаш, предварительно выбрав для него зеленый цвет и толщину, равную 3. Из меню Pencil Mode (Режим карандаша) выберите режим Ink (Чернила), в котором проведенные линии почти не подвергаются модификациям. Рисуем крону.

Инструментом Карандаш коричневого цвета и толщиной 2 добавьте ветки.

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

5

4-й шаг. Создание следующего кадра анимации, на котором начинаем рисовать контур земли.

Инструменты: Line Tool (N) (Инструмент Линия), Subselection Tool (A) (Инструмент Подвыделение).

Операции с контуром: Envelope (Граница).

Выбрав Line Tool

(N) (Инструмент Линия) на панели Properties

(Свойства) установите зеленый цвет линии. Проследите, чтобы толщина линии была 1,

а стиль линии – Solid (Сплошная).

Нарисуйте в левом нижнем углу рабочего листа произвольную линию.

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

Чтобы добиться лучшего результата, можно использовать частичное искажение линии, то есть изменение только части линии. Для этого выберите Subselection Tool

(A) (Инструмент Подвыделение). Выделите часть кривой и с помощью маркеров измените ее форму.

6

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

Операции с кадрами: Control (Управление) Ö Play (Enter) (Воспроизведение).

Чем больше кадров добавляется, тем более плавная и мягкая анимация получается.

Контур земли рисуем инструментом Линия, толщина линии 1.

Карандашом добавьте отдельные травинки.

Чтобы просмотреть результат, поставьте точку воспроизведения на первый кадр и выполните команду Control (Управление) Ö Play (Enter) (Воспроизведение).

7

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

Инструменты: Brush Tool (B) (Инструмент Кисть).

Операции с кадрами: Control (Управление) Ö Test Movie (Ctrl+Enter) (Тестировать ролик).

Так как области дерева, земли и неба не замкнуты, то инструмент Заливка использовать не получиться. Создадим эффект зарисовки кистью.

Закрашивая, не забывайте добавлять новые кадры анимации.

Возмите Brush Tool (B) (Инструмент Кисть). Из меню Brush Mode

(Режим кисти) выберите режим Paint Inside (Рисовать внутри). Если кисть в этом режиме иногда не будет давать нужный результат, попробуйте режим Paint Fills (Рисовать заливку), но в этом режиме нужно быть аккуратным, работая по краю области, чтобы за нее не залезть. Начните закрашивать ствол дерева, потом крону, траву, ночное небо. Обратите внимание, что кисть в обоих режимах закрашивает только фон, не затрагивая контуры.

Для более детальной прорисовки кроны дерева можно поверх нарисовать несколько штрихов более темной краской.

Чтобы просмотреть ролик во Flash-плеере выполните команду Control (Управление) Ö Test Movie (Ctrl+Enter) (Тестировать ролик). Flash экспортирует ролик в SWF-файл и откроет его в отдельном окне. SWF-файл сохраняется в той же папке, что и исходный Flash-файл, и имеет такое же имя, но расширение SWF вместо FLA.

8

7-й шаг. Создание кадров анимации, на которых рисуются облака.

Инструменты: Rectangle Tool (R) (Инструмент Прямоугольник), Selection Tool (V) (Инструмент Выделение).

Выберите Rectangle Tool (R) (Инструмент Прямоугольник), установи-

те радиус округления углов, равный 20. Задайте цвет контура и фона прямоугольника. На новом кадре нарисуйте прямоугольник.

А на следующем трансформируйте его так, чтобы он был похож на облако. Для этого используйте Selection Tool (V) (Инструмент Выделение), который позволя-

ет перемещать узлы контура и изменять изгиб линии между ними.

На следующих кадрах можно создать еще одно облако.

8-й шаг. Создание кадра анимации, на котором рисуется месяц.

Инструменты: Oval Tool (R) (Инструмент Овал).

Выберите Oval Tool (R) (Инструмент Овал), задайте цвет контура и фона. На новом кадре, удерживая клавишу Shift, нарисуйте окружность. Затем нарисуйте вторую окружность поверх первой с заливкой цвета неба. Взяв

Selection Tool (V) (Инструмент Выделение)

выделите лишний фрагмент контура и удалите его.

9

9-й шаг. Создание кадров анимации, на которых зажигаются звезды.

Инструменты: PolyStar Tool (Инструмент Полизвезда).

Операции с кадрами: Control (Управление) Ö Step Forward One Frame (ю) (Сделать шаг вперед на один кадр) и Control (Управление) Ö Step Backward One Frame (б) (Сделать шаг назад на

один кадр).

Выбрав PolyStar Tool (Инструмент Полизвезда) на панели Properties (Свойства) нажмите кнопку Options (Опции). В появившемся окне задайте Style (Стиль) –

звезда, Number of Sides (Количество сторон) (в данном случае лучей) – 7, Star point size (Размер точки звезды) – 0.20.

Нарисуйте несколько звезд на новом кадре, а потом на следующем еще несколько и на следующем…

Чтобы последовательно просмотреть кадры удобно пользоваться горячими клави-

шами команд Control (Управление) Ö Step Forward One Frame (ю) (Сделать шаг вперед на один кадр) и Control (Управление) Ö Step Backward One Frame (б) (Сделать шаг назад на один кадр).

10-й шаг. Создание анимации подписи своего рисунка, т.е. постепенного написания своего имени и фамилии.

Инструменты: Text Tool (T) (Инструмент Текст).

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

на новом ключевом кадре написать имя и фамилию полностью;

посчитать количество символов в тексте, включая пробелы;

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

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

10