Flash buttons maken.

_{door W0utah op 08-01-2007}

In deze tutorial ga ik je uitleggen hoe je in flash je eigen buttons kan maken.


Acties toevoegen aan je button
Veel voorkomend probleem met een tekst button

Het eerste wat we gaan doen is een nieuw flashdocument maken, de grootte maakt niet veel uit, maar let wel op dat deze groot genoeg is voor je button.

Als dat gedaan is gaan we een nieuw button aanmaken, dit doen we door op ctrl+F8 te drukken.

Let op dat je het rondje "button" aanvinkt.
Neem deze instellingen over, de naam kan je uiteraard veranderen.



Na het klikken op OK, belanden we in een nieuw werkblad, de tijdlijn van een button ziet er zo uit.



Ik zal de betekenis hiervan uitleggen

Up: Dit is de button zoals je hem standaard zal zien in flash.
Over: Wanneer je met je muis over de button gaat zal hij veranderen naar wat er in dit frame staat.
Down: Wanneer je klikt met je muis op de button zal hj veranderen naar wat er in dit frame staat.
Hit: Je wilt bijvoorbeeld nog een onzichtbare button maken waar je op kan klikken, deze zal de gebruiker niet zien.

Nu gaan we beginnen met het maken van de button.
Ga in de Upframe staan en teken daar je button.
Zoals je bij mij ziet moet dit niet ingewikkeld zijn om te beginnen, in mijn voorbeeld is dat gewoon een rechthoek, maar dit mag je natuurlijk zo mooi maken als je zelf wilt.
Wat je ook kan zien bij mij is dat ik voor de tekst een nieuwe laag heb aangemaakt, zo is het makkelijker om tekst aan te passen.



Ga nu op de Overframe staan en druk op F6 (nieuwe keyframe).
Zoals je kan merken zal de button die je getekend hebt op de vorige frame er nog staan, zo kan je deze makkelijker veranderen, selecteer bijvoorbeeld de rechthoek en geef hem een andere kleur.
Doe hetzelfde voor de downframe.

In de Hitframe hoef je nu niks te tekenen omdat de button voldoende raakvlak heeft.

Ga nu terug naar de mainstage, dit doe je door boven je timeline op "scene 1" te drukken



Open nu je library (window->library of ctrl+L)

Sleep je button op de stage en je kan jouw movie testen (ctrl+enter)

resultaat



hit frame
Wat ik verder nog ga bespreken is het probleem van een tekst button.
Dit is dus een button met enkel tekst of de rand van een figuur met als gevolg dat je enkel door precies op de tekst of rand te komen de button kan aanklikken.

Dit kan je oplossen door in de Hit frame op een nieuwe laag een rechthoek te tekenen.
De rechthoek zal niet zichtbaar zijn bij je button, het is een onzichtbare button.
De rechthoek mag een beetje groter zijn dan de tekst/figuur zelf.
Deze rechthoek mag gelijk welke kleur hebben omdat je hem toch niet zal zien.



voorbeeld button zonder de hitFrame te gebruiken:


voorbeeld button met de hitFrame gebruikt:

In het eerste voorbeeld moet je precies op een letter gaan staan om te klikken, terwijl in het tweede voorbeeld een mouseOver voldoende is.



top
acties toevoegen
We zouden ook graag hebben dat je door op de button naar een bepaalde webpagina kan gaan, dit doen we zo.
Allereerst moeten we de button een instancenaam geven, ik gebruik "knop" als voorbeeld.

Nu selecteren we de keyFrame waar de knop instaat en openen het actionscript panel (f9), daarin plaatsen we de volgende code



onRelease: de actie hieronder zal worden uitgevoerd waneer je de muisknop loslaat

getURL: dit wordt gebruikt om naar webpagina's te linken.
De eerste parameter is het url van de website, in ons geval dus http://www.vintagesworld.be.
De tweede parameter is het window waarin het geopend moet worden, _blank staat voor een nieuw venster.



Hopelijk heb je hieruit wat geleerd en nu kan je jouw eigen creatieve buttons maken.
Ik zal mijn best doen om een tutorial te maken waarbij je als je over de button komt een geluidje hoort of een animatie laat afspelen.