FLASHBITS - LEER SNEL EN MAKKELIJK FLASH... EN ACTIONSCRIPT

Acties op knoppen 2

De constructie is nu in orde. De totale code die we hebben is:

knop.addEventListener(MouseEvent.CLICK,knopActies);

function knopActies(event:MouseEvent):void {

}

Maar er gebeurt natuurlijk nog helemaal niets. Laten we een simpele mededeling tonen als er op de knop gedrukt wordt.

Om te beginnen zie je in de functie knopActies tussen de haakjes iets staan. Dit geeft aan dat er iets door de functie ontvangen wordt. De MouseEvent stuurt automatisch een heleboel informatie mee naar de functie, in de vorm van de classe MouseEvent.
Met event:MouseEvent geven we aan, dat we het object dat ontvangen wordt, "event" noemen. In dit object kunnen we altijd een aantal dingen vinden, bijvoorbeeld de naam van het object waarop geklikt is:

event.target.name

target geeft aan welk object de actie uitvoert, en name, ja de naam die we er aan gegeven hebben.
We kunnen de ingebouwde functie trace() gebruiken, om deze informatie in het uitvoer scherm (output window) te plaatsen:

trace (event.target.name);

Dit moeten we nu binnen de functie plaatsen:

function knopActies(event:MouseEvent):void {
trace (event.target.name);
}

We kunnen nog een stapje verder gaan. Een knop zou ook naar een mouseOver moeten luisteren. Dat kan door een nieuwe listener toe te voegen:

knop.addEventListener(MouseEvent.ROLL_OVER,knopActies);

We kiezen hiervoor de gebeurtenis ROLL_OVER, en sturen die ook naar onze functie. Nu moeten we wel de twee acties afzonderlijk opvangen. Dat kan door het type actie uit telezen, met:

event.type

Als de event.type "click" is, doen we de actie voor de klik, ie ie "rollOver", dan doen we de actie voor de muisover. Met event.type kunnen we dus het type event uitlezen, dat zit weer in het object dat automatisch naar de functie wordt gestuurd. We moeten wel een "if-constructie" toevoegen, iets als:

Als het type dit is, doe dan zo. Als het type dat is, doe dan zus.

als (voorwaarde-die-waar-is) {
dan hier de actie die we willen
}

In Actionscript heet dit een if-statement, en die ziet er ongeveer hetzelfde uit als hierboven, maar dan in het Engels. We voegen meteen de juiste voorwaarde in, en de actie die we willen uitvoeren:

if (event.type == "click") {
trace("Er wordt op de knop geklikt");
}

if (event.type == "rollOver") {
trace("Muis pointer boven knop!!");
}

Dat moet nu natuurlijk binnen de functie komen te staan, waardoor de complete code wordt:

knop.addEventListener(MouseEvent.CLICK,knopActies);
knop.addEventListener(MouseEvent.ROLL_OVER,knopActies);

function knopActies(event:MouseEvent):void {
   trace (event.target.name);
   if (event.type == "click") {
     trace("Er wordt op de knop geklikt");
   } 

   if (event.type == "rollOver") {
     trace("Muis pointer boven knop!!");
   } 
}

Download het FLA-bestand