Les 4: Knoppen

Let's get interactive! Want dat leer je in deze les. Flash is het leukst als je het zelf mag besturen (het is nog leuker om het zelf te besturen én het zelf te maken!). Ik wist nog niet zoveel van Flashknoppen af toen ik deze site ging maken, dus voor mij is het ook nog een beetje nieuw. Het is me in ieder geval wel gelukt om goed werkende knoppen te maken, die heb je gezien in de voobeeldfilmpjes in de vorige les.

Ook deze les heeft vrij veel onderwerpen, vandaar de inhoudsopgave:
Symbool maken
Button tekenen
ActionScripting
ActionScripting 2

Symbool maken
Voordat je knoppen kan gaan maken, moet ik je eerst even leren hoe je zelf een symbool kan maken. Je weet dat als je een object getekend hebt en je gaat dit object in een tween zetten, het object veranderd in een symbool. Symbolen zijn te herkennen als ze geselecteerd zijn: er staat dan een blauwe rand omheen en een kruisje in het midden. Een geselecteerd object wordt gewoon geblokt (net zoals je tekst kan blokken (= selecteren)). Zelf van een object een symbool maken kan nog op een andere manier. Selecteer het object en klik op Insert, kies vervolgens Convert to Symbol...Je krijgt dan een schermpje waar je de naam van het symbool in kan vullen (dit doe ik meestal niet, maar het is wel handiger als je later wat verder bent gekomen met Flash) en het zogenoemde Behavior. Je hebt hier drie opties: Movie Clip, Button en Graphic. Een movie clip symbool is een symbool dat zelf ook nog kan bewegen tijdens een filmpje. Een graphic symbool is een statisch symbool dat helemaal niets kan. Daarom kies ik altijd movie clip als standaard behavior, omdat een movie clip niet per se hoeft te bewegen. Okee, ik ben weer vaag aan het doen, ik zal het proberen duidelijker te verwoorden: een movie clip symbool kán bewegen, maar dat hoeft niet en een graphic symbool kan níet bewegen, daarom is het dus beter om een movie clip symbool te nemen, voor het geval je later nog mocht beslissen om het symbool toch te laten bewegen.
Er is nog een manier om een symbool te maken en dat is zonder dat je eerst een object maakt. Ga, zonder dat je nog maar iets gemaakt hebt naar Insert en kies New Symbol. Het scherm zal veranderen in het Edit Symbol scherm en je tekent je symbool. Klik op Edit en dan op Edit Movie om terug te keren naar je filmpje.
Maar er is nog een soort behavior: Button. Ik hoef je niet te vertellen wat dit is, want ik ga het er nu over hebben.

Button tekenen
Een button bestaat uit 4 onderdelen (4 verschillende objecten/symbolen), deze zijn Up, Over, Down en Hit. De Up-status van de button betekend de status waarin de button verkeerd als je er niets mee doet en hij maar gewoon een beetje op het scherm zit. De Over-status is de status wanneer je met de muiscursor over de button gaat, de button licht dat bijvoorbeeld een beetje op en de Down-status zie je wanneer je op de button klikt. De Hit-status krijg je nooit te zien, want dit geeft voor Flash aan wat de Hotspot is, dat is de plek waar je met de muis over de button moet gaan / op moet klikken om de button iets te laten doen. Probeer maar uit bij de buttons hiernaast of deze hieronder:

Als ik een button maak begin ik altijd met het tekenen van de Up-status. Teken dus gewoon de button zoals je 'm wilt hebben als de muis 'm niet beïnvloedt. Vervolgens selecteer je dit object en maak je er een symbool van (Insert, Convert to Symbol...), vergeet niet Button als Behavior te kiezen. Vergeet je dit toch en heb je er per ongeluk een Movie Clip symbool gemaakt, dan kun je het beste Ctr + Z intoetsen.
Heb je een foutje gemaakt, of je komt er achter dat je toch maar niet die nieuwe layer als Mask Layer wilt hebben. Toets dan Ctr + Z in. Bij alle Windows programma's is Ctr + Z, Ongedaan Maken. Ik gebruik het heel vaak, aangezien ik veel fouten maak. Flash onthoudt standaard je laatste 100 acties, je kunt dus 100 keer iets Ongedaan Maken!
Okee, je hebt nu een button met alleen een Up-status. Dubbelklik op je button en je ziet dat de achtergrond vervaagt en je in het Edit Symbol scherm komt. In de Timeline (waar je je layers, (key)frames en meer van dat soort spul kan zien) zie je het volgende:

Zie je de 4 frames? Eén frame heeft al een keyframe, die heb je net getekend. Om de andere 3 frames te kunnen maken, klik je gewoon met rechts op het Over-frame en kies je Insert Keyframe. Vervolgens pas je je nieuwe keyframe aan zoals je die wilt hebben (dit keyframe geeft dus de Over-status van de button aan). Je doet hetzelfde bij het Down-frame. Het hit frame geeft aan waar de muis invloed heeft op de button. Dus je kunt een hele grote button maken, met maar een heel klein hoekje waar de muis invloedt heeft. Laat je dit vak leeg, dan gaat Flash er gewoon van uit dat je de hele button als hotspot hebt. Aan jou de keuze.

