TweenLite та ActionScript 2
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, ); >; /* зворотна операція */ btn.onRollOut = function() < TweenLite.to(btn, 1, ); >;
Щоб наведений код спрацював, треба виконати лише дві умови:
- в одній папці з флеш-проектом повинна розташовуватися папка "com ",взята з архіву із самим двигуном TweenLite;
- у вас на сцені флеш-ролика повинен бути MovieClip "btn ".
А тепер невелике пояснення до коду. Для створення простих анімаційних ефектів використовується методTweenLite.to(). Він має такі параметри:
- перший параметр – це ім'я об'єкта, до якого ми хочемо застосувати програмну анімацію (у нашому випадку таким об'єктом є мувік btn);
- другий параметр – тривалість програмної анімації в секундах (у нас коштує 1 секунда);
- третій параметр - це асоціативний масив з парами. Наприклад, запис означає, що ми хочемо збільшити наш об'єкт по осі X та Y до 200%. Крім зазначених властивостей_xscale та_yscale, TweenLite також підтримує роботу з такими властивостями:
-_x ;
-_y ;
-_rotation ;
-_alpha та деякими іншими.
Код ActionScript 2.0:
/* імпорт класів */ import com.greensock.*; import com.greensock.easing.*; /* збільшуємо кнопку при наведенні курсору мишки */ btn.onRollOver = function() < TweenLite.to(btn, 1, ); >; /* зворотна операція */ btn.onRollOut = function() < TweenLite.to(btn, 1, ); >;
Як бачите, характер анімації змінився.
Але дуже часто нам потрібно, щоб після завершення анімації здійснювалася якась дія. Що робити у цьому випадку? А нічого особливого – просто трохи дописати код. Давайте для прикладу зробимо таке: ми збережемо збільшення-зменшення кнопки при наведенні курсору мишки, але тепер наша кнопка буде ще напівпрозорою весь час, поки до неї не застосовується програмна анімація.
Код ActionScript 2.0:
/* імпорт класів */ import com.greensock.*; importcom.greensock.easing.*; /* робимо нашу кнопку спочатку напівпрозорою */ btn._alpha = 50; /* збільшуємо кнопку при наведенні курсору мишки */ btn.onRollOver = function() < btn._alpha = 100; TweenLite.to(btn, 1, ); >; /* Зверніть увагу, що тепер ми відстежуємо подію onComplete і при настанні цієї події запускаємо функцію func */ btn.onRollOut = function() < TweenLite.to(btn, 1, ); >; /* функція, яка запускається після закінчення програмної анімації */ function func()
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, ); >; /* відстежуємо подію onComplete і при настанні цієї події запускаємо функцію func а функції func передаємо як параметр ім'я анімованого об'єкта */ btn.onRollOut = function() < TweenLite.to(btn, 1, ); >; /* функція отримує як параметр ім'я анімованого об'єкта і у цього об'єкта змінює прозорість */ function func(btnName)
Цей код працюватиме так само, як і попередній приклад. Але цей спосіб зручніший, якщо програмно анімується не один, а багато об'єктів.
Ще раз повторюся, що можливості TweenLite набагато ширші, ніж описано вданому пості. І цей двигун істотно полегшує процес програмного управління об'єктами на сцені флеш-ролика. Тому час, витрачений на вивчення TweenLite, окупиться у 100-кратному розмірі.
Ну а наприкінці наведу приклад примітивної галереї з використанням TweenLite, зробленої нашвидкуруч:
Вихідники цього уроку підMacromedia Flash 8 можна завантажити за цим посиланням.
Дата завантаження: 2012-02-17
Рейтинг посту: 9