Ismerkedés az ActionScript 3-mal, 2. rész


Nos, az előző részben rajzoltunk egy gyönyörű piros focilabdát, ami nem is rossz ahhoz képest, hogy narancssárgát akartam, haha :) Játsszunk tovább a lehetőségeinkkel. Ha most a TestBall függvénybe simán beírjuk, hogy x = 40; y = 120; akkor legnagyobb döbbenetünkre a labda odébbkerült, hiszen “magunkat” pozícionáltuk odébb. Ezt viszont gyorsan felejtsük el, mert a vezérlő scriptben vagyunk, és feladatunk a vezérlés, nem pedig a saját magunkkal történő játszadozás. Kell tehát létrehoznunk magunk alatt egy MovieClip-et, amibe rajzolhatunk. Csinálunk egy privát MovieClip típusú változót ballClip néven, és a TestBall-on belül instance-esítjük, be szép is a magyar nyelv :)

//begin
//
//
package
{
	//
	//
	//
	import flash.display.MovieClip;
	//
	//
	//
	public class TestBall extends MovieClip
	{
		//
		//
		//
		private var ballClip:MovieClip;
		//
		//
		//
		public function TestBall( )
		{
			//
			ballClip = new MovieClip( );
			ballClip.graphics.beginFill( 0xff0000 , 1 );
			ballClip.graphics.drawCircle( 20 , 20 , 20 );
			ballClip.graphics.endFill( );
			ballClip.x = 40;
			ballClip.y = 40;
			//
		}
		//
		//
		//
	}
	//
	//
	//
}
//
//
//end

Na most ha ezt a kódot futtatjuk, akkor frankón nem történik semmi :) Miért is? Az AS3-ban a megjelítendő objektumok már nem mélység-szervezésűek, hanem minden elemet hozzá kell csatolnunk egy “látszó” DisplayObjectContainer-hez gyerekként, és akkor fognak látszani. Nos, mivel a vezérlő script MovieClip-je a “bázis” MovieClip, ezért megfelel a célnak, biggyesszük a TestBall függvény legvégére, hogy

addChild( ballClip );

és hozzácsatoltuk a ballClip-ünket a TestBall-hoz. Így végre működik a dolog.

De ez így uncsi. Mozgassuk meg a labdát. Definiáljunk egy step függvényt a ballClip-en belül, hogy az végezze el a saját mozgatását. A jó öreg AS1/AS2-es módon hozzáfoghatunk úgy is, hogy

ballClip.step = function ( ):void { ++x }

de ezt felejtsük el nagyon gyorsan, csúnya, átláthatatlanná teszi a kódot, és nem is túl rugalmas megoldás. Használjuk ki az AS3 azon képességét, hogy több osztályt pakolhatunk egy csomagba, hozzuk létre a BallClip osztályt. Ő fogja elvégezni saját maga kirajzolását, és mozgatását. De jó lesz, nekünk nem is lesz akkor dolgunk :)

//
//
//
import flash.display.MovieClip;
//
//
//
class BallClip extends MovieClip
{
	//
	//
	//
	private var xspeed:Number;
	private var yspeed:Number;
	//
	//
	//
	public function BallClip ( )
	{
		//
		graphics.beginFill( 0xff0000 , 1 );
		graphics.drawCircle( 20 , 20 , 20 );
		graphics.endFill( );
		//
		x = 20;
		y = 20;
		//
		xspeed = Math.random( )*5;
		yspeed = Math.random( )*5;
		//
	}
	//
	//
	//
	public function step ( ):void
	{
		//
		if ( x + xspeed > 200 ) xspeed *= -1;
		if ( x + xspeed < 0 ) xspeed *= -1;
		if ( y + yspeed > 200 ) yspeed *= -1;
		if ( y + yspeed < 0 ) yspeed *= -1;
		//
		x += xspeed;
		y += yspeed;
		//
	}
	//
	//
	//
}
//
//
//end

Az osztályt a MovieClipből származtattuk, mert szeretnénk bele rajzolni, meg manipulálni az x, y értékeket. A konstruktorban megrajzolom magam, beállítom a pozíciót, randomizálok sebesség értékeket. A step függvényben pedig vizsgálom, hogy nehogy túlfussak a 200, 200 -as négyzeten, és módosítom a pozíciómat.

