Tweener - Animacje i efekty ActionScript 3

Od pojawienia sie książki Roberta Pennera "Flash MX. Programowanie" sporo uwagi zaczęto zwracać na dynamikę animacji i dokonywania rożnego rodzaju przejść. Rozdział poświęcony tej tematyce można pobrać ze strony autora w pliku pdf . We Flash MX 2004 wprowadzono do programowania animacji w ActionScript 2 klasę mx.transitions.Tween. W dokumentacji Adobe poświęcono temu zagadnieniu rozdział About the Tween and TransitionManager classes Na stronach Adobe dla programistów znajduje się artykuł Using the Tween and Transition Classes in Flash MX 2004 Jen deHan wprowadzający w możliwości do programowania animizacji ujęć pośrednich W internecie pojawiło sie sie sporo artykułów na ten temat m.in. Using the Tween Class.

Gdy pojawił ActionScript 3 z frameworkiem Flex 2 to okazało się, że programiści mają do wykorzystania pakiety mx.effects, mx.effects.easing. W celu zapoznania sie z postawami używania efektów warto spojrzeć lekcję kursu Flex Quick Start o tym. W dokumentacji Flex napisano o stosowaniu własnych funkcji przyśpieszających czy zwalniających Using easing function a także o pisaniu własnych animacji (przykład z obracaniem) czy własnych efektów (przykład z dzwiękiem)

Takie bogactwo opcji animacji w frameworku Flex 2 sprawiło że programiści napisali aplikacje bazujące na formularzach MXML pełniące rolę narzędzi do konfiguracji (przeglądarek możliwości związanych z animacjami). Raul Diaz napisał narzędzie konfiguracji Custom Easing Function Explorer (kod źródłowy) który umożliwia podgląd własnych funkcji przyspieszających czy spowalniających Podobne narzędzie konfiguracji Fun with Easing Function (kod źródłowy) napisał James Ward. Natomiast Joe Johnston stworzył narzędzie do konfiguracji filtrów graficznych Flex 2 Filter Explorer (kod źródłowy). David Keutgens napisał narzędzie do konfiguracji efektów przejść Flex Effect Explorer (kod źródłowy). Tworzenie narżedzi do konfiguracji przy użyciu formularzy MXML wskazuje na bardzo duży potencjał aplikacji Rich Internet Application i to jest prawdopodobnie największa przewaga technologi Adobe Flex wobec aplikacji AJAX.

Wyszło pewne zamieszanie, gdy wprowadzono Flash CS3, bo programiści używający tego oprogramowania chyba nie mogą korzystać z powyższych pakietów do Flex 2, bo zastąpiono je pakietami fl.motion i fl.transitions. oraz wprowadzono Motion XML. Kevin Hoyt napisał artykuł w którym pokazał, że programiści Flex mogą skorzystać z możliwości jakie daje Motion XML.

Takie zamieszanie z pakietami i możliwościami jakie dają animacje sprawiło, że programiści zaczęli szukać nowych rozwiązań bardziej uniwersalnych. Niektórzy programiści woleli nie czekać i sami przygotowali własne rozwiązania. Jack Doyle napisał biblioteki do animacji i do efektów dla Flash CS3 Tween Lite (kod źródłowy) oraz TweenFilterLite (kod źródłowy). Ryan Taylor napisała silnik animacyjny AS3 Animation System v2.0 (kod źródłowy) a także zamieściła wprowadzenie do tego. Ostatnio największą popularność zaczyna zyskiwać biblioteka Tweener. Jest ona tworzona przez Brazylijczyka Zeh Fernando i przez Nate Chatelliera. Są trzy wersje zoptymalizowane pod kątem możliwości Flash Playera 7, Flash Playera 8 i Flash Playera 9. Warto pobrać przykłady i dema. Można pobrać plik pdf przedstawiający modele animacji ruchu. Programistów Flex pewnie najbardziej zainteresuje kod źródłowy narzędzia do prezentacji możliwości biblioteki Tweener w formularzach MXML. Szybkość i łatwość programowania animacji za pomocą tej biblioteki sprawiało, że coraz więcej programistów zaczęło wykorzystywać tą bibliotekę niż te komponenty dostarczane z Flex 2 czy Flash CS3. Ernesto Quezada napisał, że woli korzystać z ujednoliconego i popularnego silnika animacyjnego niż zmagać się z rożnymi API do animacji.

Japończycy prowadzą prym w korzystaniu i opisywaniu możliwości biblioteki Tweener. Flashrod napisał o tym jak skompilować ją do komponentu SWC i jak napisać prosty przykład typu "Witaj świecie" w pliku HelloWorld.as

