tutorial attachMovie in as3, ofwel addChild()

attachMovie in as3, ofwel addChild()

_{door vinTage op 30-09-2007}

Via addChild() kunnen we in flash CS3 ( actionscript 3 ) movieClips uit de library aanspreken en tonen in de swf.

In vorige versies van flash was dit ook wel bekend onder de functienaam attachMovie(), vandaar de ietwat vreemde titel van deze tutorial.

Het begin

We openen een nieuwe fla en kiezen voor de optie actionscript 3
Op het werkblad gaan we nu een figuurtje tekenen.
Als je klaar bent met tekenen, dan selecteer je je figuur en klikt f8, dit opent een popupdialoog.

In deze popup zet je een naam voor onze tekening (zonder spaties of andere moeilijke tekens), bijvoorbeeld bug.
Selecteer dan Movie clip of button als type.

Nu moeten we nog aan flash doorgeven dat deze movieClip voor dynamisch gebruik is, dus vinken we de optie export for actionscript bij linkage aan en voor het gemak van deze tutorial ook export in first frame.

Er verschijnt nu een extra actief gedeelte in dit venster, de naam die bij class hoort, is de identifier die we in het actionScript nodig hebben.
De baseClass laten we ook gewoon voor wat het is ( flash.display.MovieClip )

linkage

Zodra we op "ok" klikken, verschijnt er een alert, hier kan je gewoon op "ok" klikken.

linkage

De zogenaamde classnaam kende we in as2 onder de noemer identifier
Zo, nu weten we hoe we in flash CS3 een movieclip kunnen exporteren voor actionscript, dus door naar wat scripting!

actionscript

We hebben dus een figuur getekend daar een movieclip van gemaakt en als linkage/classname bug aan gegeven.
Het plaatsen van deze movieclip via actionscript gaat dan als volgt:

actionscript code

    var mc:bug = new bug(); //clip in lib met classname bug

    addChild(mc);//je bug word nu in de linkerbovenhoek gezet op de scene

verwijderen van movieclips die geplaatst zijn via addChild()

actionscript code

removeChild();

 

properties meegeven aan het object geplaatst met addChild

In onderstaande voorbeeldje geef ik gelijk properties mee aan elke bug die geplaatst word en als je op de bug klikt, dan word deze weer verwijderd.

Download de gratis flash plugin
Normaal zou hier dit voorbeeld moeten staan.

Bovenstaande voorbeeld bevatte onderstaande code, in deze code maakte we eerst een variable voor elke bug, en daarna kunnen we deze variable allerlei properties mee geven zoals alpha, de x en y positie etc.

actionscript code

//de functie maakBug word aangesproken door een klik op de plaatsBug knop

function maakBug(event:MouseEvent):void {

  var mc:bug = new bug();          //instance in de library met classname bug (linkage)

  mc.rotation = Math.random()*360; //random draaien van onze nieuwe bug

  mc.scaleX = Math.random() * 1;   //1 is 100%

  mc.scaleY = mc.scaleX;           //dezelfde scaleY geven

  //plaatsen de bug random achter het "gaas"

  mc.x = randRange(gaas.x, stage.stageWidth);

  mc.y = Math.random()* stage.stageHeight;

  //listener meegeven om hem na onClick weer te verwijderen 

  mc.addEventListener(MouseEvent.CLICK, verwijder);

  mc.buttonMode = true;//een klikhandje meegeven

  //en het daadwerkelijke plaatsen op de scene

  addChild(mc);

}

//deze functie word aangesproken als je op een bug klikt (word dus verwijderd)

function verwijder(event:MouseEvent):void {

  removeChild(DisplayObject(event.target));

}

//code voor de plaatsBug knop

plaatsBug.addEventListener(MouseEvent.CLICK, maakBug);

plaatsBug.buttonMode = true; //klikhandje mee geven

//deze functie routeneerd een random waarde tussen een minimaal getal en een maximaal getal

//word gebruikt voor het random plaatsen van de bug op het gaas.

function randRange(min:Number, max:Number):Number {

  var randomNum:Number = Math.floor(Math.random() * (max - min + 1)) + min;

  return randomNum;

}

Einde

Tot zover deze BASIS tutorial tot het plaatsen van items uit je library.
Mocht je onverhoopt toch vastlopen, dan kan je hier het door mij gebruikte voorbeeld downloaden.

Share |

Stem op deze tutorial

Reacties

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