Basis Class maken
blokje door W0utah op 04-10-2008
In deze tutorial zal ik uitleggen hoe je simpel je eigen classes kunt gaan schrijven en gebruiken in al je flash projecten.

We gaan een class maken om een cirkel te tekenen (ik weet het, flash heeft daar zelf een basis class voor), maar we gebruiken het om gewoon te oefenen.


Eerst gaan we beginnen met het aanmaken van een actionscript file

Dit kunnen we doen via file -> new, of simpel weg via ctrl+n of cmd + n.
Je zal nu een venstertje zien verschijnen:
venster
Hier kies je dus voor ActionScript file.

Wanneer je dit hebt gedaan zal je zien dat je flash omgeving er nu een beetje anders uitziet, je hebt namelijk geen timeline of stage meer.
Simpelweg omdat je deze niet nodig hebt bij het maken van een Class.
Je zal ook je Actions paneel niet meer moeten openen.

Nu gaan we beginnen met het schrijven van onze code.

Het eerste wat we gaan typen is dit:
actionscript code

package
{
}
 

Dit is eigenlijk simpel weg de locatie van het bestand, stel dat je jouw file wilt opslaan in de map "actionscript", dan zal je package.actionscript moeten typen. (Ik save mijn bestand gewoon op mijn bureaublad)

Nu gaan we eerst ons bestand als is opslaan
opslaan
Zorg ervoor dat je een duidelijke naam voor je bestand kiest, we gaan dit later nog nodig hebben.
Wanneer je jouw bestand hebt opgeslagen zal je op je bureaublad een nieuw icoontje zien staan
icoon

We gaan verder met onze code
actionscript code

package
{
   import flash.display.MovieClip;
 
  public class makeCircle extends MovieClip
  {
  }
}
 

We beginnen met het importeren van de MovieClip class, je zal later merken dat wanneer je iets wilt gebruiken je dit meestal zal moeten importeren.

public class makeCircle extends MovieClip, hier maken we een nieuwe publieke class aan genaamt "makeCircle" die het MovieClip object uitbreid.

Nu gaan we onze eerste functie schrijven:
actionscript code

package
{
  import flash.display.MovieClip;
 
  public class makeCircle extends MovieClip
  {
    public function makeCircle():void
    {
     
    }
  }
}
 

Je zal merken dat er public staat, dit geeft aan dat we in een ander flash project deze functie kunnen aanroepen, wanneer je private gebruikt zal je merken dat dit niet lukt.


Probeer nu eens een trace in je functie te zetten
actionscript code

package
{
  import flash.display.MovieClip;
 
  public class makeCircle extends MovieClip
  {
    public function makeCircle():void
    {
      trace("hello world");
    }
  }
}
 

Opzich doet deze code niet echt veel, daarom gaan we nu een nieuwe flash file aanmaken

nieuwe file
Slaag je bestand op in dezelfde locatie als het eerste bestand (makeCircle.as)

Open nu je actions panel, en kopieer en plak de volgende code:
actionscript code

import makeCircle;

var p:makeCircle = new makeCircle();
this.addChild(p);
 

Eerst importeren we onze class.
Daarna gaan we onze functie aanroepen.

Wanneer je nu test Movie doet zal je in je output panel "hello world" ziet verschijnen.
How cool is that!

We laten deze file voor wat het is en gaan verder in onze class.


We gaan nu een cirkeltje tekenen, met de graphic class die we anders ook zouden gebruiken, ik ga hier niet verder op in gaan.
actionscript code

package
{
  import flash.display.MovieClip;
 
  public class makeCircle extends MovieClip
  {
    public function makeCircle():void
    {
      var circle:MovieClip = new MovieClip();
      circle.graphics.beginFill(0x000000);
      circle.graphics.drawCircle(50, 50, 10);
      circle.graphics.endFill();
     
      this.addChild(circle);
    }
  }
}
 

Wanneer je nu Test Movie doet zal je een zwarte cirkel op je stage zien staan.

Opzich niets bijzonder, maar stel nu dat we de x en y positie willen veranderen, maar we hebben geen zin om telkens onze class te openen en opnieuw aan te passen.

Je wil het gewoon zo kunnen doen:
var p:makeCircle = new makeCircle(50, 20);
In theorie ziet het er als volg uit:
var p:makeCircle = new makeCircle(x, y);

We gaan nu terug naar onze class om dit in elkaar te steken.
Eerst gaan we onze 2 variabelen moeten aanmaken in onze functie.
Dit kan simpel weg door:
actionscript code

public function makeCircle():void
 

te veranderen naar:
actionscript code

public function makeCircle(xPos:Number, yPos:Number):void
 


Vervolgens gaan we onze statische x en y ook moeten aanpassen naar de variabele namen:
actionscript code

circle.graphics.drawCircle(50, 50, 10);
 

word dan:
actionscript code

circle.graphics.drawCircle(xPos, yPos, 10);
 


Wanneer we nu Test Movie doen zal je zien dat de cirkel nu op een andere plaats staat.

extra: Probeer nu zelf de straal van je cirkel te veranderen op dezelfde manier als we gedaan hebben met de x en y positie.



Je afgewerkte code zal er als volgt uitzien:

Main.fla
actionscript code

import makeCircle;

var p:makeCircle = new makeCircle(50, 20, 40);
this.addChild(p);
 


makeCircle.as
actionscript code

package
{
  import flash.display.MovieClip;
 
  public class makeCircle extends MovieClip
  {
    public function makeCircle(xPos:Number, yPos:Number, straal:Number):void
    {
      var circle:MovieClip = new MovieClip();
      circle.graphics.beginFill(0x000000);
      circle.graphics.drawCircle(xPos, yPos, straal);
      circle.graphics.endFill();
     
      this.addChild(circle);
    }
  }
}
 




Nogmaals, dit is de basis over hoe je een Class maakt, je kan hier heel ver mee gaan.

Denk maar aan het maken van een mp3 player.

Ik hoop dat jullie hier wat van geleerd hebben.


Share |



Stem op deze tutorial


Reacties



Je bent niet ingelogged, je kan geen commentaar geven, of commentaren lezen over deze tutorial.