Artykuły

[Konkurs Adobers.org] - Animacja w ActionScript

Najbardziej podstawową funkcjonalności od początków istnienia Flash'a stanowiła Animacja. Wprawianie obiektów graficznych w ruch jest możliwe we Flash'u przy pomocy następujących narzędzi

  • Timeline - listwa czasowa, na której możemy wykonywać animacje typu motion/shape oraz klasyczną animację klatka po klatce,

  • ActionScript - wykorzystanie języka programowania, pozwala modyfikować podstawowe właściwości obiektów,

  • XML - możliwość zapisania animacjami w postaci kodu XML. Funkcjonalność ta pojawiła się w najnowszej wersji Flash CS3.

W tym tutorialu zaprezentowane zostanie wykorzystanie ActionScript'u 3.0, dającego ogromne możliwości w animowaniu obiektów jak również pozwalającemu wprowadzić interakcję w animacjach. Poniżej zaprezentowane są 4 różne sposoby animacji za pomocą AS 3.0. Zapraszam do lektury:)

Co możemy animować za pomocą AS 3.0 - czyli trochę teorii

We Flash'u występuje 5 typów obiektów wizualnych:

  • MovieClip - obiekt "klip filmowy", zawierający własny Timeline,

  • Button - obiekt będący przyciskiem,

  • Graphic - obiekt, stanowiący statyczną grafikę,

  • kształty (Shape) - obiekty, stworzone przy użyciu narzędzi do rysowania,

  • grupy (Group) - kilka obiektów na scenie można połączyć w grupę, pomaga to operować na kilku obiektach jednocześnie.

Animacja za pomocą kodu ActionScript odbywa się na obiektach typu MovieClip. Są to obiekty, którym można nadać nazwę - Instance Name - do której następnie można odwołać się w kodzie AS. Animując taki obiekt istnieje dostęp do wszystkich opisujących go parametrów, a zatem

  • położenie (x, y),

  • wielkość (width, height),

  • przezroczystość (alpha),

  • skalowanie (xscale, yscale),

  • rotacji (rotation).

Możliwe jest również animowanie wprowadzonych we Flash'u 8 filtrów, takich jak Blur czy Bevel.

Aby wykonać demonstracyjny obiekt typu MovieClip zawierający logo Adobers.org, należy wykonać następujące kroki:

  1. Wyciągnać z biblioteki grafikę zawierającą logo adobers.org.

  2. Po wcześniejszym zaznaczeniu instancji grafiki na scenie, należy wybierać z menu Modify > convert to symbol ... (lub wciskamy F8),. W oknie, które się pojawi trzeba trzeba umieścić nazwę obiektu - niech będzie to "logo", zaznaczyć opcję MovieClip oraz ustawić punkt rotacji na centralny. Operację należy zakończyć naciskając przycisk OK. Podana nazwa "logo" nie jest jeszcze nazwą, do której możemy się odwołać z AS.

  3. Właściwą nazwę "logo_mc" należy wpisać w pole "Instance name", znajdujące się w panelu Properties. Oczywiście po wcześniejszym zaznaczeniu obiekt, któremu nazwa jest nadawana (w tym wypadku "logo").

  4. Dodatkowo aby animacja była płynna w panelu Properties ilość klatek na sekundę (frame rate) dobrze jest zwiększyć do 24.

  5. Ponieważ logo jest bitmapą jego animacja będzie bardzo skakać. Aby zniwelować ten efekt klikamy prawy przyciskiem na bitmapę w bibliotece, następnie wybieramy properties i w okienku dialogowym zaznaczamy opcję allow smoothing.

Jak możemy animować za pomocą AS

Kiedy obiekt logo_mc jest już przygotowany, można przejść do jego animacji. Animacja w kodzie ActionScript może zostać wykonana w oparciu o

  • Zdarzenie ENTER_FRAME,

  • Funkcja setInterval,

  • Obiekt Timer,

  • Obiekt Tween.

Wszystkie wyżej wymienione sposoby są poprawne, lecz różnią się między sobą. Poniżej zostanie omówione każde z nich z osobna. Przykładową animacją, które zostanie wykonana na różne sposoby będzie znikanie obiektu logo, przy jednoczesnym jego powiększaniu i obracaniu. Modyfikowane zatem będą 4 różne parametry: alpha, rotation, scaleX oraz scaleY.

Zdarzenie ENTER_FRAME

Osoby bardziej zaznajomione z ActionScript'em z pewnością słyszały o zdarzeniach (Events). W ActionScript 3.0 został uporządkowany bałagan związany z Event'ami (W AS 2.0 można było nimi operować na 4 różne sposoby). Ogólna idea zdarzeń polega na możliwości reagowania przez obiekty (wszystkie dziedziczące po obiekcie ... np. MovieClip) na pewne sytuacje. Sytuacją taką może być kliknięcie obiektu czy najechanie na obiekt kursorem myszy. Zdarzeniem używanym w animacji jest przejście do następnej klatki czyli ENTER_FRAME. Zdarzenie to w teorii jest wywoływane tyle razy na sekundę, ile wynosi frame rate filmu. Reakcja na takie zdarzenie musi zostać zdefiniowana w pewnej funkcji. Tworzenie reakcji na zdarzenie prezentuje poniższy kod.

// definicja obslugi zdarzenia ENTER_FRAME dla klipu logo_mc
logo_mc.addEventListener(Event.ENTER_FRAME, enterFrameHandler);

// funkcja wywolywana w kazdej klatce
function enterFrameHandler(e:Event):void {
	e.target.rotation ++;
	e.target.alpha -= 0.002;
	e.target.scaleX += 0.01;
	e.target.scaleY += 0.01;
}

