CMD 1 | MME | Winter 2007_2008 | Flash CS3 | Functions en Events (herhaling en vervolg)

Leerdoelen

Deze les

Variabelen

Een variabele was een plek waar je iets in kon bewaren. Als je zelf een nieuwe variabele aanmaakt moest je de variabele een naam geven en aangeven wat je er in mag bewaren:

    //maak een nieuwe variabele genaamd bedrag waar je alleen getallen in mag stoppen
    var bedrag:Number;

Vervolgens kon je er wat instoppen: 

    //stop de waarde 0.75 in de bestaande variabele bedrag
    bedrag = 0.75;

en de opgeslagen waarde gebruiken of veranderen:

    //verhoog het bedrag met 0.10 (stop de (oude) waarde van het bedrag verhoogd met 0.10 terug in de variabele bedrag) 
    bedrag = bedrag + 0.10;  // wordt ook wel verkort opgeschreven als: number += 0.10

Functions

Vorige les heb je kennis kunnen maken met het fenomeen functions. Functies zijn vragen of opdrachten. Je vraagt aan iets of iemand iets voor je te doen, zodat je dat niet zelf hoeft te doen en zodat je niet hoeft te bedenken hoe iets moet gebeuren; zolang je weet hoe een functie heet kun je 'm gebruiken. In actionscript zitten al heel veel functies ingebakken. Als je zelf een functie maakte zette wat instructies onder elkaar, gaf er een naam aan en vervolgens kon je de function in actionscript aanroepen. 

    // een functie die niets teruggeeft
    function doeIets():void{
       //jouw instructies

    }

    // een functie die een tekst returnt
    function geefMijTekst():String{
       return "Hallo";
    }

Als ik een functie geefMijSnikkers schrijf in een movieclip object genaamd snoepautomaat, dan kan ik aan de snoepautomaat vragen (opdracht geven) de functie uit te voeren (en het antwoord van de functie op te vangen in een variabele):

    var mijnSnoep:Object = snoepautomaat.geefMijSnikkers();

Je kunt echter ook een function maken die voor meerdere producten geschikt is.
Dan hoef je dus niet voor ieder product een function te maken. Scheelt dus code (overzichtelijker) en je code wordt betrouwbaarder omdat er maar 1 function hoeft te worden gemaakt en onderhouden. Bijvoorbeeld: 

    var mijnSnoep:Object = snoepautomaat.geefMijSnoep("snikkers", 2.50);

Als we bovenstaand voorbeeld bekijken dan zie je dat er nu een function geefMijSnoep wordt aangeroepen met daarachter tussen aanhalingstekens het product, in dit geval "snikkers" en een getal, in dit geval 2.50. Binnen de function geefMijSnoep ga je dan het doorgegeven product (="snikkers") en het bedrag (=2.50) behandelen zoals je dat zou doen als in de function geefMijSnikkers. Tot zover niets nieuws misschien.
Echter, in combinatie met een button is het wat lastiger om gegevens aan een function door te geven. Hieronder, onder het kopje Events, wordt dat verder uitgelegd.


Events

Als je een button maakt, kun je die button opdracht geven middels de functies die in de button zitten. Zo heeft een button altijd een functie addEventListener functie waarmee je kan aangeven welke functie moet worden uitgevoerd als er een MouseEvent plaatsvind :

    // "snikkersKnop, wil je aan de geefMijSnikkers functie doorgeven als er op je wordt geklikt?"
    snikkerKnop.addEventListener(MouseEvent.CLICK, geefMijSnikkers);

Je moet dan natuurlijk wel een functie schrijven die uitgevoerd moet worden en die luistert naar een MouseEvent:

    function geefMijSnikkers(eenKlik:MouseEvent):void{
       //jouw code
    }

In bovenstaand voorbeeld wordt de function geefMijSnikkers aangeroepen bij klikken op de button.
Als we nu de slimmere function geefMijSnoep zouden willen starten, hebben we echter een probleem.
Het is nl. NIET mogelijk om in deze constructie extra gegevens mee te sturen:

    snikkerKnop.addEventListener(MouseEvent.CLICK, geefMijSnoep("snikkers", 2.50));

Wel kun je aan de de klik (type MouseEvent) die je functie ontvangt weer dingen vragen: je kunt eigenschappen (properties of variabelen) van het MouseEvent opvragen. Je kan bijvoorbeeld uitlezen bij welke button het MouseEvent plaatsvond (target) en wat de instanceName van deze button is (name). Als je je knop dus snikkersknop hebt genoemd kun je op deze manier uitlezen welk soort snoep iemand hebben wil:

    snikkerKnop.addEventListener(MouseEvent.CLICK, geefMijSnoep);  
	 
    var snoepNaam: String  //maak een variabele om de gewenste snoepnaam tijdelijk in te bewaren
    
    function geefMijSnoep(e:MouseEvent):void {
      //ophalen naam van aktieve stage object, de button snikkerKnop
      snoepnaam = e.target.name; // stopt de naam van de knop in een variabele
      trace(snoepNaam); // lees de variabele uit en print de waarde van de variabele: "snikkersknop"
    }

Vaak heb je aan de informatie die je uit een knop kan opvragen niet genoeg. Denk nog maar eens aan de automaat: je kiest eerst voor een snikker en daarna bevestig je dit met enter.
Als je meteen op 'enter' begint te drukken dan weet de automaat nog niet dat je een snikker wilt hebben, dus er zitten 1 of meer stappen tussen. Denk aan de vervolgschermen van het koffieapparaat. In die tussenstappen of vervolgschermen kun je een of meerdere variabelen vullen, die je weer gebruikt als je op enter drukt en het definitieve produkt wordt gemaakt.

