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

Acties op knoppen

Wil je de bezoeker van je site iets laten doen, dan wordt over het algemeen gebruik gemaakt van een knop waarop geklikt kan worden. We gan hier kijken hoe je een knop maakt die gebeurtenissen (zoals een klik erop) kan registreren en daarop een bepaalde actie kan uitvoeren.

- Maak een button object en plaats dat op het werkgebied.
- Selecteer de button, open het Eigenschappen palet en vul in bij instantie-naam: knop

We hebben nu een knop op het werkgebied staan, en die knop is dmv Actionscript aan te spreken met zijn naam: knop

Eerst willen we dat de knop naar een bepaalde gebeurtenis gaat luisteren, namelijk dat er op hem geklikt wordt. Een gebeurtenis is in Flash een "event", iets wat naar een event luistert is een "eventListener", en zo'n eventListerner toevoegen aan een object zoals een knop gaat via "addEventListener".
We willen het event koppelen aan de knop, we moeten dus eerst de naam van de knop opgeven, en dan een punt plaatsen. Het scheiden van objecten, acties en dergelijke doe je namelijk door middel van een punt.

- Klik in de tijdlijn op het hoofdframe waar de knop in staat
(Overzichtelijker is meestal, om een nieuwe laag te maken en hier op het eerste hoofdframe de acties te plaatsen, maar voor ons voorbeeld maakt het niet uit)

knop.addEventListener();

Na de eventlistener staan er twee haakjes, want het is een functie, dwz, hij voert iets uit. Extra info over wat er uitgevoerd wordt, dat komt straks tussen de haakjes. Die xtra info wordt ook wel de "argumenten" genoemd. We moeten nog toevoegen waarnaar de knop moet luisteren, en wat er dan moet gebeuren. De knop moet luisteren naar een klik van de muis:

MouseEvent.CLICK

En wat er moet gebeuren bij een klik, dat wordt weer in een andere functie geplaatst. Die functie gaan we zelf schrijven, en die kunnen we ook zelf een naam geven. We noemen hem "knopActies".

De actie waar de knop naar moet luisteren, en de functie die dan uitgevoerd moet worden, worden tussen de haakjes geplaatst, en gescheiden door een komma:

knop.addEventListener(MouseEvent.CLICK,knopActies);

we kunnen nu de functie gaan maken die de actie uitvoert. Een zelfgemaakte functie heeft een standaard constructie: eerst het woord "function", dan de naam die je zelf bedacht hebt, en dan een paar accolades, waartussen de acties staan die de functie uitvoerd. Die acties bepaal je zelf.

function knopActies() {

}

We moeten aan deze constructie echter nog een paar dingen toevoegen. Om te beginnen een argument (info die tussen de haakjes komt). Hier moet staan: event:MouseEvent. Ook moet er achter de haakjes komen te staan, wat de functie teruggeeft. Functies voeren acties uit, maar dat kan ook een berekening zijn. De uitkomst wordt in dat geval teruggestuurd naar hetgeen wat de functie aangeroepen heeft. In dit geval stuurt de functie geen informatie terug, en moet er dan "void" achter de haakjes komen. Daar gaat dan eerst nog een dubbele punt aan vooraf.

function knopActies(event:MouseEvent):void {

}

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.

VERDER -->

Download het FLA-bestand