hát ez tök jó, de hogy lesz ebből mozgás? Valamiféle időzítéssel kell kirukkolnunk. Bár megmaradtak a setInterval és clearInterval függvények AS2-ből, de felejtsük el őket, a jövő a Timer osztályé, ami sokkasokkal több mindent tud, radásul az új eseménykezelési modellben juttatja el a timing eseményt a célobjektumhoz. Nagyon klassz az új modell, buborékelven utaztatja végig a program összes objektumán az eseményt, és akit érdekel, az "elkapja".

Viszont újra kell írnunk a vezérlő osztályunkat ehhez, úgyhogy dózer a régi kód, az új pedig így néz ki:

package
{
	//
	//
	//
	import flash.display.MovieClip;
	import flash.utils.Timer;
	import flash.events.TimerEvent;
	//
	//
	//
	public class TestBall extends MovieClip
	{
		//
		//
		//
		private var myBall:BallClip;
		//
		//
		//
		public function TestBall( )
		{
			//
			myBall = new BallClip( );
			addChild( myBall );
			//
			var moveTimer:Timer = new Timer( 50 );
			moveTimer.addEventListener( TimerEvent.TIMER , myBall.step );
			moveTimer.start( );
			//
		}
		//
		//
		//
	}
	//
	//
	//
}

Először is létrehozunk egy példányt az előbb megírt osztályból, azt hozzácsatoljuk a DisplayObject listához, majd létrehozzuk a Timerünket. ( amit importálnunk kell még az osztálydefiníció előtt ). A konsturktor paraméternek az időintervallumot várja millisecben. Miután létrehoztuk, hozzá kell rendelnünk a TimerEvent konstans eseményeket tartalmazó osztály TIMER statikus változóját, ami tualjdonképpen nem más, mint a "timer" String, tehát ezt is beírhattuk volna a TimerEvent.TIMER helyére, de jobb gyakorlat a gyári konstansokkal hivatkozni eseményekre, mégiscsak ők tudják jobban :) Mindenesetre a TIMER eseményhez hozzárendeltük a myBall objektum step függvényét. És itt van még egy kis turpisság: a step függvény mindig meg fogja kapni az adott eseményre vonatkozó esemény objektumot, ezért ezt fogadnunk kell a BallClip osztály step függvényében, mert különben csontra fagy az egész mindenség, remélem ezen még változtatnak a fiúk :)

Tehát ezek után az egész kód így fog kinézni:

//begin
//
//
package
{
	//
	//
	//
	import flash.display.MovieClip;
	import flash.utils.Timer;
	import flash.events.TimerEvent;
	//
	//
	//
	public class TestBall extends MovieClip
	{
		//
		//
		//
		private var myBall:BallClip;
		//
		//
		//
		public function TestBall( )
		{
			//
			myBall = new BallClip( );
			addChild( myBall );
			//
			var moveTimer:Timer = new Timer( 50 );
			moveTimer.addEventListener( TimerEvent.TIMER , myBall.step );
			moveTimer.start( );
			//
		}
		//
		//
		//
	}
	//
	//
	//
}
//
//
//
import flash.display.MovieClip;
import flash.events.TimerEvent;
//
//
//
class BallClip extends MovieClip
{
	//
	//
	//
	private var xspeed:Number;
	private var yspeed:Number;
	//
	//
	//
	public function BallClip ( )
	{
		//
		graphics.beginFill( 0xff0000 , 1 );
		graphics.drawCircle( 20 , 20 , 20 );
		graphics.endFill( );
		//
		x = 20;
		y = 20;
		//
		xspeed = Math.random( )*5;
		yspeed = Math.random( )*5;
		//
	}
	//
	//
	//
	public function step ( timeEvent:TimerEvent ):void
	{
		//
		if ( x + xspeed > 200 ) xspeed *= -1;
		if ( x + xspeed < 0 ) xspeed *= -1;
		if ( y + yspeed > 200 ) yspeed *= -1;
		if ( y + yspeed < 0 ) yspeed *= -1;
		//
		x += xspeed;
		y += yspeed;
		//
	}
	//
	//
	//
}
//
//
//end

És fantasztikus, már pattog a labdánk, meg minden. A következő részben finomítjuk meg tuningolunk egy kicsit rajta.

MilGra

A cikkhez kapcsolódó hozzászólásokat a fórum "Actionscript 3" topicjában várjuk.

Kapcsolódó bejegyzések:

A cikket beküldte: MilGra (http://milgra.hu)

Szólj hozzá
a Ismerkedés az ActionScript 3-mal, 2. rész c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>