Создание анимации внутри символов

Умение создавать анимацию внутри символов предоставляет следующие возможности:

üБыстро создавать новые анимированные объекты на основе исходного анимированного символа. Например, если у нас будет символ «Моргающий колобок», то для того чтобы сделать 5 моргающих колобков достаточно 5 раз перетащить этот символ из библиотеки на Рабочую область.

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

üСоздавать комбинированное движение. Например, движение по параболе можно разложить на горизонтальное движение по прямой и вертикальный прыжок.

üСоздавать символы иерархической структуры. Например, летящая птица: символ «птица» содержит символы «тело» и «крылья». Анимация взмаха крыльев создаётся внутри символа «крылья». Анимация движения птицы как целого создаётся снаружи символа «птица».

2.1. Скопируйте анимацию колобка внутрь символа «Моргающий колобок». Для этого выполните следующие действия:

· Выберите первый кадр верхнего слоя (слой Рот), нажмите <Shift> и выберите последний кадр нижнего слоя (20 кадр слоя Колобок). При этом должны выделиться все кадры анимации.

· Выберите из контекстного меню выделенных кадров анимации команду Копировать кадры.

· Создайте пустой символ (Вставка>Создать символ), задав для него имя – Моргающий колобок, тип – Фрагмент ролика.

При создании символа произошел вход внутрь этого символа (в режим редактирования символа). Имя символа отображается справа от основной временной шкалы – Монтажный кадр 1 и совпадает с именем символа.

На временной шкале символа пока один слой – Слой 1, на рабочей области пока ничего нет, т.к. был создан новый пустой символ.

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

Для дальнейшей работы с символом используется палитра «Библиотека» (Окно>Библиотека). На ней можно найти все символы текущего документа. Если символ содержит анимацию её можно просмотреть, выбрав из контекстного меню символа команду Воспроизвести.

Чтобы зайти в символ (редактировать символ) через библиотеку надо выбрать из его контекстного меню команду Правка. Чтобы выйти из символа – нажать «Монтажный кадр 1».

2.2. Войдите в основную временную шкалу, щелкнув мышью на «Монтажный кадр 1» и очистите ее (анимация теперь сохранена внутри символа). Перед очисткой проверьте, что находитесь в основной временной шкале «Монтажный кадр 1», а затем удалите слои Глаза и Рот. На слое «Колобок» выделите и удалите кадры (из контекстного меню выбранных кадров выберите команду Удалить кадры).

2.3. Добавьте ключевой кадр в первый кадр слоя Колобок (из контекстного меню первого кадра выберите команду Вставить ключевой кадр).

Переименуйте слой Колобок в Колобки и перетащите мышью на рабочую область несколько «Моргающих колобков» с палитры «Библиотека» (тащить за название). Протестируйте анимацию, нажав комбинацию клавиш <Ctrl> + <Enter>.

2.4. Инструментом Свободное преобразование ( ) измените размер и форму колобков.

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

· Выберите колобок инструментом Стрелка

· Откройте вкладку «Фильтры» на панели «Свойства» (Окно>Свойства) и нажав в левом нижнем углу кнопку «Добавить фильтр» выберите команду Настроить цвет.

· Задайте произвольные значения (можно как положительные, так и отрицательные) параметров «Цветовой тон» и «Насыщенность». Также можно задать значения яркости и контрастности (значения можно выбирать мышью).

Протестируйте анимацию, нажав комбинацию клавиш <Ctrl> + <Enter>.

Панорамная анимация

3.1. Создайте файл Flash. На Панели «Свойства» задайте частоту кадров (FPS) – 24 и размер – 400х300 пикс.

3.2. Импортируйте любой рисунок размером больше чем размер документа (Файл>Импорт>Импортировать в рабочую область). При выделенном рисунке, на Панели «Выровнять» (Окно>Выравнивание) выберите следующие варианты:

3.3. Выполните следующие действия:

Выделите 60 кадр, нажмите <F6> (создать ключевой кадр), а затем переместите рисунок вправо с помощью мышки.

Выделите 120 кадр, нажмите <F6>, а затем переместите рисунок влево вверх.

Выделите 180 кадр, нажмите <F6>, а затем переместите рисунок вправо вниз.

Выделите 240 кадр, нажмите <F6>, а затем примените выравнивание как на рисунке выше.

3.4. Между 1 и 60, 60 и 120, 120 и 180, 180 и 240 кадрами выберите из контекстного меню команду Создать классическую анимацию движения. Протестируйте анимацию, нажав комбинацию клавиш <Ctrl> + <Enter>.

Анимация по траектории

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

4.1. Создайте новый файл Flash (размер – 800х600 пикс., частота кадров – 12 к/с). Импортируйте файлы Оса.ai и Бабочка.ai (в окне «Импорт... » должны быть выбраны все слои Illustrator, в списке «Преобразовать слои в:» выбран вариант слои Flash). Обратите внимание, что изображения импортировались на разные слои.

4.2. Поочередно выделяя изображения, преобразуйте их в символы (нажав клавишу <F8>) Оса и Бабочка (тип символа – Фрагмент ролика).

4.3. Создайте анимацию осы по траектории первым способом. Для этого:

· Зайдите в символ Оса (бабочка станет недоступна), переименуйте Слой 1 на Оса.

· Войдите в первый кадр слоя Оса и переместите осу за левую границу кадра.

Рис.4.1 Рис.4.2

