TweenLite и ActionScript 2
TweenLite е машината за анимиране на обекти ActionScript на GreenSock.
Съществува в две версии:
- версия подActionScript 2.0 ;
- версия подActionScript 3.0.
Двигателят не е напълно безплатен (вижте лиценза), но за некомерсиални проекти и за някои търговски цели е достъпен безплатно. Можете да изтеглите от тази връзка.
TweenLite предоставя на създателите на Flash много удобни и лесни софтуерни решения за анимация, но засега ще разгледам само основите и само за ActionScript 2.0.
На първо място, трябва да кажа, че GreenSock се срещна с потребителите и създаде редица генератори на кодове за своите продукти, включително за TweenLite:
Този генератор на кодове се намира в съответния раздел на уебсайта www.greensock.com и се доставя със самия двигател. Именно чрез генератора е най-лесно да започнете да работите с тази библиотека. Просто настройте желания софтуерен ефект и след това копирайте кода от генератора във вашия проект.
Например, много често флаш проекти използват различни ефекти за бутони: промяна на прозрачността; увеличаване / намаляване на размера; движение по координатните оси и др. С TweenLite тези ефекти са невероятно лесни за изпълнение.
Код на ActionScript 2.0:
/* импортиране на класове */ импортиране com.greensock.*; /* Увеличете бутона при преместване на мишката */ btn.onRollOver = function() < TweenLite.to(btn, 1, ); >; /* обратна операция */ btn.onRollOut = function() < TweenLite.to(btn, 1, ); >;
За да работи горният код, трябва да бъдат изпълнени само две условия:
- папката "com " трябва да се намира в същата папка с вашия флаш проект,взет от архива със самия двигател TweenLite;
- трябва да имате MovieClip "btn " на вашата флаш филмова сцена.
А сега малко обяснение на кода. За да създадете прости анимационни ефекти, използвайте методаTweenLite.to(). Има следните опции:
- първият параметър е името на обекта, към който искаме да приложим софтуерна анимация (в нашия случай такъв обект е btn movie clip);
- вторият параметър е продължителността на анимацията на програмата в секунди (имаме 1 секунда);
- третият параметър е асоциативен масив с двойки свойство:стойност. Например записът означава, че искаме да увеличим нашия обект по оста X и Y с 200%. В допълнение към посочените свойства_xscale и_yscale, TweenLite поддържа и следните свойства:
-_x ;
-_y ;
-_въртене ;
-_alpha и някои други.
Код на ActionScript 2.0:
/* импортиране на класове */ импортиране com.greensock.*; импортиране com.greensock.easing.*; /* Увеличете бутона при преместване на мишката */ btn.onRollOver = function() < TweenLite.to(btn, 1, ); >; /* обратна операция */ btn.onRollOut = function() < TweenLite.to(btn, 1, ); >;
Както можете да видите, естеството на анимацията се е променило.
Но много често се нуждаем от извършване на някакво действие, когато анимацията приключи. Какво да направите в този случай? И нищо особено - просто добавете малко код. Например, нека направим следното: ще запазим бутона да се увеличава и намалява при преместване на мишката, но сега нашият бутон също ще бъде полупрозрачен през цялото време, докато не бъде анимиран програмно.
Код на ActionScript 2.0:
/* импортиране на класове */ импортиране com.greensock.*; импортиранеcom.greensock.easing.*; /* направи нашия бутон първоначално полупрозрачен */ btn._alpha = 50; /* Увеличете бутона при преместване на мишката */ btn.onRollOver = function() < btn._alpha = 100; TweenLite.to(btn, 1, ); >; /* забелязваме, че сега слушаме за събитието onComplete и задействаме функцията func, когато събитието се случи */ btn.onRollOut = function() < TweenLite.to(btn, 1, ); >; /* функция, която се изпълнява след края на анимацията на програмата */ функция func()
onComplete не е единственото събитие в арсенала на TweenLite, но на практика най-често се използва onComplete.
Но това не е всичко. Често е необходимо не само да се извика функция, когато възникне събитие, но и да се предадат някои параметри на тази функция. И така, TweenLite ви позволява да предавате много параметри като масив. Това става по следния начин.
Код на ActionScript 2.0:
/* импортиране на класове */ импортиране com.greensock.*; импортиране 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