Pierwsza linia jest informacją o tym że funkcja enterFrameHandler(), powinna reagować na zdarzenie ENTER_FRAME na obiekcie logo_mc. Następnie została zdefiniowana funkcja enterFrameHandler(), która zawiera kolejno instrukcje w jaki sposób mają być modyfikowane wymienione wcześniej parametry.

Funkcja setInterval()

Kolejnym sposobem wykonania animacji jest zastosowanie funkcji setInterval(). Funkcja powoduje wywoływanie konkretnej funkcji (zdefiniowanej jako pierwszy parametr) w określonych odstępach czasu (zdefiniowanych w milisekundach jako drugi parametr). Poniższy kod prezentuję użycie tej funkcji w animacji.

// wowolanie funkcji move co 25 ms
var intervalNum:Number = setInterval(move, 25);

// funkcja wywolywana w iterwale
function move() {
	logo_mc.rotation ++;
	logo_mc.alpha -= 0.002;
	logo_mc.scaleX += 0.01;
	logo_mc.scaleY += 0.01;
}

Pierwsza linijka to wywołanie funkcji setInterval(), które spowoduje wywoływanie funkcji move() co 25 ms. Nastepnie zdefiniowana jest funkcja move(), która zawiera kolejno kolejno instrukcje w jaki sposób mają być modyfikowane wymienione wcześniej parametry. Warto nadmienić, że funkcja podana jako parametr funkcji setInterval(), nie zawsze jest wywoływana co zadany interwał czasowy. Należy pamiętać, że sama realizacja poleceń zawartych w tej funkcji trwa pewien czas.

Obiekt Timer

Alternatywą dla funkcji setInterval(), wprowadzoną w ActionScript 3.0, jest obiekt Timer. W dokumencie migracyjnym z AS 2.0 do 3.0 jego używanie zamiast funkcji setInterval(), jest wręcz zalecane. Moim zdaniem jest on zdecydowanie wygodniejszy w użyciu i daje znacznie większe możliwości. Podobnie wywołuje określoną funkcję co dany odstęp czasu, lecz dodatkowo daje możliwość uruchamiania i zatrzymywania wykonywania interwału za pomocą funkcji start()/stop() czy obsługi wielu eventów. Przykładowy kod realizujący animację logo znajduje się poniżej.

// tworzenie obiektu Timer
var myTimer:Timer = new Timer(25);

// definiowanie funkcji obslugujacej zdarzenie "timer"
myTimer.addEventListener("timer", timerHandler);
// uruchamianie timera
myTimer.start();

// funkcja obslugujaca zdarzenie "timer"
function timerHandler(e:TimerEvent):void {
	logo_mc.rotation ++;
	logo_mc.alpha -= 0.002;
	logo_mc.scaleX += 0.01;
	logo_mc.scaleY += 0.01;
}

Pierwsza linijka tworzy obiekt Timer. Następie zdefiniowana jest obsługa zdarzenia "timer" - które wywoływane jest co zadany interwał. Kolejna linijka uruchamia działanie obiektu Timer. Na końcu została napisana funkcja obsługująca zdarzenie "timer" przed odpowiednią modyfikację parametrów logo.

Obiekt Tween

Ostatnią możliwością jest użycie obiekty Tween. Jest to obiekt animacji, której parametry definiowane są bezpośrednio w konstruktorze tego obiektu. Zdecydowanym plusem jest możliwość wybrania jednej ze zdefiniowanych w pakiecie fl.transitions funkcji animujących. Pozwalają one określić sposób zmienia parametry (np. przyspieszający lub opóźniający). Istnieje również pełną kontrola nad czasem animacji - definiowana ją jako parametr. Wadą tego rozwiązania jest to, iż chcąc animować kilka parametrów obiektu MovieClip, konieczne jest stworzenie takie samej ilości obiektów typu Tween - każdy parametr wymaga oddzielnego obiektu. Przykładowy kod realizujący animację logo znajduje się poniżej.

// importowanie funkcji animujacych
import fl.transitions.*;
import fl.transitions.easing.*;

// tworzenie obiektu Tween dla kazdego parametru
var rotationTween:Tween = new Tween(logo_mc, "rotation", None.easeIn, 0, 300, 300, false);
var alphaTween:Tween = new Tween(logo_mc, "alpha", None.easeNone, 1, 0, 80, false);
var scaleXTween:Tween = new Tween(logo_mc, "scaleX", None.easeIn, 1, 200, 8900, false);
var scaleYTween:Tween = new Tween(logo_mc, "scaleY", None.easeIn, 1, 200, 8900, false);

Najpierw importowane są pakiety zawierające funkcje animujące. Następnie dla każdego parametru tworzony jest osobna instancja klasy animującej Tween. Jako ciekawostkę nadmienić można, że rolę funkcji animującej może pełnić funkcja napisana przez użytkownika, które spełnia określone wymagania (przyjmuje i zwraca określone parametry). Może to być bardzo interesujące dla osób zajmujących się matematyką.

Zaprezentowane powyżej sposoby animacji, należy dobierać indywidualnie do zaistniałej sytuacji. Myślę, że pokazują one również, jak bogaty w możliwości jest język ActionScript i jak pomocna jest jego znajomość w tworzenie zarówno animacji jak i elementów interaktywnych. Osoby zainteresowane tematm odsyłam do:

  • dokumentacji ActionScript 3.0,

  • książki "Foundation Actionscript 3.0 Animation: Making Things Move!",

  • własnych eksperymentów:)

fla

Info

Marcin Klimek