buttons flash CS3

_{door vinTage op 01-10-2007}

Met de overstap van actionscript 2 naar actionscript 3 is ook de code voor knoppen veranderd, in deze tutorial leer je hoe je met actionscript 3 je buttons laat werken.

In het eerste stuk leg ik uit hoe het grafische gedeelte van een button in elkaar zit, ben je al bekend met dit gedeelte, dan kan je rechtstreeks door naar het actionscript gedeelte



Een button maken en de tijdlijn van een button
We openen dus een nieuwe fla en kiezen voor de optie
flash file (actionscript 3)

Nu we aanbeland zijn in een lege scene, klikken we op CTRL+F8 en kiezen de optie button, we geven daar een logische naam op (bijvoorbeeld knop) en klikken op ok.

In het nieuwe werkblad zien we bovenin een tijdlijn met daarin 4 frames, met daarbij de bijbehorende namen.
up, over, down, hit.


Deze namen komen overeen met de status van je button.
in de up status teken je je button zoals hij er normaal uitziet
In de over status veranderd de button zoals hij eruit ziet als je erop hovert
In de down status maak je de button zoals hij eruit moet zien als je erop klikt.
En de hit frame behoeft iets meer uitleg.
De hitFrame ZIE je NOOIT in de swf, deze kan worden gebruikt als "hot spot".
Als je bijvoorbeeld een tekst hebt, en die wil je als button gebruiken, dan moet je PRECIES op een letter klikken om de button aan te klikken.
Door in de hit frame een "raakvlak" te tekenen omzeilen we dit probleem.
Ook kunnen we met de hit frame onzichtbare buttons tekenen, door gewoon alle voorgaande frames leeg te laten en alleen op de hitframe een raakvlak te tekenen.
Deze hitFrame is dus ten alle tijden optioneel.

Nu, we gaan op de up frame onze knop tekenen.
Als we klaar zijn met onze up frame, klikken we in de tijdlijn op de over frame en dan op F6, onze button word nu gecopierd naar de over frame, waar we hem makkelijk kunnen aanpassen.
Hetzelfde doen we weer bij de volgende frame tot we uiteindelijk 3 frames hebben, hieronder mijn voorbeeldje:


Nu we dus een button hebben getekend, moeten we die nog op de scene plaatsen, dus we keren terug naar de main scene, openen daar de library (F11) en daarin zien we onze zelf gemaakte knop, trek deze op je werkblad en test je movie (CTRL+ENTER).

Als het goed is hou je zoiets over:
Flash button




actionscript 3 voor buttons
Nu we dus een button kunnen maken met een over down en hit frame, willen we de button natuurlijk ook ergens voor gaan gebruiken.
Dus we slepen onze button uit de library op de main scene en geven hem de instancenaam "knop"

In actionscript 3 kan je geen code meer geven aan een object zelf (gelukkig) dus alle code moeten we in de tijdlijn zetten.

Om te beginnen hebben we dus een listener nodig die naar onze button gaat luisteren, de listener triggert een functie.
Met onderstaande code geven we dus een listener mee, na klikken op die button word de functie actie aangeroepen:


Maar er zijn natuurlijk meerdere events dan alleen click, er is ook nog een rollOver en een rollOut.
Voor elk event hebben we een listener nodig, dus:


En na het testen houden we ongeveer zoiets over:




extra
Als we een button gebruiken dan zie je een handje als je op de button komt, als we een movieClip gebruiken zie je géén handje.
We willen natuurlijk wel een handje zien, ook als we over een movieClip gaan die als button functioneerd, dus geven we een movieClip onderstaande code mee:



Let wel dat als je buttonMode = true meegeeft aan een button, je dan een error krijgt, die buttonMode kan je alleen gebruiken op movieClips.


Als we juist het tegenovergestelde willen hebben, dus géén handje bij een button, dan kunnen we het handje weghalen dmv:




Tot zover deze basis introductie tot buttons met flash CS3 en actionscript 3.
Mocht je ergens vastlopen, dan kan je ook de door mij gebruikte fla downloaden.

Update:
MouseEvent.DOUBLE_CLICK werkt alleen als je er knop.doubleClickEnabled = true; bij gebruikt.