Action Script 3. Урок 6. Программная анимация, класс Tween.

Снова привет всем, сегодня мы рассмотрим очередной урок по Action Script, достаточно интересный и несложный.


Урок 6. Класс Tween - программная анимация.

Сколько способов анимации во Flash мы знаем на данный момент?

• Вручную на Timeline;


• Анимация с помощью EnterFrame;


• При помощи таймера.

Теперь мы узнаем про еще один, не менее удобный способ - это анимация с помощью класса Tween. Он может изменять такие параметры объекта, как координаты, прозрачность, вращение и размеры. Причем создается эта анимация в одну строчку, и по необходимости возможно ее изменение по ходу программного кода.

Итак, начнем с простого движения объекта. Двигать будем нарисованный программно объект.

var box:Sprite = new Sprite();
box.graphics.lineStyle(1);
box.graphics.beginFill(0x999999);
box.graphics.drawRect(0,150,50,50);
addChild(box);

var tween:Tween = new Tween(box,"x",None.easeNone,100,400,3,true);

Итак, смотрим, что же такого нового у нас добавилось.
Мы нарисовали объект с именем box. Затем создадим новую переменную с типом Tween, то есть с типом анимации. Эта переменная задаст ту самую анимацию, к которой мы стремимся. В скобках после ключевого слова new по порядку пишем свойства, которые покажут, что, как, куда и когда изменять. Свойства класса Tween:

1. Имя объекта для анимации. Указан объект box, который мы только что нарисовали и поместили на сцену.


2. Параметр объекта. Мы указали изменение координаты по оси x, то есть простое движение вправо или влево.


3. Тип замедления. Об этом чуть ниже, а пока оставим None.easeNone.


4. Дальше указываем начальное значение параметра, которого мы указали на втором месте.


5. Конечное значение параметра.


6. Время выполнения анимации. Может быть указано в секундах или кадрах - это мы определяем в следующем свойстве.


7. Значение boolean, указывающее на единицу измерения времени в предыдущем свойстве - если указано true - то в секундах, если false - то в кадрах. Мы указали true, поэтому вся анимация будет длиться 3 секунды.

Все, закрываем скобку, и тестируем ролик. Ошибка. Все верно, ведь просто так класс Tween использовать нельзя. Необходимо также предварительно его импортировать из библиотеки классов Flash. Добавляем пару строчек в начало кода и итоговый код такой.

import fl.transitions.*;
import fl.transitions.easing.*
var box:Sprite = new Sprite();
box.graphics.lineStyle(1);
box.graphics.beginFill(0x999999);
box.graphics.drawRect(0,150,50,50);
addChild(box);

var tween:Tween = new Tween(box,"x",None.easeNone,100,400,3,true);

Тестируем ролик, все, квадратик перемещается, все хорошо. Также есть довольно полезное свойство класса Tween - looping, указывающее на циклическое повторение анимации. Добавляем  такую строчку после имеющегося кода:

tween.looping = true;

Где tween - это нами заданное имя этой анимации.


Хм, вам не кажется, что простая анимация перехода от одного места к другому немного скучновата? Хочется добавить каких-нибудь эффектов, например эффектов замедления, отскакивания, инерции. Оказывается, все это уже встроено в этот класс, и не надо создавать собственные классы с высчитыванием сложных физических формул(если конечно не придавать этому качественное, основательное значение). Однако для создания красивой анимации стандартных эффектов замедления вполне достаточно.

Итак, за эффекты замедления отвечает как-раз то третье свойство, которое мы выше указали как None.easeNone, т.е. убрали вообще всякий эффект.

Существует вообще 6 различных эффектов замедления, и 3 общих параметра на каждого.

• None. Этот класс определяет равномерное движение объекта, без различных функций замедления.


• Regular. Определяет плавное торможение объекта перед точкой остановки  или ускорение после начала.


• Strong. Чуть резче, чем Regular.


• Back. Немного выезжает за пределы точки остановки, и затем возвращается.


• Elastic. Создает впечатление, будто объект на эластичной резинке и несколько колеблется.


• Bounce. Объект несколько раз подпрыгивает над точкой.

Каждый эффект еще можно обозначить по параметрам - проигрывать замедление в начале анимации (напр. Back.easeIn), в конце анимации (Back.easeOut) или и в конце и в начале (Back.easeInOut). Такое разнообразие даст возможности для различных эффектов анимации, от самых простых до сложных.
Разберем пример.

import fl.transitions.*;
import fl.transitions.easing.*

var box:Sprite = new Sprite();
box.graphics.lineStyle(1);
box.graphics.beginFill(0x999999);
box.graphics.drawRect(0,150,50,50);
addChild(box);

stage.addEventListener(KeyboardEvent.KEY_DOWN, rightF);
function rightF(e:KeyboardEvent):void {
 if (e.keyCode==39) { // при нажатии на стрелку "вправо"
 var tween1:Tween = new Tween(box,"x",Strong.easeOut,0,500,3,true); //передвигаем квадрат
 }
}
stage.addEventListener(KeyboardEvent.KEY_DOWN, leftF);
function leftF(e:KeyboardEvent):void {
 if (e.keyCode==37) {//при нажатии на стрелку "влево"
 var tween2:Tween = new Tween(box,"x",Strong.easeOut,500,0,3,true);//двигаем обратно
 }
}

Теперь рассмотрим основные методы этого класса

stop и start как и у таймера, только start() начинает анимацию сначала.

stage.addEventListener(KeyboardEvent.KEY_DOWN, startF);
function startF(e:KeyboardEvent):void {
 if (e.keyCode==32) {
 tween1.start();
 }
}

(при нажатии на пробел, анимация идет сначала).

looping() - это цикличное повторение анимации.

fforward() - это переход к конечному положению анимируемого объекта.

Отдельно рассмотрим метод yoyo() и вместе с ним событие Tween.

С изучением класса Tween мы рассмотрим новый вид события - TweenEvent, то есть функция будет выполняться при определенном положении анимации. Основные константы  этого события:

• MOTION_FINISH - функция выполняется, когда анимация закончилась.


• MOTION_START - функция выполняется, когда анимация началась.


• MOTION_STOP - функция выполняется, когда анимация приостановилась.

Итак, создаем слушатель событий, и функцию, в которой укажем метод yoyo() - как понятно из названия метода — он осуществляет движение "туда-обратно".

Полный код.

import fl.transitions.*;
import fl.transitions.easing.*;

var box:Sprite = new Sprite();
box.graphics.lineStyle(1);
box.graphics.beginFill(0x999999);
box.graphics.drawRect(0,150,50,50);
addChild(box);

var tween1:Tween = new Tween(box,"x",Regular.easeInOut,0,500,3,true);
tween1.addEventListener(TweenEvent.MOTION_FINISH, yoyoF);
function yoyoF(e:TweenEvent):void {
 tween1.yoyo();
}

Как видно, мы добавили новый слушатель, и событие, которое будет осуществляться при окончании анимации tween1. Затем будет осуществляться метод yoyo(), который потянет наш объект обратно.

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