[FLASH] Buttons

Voor deze tutorial ga ik ervan uit dat je de tekentools van flash onder de knie hebt.
Anders kan je deze hier bekijken

Ik ga twee werkwijzen uitleggen om een button te maken in flash. De eerste is de eenvoudigste, maar de tweede werkwijze wordt nu aangeraden om te gebruiken. Ik ga ze eerst even uitleggen en nadien zal ik de voor- en nadelen opsommen.

1e manier (verouderd)
Teken een rechthoek op de stage. Door op de rechthoek te dubbelklikken wordt hij volledig geselecteerd (ook de omlijning). Kies Modify - Convert to symbol of druk F8. Nu krijg je een popup scherm waar je kan kiezen uit 3 verschillende symbolen: graphic symbol, movieclip en button. Kies voor button en geef een naam (bv but1). Je zal zien dat op de stage rond je rechthoek een blauwe kader is verschenen. Dit is om aan te geven dat het object dat je geselecteerd hebt een symbool is.

Als je nu dubbelklikt op de rechthoek, zal je zien dat we in de button gaan. Als je naar de tijdlijn kijkt, zie je 4 frames: Up, Over, Down en Hit. De Up-frame wordt weergegeven als er niets met de button gebeurt. De Over-frame wordt weergegeven wanneer we met de muis over de button gaan. De Down-frame als we de linkermuisknop ingedrukt houden. De Hit-frame wordt nooit weergegeven, maar bepaalt welk deel van de button aanklikbaar is. Voeg een keyframe in bij de over-frame (rechtermuisknop op frame klikken en insert keyframe kiezen). Verander de kleur van de rechthoek op de over-frame. Voeg ook een keyframe in op de Down-frame. Verander ook daar de kleur van de rechthoek. Als je nu de movie test (Ctrl + Enter) zal je zien dat, wanneer je met de muis over de rechthoek gaat, deze van kleur verandert. Als je klikt op de button en de knop ingedrukt houdt, zie je dat de kleur opnieuw verandert. Nu keren we terug naar de stage (klikken op Scene 1 linksbovenaan om uw scherm) om een actie op onze button te plaatsen.

Open het action paneel (F9 op het toetsenbord). Nu moet je er op letten dat links bovenaan het action paneel "Actions - Button" staat. Als er "Actions - Frame" staat moet je 1 maal op de button klikken om hem te selecteren. Typ of kopieer volgende code in het action paneel:

on(release){
trace("button is ingedrukt en weer losgelaten");
}

Als je nu de movie test (Ctrl + Enter) en je klikt op de button zal je zien dat de tekst tussen aanhalingstekens getraced wordt.
Alle acties die tussen de {} geplaatst wordt zal worden uitgevoerd op het moment dat de rechtermuisknop wordt ingedrukt en losgelaten boven de button.

Je kan ook meerdere events tussen de () plaatsen:
on(release,releaseOutside){
trace("button is ingedrukt en weer losgelaten");
}

Dit zal er voor zorgen dat de acties tussen {} worden uitgevoerd op het moment dat de button wordt ingedrukt en weer losgelaten boven de button, en ook wanneer de muisknop wordt losgelaten naast de button.

Als je on( typt in het actiepaneel krijg je automatisch een dropdown lijst met de mogelijkheden die tussen de () kunnen gezet worden.

WOORDEN ALS BUTTON
Typ nu een woord op de stage bv FLASH. Selecteer dat woord en converteer dat naar een button (F8 op het toetsenbord). Dubbelklik op FLASH om in de button te gaan. Voeg een Keyframe in op de tweede frame (F6 of rechtermuisknop op de frame en kies insert keyframe)
Verander het woord van kleur. Als je nu de movie test zal je zien dat enkel de letters de button activeren. Bij een fijn lettertype is dit niet handig, daarom kan je best op de hit-frame een keyframe plaatsen en een rechthoek tekenen over de tekst. Deze rechthoek gaat nooit zichtbaar zijn, maar zorgt er wel voor dat de button gemakkelijk aanklikbaar is.


INVISIBLE BUTTON
Keer terug naar de stage (klikken op Scene 1 linksbovenaan om uw scherm) en teken een rechthoek. Converteer deze naar een button (F8) en dubbelklik om in de button te gaan. Selecteer de eerste frame door er 1 maal op te klikken. Sleep deze frame nu naar de hit-Frame. Op de eerste 3 frames staat er nu niets meer. Als je nu terugkeert naar de stage (klikken op Scene 1 linksbovenaan om uw scherm) zal je zien dat de rechthoek een transparante blauwe kleur heeft gekregen. Dit wil zeggen dat de button niet zichtbaar gaat zijn in de movie, maar wel aanklikbaar. Als je de movie test (Ctrl + Enter) zal je de button niet zien, maar wanneer je erover gaat, krijg je wel het handje.

2e manier (wordt nu aangeraden om te gebruiken)
Open een nieuw document. Teken een rechthoek op de stage, selecteer hem (dubbelklikken) en kies Modify - Convert to symbol of druk F8. Opgelet! kies nu niet voor button, maar voor movieclip in het popup window. Ook al gaan we een button maken, we vertrekken van een movieclip. Dubbelklik op de rechthoek om in de movieclip te gaan. Voeg een layer toe (klik op het + icoontje links onder de layers) en noem deze acties. De andere layer noem je rechthoek. Ga op de eerste frame staan van de acties-laag en typ:
stop();
Een movieclip wordt automatisch afgespeeld in flash. We moeten dus een stop zetten om te vermijden dat hij alle frames achter elkaar gaat afspelen.
Voeg nu een keyframe toe op frame 2 van de rechthoek-laag. Verander hier de rechthoek van kleur. Keer terug naar de stage (klikken op Scene 1 linksbovenaan om uw scherm).

Selecteer de movieclip die je gemaakt hebt door er 1 maal op te klikken. Onderaan in het properties paneel kan je een instance name geven (links). Deze naam zal ervoor zorgen dat je de movieclip kan aanspreken. Geef als instance name: button1. Zorg ervoor dat er geen leestekens of spaties in de naam staan (uitgezonderd _) of dat de naam niet enkel uit cijfers bestaat.

Voeg ook op de stage een 2de laag toe en noem deze ook acties. Selecteer de eerste frame van de laag acties en open het actie paneel. Voeg nu volgende code toe:

button1.onRollOver= function () {
this.gotoAndStop(2);
}
button1.onRollOut=button1.onDragOut= function () {
this.gotoAndStop(1);
}

Ook hier kan je verschillende acties tussen de {} plaatsen.

Voordeel (met dank aan Dauntless):

- Het is een beetje meer werk in het begin, maar als je nadien een actie moet toevoegen, of je moet iets aanpassen aan de code van de buttons, staat de code allemaal gegroepeerd op 1 frame. Je moet dus niet gaan zoeken naar de code op de buttons zelf.

- je kan handlers als functies definieren en deze toevoegen en verwijderen wanneer je wilt:
function foo()
{
}
this.onRelease = foo;
delete this.onRelease;
this.onRelease = foo;

- De scope van een onRelease is veel duidelijker dan die van een on(release)
- Je moet uiteindelijk tóch de goede versie leren
- AS in de vorm van on(release) is dus heel moeilijk te debuggen
- ...