Класс Tween позволяет с легкостью создавать анимации программно через код ActionScript, для чего необходимо определить начальные и конечные параметры анимационных позиций объекта. В данном уроке будет рассмотрены основы класса Tween, варианты параметра easing (ослабление), методы, а также события. Видеоклип, представленный ниже, демонстрирует, как изображение движется при помощи класса Tween.

Данный урок будет разделен на следующие подразделы:

1. Основное использование класса Tween
2. Запуск примера
3. Варианты параметра easing (ослабление)
4. Методы класса Tween
5. События класса Tween
6. Другие свойства класса Tween

Основное использование класса Tween

Класс Tween — это класс языка ActionScript, который используется для покадрового изменения любых свойств любых объектов программно. Термин tween в данном уроке означает постепенное увеличение или уменьшение значения свойств, которые могут приводить к анимации объекта. Например, это может быть увеличение прозрачности объекта, его ширины или движение слева направо.

Класс Tween не включается по умолчанию в документ Flash и должен быть импортирован перед использованием. Adobe сделали это для того, чтобы создаваемые SWF файлы были меньшего размера, поэтому данный класс включается только в видео-ролики, которые этого требуют. Чтобы импортировать класс следует использовать директиву import вначале кода, перед тем, как начинается основной код. Вот код, который необходимо написать:

[code language=»actionscript3″]
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
[/code]

Класс Tween должен быть использован через экземпляр. При создании экземпляра класса Tween необходимо задать требуемые параметры. Это делается так, как показано в следующем коде:

[code language=»actionscript3″]
var myTween:Tween = new Tween(object, "property", EasingType, begin, end, duration, useSeconds);
[/code]

Все эти параметры должны быть заданы при создании экземпляра класса. Вот что означает каждый параметр:

1. object — имя экземпляра объекта, который будет анимирован. Например: circle, gallery_mc, myTextField_txt.
2. property — это имя свойства, которое будет анимировано, должно быть представлено в виде строки (в кавычках). Например: «alpha», «scaleX», «scaleY», «x», «y».
3. EasingType — тип ослабления, который определяет, как будет протекать анимация. Данный параметр будет рассмотрен в следующем подразделе урока. Примеры: Strong.EaseIn, Elastic.EaseOut, Back.EaseInOut.
4. begin — это позиция, с которой начнется анимация, параметр должен быть задан как числовое значение.
5. end — это позиция, на которой закончится анимация, параметр должен быть задан как числовое значение.
6. duration — это промежуток времени, за который будет проиграна анимация, значение по умолчанию — кадры, между тем, значение может быть задано в секундах, если установить последующий параметр на значение true.
7. useSeconds — установите этот параметр на значение true, если хотите, чтобы промежуток времени рассчитывался в секундах, а не в кадрах.

Так, например, если вы хотите передвинуть объект с именем circle вдоль оси x, начиная с позиции 40 до позиции 300, с анимацией в 5 секунд, то нужно написать следующий код:

[code language=»actionscript3″]
var myTween:Tween = new Tween(circle, "x", Strong.easeOut, 40, 300, 5, true);
[/code]

Я намеренно не говорил о параметре EasingType, потому что он будет рассмотрен в следующем подразделе.

Запуск примера

Создайте новый Flash-документ, нарисуйте прямоугольник или другой объект, преобразуйте его в символ типа MovieClip (нажмите F8), и в свойствах объекта назначьте имя экземпляру «circle«. Выделите первый кадр на временной шкале, затем нажмите на кнопку стрелочки в правом верхнем углу, чтобы зайти в панель Actions. Вставьте код, описанный ниже, и протестируйте Flash-приложение (Ctrl+Enter) и движение объекта.

[code language=»actionscript3″]
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

var myTween:Tween = new Tween(circle, "x", Strong.easeOut, 40, 300, 5, true);
[/code]

Вы можете анимировать другие свойства и попробовать другие значения, изменив параметры. Например, чтобы объект исчезал, уменьшите значение «alpha» от 1 до нуля в течение 10 секунд:

[code language=»actionscript3″]
var myTween:Tween = new Tween(circle, "alpha", Strong.easeOut, 1, 0, 10, true);
[/code]

Использование классов Easing (ослабление) для изменения анимации движения

Можно изменить последовательность движения анимации, используя различные классы ослабления. Easing (ослабление) — это ускорение или замедление скорости, с которой движется объект. Это довольно трудно объяснить словами, но легко понять просто взглянув на это (посмотрите пример ниже).

Существует шесть основных типов ослабления:

1. Regular: скорость движения будет постепенно увеличиваться или уменьшаться, как определено методом easing.
2. Bounce: движение будет отскакивать назад на несколько шагов, когда объект достигнет конечной позиции, прежде чем остановиться.
3. Back: движение будет выходить за рамки конечной позиции, прежде чем отскочить на нее назад.
4. Elastic: сочетание эффектов Bounce и Back.
5. Strong: более выраженный эффект Regular.
6. None: никакого ослабления, движение не будет ускоряться.

Каждый из этих функций должна быть настроена с использованием одного из метода ослабления (easing) для того, чтобы определить к какой части анимации будет применен эффект, то есть, на старте анимации, в конце анимации, в обоих случаях, или эффект не будет применен вообще:

1. easeIn: — эффект анимации применяется в самом начале.
2. easeOut: — эффект применяется в конце анимации.
3. easeInOut: — эффект применяется в начале и конце анимации.
4. easeNone: — никакой эффект анимации не будет применен, используется вместе с функцией None.

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

Методы класса Tween

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

• Tween.stop() указывает остановиться анимации на текущей позиции.
• Tween.resume() указывает анимации возобновить воспроизведение с текущей позиции, этот метод используется после вызова метода stop().
• Tween.start() указывает анимации начать воспроизведение с начальной позиции, это не то же самое что resume(). Этот метод фактически перезапускает анимацию.
• Tween.continueTo(finish, duration) указывает остановить текущую анимацию и продолжить переход к новой позиции, начиная с текущего места.
• Tween.fforward() указывает остановить анимируемый объект на конечной позиции анимации сразу.
• Tween.rewind() указывает анимации вернуться назад и остановиться на начальной позиции.
• Tween.nextFrame() указывает анимации перейти на следующий кадр.
• Tween.preFrame() указывает анимации вернуться на предыдущий кадр.
• Tween.yoyo() указывает воспроизвести анимацию в обратном направлении.

В примере ниже создается класс Tween, но затем сразу же останавливается. Слушатель событий (event listener) прикрепляется к кнопке, которая при ее нажатии начинает анимацию. Как видите, методы вызываются напрямую через экземпляр класса Tween.

[code language=»actionscript3″]
var myTween:Tween = new Tween(circle, "alpha", Strong.easeOut, 1, 0, 10, true);
myTween.stop();

my_btn.addEventListener(MouseEvent.CLICK, onClick);

function onClick(e:MouseEvent){
myTween.start();
}
[/code]

События класса Tween

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

Класс TweenEvent имеет следующие события:

• TweenEvent.MOTION_FINISH — это событие происходит, когда анимация завершилась, достигнув конечной позиции.
• TweenEvent.MOTION_STOP — это событие происходит, когда анимация остановлена методом stop().
• TweenEvent.MOTION_START — это событие происходит, когда анимация начинается, используя метод start().
• TweenEvent.MOTION_RESUME — это событие происходит, когда анимация возобновляется методом resume().
• TweenEvent.MOTION_CHANGE — это событие происходит постоянно во время выполнения анимации.
• TweenEvent.MOTION_LOOP — это событие должно происходить, когда анимация перезапускается повторное действие. Я не знаю, что это означает, так как пробовал использовать это событие с методом yoyo() и ничего не происходило.

Все эти события могут быть зарегистрированы через класс Tween с помощью метода addEventListener() и с указанием функции-обработчика события — также как и все другие события в ActionScript 3.0. В примере ниже регистрируется экземпляр класса Tween с событием MOTION_FINISH и выполняется метод yoyo() при завершении анимации. Это фактически приводит к постоянной анимации.

[code language=»actionscript3″]
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

var myTween = new Tween(my_mc, "x", Strong.easeInOut, 100,300, 1, true);

myTween.addEventListener(TweenEvent.MOTION_FINISH, onFinish);

function onFinish(e:TweenEvent):void {
myTween.yoyo();
}
[/code]

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

[code language=»actionscript3″]
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

var myTween = new Tween(my_mc, "x", Strong.easeInOut, 100,300, 1, true);

myTween.addEventListener(TweenEvent.MOTION_FINISH, onFinish);

function onFinish(e:TweenEvent):void {
e.target.yoyo();
}
[/code]

Такой код позволяет использовать прослушиватель события больше, чем с одной анимацией в одно и то же время, поскольку он явно не относится к текущей анимации — хороший способ сэкономить время и сделать код более организованным.

Другие свойства класса Tween

В этом небольшом подразделе урока будет рассмотрены два свойства класса Tween, к которым можно обратиться, чтобы получить необходимую информацию. Обращаться к обоим свойствам нужно напрямую из экземпляра класса Tween. Вот они:

• obj — ссылка на объект, анимируемый в данное время. Это свойство полезно, если вам нужно сослаться на него позже, используя обработчик события. В примере ниже устанавливается свойство alpha на 0.5 , когда анимация завершается:

[code language=»actionscript3″]
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

var myTween = new Tween(my_mc, "x", Strong.easeInOut, 100,300, 1, true);

myTween.addEventListener(TweenEvent.MOTION_FINISH, onFinish);

function onFinish(e:TweenEvent):void {
myTween.obj.alpha=0.5;
}
[/code]

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

[code language=»actionscript3″]
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

var myTween = new Tween(my_mc, "x", Strong.easeInOut, 100,300, 1, true);

myTween.addEventListener(TweenEvent.MOTION_CHANGE, onChange);

function onChange(e:TweenEvent):void {
trace(myTween.position);
}
[/code]

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

Другие похожие уроки:

Анимация движения в Adobe Flash по направляющей (guide)

Adobe Flash: Простая анимация