package {
 import flash.display.Sprite;
 import flash.text.TextField;
 import flash.events.MouseEvent;
 import caurina.transitions.Tweener;
 public class HelloTweener extends Sprite {
     public function HelloTweener() {
         var tf:TextField = new TextField();
         tf.text = "Hello Tweener";
         addChild(tf);
         stage.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void {
             Tweener.addTween(tf, {x:mouseX, y:mouseY, time:1, transition:"linear"});
         });
     }
 }
} 

Można też zobaczyć przykład pokazujący wszystkie animacje zawarte w bibliotece Twenner. Inny przykład (kod) to gwiazdki chodzące za kursorem. Programista Aquioux na swoim blogu napisał serię artykułów o wykorzystaniu biblioteki Tweener w ActionScript 3. Pierwszy przykład pokazuje proste efekty animacji ruchów i dotyczy budowania własnego rozszerzenia (kod) do biblioteki Tweener o nazwie AqTwenn. Drugi przykład (kod) dotyczy efektów rozmycia czy obracania. Trzeci przykład (kod) jest prezentacja możliwości jakie daje przyśpieszanie i spowalnianie w animacji. Kluczową cechą w animacji jest wykorzystanie obliczeń na wartościach pod wpływem czasu wiec istotna jest wydajność tych obliczeń co jest pokazane na tym prostym przykładzie (kod). Ten sam blogger pokazuje nam jak dokonywać animacji z tekstem przy użyciu tej biblioteki Tweener, czy przekształcać tekst w zbiór pikseli. W tym celu omawia klasy Main.as, TypoLetter.as, StringSplitter.as, MotionEngine.as, StateDefine.as które zostaną użyte do tworzenia efektów na tekście, a także zamieszcza ich kod żródłowy. Następnie omawia problemy z przekształcaniem tekstów i pokazuje rozwiązanie tego problemu i zamieszcza kod źródłowy. Kolejne przykłady (kod) dotyczą wykorzystywania zdarzeń w współpracy z biblioteka Tweener. na przykładzie symulacji z chaosem literek (kod). Następnym przykładem jest efekt zsypu (kod) uporządkowany sposób animacji tekstu (kod) kierujący się pod wpływem kliknięcia myszki. Ciekawszy efekt może być osiągnięty przez modyfikację skryptu silnika MotionEngine.as pokazując przykład (kod) oparty na animacji krzywych Beziera (kod). Często wykorzystywana jest animacja przenikania na pewnym obszarze określonym siatka (kod) W tym wpisie omawia działanie poszczególnych klas Main.as, Grid.as, Cell.as, MotionEngine.as w tym kodzie. Kolejny wpis opisuje jej wykorzystanie w animacji ruchu (kod) Też zwraca uwagę na zmiany jakie zachodzą przy przejściu na nowszą wersję biblioteki Twenner 1.25.53 podając kod do nowszej wersji poprzedniego przykładu, a także omawia zmiany jakie wprowadził do silnika obsługi ruchu (kod) losowość (kod).

Największa popularność biblioteka Twenner uzyskała dzięki wykorzystaniu jej w wielu animacjach stosujących bibliotekę renderingu trójwymiarowego Papervision3D. Twórca biblioteki Tweener w swoim blogu stwierdził, że zaletą jego biblioteki jest prostota co sprawia, że nadaje się do programowania w takich skomplikowanych bibliotekach AS3 jak PV3D. Oto są przykłady wykorzystania biblioteki Twenner w Papervision3D jako silnika animacyjnego zawarte na Google Code. Agencja interaktywna Blitz zrobiła demo interfejsu użytkownika na bazie iTunes jako aplikacji, która może stać się interfejsem interaktywnych stron internetowych. Japończyk Aquioux na swoim blogu pokazał najprostszy sposób integracji tych bibliotek z kodem źródłowym. Japończycy słyną z tego, że szybko przyswajają nowe technologie czego przykładem są artykuły wprowadzające w programowanie Papervision3D. Pierwszy artykuł dotyczy wprowadzenia w programowania w Papervision3D. Drugi artykuł już jest wprowadzaniem w animowanie płaszczyzn w Papervision3D. Trzeci artykuł dotyczy animacji brył geometrycznych w PV3D. Ale w dobie open source te możliwości zdolnym ludziom już przestały zadowalać. Już pewien japoński programista postanowił wykorzystać klon biblioteki PV3D o nazwie Away3D i wykorzystując bibliotekę Tweener stworzył aplikację - narzędzie do konfiguracji animacji tekstu trójwymiarowego (kod źródłowy).

Podsumuwujac możliwosci programowania w ActionScript 3 i MXML dzięki animacjom i efektom dają niesamowite narzędzia dla programistów grafiki interaktywnej. I jest szansa, ze zaczniemy niedługo zastanawiać się nad użytecznością interfejsu użytkownika aplikacji internetowych w trzecim wymiarze korzystając z doświadczenia programistów gier trójwymiarowych.