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.
