TweenLite и ActionScript 2.0

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

GreenSock

Существует в двух версиях:

- версия под ActionScript 2.0;

- версия под ActionScript 3.0.

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

TweenLite предоставляет создателям флеш-приложений много удобных и простых решений для программной анимации, но сейчас я затрону только самые основы и только для ActionScript 2.0.

Первым делом надо сказать, что GreenSock пошли на встречу пользователям и создали целый ряд генераторов кода для своих продуктов, в том числе и для TweenLite:

Генератор кода для 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 можно скачать по этой ссылке.

Автор: admin

Дата добавления: 2012-02-17

Просмотров: 6577

Рейтинг поста: +9-

Правила перепечатки

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2016-04-26
Спасибо. Приятно :-)
Комментатор
Комментарий добавил(а): Меруерт
Дата добавления: 2016-04-26
Самый лучший сайт по макромедии!Спасибо за исходники и скрипты.
Добавить комментарий:







[ + ] помощь по форматирование текста

Идиот-тест

Если все обязательные поля (отмечены * ) заполнены необходимой информацией, то нажимаем кнопку Добавить комментарий.

Меню
Подписка
Рубрики
Метки
Последние комментарии
Рейтинг постов
Реклама
Друзья
География гостей
Статистика
Яндекс.Метрика