Język ActionScript to oparty na ECMAScript obiektowy język programowania. Umożliwia on w aplikacjach Flash (Adobe Flash), Flex (Flash Builder) oraz AIR (Adobe Integrated Runtime) sterowanie animacją, obsługą zdarzeń oraz interaktywność z użytkownikiem. W podanym niżej przykładzie omówię sterowanie wieloma takimi samymi obiektami. Rozwiązanie to można użyć do imitacji spadania płatków śniegu, ruchu piłek, baniek, etc. Sposób użycia ogranicza jedynie nasza wyobraźnia i umiejętności
W podanym niżej przykładzie stworzymy na scenie 100 poruszających się obiektów, które będą odbijały się od granic sceny.

Na początku zajmiemy się tłem aplikacji. Tworzymy obiekt shape o wymiarach sceny i nadajemy mu wypełnienie gradientowe o parametrach podanych poniżej.

Następnie tworzymy obiekt, który będzie poruszał się po scenie. W naszym przypadku, będzie on przypominał bańkę mydlaną. Na nowej warstwie rysujemy 3 kółka - jedno duże (kształt bańki) i dwa małe (pseudo cienie), nadajemy im wypełnienia gradientowe radialne według upodobań. Nasz bańka powinna posiadać 'punkt odniesienia' w punkcie 0,0 (lewy górny róg).

Klikamy na naszym obiekcie prawym przyciskiem myszy, tworzymy z niego obiekt MovieClip i usuwamy bańkę za sceny. Nasz obiekt jako MovieClip znajduje się obecnie w bibliotece obiektów. Klikamy prawym przyciskiem myszy na naszym MovieClipie w bibliotece i wybieramy opcje 'Properties' (Właściwości). Wypełniamy okno dialogowe jak poniżej i zatwierdzamy. Program Flash automatycznie utworzy nam klasę 'Kulka', która będzie nam potrzebna do użycia w kodzie naszej aplikacji.

Tyle naszej grafiki, resztę zbudujemy w ActionScript. Otwieramy okno Actions (F9) i wpisujemy podany niżej kod.

var kontener:MovieClip = new MovieClip();
addChild(kontener);
var speed = 9;
 
for (var i = 0; i < 100; i++) {
		robKulke();
	}
 
function robKulke():void {
	var mc:Kulka = new Kulka();
 
	mc.scaleX = (Math.random()* 1.5) + 0.2;
	mc.scaleY = mc.scaleX;
	mc.alpha = (Math.random()* 0.5) + 0.2;
 
	mc.x = Math.random() * stage.stageWidth;
	mc.y = Math.random() * stage.stageHeight;
 
	kontener.addChild(mc);
}

Linia 1 - definiujemy obiekt kontener typu MovieClip, który będzie zawierał nasze bańki.
Linia 2 - wyświetlamy obiekt kontener na scenie naszej aplikacji
Linia 3 - definiujemy prędkość animacji naszych obiektów
Linia 5-7 - tworzymy pętlę, która utworzy każdy z obiektów. W przykładzie, pętla 100 razy wykona funkcję robKulke(), która dodaje obiekt do sceny.
Linia 9 - definiujemy funkcję robKulke()
Linia 10 - tworzymy obiekt MovieClip o nazwie 'mc', który jest instancją klasy Kulka (z naszej biblioteki).
Linia 12 - ustawiamy szerokość tworzonego obiektu wykorzystując właściwość scaleX, czyli skalowanie według osi X. W przykładzie, scaleX będzie wynosić od 0.2 do 1.7, czyli nasz nowy obiekt będzie miał szerokość odpowiadającą 20% do 170% naszej klasy (stworzony przez nas obiekt w bibliotece).
Linia 13 - skalowanie według osi Y ma być takie samo jak po osi X, aby nasz obiekt zachował kształt kulki.
Linia 14 - ustawiamy alpha (przezroczystość) obiektu. Przezroczystość naszego obiektu przyjmie wartość od 0.2 do 0.7, czyli od 20% do 70% przezroczystości klasy.
Linia 16-17 - ustalamy pozycję kulki na scenie. Wartości x i y są losowymi zależnymi od szerokości i wysokości sceny.
Linia 19 - dodajemy nasz obiekt do obiektu kontener, tym samym wyświetlając go na scenie.

