Модуль 7 Занятие 1 Анимация трансформация (Шейпинг, морфинг)

Модуль 7

Занятие 1

Анимация - трансформация (Шейпинг, морфинг)(Shape tweening)

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

В этом варианте анимации есть жесткое ограничение: ее ключевые кадры должны быть векторной "разбитой" графикой (Modify-Break Apart), если объекты - текст или импортированная растровая графика.

Вы назначаете объекты, находящиеся в этих ключевых кадрах фигурами (Shape). От этого слова и происходит название этого вида анимации - шейпинг.

Назначение фигурами производится в панели Frame (Кадр)

Window - Panels - Frame (Окно - Панели - Кадр)
или Ctrl-F на клавиатуре.

В этой панели для каждого ключевого кадра в списке Tweening необходимо выбрать параметр Shape:

Характерным отличием анимации трансформации является черная стрелочка, соединяющая ключевые кадры, на зеленоватом фоне в шкале времени.

Создадим трансформацию: превращение круга в квадрат.

1. 
   Создайте новый файл (Ctrl-N).
   
2. 
   В левой части рабочей области нарисуйте окружность и залейте ее радиальным градиентом.
   

3. 
   Создайте ключевой кадр в 20-м кадре:
   

• 
  Выделите в слое 20 кадр (в шкале времени)
  
• 
  F6 (на клавиатуре)
  
• 
  Нарисуйте квадрат (в рабочей области). Круг в этом кадре удалите.
  

4. 
   Для нового ключевого кадра в панели Frame для созданного объекта (ключевой кадр должен быть выделен) задайте параметр Shape (Фигура).
   

Нажмите кнопки - Onion Skin Outlines (Смежные кадры в виде контуров) и - Edit Multiple Frames (Редактирование нескольких кадров). В результате вы получите ряд промежуточных кадров, которые будут отражать переход от первой фигуры ко второй.

Easing: -100 (Ускорение)

Easing: +100 (Замедление)

Параметр Blend (Смесь), определяет алгоритм перехода:

• 
  Distributive (Распределяющий, общий)
  
• 
  Angular (Угловатый).
  

Если трансформация вас не удовлетворяет, можно поэкспериментировать с этим параметром.

Пример 2. Трансформация текста в текст

Следует заметить, что метод трансформации работает только с векторной графикой Flash'а.

Для того, чтобы трансформировать текст, его нужно превратить в "разбитую" (векторную) графику.

Чтобы разбить объект или текст превратить в разбитую графику, выделив объект, выберите в главном меню

Рассмотрим пример трансформации текста в текст.

1. 
   Создайте новую сцену (Ctrl-N). Выберите инструмент Text (Текст) и в сцене напишите букву А.
   
2. 
   В панели инструментов выберите инструмент Arrow (Стрелка). Текст станет графикой (не разбитой).
   
3. 
   В главном меню выберите Modify - Break Apart (Модифицировать - Разбить на части) (Ctrl - B), чтобы разбить текст на части.
   
4. 
   Для нового ключевого кадра в панели Frame (Кадр) для созданного объекта для трансформации (ключевой кадр должен быть выделен) задайте параметр Shape (Фигура).
   
5. 
   Создадим второй ключевой кадр в 14-м кадре:
   

• 
  Выделите в слое 14 кадр (в шкале времени)
  
• 
  F6 (на клавиатуре)
  
• 
  С помощью инструмента Text (Текст) напишите букву B (в рабочей области). Букву А удалите.
  

6. 
   В панели инструментов выберите инструмент Arrow (Стрелка).
   
7. 
   В главном меню выберите Modify - Break Apart (Ctrl - B), чтобы превратить букву в разбитую графику - разбить текст-графику на части.
   
8. 
   Для нового ключевого кадра в панели Frame для созданного объекта (ключевой кадр должен быть выделен) задайте параметр Shape (Фигура).
   

9. 
   Сохраните флэш-файл.
   
10. 
    Опубликуйте анимацию-трансформацию в Web. Просмотрите ее.
    

Если вас не устраивает автоматический переход точек контура, можно воспользоваться методом закрепления контрольных точек на контурах.

Контрольные точки (shape hints, дословно - подсказки для форм) - инструмент в анимации-трансформации shape tweening. Контрольные точки - это точки, с помощью которых вы помогаете Flash правильно осуществить переход. Вы должны указать Flash, какая точка контура одного объекта должна перейти в указанную вами точку контура другого объекта. Без контрольных точек не обойтись в случае сложных форм.

Пользоваться ими очень легко:

1. 
   На первом ключевом кадре, с которого начинается анимация-трансформация (выделите его в шкале времени) вы добавляете контрольную точку
   

2. 
   На сцене появится маленькая красная точка, обозначенная буквой латинского алфавита.
   
3. 
   Вы прикрепляете ее к той части изображения, которая трансформируется не так, как вы хотели.
   

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

5. 
   Воспользуйтесь кнопками - Onion Skin Outlines (Смежные кадры в виде контуров) и - Edit Multiple Frames (Редактирование нескольких кадров), чтобы видеть этапы трансформации одного объекта в другой.
   
6. 
   Проиграйте трансформацию (Ctrl-Enter) - вы увидите, что она осуществляется по-другому.
   
7. 
   Вы можете, при нажатых кнопках - Onion Skin Outlines (Смежные кадры в виде контуров) и - Edit Multiple Frames (Редактирование нескольких кадров), перемещать контрольную точку по букве B во втором ключевом кадре и смотреть, как будет меняться трансформация.
   

Для каждой новой контрольной точки вы должны повторить технологию с 1 по 6 пункт.

• 
  Удалить все точки можно с помощью Modify - Transform - Remove All Hints (Модифицировать - Трансформация - Удалить все контрольные точки).
  
• 
  Удалить единственную точку можно, нажав на ней правую кнопку мыши, и в контекстном меню выбрав Remove Hint  (Удалить контрольную точку).
  

При использовании анимации на основе изменения формы (shape tweening) могут модифицироваться следующие параметры фигуры:

• 
  форма
  
• 
  расположение
  
• 
  размер (любые пропорции)
  
• 
  цвет
  
• 
  угол поворота
  

Цветовые эффекты возможны и в Shape tweening (Анимация формы), если объекты - разбитая графика (Modify - Break Apart  (Ctrl - B)) (Модифицировать - Разбить на части).

Они получаются автоматически, если в первом ключевом кадре - объект одного цвета и прозрачности, а во втором - другого цвета и прозрачности.

Цвет и прозрачность объектов Shape tweening (Анимация формы) устанавливается в панели Mixer (Смеситель).

В этом формате цвет определяется тремя цветами:

Числовые границы ввода каждого цвета в смесителе от 0 до 255.

Для публикации фильма вам нужно лишь выбрать в главном меню

предварительно задав необходимые параметры публикации Publish Settings.

Flash сам создаст необходимые для просмотра в браузере SWF и HTML файлы и сохранит их в рабочем каталоге (там, где хранится файл *.fla).

В HTML-коде вашей флэшки будет приблизительно следующее: