Drawing API

Posted by hamferus on January 4, 2008 under ActionScript 3.0, Osnove, Tutorijal

Evo nas i na prvom tutorijalu. Danas bum vam pokazal kako nacrtati pravokutnik ili kvadrat i krug s ActionScriptom. U ActionScriptu 2.0 moralo se potezati linije da bi se nacrtal jedan od tih likova dok u ActionScriptu 3.0 već imamo gotove skripte koje crtaju geometrijske likove.

Koristit ćemo Adobe Flash CS3 za naše tutorijale, ako ga nemate možete skinutu trial verziju na Adobeovim stranicama.

Prije nego što počmemo pisati kod otvorite novi flash dokument(actionScript 3.0) i zaključajte prvi layer, zatim ga preimenujte u "actions". Otvorite "Actions Panel"(F9) i klinite na prvi frame actions layera i možete krenut dalje.

Počeli bumo s pravokutnikom ili kvadratom jer samo o vama ovisi koji od ova dva budete nacrtali ovisno o dužini i visini stranica. Mi bumo danas nacrtali oba dva.

Kvadrat i pravokutnik:

//prvo moramo definirati "sprite" ili "shape" pomoću kojeg ćemo nacrtat kvadrat
//ja koristim sprite jer se njemu mogu dodavati drugi "objekti" dok se shpeu nemogu dodavati nikakvi "objekti"
var mojKvadrat:Sprite = new Sprite();
 
//sad moramo započeti s "beginFill()" metodom koja ima 2 argumenta: 1.boju(0x0033ff) našeg kvadrata i
//njegovu alpha prozirnost(1) u flashu cs3 taj broj je između 0 i 1 dok u starijim verzijama je bio od 0 do 100
mojKvadrat.graphics.beginFill(0x0033ff, 1)
//sad nacrtamo kvadrat s 4 argumenta
//1. x pozicija na stageu, 2. y pozicija na stage, 3. dužina i 4. visina
mojKvadrat.graphics.drawRect(20,20,100,100);
//i još samo moramo završit metodu "beginFill()" koju smo započeli
mojKvadrat.graphics.endFill();

Ako sad testirate film(Ctrl+Enter) nećete vidjeti kvadrat jer nije dodan na display listu. U ActionScriptu 3.0 sve šta stvaramo ili koristimo moramo dodati na display listu s komandom addChild()

13	addChild(mojKvadrat);

Sad testirajte svoj film(Ctrl+Enter) i plavi kvadrat bi trebao bit na stage-u.

Nakon ovoga Pravokutnik nebi trebao bit problem jer razlika je samo u drawRect() funkciji

Promijenite ovu liniju

10	mojKvadrat.graphics.drawRect(20,20,100,100);

10	mojKvadrat.graphics.drawRect(20,20,200,100);

i dobili ste plavi pravokutnik.

Ajmo sad nacrtat krug:

var mojKrug:Sprite = new Sprite();
//ako nam je alpha prozirnost 100% onda ju netrebamo ni pisat
mojKrug.graphics.beginFill(0x009966);
//"drawCircle" metoda ili funkcija ima 3 argumenta: 1. x pozicija, 2. y pozicija i 3. radius
mojKrug.graphics.drawCircle(100,100,30);
mojKrug.graphics.endFill();
addChild(mojKrug);