De tussenstappen worden dus in variabelen opgeslagen.
Stel je maakt een movieclip snoepautomaat, dan kun je daarbinnen een variabele snoepType en snoepBedrag maken en vullen. Bij het drukken op enter zijn alle gegevens dan bekend en kun je deze via een function uitlezen.
Je geeft de benodigde informatie dus niet mee als parameter variable bij de functieaaroep, maar laat de functie je leest gewoon de reeds ingevulde variabelen in de movieclip:

    enterKnop.addEventListener(MouseEvent.CLICK, geefMijSnoep); 

   
    var snoepNaam:String;
    var betaaldBedrag:Number;  
	   
    function geefMijSnoep(be:ButtonEvent):void {
      //ophalen variabelen van eerder gemaakte keuzes
      if(betaaldBedrag > 0.75){
         trace(snoepNaam);
      }
    }

KeyboardEvents

Behalve MouseEvents heb je ook KeyboardEvents. Die kun je gebruiken om je flash movie op toetsaanslagen te laten reageren. Het werkt op de zelfde manier; alleen moet je nu niet een button vertellen welke functie uitgevoerd moet gaan worden maar de stage zelf.

    stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);

Ook nu kun je dingen uitlezen in jouw functie

    function keyDownHandler(ke:KeyboardEvent):void {
        trace("keyDownHandler: " + ke.keyCode); //welke toets is ingedrukt?
        trace("ctrlKey: " + ke.ctrlKey);        //is tegelijk ook de control toets ingedrukt?

        trace("shiftKey: " + ke.shiftKey);
        trace("altKey: " + ke.altKey);
    }

Lesopdracht Events

Stap 1: Wanneer je een instantie van een movieclip genaamd mcCircle over het scherm wilt bewegen heb je het volgende script nodig voor een beweging naar rechts:

function keyDownHandler(e:KeyboardEvent):void {
	trace("code: " + e.keyCode);
	if (e.keyCode == 39){
		mcCircle.x += 10;
	}
}

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);

Gebruik deze informatie en de informatie uit de lesbrief om de mcCircle alle kanten uit te laten bewegen. Naar links, rechts boven en onder. De trace kan je gebruiken om de keyCode van de verschillende toetsten te achterhalen.

Stap 2: Je kunt ook een tekstveld toevoegen waarin je de x en y locatie van mcCircle weergeeft. Voeg deze toe. 

function keyDownHandler(e:KeyboardEvent):void {
	txtLocatie.text = "hoi";
}

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);

txtLocatie is in bovenstaand voorbeeld de instancename van het tekstveld.

Updateframe Event

In bovenstaand voorbeeld maak je gebruik van een keyboardEvent waarbij er iedere keer maar een ding gebeurd. Als je wil dat je movieclip zich blijft verplaatsen zolang je de toets indrukt kun je gebruik maken van een ander Event.

In onderstaand voorbeeld wordt de movieclip blok tijdens het afspelen van de movie telkens op een andere random positie (x en y) op de stage geplaatst met behulp van de function verplaatst. Eerder hadden we gemerkt dat een movie alleen bleef spelen in een loop (spreek uit: loep) als je meer dan 1 frame in je movie had. Met dit event is het mogelijk de movie zichzelf te verplaatsen binnen 1 frame. Een loop kan voor allerlei doeleinden worden gebruikt, bijv. voor het constant checken of een bepaalde conditie waar is of niet.

blok.addEventListener(Event.ENTER_FRAME,verplaats);
var stopmaar:Boolean = false;
function verplaats(e:Event):void {
   if (stopmaar==true){ return; }
   blok.x = Math.floor(Math.random() * stage.stageWidth);
   blok.y = Math.floor(Math.random() * stage.stageHeight);
   trace(blok.y);
   if (blok.y > 100 && blok.y < 150){ stopmaar = true; }
}

Zoals je kunt zien 'luistert' deze verplaats functie naar een Event en niet specifiek naar een MouseEvent of een KeyboardEvent. Een MouseEvent en KeyboardEvent zijn eigenlijk een uitgebreidere versie van een 'gewoon' Event. Als je hier meer van wilt weten, kijk maar in de Flash help bij Handling Events in Actionscript 3.0

Ten slotte nog een voorbeeld waarin beide Events worden gecombineerd:

var kCode:Number = 0;
var speed:Number = 5;

function onEnterHandler(e:Event):void {
	if (kCode == 37) {
		mcCircle.x += -speed;
		txtError.text = "links";
	}
	if (kCode == 38) {
		mcCircle.y += -speed;
		txtError.text = "up";
	}
	if (kCode == 39) {
		mcCircle.x += speed;
		txtError.text = "rechts";
	}
	if (kCode == 40) {
		mcCircle.y += speed;
		txtError.text = "down";
	}
}


function keyDownHandler(e:KeyboardEvent):void {
	trace("code: " + e.keyCode);
	kCode = e.keyCode;
}

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
stage.addEventListener(Event.ENTER_FRAME, onEnterHandler);

Om de variabelen in beide functies te kunnen gebruiken is het nodig de variabele aan te maken buiten de functie. Door hier de variabele eerst te definieren kan je hierna binnen de verschillende functies de variabele gebruiken, anders geeft het problemen.

Ik heb aan het flashfilmpje naast een cirkel ook een tekstveld toegevoegd. Deze heb ik txtError genoemd. Hier kan je feedback in meegeven.

 

Auteur: CMD, Media aan de Maas
Seizoen: winter
Studiejaar: CMD jaar 1
Lesnummer: 06
Datum: 08-01-2008
Type les: MME