CMD 2 | MME | Winter 2007_2008 | Flash CS3

Leerdoelen

Inzicht in het gebruik van functions in actionscript 3
Inzicht in het gebruik van events in actionscript 3
Inzicht in het object oriented werken in actionscript 3

Deze les

Bespreken opdracht2 vorige les
Uitleg functions & events
Maken lesoefeningen

Functions in actionscript 3.0

Wat zijn eigenlijk functions? En hoe kun je ze gebruiken? Functions kun je, net als in PHP en Javascript, zien als een klein programma met 'functioneel bij elkaar horende' instructies. Je groepeert de instructies als het ware. Vaak gebruik je een function om iets uit te rekenen. De function voert iets voor je uit. En deze function geef je een naam. Dus met 1 instructie (de aanroep van de function) kun je een hele set instructies (beter: statements) uitvoeren:

function dubMovies(e:MouseEvent):void {
	var circle:mcCircle = new mcCircle();
	circle.x = 30;
	circle.y = 30;
	addChild(circle);
}

btnClick.addEventListener(MouseEvent.CLICK, dubMovies);

Bovenstaand voorbeeld uit lesbrief1 van deze periode laat zien dat de function dubMovies wordt aangeroepen vanuit een EventListener die weer aan een button is gekoppeld.

Syntax voorbeeld functie:

function functionName([parameter0, parameter1,...parameterN]) : returnType{ 
	// statement(s) 
} 
var functionName:Function = function ([parameter0, parameter1,...parameterN]) : returnType{ 
	// statement(s) 
}

Een function is dus een set van statements, door jou gedefinieerd om een bepaalde taak uit te voeren. Je kunt een functie op een bepaalde plaats definieren, bijv. in frame 1 van de layer actions; je kunt deze functie vervolgens vanaf een andere plek, bijvoorbeeld vanuit een movieclip, weer aanroepen.

Je kunt ook parameters meegeven bij het aanroepen van een functie.
Parameters zijn 'bewaarplaatsen' voor waarden waar de functie mee werkt.
Iedere keer als je de functie oproept kun je verschillende parameters doorgeven zodat je de function in verschillende situaties kunt gebruiken.

Je kunt het return statement gebruiken in een in een functie om er voor te zorgen dat de functie een waarde teruggeeft. Via : returnType geef je aan om welk type het gaat. Vaak zie je hier :void staan wat zoveel betekent dat er niets (null) terugkomt

Gebruik 1: Je kunt het function keyword gebruiken om een function te definieren met specifieke naam, parameters, en statements. Als een script een functie aanroept, dan worden de statements in die functie uitgevoerd. Forward referencing is toegestaan: binnen hetzelfde script mag een functie gedeclareerd worden nadat deze is aangeroepen. Een functie definitie vervangt iedere vorige definitie van dezelfde functie. Je kunt de syntax toepassen op elke plaats waar scripten is toegestaan.

Gebruik 2: Je kunt ook function gebruiken om een anonieme functie te maken om er een referentie aan te geven. Deze syntax wordt gebruikt in expressions en is vooral nuttig bij het installeren van methods in objecten. (vrij vertaald vanuit het engels uit de Flash help, nadere uitleg volgt nog)

Voor toegevoegde functionaliteit kun je het arguments object in je functie definitie gebruiken. Het arguments object wordt veel gebruikt om een functie te creeëren die een variabel aantal parameters accepteert, en om een recursieve anonieme functie te creeëren.

Voorbeeld gebruik parameters
Het volgende voorbeeld definieert de functie sqr, welke de vierkantswortel waarde teruggeeft van een getal:

function sqr(xNum:Number) { 
    return Math.pow(xNum, 2); 
} 
var yNum:Number = sqr(3); 
trace(yNum); // output: 9

Als de functie wordt gedefinieerd en gebruikt in hetzelfde script, dan kan de functie definitie plaats vinden nadat de functie wordt gebruikt:

var yNum:Number = sqr(3); //aanroep van function sqr
trace(yNum); // output: 9 

//definitie van function sqr
function sqr(xNum:Number) { 
    return Math.pow(xNum, 2); 
}

Voor meer uitleg over function en het arguments object, zie de Flash Help Programming in Actionscript 3.0

Lesopdracht functies

Onderzoek het gebruik van functie in verschillende situaties.
Maak een function zonder parameters en eentje met parameters.
Maak ook een function die iets teruggeeft naar de aanroep.

Let op de syntaxfoutmeldingen die je krijgt in onderstaand voorbeeld.
Herstel deze, maar controleer ook de onderstaande functie op andere fouten:

var naam:String = toonNaam();
trace (naam);
	
function toonNaam(naam:String) {
  naam  = 'piet';
  var aanhef:String = 'u heet: ' + naam;    
  return (naam);
}

Events in actionscript 3.0

Wat zijn eigenlijk events? En hoe kun je ze gebruiken? Events zijn, letterlijk vertaald, gebeurtenissen of akties.

Vertaald uit de Flash Help CS3 Programming Actionscript 3.0:
De Event class wordt gebruikt als base class voor het aanmaken van Event objecten, welke als parameters worden doorgegeven aan eventlisteners als er een event plaats vindt. De eigenschappen (properties) van de Event class bevatten basisinformatie over een event, zoals het event's type of of het event's default gedrag. Dit default gedrag kan worden geannuleerd.

Voor veel events is deze basis informatie afdoende. Andere events echter, hebben wellicht meer gedetailleerde informatie nodig. Events geassocieerd met een mouse click, bijvoorbeeld, moeten extra informatie meesturen over de lokatie van de click event en of er wellicht nog toetsen zijn ingedrukt tijdens de click event. Je kunt zulke extra informatie doorsturen naar event listeners door de Event class te extenden, zoals de MouseEvent class doet.

Wat gebeurt er? Bijvoorbeeld, iemand klikt op de muisknop. Dit is een gebeurtenis die kan worden afgevangen met een zgn. MouseEvent en wel van het type 'CLICK' in dit geval.

Zelfde voorbeeld uit functions:

function dubMovies(e:MouseEvent):void {
	var circle:mcCircle = new mcCircle();
	circle.x = 30;
	circle.y = 30;
	addChild(circle);
}

btnClick.addEventListener(MouseEvent.CLICK, dubMovies);

Je ziet dat er een parameter e:MouseEvent wordt meegegeven met de function dubMovies. Vervolgens zie je dat bij de addEventListener op btnClick de function dubMovies wordt uitgevoerd op het moment dat er daadwerkelijk een MouseEvent van het type CLICK plaats vindt.

Andere voorbeelden van events:

function dubMovies(e:MouseEvent):void {
	var circle:mcCircle = new mcCircle();
	circle.x = 30;
	circle.y = 30;
	addChild(circle);
}

btnClick.addEventListener(MouseEvent.CLICK, dubMovies);

Bovenstaand voorbeeld is met de mouseEvent Click, er zijn natuurlijk veel meer MouseEvents:

knop.addEventListener(MouseEvent.DOUBLE_CLICK, functie);  
knop.addEventListener(MouseEvent.MOUSE_DOWN, functie);
knop.addEventListener(MouseEvent.MOUSE_MOVE, functie);
knop.addEventListener(MouseEvent.MOUSE_OUT, functie);
knop.addEventListener(MouseEvent.MOUSE_OVER, functie);
knop.addEventListener(MouseEvent.MOUSE_UP, functie);
knop.addEventListener(MouseEvent.MOUSE_WHEEL, functie);

Daarnaast hebben we in eerdere voorbeelden ook met keyPress gewerkt, dit is een ander type event, maar werkt in AS3.0 op dezelfde manier. Nu heet dit een keyBoardEvent. Een keyboardEvent kan je niet aan een button of movieclip koppelen. Dit kon eerder wel. Nu moet je stage zelf een het keyboard event meegeven. Dit is eigenlijk ook veel logischer.

belangrijk: Wanneer je onderstaand voorbeeld wilt testen moet je eerst in de player via control 'disable shortkeys' aanvinken. Anders werkt het niet.

function keyDownHandler(e:KeyboardEvent):void {
	trace("keyDownHandler: " + event.keyCode);
	trace("ctrlKey: " + event.ctrlKey);
	trace("keyLocation: " + event.keyLocation);
	trace("shiftKey: " + event.shiftKey);
	trace("altKey: " + event.altKey);
}

this.stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);

Hierboven een aantal voorbeelden uitgewerkt met trace in combinatie met de key_down event. Wat er gebeurt is dat wanneer er een toets wordt ingedrukt, wordt altijd de functie aangeroepen. In de functie kan je checken welke toets er is in gedrukt en op basis hiervan een actie formuleren. De gevens die je kan opvragen zijn de keyCode (welke toets is er ingedrukt), daarnaast kan je afvangen of tegelijkertijd ook de SHIFT, CTRL of ALT zijn ingedrukt. Dit zijn booleans. Wanneer de toets is ingedrukt zal de trace TRUE weer geven en anders FALSE.

De laatste is de keyLocation. Dit is handig bij toetsen die meerdere keren voorkomen op het toetsenbord. Bijvoorbeeld de shifttoets. Als je wilt weten of de linker of de rechter SHIFT is ingedrukt gebruik je KeyLocation.LEFT of KeyLocation.RIGHT. Deze geeft dan weer een TRUE of een FALSE terug. Op dezelfde manier kan je ook afvangen of een cijfer is ingevuld via het standaard toetsenbord of via het nummerieke gedeelte. (KeyLocation.STANDARD of KeyLocation.NUM_PAD);

Lesopdracht Events

Stap 1: Wanneer je dus de cirkel over het scherm wilt bewegen, zoals we in het eerste jaar ook eens hebben gedaan in een lesopdracht. 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;
	}
	
}

this.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. Tekstvelden werken nog steeds op dezelfde wijze als in as 2.0

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

this.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. In de oude actionscript kon je een onEnterframe script gebruiken om meer een animatie te realiseren. Dit werkt nu iets anders. Wanneer je dit nu wilt realiseren moet je ook hiervoor een eventListener gebruiken. In onderstaand voorbeeld de code voor het naar rechts animeren van een cirkel na een druk op het pijltje naar rechts en zo verder. Dit werkt soms mooier dan anders

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;
}

this.stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
this.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.