Практикум. Анимация формы

Анимация при которой автоматически создаются кадры изменения формы объектов называется анимацией формы. Наряду с анимацией движения она является одним из видов  tweening-анимации.

Слово tween — это жаргонное сокращение от английского in between (между). Это выражение пришло из классической анимации, где ведущие художники рисовали только наиболее важные (ключевые) сцены мультфильма, а их менее талантливые коллеги дорисовывали промежуточные кадры.

Анимация формы позволяет

·  плавно преобразовать одну форму в другую (морфинг);

·  изменить цвет формы;

·  переместить форму.

Алгоритм создания анимации формы

1.     В первом кадре слоя нарисовать объект.

2.     Выделить n-й кадр и преобразовать его в ключевой с заполнением (F6). В этом кадре изменить форму объекта  ( можно изменить цвет заливки)

3.     Выделить любой промежуточный кадр и в поле Tween панели Свойства установить Форма (Shape.)Светло-зеленая подсветка и  стрелка от  1-го кадра к  n-му говорит о том, что промежуточные кадры сгенерированы.

4.     Сохранить работу под именем *.fla. Протестировать анимацию.

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

К анимации формы относятся также параметры Ease и Смешение (Blend). Обычно анимация выполняется с постоянной скоростью. Если надо постепенно замедлять анимацию, используют положительные значения параметра Ease (от 1 до 100), для ускорения — отрицательные (от -1 до -100).

Параметр Смеш.  имеет два возможных значения: Дистрибутивный (плавные контуры) и Угловой (сохранение углов).

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

В программе есть инструмент, с помощью которого можно управлять процессом преобразования. На объекте в первом кадре выбираются некоторые области. Эти области обозначаются точками. Добавлять точки можно с помощью команды Изменить → Форма → Добавить подсказку формы  (Modify → Shape → Add Shape Hint). В первом ключевом кадре необходимо разместить эти точки в нужных местах, а в последнем ключевом кадре необходимо указать в какое место переходят эти точки.

Примечание.

 Анимация формы неприменима к экземплярам символов, а также к сгруппированным объектам.

На одном слое должен быть только один анимируемый объект.

ПРАКТИКУМ

ЗАДАНИЕ 1. Создайте анимацию изменения формы прямоугольника.

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

2.    Вставьте новые ключевые кадры в кадры 10, 20 и 30 (клавиша F6). Используя инструмент Стрелка  и Свободная трансформация, измените контуры в кадрах 10 и 20 так, как показано на рисунках ниже. Кадр 30 оставьте без изменений (он совпадает с кадром 1).

3.    Чтобы включить анимацию формы для первого перехода установите курсор между 1 и 10 кадрами и  на панели Свойства в окне Tween выберите пункт Форма. Повторите то же самое для переходов из 10 в 20 и из 20 в 30 кадры. Если вы сделали все правильно, промежуточные кадры имеют зеленоватый цвет и через них проходит черная стрелка от начального кадра к конечному:

4.      Добавьте  градиентную заливку к фигурам в ключевых кадрах (цветовую гамму подберите произвольно).

5.      Проверьте ролик, нажав клавиши Ctrl+Enter.

ЗАДАНИЕ 2. Создайте анимацию изменения формы объекта неправильной формы.

1.                      Откройте приложение Macromedia Flash

2.                      Создайте новый документ.

3.                      Создайте любым известным способом фигуру произвольной формы и залейте её  любым растровым изображением. Увеличьте заливку инструметом Трансформация заливки. Удалите контур.

4.                      Создайте новый ключевой кадр в ячейке того кадра, который будет последним в эпизоде (например, 20-й). В результате между первым и последним кадрами на временной диаграмме появится последовательность простых кадров серого цвета:

5.     Аккуратно трансформируйте изображение любым способом таким образом, чтобы фигура приняла форму, например, звезды:

6.     Щелкните левой кнопкой в ячейке первого кадра анимации: это приведет к двум последствиям: на столе появится исходное изображение и изменится формат панели Свойства (на ней появится раскрывающийся список  Tween)

7.    В раскрывающемся списке Tween установите: Форма (Shape)

В результате первый и последний кадры анимации на временной диаграмме будут соединены стрелкой на светло-зеленом фоне это говорит о том, что создание анимации успешно завершено:

8.    Создайте новый ключевой кадр в ячейке того кадра, который будет последним в эпизоде (например, 40-й).

9.    В этом ключевом кадре трансформируйте изображение ещё раз:

10.         Щелкните левой кнопкой в ячейке 20-го кадра анимации и в раскрывающемся списке Tween  установите: Форма

11.         Щелкните правой кнопкой в ячейке того кадра, который будет последним в анимации и создайте новый ключевой (например, 60-й).):

12.          Скопируйте в 60-й кадр фигуру из первого кадра (к концу просмотра фильма фигура должна вернуться в первоначальное положение):

13.         Щелкните левой кнопкой в ячейке 40-го кадра анимации и в раскрывающемся списке Tween установите: Форма

14.         Готовое изображение сохраните в своей папке в формате *.fla

15.         Просмотрите готовый фильм, нажав сочетание клавиш <Ctrl>+<Enter>.

ЗАДАНИЕ 3.Создайте анимацию превращения желтого круга в красный прямоугольник, прямоугольника в 5 окружностей с градиентной заливкой, которые превращаются в буквы слова  FLASH.

1.     В первом кадре вверху рабочего листа нарисовать объект – кружок желтого цвета. Контур убрать! Это будет первый ключевой кадр анимации.

2.     Создать последний кадр анимации: щелкнуть мышкой на 40 кадре и нажать F7 (новый пустой ключевой кадр).

3.     Нарисуйте в 40-м кадре прямоугольник красного цвета. Контур убрать!

4.      Щелкнуть мышкой на первый кадр. На панели Свойства выбрать в списке Tween (тип анимации) Форма. Для проверки: “промежуточные кадры” временной шкалы должны окрасится в салатовый цвет и прорисоваться стрелка, соединяющая начало и конец анимации.

5.     Просмотреть анимацию Ctrl+Enter .

6.        Щелкните мышкой на 80-м кадре и нажмите клавишу F7 (создать новый пустой ключевой кадр). Нарисуйте пять кружков с радужной заливкой. Контуры убрать.

7.        Вернуться на 40-й кадр, щелкнув на нем мышкой.

8.        Перейти на панель Свойства и выбрать в списке Tween тип анимации Форма.

9.        Щелкнуть на кадр 95 и нажать клавишу F6.

10.       Далее создайте анимацию превращающую пять шариков в буковки для этого еще раз выполните алгоритм действий (1-4 пункты) для кадров от 95 до 150.

11.       Ctrl+Enter - просмотр мультика

ЗАДАНИЕ 4. Создайте анимацию превращения цыпленка в курицу.

1.      Импортируйте изображение цыпленка

2.      Отмасштабируйте рисунок до нужного размера.

3.      Трассируйте растровое изображение в векторное:

4.      Выделите изображение и выберите  Изменить – Растр – Трассировать растр.  После трассировки выделите и удалите фон рисунка. Поэкспериментируйте с параметрами диалога трассировки, несколько раз выполняя трассировку.

5.      Для возврата к неоттрассированному рисунку используйте Сtrl-Z (отмена предыдущего действия).

6.      В 20 кадре создайте ключевой кадр. Удалите изображение цыпленка. Импортируйте на сцену изображение курица.jpg.  Масштабируйте рисунок. Трассируйте изображение курицы и удалите фон.

7.      Установите курсор между двумя ключевыми кадрами и в окне Tween выберите Форма.

Задание *4

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

2.                       Создайте анимацию падения и растекания капли.

3.                        Создайте анимацию превращения гусеницы в бабочку.

ЗАДАНИЕ 5. Создайте ролик из 40 кадров, в котором мяч поднимается, превращается  в квадрат, на кубу появляется звезда и начинает вращаться

1.      Откройте файл Волшебник. Fla. В контекстном меню слоя выберите Распределить по слоям.

2.      Изображения на слоях «фон», «волшебник», «куб» остаются неподвижными во всех кадрах фильма. Размножим их по 40-ой кадр.(F5)

3.      Аналогичные действия проделайте для слоёв «волшебник», «куб». Шкала времени будет выглядеть следующим образом:

4.      Заблокируйте слои «фон», «волшебник», «куб».  Прейдите на слой «мяч» (изображение мяча у нас уже сгруппировано).

5.      В 10 кадре создайте ключевой. Переместите мяч вверх  Создайте анимацию движения с 1 по 10 кадр.

6.      Перейдите на 11 кадр слоя «мяч» и создайте ключевой кадр

7.      Разгруппируйте мяч: нажмите Ctrl+Shift+G.  Перейдите на 20-й кадр слоя «мяч», вставьте пустой ключевой кадр (меню Вставить – Пустой ключевой кадр).

8.      Нарисуйте в 20-ом кадре слоя «мяч» квадрат без контура c заливкой – «радуга». С 11 по 20 кадр создайте анимацию формы

9.      Создайте обратное превращение квадрата в мяч (с 20-го кадра по 30-й)

10.  Скопируйте изображение мяча из 11-го кадра в 30-й кадр слоя «мяч».

11.  Перейдите на 20 кадр и задайте анимацию формы с 20-го кадра по 30-й

12.  Теперь мяч должен опуститься в исходное положение на куб (с 31-го кадра по 40-й). Скопируйте 10-й кадр слоя «мяч» и вставьте его в 31-й.

13.  Скопируйте 1-й кадр слоя «мяч» и вставьте в 40-й (мяч опустился на куб).
Перейдите в 31-й кадр и задайте анимацию движения (между кадрами 31-м и 40-м).

14.  В 40-ом кадре слоя «мяч» измените цвет мяча с красного градиента на зелёный градиент.

15.  Перейдите на слой «мяч» (другие слои заблокируйте). С помощью инструмента «Указатель» выделите мяч и измените его цвет.

16.  Создайте новый слой, назовите его «Звезда». Нарисуйте в 1-ом кадре Звезду,  используя  инструмент Прямоугольник.

17.  В 15-й кадр слоя «Звезда» вставьте ключевой кадр.

18.  Уменьшите размеры звезды в 15-ом кадре (используйте инструмент «Свободная трансформация»)

19.  Задайте анимацию движения с 1-го по 15-й кадр слоя «Звезда» и на панели Свойства задайте вращение

 20.  Перейдите в 40-й кадр слоя «Звезда» и нажмите F5 (вставка с16 кадра по 40-й изображение звездочки)

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

Контрольные вопросы

1.     Что понимают под анимацией формы?

2.     Перечислите этапы создания анимации формы.

3.     К каким объектам неприменима анимация формы

Литература:
1.      Андерсон Э. Macromedia Flash MX 2004, М.: НТ Пресс, 2005
2.      Вовк Е.Т. Информатика: уроки Flash, М.: КУДИЦ-ОБРАЗ, 2005
3.      Заборовский Г.А. Основы анимации. Электронный учебник. 2008