as-flash.com

U ovom tutorijalu obraditi cmo crtanje pomocu Actionscripta. Naime Flash Vam omogucava da pomocu jednostavnih naredbi crtate razne objekte. Mi cemo napraviti 3 kvadrata koja cemo povezati ravnim linijama tako da tvori trokut, a uz to spojiti cemo ih i zakrivljenim linijama (Bezierove krivulje). Uz sve to dodati cemo i mogucnost “povlacenje” kvadrata” uz dinamicko iscrtavanje vec spomenutih linija. Pogledajte na primjeru ispod. Uocite u gornjem lijevom uglu dva “dugmica” s kojima ukljucujete-iskljucujete linije. Sve sto vidite napravljeno je sa Actionscriptom

Source mozete skinuti OVDJE

---

Krenimo s radom. Kao i uvijek otvorite Flash i kreirajte novi dokument.
Otvorite Actionscript panel (PC - tipka F9). Spremni smo za pisanje naseg koda. No prije nego li to napravimo, moram reci sto zelimo napraviti. Kao prvo napraviti cemo 4 prazna Movie clipa koji ce nam sluziti kao holderi - 3 kvadrata i 1 za linije.

• this.createEmptyMovieClip(”linija”, 1);
  this.createEmptyMovieClip(”kvadrat1″,2);
  this.createEmptyMovieClip(”kvadrat2″,3);
  this.createEmptyMovieClip(”kvadrat3″,4);

Objasniti cu na primjeru prve linije - kreiramo prazni Movie clip kojeg nazivamo linija i smjestamo ga na “dubinu” (depth) 1. Tom analogijom napravimo i za preostala 3 MC-a.

Sljedece sto cemo napraviti jest definiranje 2 varijable koje ce nam sluziti kao zastavice za iscrtavanje linija
- stil_1, crtanje ravnim linija
- stil_2, crtanje zakrivljenih linija

• stil_1=true;
  stil_2=false;

Nakon toga krecemo s crtanjem kvadrata.

• with(kvadrat1)
  {
  beginFill(0xFF33CC)
  lineStyle(2,0×000000)
  lineTo(0,20);
  lineTo(20,20);
  lineTo(20,0);
  lineTo(0,0);
  endFill();
  }

Objasnjenje: u kvadratu1 crtamo nas objekt (kvadrat). Pocinjemo sa definiranjem boje ispune (hex vrijednosti). Nastavljamo sa defniranjem linije koja je u ovom slucaju debljine 2px, boja crna. Postavljamo pocetak crtanja sa naredbom lineTo koja pocinje crtati ravnu liniju od tocke 0,0 (ide od x=0,y=0 ako prije nije definirano sa naredbom moveTo) do tocke x=0; y=20;
U sljedecem retku nastavljamo crtati liniju od one tocke gdje smo stali (0,20) do tocke x=20, y=20. Istom analogijom dalje, dok ne dodemo na pocetak. Na kraju zavrsavamo sa endFill koja zatvara naredbu beginFill i iscrtava ispunu objekta.

Slijedi crtanje i za preostala 2 kvadrata na isti nacin. Objasnjenje je slicno.

• with(kvadrat2)
  {
  beginFill(0xFFCC00)
  lineStyle(2,0×000000)
  lineTo(0,20);
  lineTo(20,20);
  lineTo(20,0);
  lineTo(0,0);
  endFill();
  }
  with(kvadrat3)
  {
  beginFill(0×0099FF)
  lineStyle(2,0×000000)
  lineTo(0,20);
  lineTo(20,20);
  lineTo(20,0);
  lineTo(0,0);
  endFill();
  }

Nakon crtanje duplicirati cemo kvadrat1 i kvadrat2 tako da nam posluze kao dugmici u gornjem lijevom uglu - za odabir crtanja linija.

• duplicateMovieClip(”kvadrat1″,”stil1_btn”,5);
  duplicateMovieClip(”kvadrat2″,”stil2_btn”,6);

Dupliciramo MC kvadrat1 i tom dupliciranom pridodajemo ime stil1_btn. Takoder taj novi MC postavljamo na depth (”layer”) 5. Tako napravimo i sa kvadrat2 u stil2_btn.

Slijedi pozicioniranje novo nastalih MC-a i postavljanje alpha kanala (transparencija) na 10.

• stil2_btn._y=25;
  stil1_btn._alpha=stil2_btn._alpha=10;

stil1 i stil2 MC-u dodajemo akcije onPress, s kojom cemo mijenjati stanje vec spomenutih zastavica (stil_1 i stil_2).

• stil1_btn.onPress=function() {
  if(stil_1==true) stil_1=false;
  else stil_1=true;
  }
  stil2_btn.onPress=function() {
  if(stil_2==true) stil_2=false;
  else stil_2=true;
  }

Unutar { } smo napravili smo if naredbu koja ce mijenjati stanje zastavice u ovisnosti u kojem “stanju” je trenutno. Ako je prije klika true, nakon klika postaviti ce se u false i obrnuto.

Slijedi postavljanje 3 kvadrata na pocetne pozicije.

• kvadrat1._x=Stage.width/2-75;
  kvadrat2._x=Stage.width/2+75;
  kvadrat3._x=Stage.width/2;
  kvadrat1._y= kvadrat2._y =Stage.height/2+50;
  kvadrat3._y =Stage.height/2-50;

Mislim da je ovdje sve manje vise jasno. Postavljamo x i y koordinate nasih kvadrata tako da tvore startni trokut. Stage.height daje visinu naseg dokumenta, dok Stage.width sirinu istog.

Pages: 1 2

Kategorija: Actionscript objavljeno 06.07. 2007