TweenLite - это ActionScript-движок для программной анимации объектов от GreenSock.

Существует в двух версиях:
- версия под ActionScript 2.0;
- версия под ActionScript 3.0.
Движок не является полностью бесплатным (смотрите лицензию), но для некоммерческих проектов и для некоторых случаев коммерческого использования он доступен бесплатно. Скачать можно по этой ссылке.
TweenLite предоставляет создателям флеш-приложений много удобных и простых решений для программной анимации, но сейчас я затрону только самые основы и только для ActionScript 2.0.
Первым делом надо сказать, что GreenSock пошли на встречу пользователям и создали целый ряд генераторов кода для своих продуктов, в том числе и для TweenLite:

Данный генератор кода размещён в соответствующем разделе сайта www.greensock.com, а также идёт в комплекте с самим движком. Именно через генератор проще всего начинать работу с данной библиотекой. Просто настраиваете желаемый программный эффект, а потом копируете код из генератора в свой проект.
Например, очень часто в флеш-проектах используются различные эффекты для кнопок: изменение прозрачности; увеличение/уменьшение размеров; перемещение по координатным осям и так далее. С TweenLite эти эффекты реализуются невероятно просто...
Код ActionScript 2.0:
/*
импорт классов
*/
import com.greensock.*;
/*
увеличиваем кнопку при наведении курсора мышки
*/
btn.onRollOver = function() {
TweenLite.to(btn, 1, {_xscale:200, _yscale:200});
};
/*
обратная операция
*/
btn.onRollOut = function() {
TweenLite.to(btn, 1, {_xscale:100, _yscale:100});
};
Чтобы приведённый код сработал, надо выполнить всего два условия:
- в одной папке с вашим флеш-проектом должна располагаться папка "com", взятая из архива с самим движком TweenLite;
- у вас на сцене флеш-ролика должен присутствовать MovieClip "btn".
Если у вас что-то не получается, то загляните в исходник к данному уроку (ссылка на исходник в конце поста). У меня же получилось следующее:
А теперь небольшое пояснение к коду. Для создания простых анимационных эффектов используется метод TweenLite.to(). Он имеет следующие параметры:
- первый параметр - это имя объекта, к которому мы хотим применить программную анимацию (в нашем случае таким объектом является мувик btn);
- второй параметр - продолжительность программной анимации в секундах (у нас стоит 1 секунда);
- третий параметр - это ассоциативный массив с парами свойство:значение. Например, запись {_xscale:200, _yscale:200} означает, что мы хотим увеличить наш объект по оси X и Y до 200%. Кроме указанных свойств _xscale и _yscale, TweenLite также поддерживает работу со следующими свойствами:
- _x ;
- _y ;
- _rotation ;
- _alpha и некоторыми другими...
Кроме этого, в арсенале TweenLite имеется богатый выбор функций ускорения/замедления анимации. Все они перечислены в генераторе кода и их работу вы тоже можете просмотреть с помощью генератора. Давайте перепишем наш предыдущий код с использованием одной из функций замедления/ускорения...
Код ActionScript 2.0:
/*
импорт классов
*/
import com.greensock.*;
import com.greensock.easing.*;
/*
увеличиваем кнопку при наведении курсора мышки
*/
btn.onRollOver = function() {
TweenLite.to(btn, 1, {_xscale:200, _yscale:200, ease:Bounce.easeInOut});
};
/*
обратная операция
*/
btn.onRollOut = function() {
TweenLite.to(btn, 1, {_xscale:100, _yscale:100, ease:Bounce.easeInOut});
};
Результат:
Как видите, характер анимации изменился...
Но очень часто нам требуется, чтобы при завершении анимации совершалось какое-то действие. Что делать в этом случае? А ничего особенного - просто немного дописать код. Давайте для примера сделаем следующее: мы сохраним увеличение-уменьшение кнопки при наведении курсора мышки, но теперь наша кнопка будет ещё и полупрозрачной всё время, пока к ней не применяется программная анимация.
Код ActionScript 2.0:
/*
импорт классов
*/
import com.greensock.*;
import com.greensock.easing.*;
/*
делаем нашу кнопку изначально полупрозрачной
*/
btn._alpha = 50;
/*
увеличиваем кнопку при наведении курсора мышки
*/
btn.onRollOver = function() {
btn._alpha = 100;
TweenLite.to(btn, 1, {_xscale:200, _yscale:200, ease:Bounce.easeInOut});
};
/*
обратите внимание, что теперь мы отслеживаем событие onComplete и при наступлении этого события запускаем функцию func
*/
btn.onRollOut = function() {
TweenLite.to(btn, 1, {_xscale:100, _yscale:100, ease:Bounce.easeInOut, onComplete:func});
};
/*
функция, которая запускается после окончания программной анимации
*/
function func(){
btn._alpha = 50;
}
Результат:
onComplete не является единственным событием в арсенале TweenLite, но на практике именно onComplete используется чаще других.
Но и это ещё не всё. Часто необходимо не просто вызвать функцию при наступлении события, а передать этой функции какие-то параметры. Так вот, TweenLite позволяет передать множество параметров в виде массива. Делается это следующим образом...
Код ActionScript 2.0:
/*
импорт классов
*/
import com.greensock.*;
import com.greensock.easing.*;
/*
делаем нашу кнопку изначально полупрозрачной
*/
btn._alpha = 50;
/*
увеличиваем кнопку при наведении курсора мышки
*/
btn.onRollOver = function() {
btn._alpha = 100;
TweenLite.to(btn, 1, {_xscale:200, _yscale:200, ease:Bounce.easeInOut});
};
/*
отслеживаем событие onComplete и при наступлении этого события запускаем функцию func
а функции func передаём в качестве параметра имя анимируемого объекта
*/
btn.onRollOut = function() {
TweenLite.to(btn, 1, {_xscale:100, _yscale:100, ease:Bounce.easeInOut, onComplete:func, onCompleteParams:[btn._name]});
};
/*
функция получает в качестве параметра имя анимируемого объекта и у этого объекта изменяет прозрачность
*/
function func(btnName){
_root[btnName]._alpha = 50;
}
Данный код будет работать точно также, как и предыдущий пример. Но этот способ более удобен, если программно анимируется не один, а много объектов.
Ещё раз повторюсь, что возможности TweenLite гораздо шире, чем описано в данном посте. И этот движок значительно облегчает процесс программного управления объектами на сцене флеш-ролика. Поэтому время, потраченное на изучение TweenLite, окупится в 100-кратном размере :-)
Ну а под конец приведу пример примитивной галереи с использованием TweenLite, сделанной на скорую руку:
Исходники к данному уроку под Macromedia Flash 8 можно скачать по этой ссылке.