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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 на Оса.

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

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

Рис.4.1 Рис.4.2

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

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

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

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

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

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

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

Рис.4.3

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

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

Рис.4.4 Рис.4.5

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

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

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

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

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

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

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

Рис.4.6

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

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

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

Рис.4.7

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

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

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

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

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

Создание анимации внутри символов - student2.ru Рис.4.8

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рис.6.2 Рис.6.3

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

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

Рис.6.4

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

Рис.6.5

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

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

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

Рис.6.6 Рис.6.7

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

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

Рис.6.8

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

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

Рис.6.9

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

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

Наши рекомендации