· Из контекстного меню первого ключевого кадра слоя Оса выполните команду Создать классическую анимацию движения.

· Вставьте 96-й ключевой кадр (нажав клавишу <F6>) на слое Оса, "войдите" в него и переместите осу за правую границу кадра (рис.4.2).

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

Траектория движения создаётся на специальном направляющим слое. Слой, в котором находится объект, движущийся по траектории должен находиться непосредственно под направляющим слоем.

· Войдите в первый кадр слоя направляющей, выберите инструмент Карандаш, установите для него режим «Сглаживание» (выберите из списка последней кнопки панели «Инструменты») и нарисуйте траекторию таким образом, чтобы её начало и конец остались за кадром (рис.4.3). Траектория должна быть гладкой и без разрывов – при необходимости отредактируйте ее инструментом Спецвыделение ( ). Обратите внимание, что в слое с траекторией должно быть столько же кадров, сколько и в направляемом слое (96 кадров).

Рис.4.3

· Если включена настройка Просмотр>Привязка>Привязка к объектам, то в первом кадре оса автоматически "прикрепится" к траектории. Инструментом Свободное преобразование поверните осу так, чтобы она была направлена по касательной к траектории (рис.4.4). "Войдите" в 96-й кадр, "прикрепите" осу к траектории и поверните (рис.4.5).

Рис.4.4 Рис.4.5

· Чтобы оса разворачивалась вместе с траекторией в процессе движения, включите для анимации опцию «Ориент. по траектории» на Панели «Свойства».

Протестируйте анимацию, нажав комбинацию клавиш <Ctrl> + <Enter>.

4.4. Создайте анимацию бабочки по траектории вторым способом. Для этого:

· Зайдите в символ Бабочка, переименуйте слой Слой 1 на Бабочка.

· Создайте слой направляющей и в его первом кадре нарисуйте траекторию (рис.4.6).

Рис.4.6

· Создайте 96-й кадр на слое направляющей (<F5>) и 96-й ключевой кадр на слое Бабочка (<F6>).

· В 1-й и 96-й кадре слоя Бабочка и "прикрепите" бабочку к траектории (рис.4.7).

Рис.4.7

· из контекстного меню слоя Бабочка (между 1 и 96 кадром) выберите команду Создать классическую анимацию движения и включите опцию «Ориент. по траектории». Протестируйте анимацию.

4.5. Создайте для бабочки анимацию крыльев. Для этого:

· В символе Бабочка, на слое Бабочка создайте ключевые кадры в каждом шестом кадре.

· Поочередно выбирая каждый созданный ключевой кадр, инструментом Свободное преобразование изменяйте размеры крыльев бабочки, например можно чередовать "сужение" и "расширение" крыльев (примеры преобразованных бабочек – на рис.4.8).

Рис.4.8

Протестируйте анимацию.

Анимация формы

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

5.1. Создайте новый файл Flash. Установите частоту кадров 12 к/с.

5.2. В первом ключевом кадре нарисуйте круг синего цвета без контура в левом нижнем углу кадра.

5.3. Создайте 60-й пустой ключевой кадр и нарисуйте в нем квадрат красного цвета без контура в правом верхнем углу кадра.

5.4. Из Контекстного меню первого ключевого кадра выполните команду Создать анимацию формы.

Протестируйте анимацию.

6. Анимация с применением инструмента «Кость»

6.1. Создайте новый файл Flash. Установите частоту кадров 12 fps и размер 800х600.

6.2. Импортируйте в рабочую область изображение кота – файл кот.png и разметите его как на рис.6.2.

6.3. Преобразуйте изображение в векторное (Модификация®Растровое изображение®Векторизация) – рис.6.3.

Рис.6.2 Рис.6.3

6.4. Выделите хвост (можно выделять фрагментами, держа нажатой клавишу <Shift>) – рис.6.4 и преобразуйте его в символ (фрагмент ролика), нажав клавишу <F8> – рис.6.3.

Рис.6.4

Рис.6.5

6.5. Двойным щелчком перейдите в режим редактирования символа "хвост". Если были выделены какие-либо лишние фрагменты кота, то сотрите их инструментом Ластик.

Выберите инструмент Кость ( ). Наведите указатель мыши в начало хвоста и щелкните мышью. Не отпуская кнопки мыши, переместите ее вдоль хвоста до "поворота" (рис.6.6) и снова щелкните мышью – будет создана начальная «кость». Щелкните мышью в области выделенной кружком в конечной части «кости» и, не отпуская кнопки мыши, переместите ее далее по хвосту. Аналогично постройте весь «скелет» хвоста (рис.6.7).

Рис.6.6 Рис.6.7

6.6. Обратите внимание, что на Временной шкале появился новый слой Арматура_1. Из Контекстного меню 60-го кадра этого слоя выполните команду Добавить позу. Все кадры между 1 и 60 будут закрашены темно-зеленым цветом и в них будет вставлен хвост со «скелетом» (рис.6.8).

Рис.6.8

6.7. Вставьте 30-й ключевой кадр (<F6>) на слое, войдите в него и, перемещая последнюю точку скелета инструментом Стрелка, измените положение хвоста (рис.6.9). Перемещайте хвост понемногу, чтобы не произошла его деформация.

Рис.6.9

Протестируйте анимацию.

6.8. Вставьте 15-й и 45-й ключевые кадры на слое Арматура_1. В добавленных ключевых кадрах, а также в 60-м кадре измените положение хвоста. Протестируйте анимацию.