. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .




 
 
SEGÉDLETEK ActionScript

A rajzoló (Drawing) API bemutatása - 1.rész
  feltöltve: 2005.01.23 | szerző: caber_net | olvasva: 7549 alkalommal

     
 

A sorozat segítségével szeretném bemutatni a rajzoló API működését, közben konkrét példákon keresztül megismertetni felhasználásának lehetőségeit. Az első részből megtudhatod, mi is az a rajzoló API, és elsajátíthatod használatának alapjait.

A rajzoló API (alkalmazás progaramozási interfész) a Flash MX változatától jelenlevő rajzolóeszköz, mellyel actionscript segítségével futásidőben dinamikusan és interaktívan változtatható egyeneseket, görbéket, kitöltéseket tudunk rajzolni. Tapasztalatom szerint kevesen használják ki a benne rejlő lehetőségeket. A sorozat végére remélem ezeket sokan felfedezik majd.

Alapok

1.LÉPÉS:
Egy üres moziklipre lesz szükségünk, ennek beépített metódusaival fogunk tudni majd rajzolni. Szerezzünk is be gyorsan egyet!

this.createEmptyMovieClip("rajz_mc", 100);

Létrehoztunk az aktuális moziklipben egy rajz_mc instance name-mel megáldott, 100-as szinten (nem _level, hanem depth) elhelyezkedő mc-t.

Egyenes rajzolása

2.LÉPÉS:
Állítsuk be, hogy milyen tollal szeretnénk rajzolni. Ezt a flash fejlesztői a moziklip objektumba beépített lineStyle metódussal biztosították számunkra.

rajz_mc.lineStyle(2, 0x00CCFF, 100);

A lineStyle értékei sorban a következőek: vonalvastagság, szín, átlátszóság. A fenti példánál tehát 2px vastag, világoskék, 100% alpha értékű vonalat tudunk rajzolni.

3.LÉPÉS
A rajzolás módját pedig úgy képzejük el, mintha kezünkbe fognánk egy tollat. Agyunk(actionscript) kiadja az utasítást a kéznek, hogy vigye a tollat egy meghatározott pontra(moveTo), majd ott engedje rá a papírra(moziklip), ezután húzzon egy másik pontba egyenest(lineTo). A moveTo mozgatja tehát a tollat (nem a moziklipet) a megfelelő koordinátákra, majd a lineTo-nál megadott pontig egyenest rajzol. Hogy néz ez ki konkrétan?

rajz_mc.moveTo(100, 100);
rajz_mc.lineTo(200, 200);

Teszteljük a mozit és láthatjuk, hogy az egy egyenes vonalat húzott 100, 100 koordinátákból 200, 200-ig.

4.LÉPÉS
Egymás után több pontot is megadhatunk, így akár zárt alakzatok rajzolására is lehetőségünk nyílik
Példa egy egyszerű négyzet rajzolására:

this.createEmptyMovieClip("rajz_mc", 100);
with (rajz_mc) {
   lineStyle(2, 0x00CCFF, 100);
   moveTo(50, 50);
   lineTo(150, 50);
   lineTo(150, 150);
   lineTo(50, 150);
   lineTo(50, 50);
}

Egy kis interaktivitás

5.LÉPÉS
Cseréljük ki az egyik sarokpontot az egér pozíciójával.

this.createEmptyMovieClip("rajz_mc", 100);
distMouse = function () {
   with (this) {
      clear();
      lineStyle(2, 0x00CCFF, 100);
      moveTo(50, 50);
      lineTo(_xmouse, _ymouse);
      lineTo(150, 150);
      lineTo(50, 150);
      lineTo(50, 50);
   }
   updateAfterEvent();
};
rajz_mc.onMouseMove = distMouse;

A fenti scriptben egy új mc metódus került elő: a clear. Segítségével törölhetjük a rajzolt tartalmat. Hagyd ki a kódból és próbáld ki, mi történik.

6.LÉPÉS
Az eddigiek ismeretében készítsünk el egy kezdetleges kis rajzoló alkalmazást.

//üres moziklip létrehozása
this.createEmptyMovieClip("rajz_mc", 100);
//az egérkövető függvény
followMouse = function () {
   this.lineStyle(2, 0x00CCFF, 100);
   if (penDown) {
      this.lineTo(_xmouse, _ymouse);
   } else {
      this.moveTo(_xmouse, _ymouse);
   }
   updateAfterEvent();
};
//ha lenyomjuk az egérgombot, a toll hozzáér a papírhoz, rajzolunk
_root.onMouseDown = function() {
   penDown = true;
};
//ha felengedjük az egérgombot, a toll felemelkedik a papírról
_root.onMouseUp = function() {
   penDown = false;
};
//az egér mozgatására meghívjuk a followMouse függvényt
rajz_mc.onMouseMove = followMouse;

Mindezt egyetlen képkockával, és 20 sor actionscripttel! Remélem, sikerült kedvet csinálnom a témához, pedig még nagyon az elején tartunk!

 
     
 
 

© Devnet.hu. A segédletek semmilyen formában nem másolhatók, publikálhatók a Devnet.hu és a szerzők közös írásos engedélye nélkül.
 
. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .