Твининг - volsk-sch17.edusite.ru

Твининг - анимация с построением промежуточных кадров (Tweened motion)
Во Flash существуют два вида расчетных анимаций:
o
твининг - motion tweening (построение анимации на основе модификации символов)
o
шейпинг (трансформация) - shape tweening (построение анимации на основе изменения
формы).
Эти способы отличаются в корне. Первый используется чаще всего, т.к. с помощью него можно
построить подавляющее большинство анимаций. Второй применяется в случаях, когда нужно
плавное изменение формы (морфинг).
В данном модуле рассматривается только твининг.
Идея твининга такова: Вы рисуете в ключевом кадре объект, потом в другом ключевом кадре
производите изменения над местоположением, цветом или размером объекта, и просите Flash
рассчитать те кадры, которые лежат между этими двумя ключевыми кадрами. Flash
автоматически достраивает промежуточные кадры, и вы получаете плавную анимацию, на
которой объект перемещается по прямой в указанном направлении, плавно меняет цвет или
размер.
Скорость и плавность анимации зависят:
o
от количества расчетных кадров между ключевыми кадрами, которые вы отводите под
изменение
o
от скорости вашего Flash фильма (movie).
Задание скорости воспроизведения фильма
В модуле 3 рассказывалось как изменить скорость фильма из главного меню:
- Modify - Movie (Модифицировать - Фильм)
- в открывшемся окне Movie Properties в поле Frame Rate задается количество кадров в секунду.
Для качественной анимации скорость должна быть не меньше 25-30 кадров в секунду.
Плавность и длительность задается количеством кадров, отведенных на анимацию (ее фрагмент).
Например, если скорость вашего фильма - 30 кадров/сек., и вам нужно совершить перемещение
объекта, скажем, из одного угла картинки - в другой за 2.5 секунды, то на это движение вам
нужно отвести 75 кадров. Т. е второй ключевой кадр должен отстоять от первого на расстоянии
75 кадров.
Если скорость демонстрации фильма 10 кадров/сек, то для 10-секундного воспроизведения
необходимы 100 кадров.
Твининг - анимация движения (Motion Tweening)
Motion Tweening - наиболее часто используемая техника анимации во Flash. В этом случае
анимация строится на основе модификации символов, т.е. объектом анимации является символ.
Как и в анимации shape tweening, на каждый объект в один момент времени, нам нужен один
слой. На этом слое должен находиться один символ, с которым и будут происходить все
изменения.
Вот какие параметры символа могут модифицироваться при использовании Motion Tweening:
o
размер (как пропорционально, так и непропорционально - отдельно высоту и ширину)
o
наклон
o
расположение
o
угол поворота
o
цветовые эффекты (см. ниже)
o
можно использовать направляющие слои для задания траектории движения объекта
(модуль 6).
Включить motion tweening можно несколькими способами, а отключить, только одним.
Для того чтобы включить motion tweening, нужно сделать активным начальный кадр вашего
перехода, затем, нажав правую клавишу мыши, в контекстном меню выбрать
Create motion tween (Создать расчетную анимацию)
Это же можно сделать, выбрав в главном меню Insert (Вставить) - Create motion tween
(Создать расчетную анимацию).
Универсальный способ включения/выключения motion tweening - с помощью панели Frame
(Кадр), выбрав Motion в поле Tweening. Там же можно контролировать параметры анимации:
Easing - обратное экспоненциальное ускорение (замедляет или ускоряет движение объекта)
Rotate позволяет управлять вращением.
o
Auto - Flash автоматически пытается определить количество витков.
o
CW (Clockwise, по часовой стрелке) и
o
ССW (Counter Clockwise - против часовой стрелки).
При этом рядом в поле справа появляется возможность ввести количество оборотов. Можно
использовать только целые значения. Можно отключить вращение, выбрав None.
Orient to path - поворачивает символ в соответствии с направляющей линией.
Snap - привязывает символ к этой направляющей.
В случаях, когда количество кадров основной сцены не бывает кратным количеству кадров
символа, флажок Synchronize позволяет синхронизировать эти две анимации.
Создадим Motion Tween анимацию. Этот метод предназначен для управления атрибутами объекта.
Наиболее типичное применение - изменение координат, т.е. движение.
Пример 1. "Отскакивающий мяч"
1.
Создайте новый файл (Ctrl-N).
В рабочей области:
2.
В левом верхнем углу рабочей области нарисуйте окружность и залейте ее радиальным
градиентом.
3.
В панели Info задайте координаты для объекта X=0 Y=0. Чтобы открыть панель
выберите в главном меню Window - Panels - Info (Окно - Панели - Инфо).
4.
Выделите первый кадр. В главном меню выберите Insert - Create Motion Tween
(Вставить - Создать расчетную анимацию). Теперь кадр имеет светло-фиолетовый цвет. А мяч
стал символом, о чем свидетельствует голубая рамка вокруг него.
5.
Создадим ключевые кадры в 30-м и в 60-м кадрах (Для этого нужно выделить в шкале
времени в рабочем слое нужный кадр и выбрать в главном меню Insert - Keyframe (Вставить
ключевой кадр) или нажать на клавиатуре F6). Ключевые кадры соединяются длинными
стрелками на фиолетовом поле.
6.
Выделим ключевой кадр в 30-ом кадре и с помощью панели Info, задав координаты X=0
Y=200, переместим наш объект на 200 пикселей вниз.
7. Перейдем в 60-й кадр и проверим, что наш объект вернулся на прежнее место, X=0 Y=0.
8. Просмотрим анимацию Enter или Ctrl Enter.
9. Перейдем в 1-ый кадр и сделаем нашу анимацию более реалистичной. Шарик должен
двигаться быстрее при движении вниз и медленнее при движении вверх.
Выберите панель Frame (из главного меню Window - Panels - Frame или горячие клавиши
Ctrl-F).
Здесь в поле Easing выберите значение -100. Это означает, что анимация будет медленнее в
начале и быстрее в конце. Также установим вращение по часовой стрелке нашего шарика.
Для этого выберем в поле Rotate значение CW и введем в поле Times значение 1.
9. Теперь перейдем в 30-й кадр. В этом кадре шарик находится в нижней части - в конце
своего падения. В палитре Frame в поле Easing выберем значение +100. Это означает, что
анимация будет быстрее в начале и медленнее в конце. Также установите вращение по
часовой стрелке нашего шарика. Для этого выберем в поле Rotate значение CW и введем в
поле Times значение 1.
10. Чтобы зациклить анимацию перейдем в 60-й кадр и зададим действие
GotoAndPlay(1)
что означает - перейти на первый кадр и проиграть.
Для этого:
o
Нажмите правой клавишей мыши по ключевому кадру в 60 кадре шкалы времени
o
В появившемся меню выберите команду Actions (Действия)
В появившемся окне Frame Actions (Действия кадра) нажмите левой клавишей мыши
на кнопку
o
o
В выпавшем меню выберите группу Actions (Действия)
o В большом списке команд языка Actions Script выберите команду goto (левой
клавишей мыши)
o В появившемся окне Frame Actions (Действия кадра) в правом поле вы увидите
выбранную вами команду с параметрами, которые устанавливаются в полях Scene
(Сцена), Type (Тип) и Frame (номер кадра). Оставьте параметры, задаваемые
программой по умолчанию: current scene - текущая сцена, Frame Number - номер
кадра. Так как в данном примере мы хотим проигрывать анимацию с первого кадра, то в
поле Frame необходимо оставить 1, если же необходимо проигрывание не с начала,
установите в поле Frame (номер кадра) номер того кадра, с которого вы хотели бы
вторично и далее проигрывать анимацию.
o Закройте окно Frame Actions
правом верхнем углу на кнопку
появится символ а, что означает,
простое, как в нашем случае, или
ActionScript.
(Действия кадра), нажав левой клавишей мыши в его
Закрыть окно. Окно закроется. В последнем 60 кадре
что в кадре запрограммировано некоторое действие,
сложный сценарий - программа, написанная на языке
11. Оптимизируйте размер сцены по содержимому, чтобы мяч действительно ударялся и
отскакивал от пола: через пункты меню Modify (Изменить) – Movie (Фильм) в окне Movie
Properties (Свойства анимации) нажмите на кнопку Contents (Содержимое).
12.
Протестируйте анимацию Ctrl Enter.
13.
Сохраните флэш-файл.
14.
Опубликуйте анимацию для Web.
Пример, что должно получиться – в файле ball.swf (если не просматривается, попробуйте через
Internet Explorer)