Na tym etapie artykułu otrzymujemy na scenie 100 obiektów o różnych wymiarach i przezroczystości, pojawiające się na losowych pozycjach. Postarajmy się ożywić ruch na scenie. Każdemu powstającemu obiektowi musimy nadać prędkość w zależności od osi X i Y. Wewnątrz funkcji robKulke() umieszczamy dwie dodatkowe linie odpowiadające za prędkość poruszania się.

mc.vx = Math.floor((Math.random() * speed) - (speed /2));
mc.vy = Math.floor((Math.random() * speed) - (speed /2));

W przykładzie, prędkość jest zdefiniowana na początku skryptu (speed). Prędkość po osi X (vx) oraz po osi Y (vy) będzie wynosić od -4.5 px do 4.5 px, przy prędkości 9.
Następnie wewnątrz naszej funkcji dodajemy addEventListener, który na zdarzenie ENTER_FRAME wykona funkcje rotuj().

mc.addEventListener(Event.ENTER_FRAME, rotuj);

Funkcja ta będzie odpowiedzialna za ruch na scenie w zależności od dobranych prędkości.
Tworzymy funkcję rotuj().

function rotuj(e:Event):void {
	var target:Kulka = (e.currentTarget as Kulka);
	target.x += target.vx;
	target.y += target.vy;
	if (target.x >= (stage.stageWidth - target.width)) {
		target.vx *= -1;
		target.x = stage.stageWidth - target.width;
	} else if (target.x <= 0){
		target.vx *= -1;
		target.x = 0;
	}
	if (target.y >= (stage.stageHeight - target.height)) {
		target.vy *= -1;
		target.y = stage.stageHeight - target.height;
	} else if (target.y <= 0) {
		target.vy *= -1;
		target.y = 0;
	}

Linia 1 - definiujemy funkcje rotuj().
Linia 2 - deklarujemy obiekt target, który nawiązuje do obiektu wykonującemu zdarzenie ENTER_FRAME
Linia 3-4 - dodajemy do współrzędnych X i Y obiektu jego prędkości vx i vy, tym samym przemieszczając obiekt.
Linia 5-18 - sprawdzamy położenie obiektu. Jeśli obiekt przekroczył granice obszaru, odbijamy go, odwracając wartość prędkości (mnożenie przez -1).

Końcowy listing aplikacji:

 
var kontener:MovieClip = new MovieClip();
addChild(kontener);
var speed = 9;
 
for (var i = 0; i < 100; i++) {
	robKulke();
}
 
function robKulke():void {
	var mc:Kulka = new Kulka();
 
	mc.scaleX = (Math.random()* 1.5) + 0.2;
	mc.scaleY = mc.scaleX;
	mc.alpha = (Math.random()* 0.5) + 0.2;
 
	mc.x = Math.random() * stage.stageWidth;
	mc.y = Math.random() * stage.stageHeight;
	mc.vx = Math.floor((Math.random() * speed) - (speed /2));
	mc.vy = Math.floor((Math.random() * speed) - (speed /2));
 
	kontener.addChild(mc);
	mc.addEventListener(Event.ENTER_FRAME, rotuj);
}
 
function rotuj(e:Event):void {
	var target:Kulka = (e.currentTarget as Kulka);
	target.x += target.vx;
	target.y += target.vy;
	if (target.x >= (stage.stageWidth - target.width)) {
		target.vx *= -1;
		target.x = stage.stageWidth - target.width;
	} else if (target.x <= 0){
		target.vx *= -1;
		target.x = 0;
	}
	if (target.y >= (stage.stageHeight - target.height)) {
		target.vy *= -1;
		target.y = stage.stageHeight - target.height;
	} else if (target.y <= 0) {
		target.vy *= -1;
		target.y = 0;
	}
}
 

W powyższej przykładowej aplikacji dodano efekt rozmycia (blur) dla każdego obiektu. Wartość rozmycia zależy od rozmiaru kulki.
Dokładny opis uzycia filtra blur - już wkrótce, w drugiej części artykułu.

Podobne wpisy:

1. Obsługa kamery we Flashu (AS3)
2. Komunikacja dwóch plików Flash (AS3)
3. Jak pobrać adres URL strony, na której jest osadzony plik Flash (AS3) ?
4. Pełny ekran we Flashu (AS3)