Adobe Flash. Анимация

Уроки анимации в Adobe Flash
Аватара пользователя
admin
Администратор
Сообщения: 217
Зарегистрирован: 01 мар 2016, 12:32
Контактная информация:

Adobe Flash. Анимация

Сообщение admin » 24 мар 2016, 08:20

Панель Timeline. Кадры. Типы кадров. Управление кадрами. Покадровая анимация. Расчётная анимация: classic tween, shape tween. Настройка свойств анимации. Управляющие точки shape hints

Понятие анимации. Панель Timeline Временная шкала

Панель Timeline (Временная шкала), отображает всё, что есть на сцене с определённой скоростью. Если мы изменяем состояние сцены в какой то период времени, то получим собственно анимацию. Изменять состояние для получения анимации позволяет горизонтальная шкала разбитая на кадры(фреймы). Кадр это положение сцены во времени.

Типы кадров

Рассмотрим типы кадров в программе Adobe Flash CS5

Keyframe (Ключевые кадры) – чёрные кружки на шкале. Любое новое изменение сцены отразится если создать ключевой кадр. Это начало анимации
Последний кадр – белый прямоугольник на шкале. Определяет последний кадр который принадлежит ближайшему слева ключевому кадру.
Промежуточный кадр – область на временной шкале между ключевым и последним кадром.
Blank Keyframe (Пустой ключевой кадр) – белый кружок на шкале. Аналогичен ключевому кадру, только предназначен для начала отображения отсутствия чего либо.

На рисунке 1 три ключевых кадра:

Первый ключевой кадр начинается с первого кадра временной шкалы. Он пустой и ничего не содержит, его промежуточные кадры также пустые.
Второй ключевой кадр начинается с пятого кадра временной шкалы и содержит какие то объекты анимации до девятого кадра временной шкалы.
Третий ключевой кадр начинается с десятого кадра временной шкалы и содержит какие то объекты анимации до четырнадцатого кадра временной шкалы.

Изображение
рис 1


Управление кадрами
По умолчанию создаётся документ с одним слоем и одним пустым ключевым кадром. Если в пустой ключевой кадр поместить объект, то он станет обычным ключевым кадром. При удалении содержимого ключевого кадра, он станет пустым ключевым кадром.

Основные команды создающие кадры находятся в меню Insert/Timeline:
Frame [F5] создаётся промежуточный кадр.
Keyframe [F6] создаётся ключевой кадр. В него копируется содержимое предыдущего ключевого кадра
Blank Keyframe [F7] создаётся пустой ключевой кадр

Команды модифицирующие кадры:

Clear Keyframe - удаляется ключевой кадр, при этом промежуточные кадры предыдущего ключевого кадра совместятся с кадрами удалённого ключевого кадра
Remove Frames – удаляются выделенные кадры, если необходимо избавится от лишних кадров.
Клавиша [Delete] в ключевом кадре, удаляет содержимое ключевого кадра до последнего кадра включительно, кадры при этом не удаляются, а становятся пустыми

На рисунке 2 изображение временной шкалы только созданного документа. На шкале один пустой ключевой кадр:

Изображение
рис 2


затем в пустой ключевой кадр, поместили некий объект и пустой ключевой кадр стал обычным ключевым кадром:

Изображение
рис 3


В четырнадцатом кадре создали промежуточный кадр, при этом увеличили количество кадров, а четырнадцатый кадр стал последним:

Изображение
рис 4


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

Изображение
рис 5


Обычно содержимое нового ключевого кадра редактируют, чтобы был смысл анимации, но мы редактировать пока не будем, а просто перенесём его на десятый кадр:

Изображение
рис 6


Этим самым мы увеличили длину анимации первого ключевого кадра и сократили длину второй анимации.
Если в пятом кадре временной шкалы, создать пустой ключевой кадр, то длина анимации первого ключевого кадра уменьшится и между анимациями будет пустые кадры:

Изображение
рис 7


Если удалить первый ключевой кадр, то ролик будет начинаться с пустых кадров:

Изображение
рис 8


Если нужно удалить кадры, например последние два, то нужно выделить их затем выполнить команду Remove Frame:

Изображение
рис 9


Простая(покадровая) анимация

Создадим анимацию смены трёх геометрических фигур. Например круг, прямоугольник и треугольник. Скорость двенадцать кадров в секунду (fps=12). Время отображения для фигур составляет четыре, пять и три кадра соответственно. Итого длина анимации всех трёх фигур в сумме двенадцать кадров:

- В новом документе содержащий один кадр, создаём двенадцать пустых кадров:

Изображение
рис 10


- Второй ключевой кадр создадим в пятом кадре временной шкалы, а третий в десятом:

Изображение
рис 11


Изображение
рис 12


- Для первой анимации на сцену поместим круг, для второй прямоугольник, для третьей треугольник:

Изображение
рис 13


Изображение
рис 14


Изображение
рис 15


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

Изображение
покадровая анимация


Распределим каждую фигуру в отдельный слой. Создадим два новых слоя, выделим диапазон второй анимации и перенесём в новый слой, аналогично поступим с третьей анимацией:

Изображение
рис 17


Изображение
рис 18


Если фигуры наложились друг на друга, то выделяя каждую фигуру в ключевом кадре изменим ей координату:

Изображение
рис 19


Перемещая за ключевой кадр, можно регулировать длину анимации:

Изображение
рис 20


Изображение
покадровая анимация


Tween (расчётная) анимация

Tween одно из важнейших понятий flash-анимации. Tween сокращённо от between (между) - это расчёт промежуточных положений как минимум между двумя ключевыми состояниями анимируемого объекта. Другими словами физически есть два ключевых объекта участвующие в анимации, между ними производится расчёт промежуточных объектов для получения плавного перехода. Расчёт производится с помощью интерполяции, другое название – morphing (морфинг).

Существуют несколько видов tween:
- Shape (Форма) – в качестве ключевых объектов участвуют графические формы, символы не допустимы
- Classic (Классический) – в качестве ключевых объектов участвуют символы
- Motion (Движение) – здесь используется один ключевой объект и точка

Classic tween

Classic tween создаётся между двумя ключевыми кадрами с символами у которых разные свойства, например координаты или форма. При корректном результате между ключевыми кадрами стрела и пунктир в противном случае.
Создадим classic tween анимацию длиной в двадцать кадров состоящей из трёх ключевых кадров.
Первый ключевой кадр содержит символ в крайнем левом положении сцены, второй в крайнем правом и последний содержит копию первого ключевого кадра

Изображение
рис 22


Затем между первым и третьим ключевым кадром создадим classic tween. Для этого выделим диапазон между первым и вторым ключевым кадром, затем выбираем команду Insert/Classic Tween. Признак корректной анимации стрелки между ключевыми кадрами

Изображение
рис 23


Программа между ключевыми кадрами вычислила промежуточные кадры. Если включить функцию Onion Skin внизу панели Timeline, затем над шкалой между ключевыми кадрами расставить маркеры промежуточных кадров, то можно визуально увидеть результат интерполяции:

Изображение
рис 24


Изображение
рис 25


Изображение
classic tween анимация позиции


Теперь можно изменить размер объекта во втором кадре и программа проведёт расчёт на основании изменённого размера

Изображение
рис 27


Изображение
рис 28


Изображение
classic tween анимация позиции и масштаба


Параметры классической анимации

В классической анимации можно менять координаты объектов. Если нужно настроить масштаб и поворот, то для выделенного ключевого кадра, в панели Properties секции Tweening, открывает возможность настроить некоторые свойства:
- Ease – положительные значения, ускорят начало анимации, в конце будет замедление и наоборот
- Rotate (Поворот) – без вращения, автоматическое, по часовой стрелки и против неё.
- Scale (Масштаб) позволит масштабировать объекты анимации
- Sync - синхронизация внутренней анимации графического символа с главной
- Edit easing – редактирование кривых скорости анимации. Вертикальная шкала это tween анимация, горизонтальная это кадры. Активный флажок вверху применяет анимацию для всех свойств. Неактивный флажок, позволит настроить отдельно свойство, указанное в списке левее. Клик по точке прямой, получаем кривую Безье с возможностью придания сглаженной кривой. Совмещая точку с вертикальными линиями графика, мы попадаем точно кадр. [Alt]+click – удаляет точку.

Изображение
рис 30


На рисунке 30, запущен редактор Edit easing, на нём график изменения скорости для свойства Position третьего кадра.

Shape tween

Shape tween создаётся аналогично classic tween, но вместо символов в ключевые кадры размещают формы, затем выделяют диапазон между ключевыми кадрами и командой Insert/Shape Tween создаётся анимация. Корректная анимация также имеет стрелу между ключевыми кадрами, цвет кадров shape tween зелёный.

Изображение
рис 31


Изображение
рис 32


Изображение
рис 33


Изображение
shape tween


Управляющие точки (хинты)
Когда в ключевых кадрах сложные формы, результат анимации может получиться не тот, что нужен. Например левая и центральная shape анимация выглядит прилично, но вот правая не совсем удачная. Это связано с тем, что одна из форм имеет замкнутые участки без графики, от этого расчёт промежуточных кадров происходит не корректно.

Изображение
shape tween корректный и не очень результат


В таких случаях используют shape hints, здесь идёт соединение точек начального ключевого кадра с точками конечного ключевого кадра. Выделяют первый ключевой кадр и вызывают команду Modify/Shape/Add Shape Hint.

Для нашего примера:
- выделяем первый ключевой кадр,
- вызываем команду Modify/Shape/Add Shape Hint
- передвинем красный кружок с символом на край графической формы
- выделяем второй ключевой кадр, перемещаем на такой же край красный кружок. Цвет кружка второго кадра должен измениться на зелёный.

Изображение Изображение
рис 36 рис 37


Аналогично создадим shape hint для ещё одной стороны геометрической формы. Обратим внимание, на изменённый цвет кружка с предыдущего шага первого ключевого кадра.

