Een Flash button maken

Posted by Cocovijve

augustus 13, 2008

Flash buttons zijn symbolen die je kunt beschouwen als schakelaars.
Een button heeft een aparte Timeline maar er zijn slechts 4 toestanden of keyframes mogelijk.

De vier verschillende toestanden zijn :

Up : de rustfaze van de button.
Over : de toestand (of vorm) van de button wanneer de muis erover beweegt.
Down : de toestand tijdens het indrukken van de muistoets.
Hit : het aanklikbare gebied va de button.

In elk van deze vier toestanden kan de button een ander uiterlijk aannemen. Buttons kunnen meerdere layers bevatten met verschillende achtergronden

Bekijk hier het voorbeeld van een Flash button

Open Flash CS3.

Open een nieuw werkdocument.

Voeg een nieuw symbool in. (Ctrl + F8)

Geef een naam voor de button : btnEersteKnop (begin steeds met het voorvoegsel btn), kies button als type en klik op OK.

Er wordt een subscene geopend met in de Timeline 4 aparte frames : Up, Over, Down en Hit. Het frame Up is reeds een keyframe.

Teken op de Substage een cirkel met een lichtgrijze vulkleur zonder rand.

Plaats deze cirkel in het midden van de Stage.

Selecteer het frame Over en voeg een keyframe in. (F6)

De cirkel van het frame Up wordt automatisch gekopieerd.

Verander de kleur van de cirkel in blauw.

Voeg in het frame Down een keyframe in en wis de cirkel op de Substage.

Teken een vierkant op de Substage en voorzie een breedte die dezelfde is als de diameter van de cirkel. Kleur groen.

Centreer het vierkant ten opzichte van de substage.

In het frame Hit plaats je een keyframe en laat je het vierkant staan.

Ga terug naar Scene 1 en sleep vanuit de Library het symbool btnEersteKnop naar de Stage.

Controleer de animatie. (Enter) Als er niets gebeurd, ga dan naar het menu Control en zorg dat er een vinkje staat naast “Enable Simple Buttons”.

Momenteel zal de knop werken maar er worden geen acties gekoppeld aan de button.

Acties worden geprogrammeerd via ActionScript, een ingebouwde programmeertaal in Flash.

ACTIONSCRIPT toevoegen.

Selecteerde grijze cirkel (schakel desnoods “Enable Simple Buttons” terug uit)

en wijzig de Instance name in de Property Inspector in “eersteknop”.

Selecteer frame 1 en klik op F9, voeg onderstaande code toe :

function eersteknop_clicked(o:Object){

navigateToURL(new URLRequest("http://www.webtutorials.be"));

}

eersteknop.addEventListener(MouseEvent.CLICK, eersteknop_clicked);