Als je terug bent gegaan naar het Edit Movie scherm zul je zien dat je de button niet kan testen, als je Play kiest bij Control (zoals je voorheen steeds je filmpje testte), gebeurd er niet veel: je hebt maar 1 frame. Er is nog een manier om je film te testen. Om dit te doen klik je bij Control op Test Movie. Je krijgt een nieuw scherm in beeld waar je je film Fullscreen te zien krijgt. Hier kun je ook je knop testen. In de volgende les leer je hier meer over.
Je hebt nu wel een knop gemaakt, alleen kan de knop nog helemaal niets. Je maakt een knop (meestal) niet om er alleen maar op te kunnen klikken, als je er op klikt wil je natuurlijk wel dat er iets gebeurd. Dat komt nu.

ActionScripting
Om er iets te laten gebeuren als je op een knop drukt, moet je een beetje weten hoe ActionScripting werkt. Mensen die bekend zijn met JavaScript (een programma waarmee je allerlei HTML effecten kan laten plaatsvinden) zullen ActionScript niet zo moeilijk vinden, want het lijkt veel op elkaar. Zoals ik al zei weet ik ook net pas hoe ActionScript werkt, dus verwacht niet meteen dat je complete Flashprogramma's kunt maken na deze les.
Je kunt ActionScript toepassen op keyframes en op symbolen (niet op objecten). Je wilt bijvoorbeeld een webpagina openen als je op een knop klikt, dan pas je ActionScript toe op een symbool (de knop in dit geval). Dit doe je door de knop te selecteren (in het Edit Movie scherm) met de rechtermuisknop. Uit het verschijnende menuutje kies je Actions. Je krijgt nu het volgende scherm:

Linksboven in het menu zie je een plusje en een minnetje (die nu niet te gebruiken is), het plusje is voor het toevoegen van een actie en het minnetje, inderdaad, om de gesecteerde actie te verwijderen. Klik op het plusje en je krijgt een dropdown menuutje met de volgende opties:

• Basic Action, hier staan de belangrijkste en meest gebruikte acties.
• Actions, hier staan de minder gebruikte acties.
• Operators, dit zijn allemaal vage tekens waar ik helemaal niets van af weet en wat ook niet aan de orde komt in deze les.
• Functions, ook allemaal vage dingen.
• Properties, zie Operators en Functions.
• Objects, hier staan wel dingen bij die je straks nodig hebt.

Kies Get URL van Basic Actions. In het witte vak staat nu dit:
on (release) {
getURL ("");
}
Flash heeft niet alleen getURL toegevoegd, maar er ook on (release) voor gezet. Wat er nu staat betekend voor Flash zoiets als: 'Wanneer de muisknop na het indrukken weer losgelaten wordt, ga je naar de website "..."'. Als je op de actie on (release) klikt ziet het Actions scherm er zo uit:

Bij Event kun je nog meer opties kiezen dan Release. Je kunt wel een beetje Engels, dus ik ga ze niet allemaal uitleggen. Klik nu op de actie getURL (""), je ziet dit scherm:

Bij URL vul je de site in waar je naar toe wilt gaan als je op de knop drukt. De site kun je het beste invullen als http://www.website.nl, dan weet je zeker dat je het goed doet. Bij Window heb je 4 opties: Self, Blank, Parent en Top. Self betekend dat je de site in hetzelfde scherm wilt openen als het scherm waar je Flashfilmpje in zit. Blank betekend dat je de site wilt openen in een nieuw scherm. Parent heeft te maken met frames, maar daar weet ik niet zo veel vanaf. En tenslotte heeft Top ook iets te maken met frames. Ik maak nooit websites met frames, maar mensen die dat wel doen, weten wel wat Parent en Top betekenen. Variables is nu niet van toepassing.
Maak je een website, en wil je je knop naar een pagina op je site laten verwijzen, vul dan bij URL de pagina-naam in. Dus niet met http, maar gewoon zoiets als pagina1.htm.
Als je nu je film test (met Test Movie dus) zul je zien dat je knop het doet en voor jou de pagina opent die je hebt ingevuld.

ActionScripting 2
Je kunt ook je knop laten verwijzen naar een frame in je film. Zoals dit:

Om dit te doen kies je niet getURL uit Basic Actions, maar kies je Go To. Je krijgt weer de optie om dingen in te vullen. Scene laat je even voor wat het is (deze optie is voor als je meerdere scènes hebt), bij Type kun je kiezen naar wat voor iets je wilt verwijzen. Ik kies meestal maar gewoon Framenumber, maar de andere opties moet je maar ff uitproberen. Vervolgens typ je het framenummer in bij Frame.

Eerlijk gezegd heb ik nog niet meer soorten knoppen gemaakt. Maar met deze basis heb ik je toch al wel een eindje op weggeholpen, dacht ik zo. Wel eens opgemerkt dat het woordje "Abe's" helemaal linksboven in beeld (op deze site) ook een knop is? Als je er op klikt kun je mij mailen. Ik heb dit gewoon gedaan met de getURL actie en ik heb toen als URL ingevuld mailto:prackah@hotmail.com. Dit was een eigen verzinsel, want als je een link maakt in HTML (de taal om websites te maken) die er voor zorgt dat je iemand kan mailen, dan vul je ook als URL mailto:e-mailadres in. Het nadeel van als je dit doet bij Flash, is dat Flash een pagina opent die mailto:prackah@hotmail.com heet en daarnaast opent hij (zoals de bedoeling is) Outlook.
Hoe maak je een goed werkende button die ervoor zorgt dat Flash Outlook opent?

Je weet nu bijna evenveel van Flash als ik momenteel ken. Nog 1 les met onderwerpen die ik nog niet behandeld heb. Deze onderwerpen zijn niet samen te voegen tot 1 onderwerp, vandaar de naam Extra's. Of wil je nog een keer deze les doen?