Изображение Изображение
рис 38 рис 39


Изображение
shape tween с применением shape hints


Движение по траектории

Classic tween создаёт анимацию изменения положения объекта только по прямой линии. Если необходимо чтобы объект перемещался по заданной траектории, ему нужно сообщить маршрут. Маршрут задаётся с помощью направляющего слоя в котором находится графическая форма маршрута. Направляющий слой располагается над слоем или слоями с classic tween.

Изображение
перемещение по прямым и по траектории


Создадим движение по траектории:

Поместим в ключевой кадр объект анимации (графический символ)

Изображение
рис 42


- Выделим на временной шкале ключевой кадр и создадим classic tween
- Правый клик по имени слоя с объектом анимации и в контекстном меню выбираем Add Classic Motion Guide. Над слоем с анимацией появился направляющий слой с именем Guides Layer

Изображение
рис 43


-В направляющий слой поместим траекторию движения. Траектория строится из графической формы

Изображение
рис 44


- Помещаем объект в начало траектории

Изображение
рис 45


- В слое анимации добавляем второй ключевой кадр и до него продлеваем количество кадров направляющего слоя

Изображение
рис 46


- Во втором ключевом кадре, передвигаем объект в конец траектории.

Изображение
рис 47


Анимация готова

Изображение
перемещение по траектории без ориентации



Если выделить первый ключевой кадр анимации, затем в панели Properties секция Tweening установить Orient to Path, то объект анимации будет учитывать ориентацию траектории вдоль оси Х

Изображение
перемещение по траектории с ориентацией


Использование масок

Маска позволяет скрыть часть содержимого на сцене. Чтобы сделать маску, нужно нарисовать графический образ нужной формы, и поместить его в специальный слой Mask (Маска). Затем создать слой Masked, который подчинён слою Mask и создать там анимацию. Объекты анимации не будут видны, если их координаты будут за пределами поверхности маски, т.к. она отсекает всё, что за её пределами.
На рисунке 50 сцена Adobe Flash, пять слоёв, чёрный фон и четыре графические фигуры. Затем создали слой маску Mask и к ней приобщили (Masked) четыре слоя с фигурами, слои Mask и Masked приобрели специальную иконку. В слой маску поместили обыкновенный овал.

Изображение
рис 50


В результате овал отсёк четыре слоя с фигурами, а слой с фоном остался такой как есть

Изображение
отсечение маской


Анимация прозрачности и цвета

Прозрачность (альфа) и цвет регулируют в секции Color effect панели Properties для выделенного на сцене объекта. Создадим появление звезды красного цвета, затем изменим красный цвета на жёлтый:

1. Поместим графический символ на сцену, добавим двадцать кадров и создадим три ключевых кадра.
5. Объекту в первом ключевом кадре в секции Color effect значение Alpha ставим 0
3. Объекту во втором ключевом кадре в секции Color effect значение Alpha должно быть 100
4. Объекту в третьем ключевом кадре в секции Color effect настраиваем свойство Tint так: Tint:100, Red:255, Green:100, Blue: 0
5. И наконец для двух ключевых кадров создаём classic tween

Изображение
рис 52


Motion tween(Анимация движения)

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

Здесь используется один ключевой кадр с ОДНИМ объектом анимации, а для каждого изменения объекта вводится понятие ключевой кадр свойств, в котором можно определить одно или несколько свойств, для ОДНОГО объекта анимации. На рисунке 53 показана временная шкала с двумя слоями, верхний содержит motion tween, нижний - classic tween. Classic tween в каждом ключевом кадре содержит объект анимации, тогда как motion tween содержит один ключевой кадр с объектом.

Изображение
рис 53


Создадим анимацию движения:

- Создаём ключевой кадр с объектом анимации
- Insert/Motion Tween (Правый клик/Motion Tween). Если на шкале, ключевой кадр был один, программа создаст анимацию движения длинной в одну секунду.
- При желании длину анимации можно увеличить клавишей [F5]. Теперь размещаем ползунок в кадр, в котором буден задано какое-нибудь свойство, например в тридцатый кадр
- пока ползунок в тридцатом кадре, перемещаем объект в нужное для нас место на сцене. В десятом кадре появился чёрный ромбик, это ключевой кадр свойств.
Анимация Motion tween готова.

Изображение
рис 54


Мы создали анимацию типа Position, программа Adobe Flash автоматически создаёт траекторию движения цвета слоя. Траектория видна когда выделен слой, её можно редактировать инструментом Selection и Subselection. Subselection изменяет кривизну траектории рис 55 слева, а за опорную точку изменяется длина и направление. Subselection перемещает анимацию на сцене, рис 55 справа.

Изображение
рис 55


Вращение вдоль траектории можно добиться если создавать ключевые кадры свойств в местах изменения направления движения и вращения объекта инструментом Free Transform (Свободная трансформация) рис 56.

Изображение
рис 56


Источник kshu.su
Автор: Kirill Shurahtenkov
Изображение

Вернуться в «Уроки Flash»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость