Опубликован: 27.03.2013 | Доступ: свободный | Студентов: 1532 / 281 | Длительность: 08:07:00
Специальности: Программист
Лекция 7:

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

< Лекция 6 || Лекция 7 || Лекция 8 >
Аннотация: В лекции рассматривается технология создания анимации с изменением формы графического объекта и приемы придания реалистичности такой анимации.
Ключевые слова: команда, меню, анимация

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

Кроме анимации с изменением свойств объекта (положения, размера, поворота, прозрачности и др.) можно создавать анимацию, в которой происходит изменение формы объекта.

Практическая работа №1

  1. Нарисуем окружность. Это будет начальное изображение анимации.
  2. Создадим анимацию по аналогии с созданием классической анимацией движения, но выбрав в контекстном меню первого кадра "Анимацию формы".
  3. Создадим ключевой кадр, например, на 25-ом кадре временной диаграммы. Стрелка на зеленом поле говорит о создании анимации формы.
    Создание анимации формы

    Рис. 6.1. Создание анимации формы
  4. Удалим изображение окружности на 25 ключевом кадре и вставим другое изображение, например, прямоугольника.
    Конечное изображение трансформируемой фигуры

    Рис. 6.2. Конечное изображение трансформируемой фигуры
  5. Для просмотра анимации нажмем клавишу Enter.

Практическая работа №2:

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

Для создания анимации формы текстового объекта на первом и последнем ключевых кадрах цифры необходимо "разбить" - преобразовать из текста в графику. Это делается таким образом – к выделенному объекту применяется команда разделения (режим меню "Модификация" - "Разделить").

Практическая работа №3:

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

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

  1. Сделаем активным 1-ый кадр (кликом по нему мышкой).
  2. Выберем режим меню "Модификация" - "Фигура" - "Добавить хинт кривой". В результате выполнения команды появляется красный кружок с буквой "а" (точка привязки или хинт кривой).
  3. Повторим команду. Получим 2 узловые точки привязки. Теперь расположим их на цифре, например, так:
    Установка точек привязки (хинтов кривой)

    Рис. 6.3. Установка точек привязки (хинтов кривой)
  4. Повторим эти действия для цифры "2" на последнем ключевом кадре. Точки "а" и "b" расположим на цифре "2" в тех местах, куда хотим переместить точки "а" и "b" из цифры "1" (точки привязки при этом поменяют цвет на зеленый).
  5. Просмотрим получившуюся анимацию (Enter). Обратим внимание, вокруг каких точек происходит изменение формы.

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

Примеры создания анимации формы приведены в папке "Анимация" - "Анимация формы".

Краткие итоги лекции:

Кроме анимации с изменением свойств объекта (положения, размера, поворота, прозрачности и др.) можно создавать анимацию, в которой происходит изменение формы объекта.

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

Для улучшения реалистичности преобразования одного объекта в другой необходимо указать – в какую точку объекта на последнем кадре "перетечет" выбранная точка объекта на первом кадре. Для этого используют точки привязки (хинты кривой).

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

Ключевые термины

  • Анимация формы
  • Разбиение текста
  • Хинт кривой

Набор для практики:

Вопросы

  • Для каких объектов возможно создание классической анимации формы?
  • Возможно ли изменять цвет анимированного объекта при создании анимации формы?
  • Назначение точек привязки (хинтов кривой) при создании анимации формы?
  • Что понимается под графическим представлением текстового объекта?
  • Применима ли анимация формы к текстовому объекту? Какие преобразования для этого необходимо провести с текстовым блоком?

Упражнения

  • Создайте анимацию дыма.
  • Создайте анимацию движения и изменения формы облака в небе.
  • Создайте анимацию изменения формы языка пламени.
  • Создайте анимацию развевающегося на ветру полотна знамени.
< Лекция 6 || Лекция 7 || Лекция 8 >
Яна Борисова
Яна Борисова

В тестах есть вопросы, детали которых в тестах не рассматриваются. Ест ли возможность рассмотреть материал в лекциях более подробно и в деталях?

Александра Замбровская
Александра Замбровская

Я прохожу бесплатное (самостоятельное) изучение курса Создание интерактивных приложений в Adobe Flash Могу ли я (имея высшее образование) заказать официальное удостоверение по программе повышения квалификации? Сколько это будет стоить и где можно заказать (если можно, то ссылку на страничку)?