Vorig hoofdstuk Inhoudsopgave Volgend hoofdstuk

9. Interactiviteit

9.1 Interactiviteit

Een interactieve Flash-animatie is een animatie die op wat voor manier dan ook reageert op een bepaalde actie van een gebruiker (degene die de animatie bekijkt). Hierbij kun je denken aan een knop die, als er op gedrukt wordt, de animatie stilzet of naar een bepaald frame laat gaan, maar ook bijvoorbeeld aan een compleet spelletje geprogrammeerd Flash biedt verschillende mogelijkheden om interactiviteit toe te voegen. In het simpelste geval kan het gaan om een formulier dat de gebruiker invult en met een druk op de knop naar de webserver verstuurt.Met behulp van de ingebouwde programmeertaal ActionScript is het zelfs mogelijk om spelletjes te maken.
Interactiviteit betekent dus dat de gebruiker het 'gedrag' van de Flash-animatie kan beïnvloeden. Flash moet dus reageren op bepaalde invoer, gebruikersinput genoemd, van degene die de animatie bekijkt.

9.2 Buttons

9.2.1 Inleiding buttons

De eenvoudigste manier om interactiviteit toe te voegen is met behulp van een zogenaamde button (knop). Een button heeft veel overeenkomsten met een filmclip, met als belangrijkste verschil dat er normaalgesproken bij een button een stukje code hoort dat ervoor zorgt dat Flash iets doet zodra er op de button geklikt wordt. Zo is het bijvoorbeeld mogelijk om een button te maken die ervoor zorgt dat de flash-film wordt gestopt, of een bepaalde filmclip zichtbaar of juist onzichtbaar wordt gemaakt. Verder heeft een button in tegenstelling tot een filmclip maar vier frames. Deze worden gebruikt om de button er anders uit te laten zien als een gebruiker de muis over de button beweegt of hem indrukt.

9.2.2 Een bestaande button gebruiken

Een button invoegen in een Flash-animatie is eigenlijk heel gemakkelijk. Net als een filmclip is een button altijd een instance van een (button-) symbol uit de library. Met het library-venster geopend kun je eenvoudig een button-symbol slepen naar de plaats waar je een instance van de desbetreffende button wilt hebben. Je kunt ook een voorgeprogrammeerde button gebruiken uit de common-library buttons.
Als de button eenmaal ingevoegd is moet Flash nog weten wat er moet gebeuren op het moment dat de knop ingedrukt is. Dit doen we door aan de button een stukje code toe te voegen in de programmeertaal ActionScript. In het objectcode venster van de button kun je dat stukje code bekijken en bewerken. Deze code moet je zelf toevoegen en als je net een nieuwe button hebt aangemaakt zal hier dus nog geen code staan. De basis van het toevoegen van ActionScript-code komt in de volgende paragraaf aan bod.

Het library venster met de kolom kind

9.2.3 Een nieuw button-symbol maken

Voordat je een button kunt invoegen, moet er eerst een symbol zijn van de button die je wilt gebruiken. Dit kan natuurlijk een button zijn uit een bestaande library, maar vaker zal dit een symbol zijn dat je eerst zelf hebt gemaakt. Om een nieuwe button te ontwerpen moet je eerst een nieuw button-symbol toevoegen aan je library. Vervolgens kun je dit symbol openen en bewerken op bijna dezelfde manier als een filmclip bewerkt wordt.

9.2.3.1 Het up-, over- en downframe

Een button bestaat, anders dan een filmclip, uit vier frames, ieder met een specifieke functie. Met behulp van deze vier frames is het mogelijk om speciale effecten te creëren, zoals een knop die echt ingedrukt lijkt te worden. In de eerste drie frames, het upframe, het overframe en het downframe wordt de knop getekend zoals hij er respectievelijk normaal uit zal zien, als de gebruiker de muis over de button heen beweegt en als de gebruiker daadwerkelijk op de knop drukt.
Een button kan, net als een filmclip, uit meerdere layers bestaan. Vaak zullen veel layers in alle drie de knopontwerpen (frames) hetzelfde zijn. Voor layers die in meerdere frames hetzelfde zijn (dus bijvoorbeeld in het up- en het overframe), maak je één keer een keyframe aan (in dit geval in het upframe), en maak je voor de daaropvolgende frames (in dit geval slechts het overframe) een gewoon frame aan.
Als een layer in een bepaald frame anders is dan het voorgaande frame, dan maak je voor dat frame een nieuw keyframe aan.

9.2.3.2 Het hitframe

Een speciale functie is weggelegd voor het hitframe. Het hitframe zal nooit worden vertoond tijdens het afspelen van de film. Het hitframe geeft je de mogelijkheid om Flash te vertellen welk gebied van de knop 'gevoelig' is. Met andere woorden, op welk gebied van de knop geklikt kan worden. Dit kan onder andere handig zijn als je een knop maakt met schaduw en je niet wilt dat de schaduw aanklikbaar is. Dat gebied waarin getekend is in het hitframe zal gevoelig worden voor de muis. Vaak zal het hitframe bestaan uit bijvoorbeeld een enkel vierkant, dat het gevoelige gebied van de knop bestrijkt. Ook kun je de complete knop in dit frame zetten en alleen die layers geen hitframe geven die niet gevoelig mogen zijn (denk bijvoorbeeld aan een layer die de schaduw bevat).

9.3 Basis ActionScript

Om interactiviteit in de animatie te creëren is het noodzakelijk dat Flash weet hoe het moet reageren op gebruikersinput. Zo moet je, als je eenmaal een knop hebt gemaakt, Flash nog vertellen wat het moet doen op het moment dat de knop ingedrukt wordt. Dit 'vertellen' gebeurt in de speciaal voor Flash ontwikkelde programmeertaal ActionScript. Mensen die al eens met JavaScript hebben gewerkt zullen veel overeenkomsten vinden tussen de twee talen. Ze zijn beiden zijn afgeleid van de 'ECMA-Script standaard'.
Met ActionScripting is binnen Flash bijna alles mogelijk. Met genoeg programmeerwerk is het zelfs mogelijk om een spelletje te maken in Flash. In het volgende hoofdstuk zullen we dieper ingaan op de achtergronden van ActionScript. Deze paragraaf bevat een eenvoudige inleiding tot ActionScript, zodat je straks in staat bent eenvoudige functionaliteit aan bijvoorbeeld een button toe te voegen.

9.3.1 Inleiding ActionScript

In het meest simpele geval wil je dat Flash één ding doet (bijvoorbeeld een image verbergen) op het moment dat een knop wordt ingedrukt. In zo'n geval vertel je Flash in de taal ActionScript dat het twee dingen aan elkaar moet koppelen, namelijk de gebeurtenis (event) dat de knop wordt ingedrukt, aan de actie (action) om een image te verbergen. Het is belangrijk je goed te beseffen wat deze twee begrippen inhouden. Een event zorgt ervoor dat een bepaald ActionScript gestart wordt. Dit kan zijn een druk op een knop, maar ook bijvoorbeeld het starten van de film of het stoppen van een filmclip.
Een action is een opdracht die vanuit een ActionScript aan Flash wordt gegeven. Dit kan van alles zijn: de muisaanwijzer veranderen, een image of filmclip verbergen of juist weergeven, 'doorspoelen' naar een bepaald frame enzovoort.
Normaalgesproken is een ActionScript dus gekoppeld aan een bepaald event en bevat het één of meerdere Actions.

9.3.2 Events

9.3.2.1 een ingedrukte button en andere buttonevents

Als je een button opneemt in je film, wil je meestal dat er iets gebeurd als er op gedrukt wordt. Als je een action toe wilt voegen aan de acties die worden uitgevoerd als de button wordt ingedrukt, open je eerst het 'object actions' venster van de button. In de linkerhelft van het venster staat (als een soort geheugensteuntje) een uitklaplijst met alle opdrachten die je kunt geven. Het gaat ons vooral om de rechterhelft van het venster, waar de code staat die bij de button hoort. Als er nog geen code aan de button is toegevoegd, zal deze rechterhelft nog helemaal leeg zijn. Om een actie toe te voegen drukken we op de + -knop, links bovenin. In het submenu basic-actions staan de meest gebruikte acties.
Als je nu op één van deze acties klikt, zul je de bijbehorende code in het rechtervenster zien verschijnen. Als je de play-actie (die de film doet starten) hebt ingevoegd zal er bijvoorbeeld het volgende verschijnen:

on (release) {	play ();
}

Het woordje on wordt altijd gebruikt om een event van een button aan te geven. Vervolgens staat er tussen haakjes om welk event het gaat (namelijk het release-event, dat plaatsvindt op het moment dat de knop wordt losgelaten). Daar achteraan komen tussen twee accolades alle actions die worden uitgevoerd bij dit event, in dit geval slechts de actie play. Als er meerdere acties tussen de accolades staan worden ze van boven naar beneden uitgevoerd. Als je een nieuwe regel (met bijvoorbeeld een actie of een event) wilt toevoegen, selecteer je de regel waarboven de regel moet verschijnen en kies je uit het menu met de plus de juiste opdracht.
Flash is er nu automatisch van uitgegaan dat je gebruik wilde maken van het release-event, maar er zijn meer mogelijkheden. Door in het code-veld (het rechter gedeelte van het scherm) op de regel 'on (release) {' te drukken, komen de opties die bij die regel horen tevoorschijn onder in het venster. In dit geval zie je een lijstje van acht events die allemaal te maken hebben met het gedrag van de muis met betrekking tot de button:
Press Muisknop wordt ingedrukt boven de button
Release Muisknop wordt losgelaten boven de button (nadat hij eerst is ingedrukt boven de button)
Release Outside Muisknop wordt losgelaten buiten de button (nadat hij eerst is ingedrukt boven de button)
Key Press Bepaalde knop wordt ingedrukt op het toetsenbord
Roll Over De muis beweegt van buiten de button op de button
Roll Out De muis beweegt van op de button buiten de button
Drag Over Met de muisknop, die is ingedrukt boven de button, nog steeds ingedrukt beweegt de muis van buiten de knop over de knop
Drag Out De muisknop is ingedrukt boven de button en de muis beweegt nu, met de knop nog steeds ingedrukt naar buiten de button.

9.3.2.2 de muis over een movieclip bewegen en andere clipevents

Naast buttons kunnen ook movieclips events veroorzaken. Voor deze events wordt niet de code 'on' gebruikt, maar de code 'onClipEvent'. Wil je code in ActionScript schrijven die uitgevoerd wordt op het moment dat zo'n movieclip-event 'plaatsvindt', dan moet je eerst het ObjectActions-venster van de movieclip openen. Dit doe je door met rechts op de movieclip te klikken en te keizen voor actions.

In dit venster druk je op de plus in de linkerbovenhoek en in het submenu actions kies je de opdracht onClipEvent. Onder in het scherm kun je nu kiezen uit een negental events (standaard is het event load geselecteerd). Een clipevent werkt op dezelfde manier als een buttonevent. De acties die moeten worden uitgevoerd worden onder elkaar tussen de accolades gezet.
Tussen haakjes achter het codewoord onClipEvent komt te staan om welk event het gaat. De mogelijke events zijn:
Load De movieclip verschijnt in de timeline van de Flash-Movie
Unload Gebeurt in het eerste frame dat de movieclip niet meer op de timeline staat
EnterFrame Wordt uitgevoerd iedere keer dat een frame wordt afgespeeld
MouseMove De muis beweegt
MouseDown De linkermuisknop wordt ingedrukt
MouseUp De linkermuisknop wordt losgelaten
KeyDown Er wordt een knop ingedrukt
KeyUp Er wordt een knop losgelaten
Data Er is nieuwe informatie binnengekomen via de loadVariable of loadMovie actie.

9.3.2.3 in een frame aankomen

De events die we tot nu toe hebben behandeld waren altijd verbonden met een bepaald object (een button of een movieclip). Het is ook mogelijk om een stukje code te verbinden met een bepaald frame. De code wordt dan uitgevoerd zodra het desbetreffende frame bereikt is.
Om code te verbinden aan een frame, is het het gemakkelijkst om bij een bepaalde layer (vaak maken mensen een speciale layer aan voor de ActionScript code) op de timeline op het desbetreffende frame te dubbelklikken. Als het goed is verschijnt er nu het frame actions venster, dat er verder hetzelfde uitziet als het object actions venster. Voor code die aan een frame wordt toegevoegd bestaat overigens niet zoiets als een on actie, alle code die je in het frame actions venster invoert wordt uitgevoerd zodra het desbetreffende frame bereikt is. Als je code hebt toegevoegd aan een bepaald frame, zul je dat op de timeline terugzien doordat er een kleine letter a verschijnt op het frame.

De letter a op het frame

9.3.3 Actions

Actions zijn de woorden waarmee je aan Flash uitlegt wat het moet doen als zich een bepaald event voordoet. Een actie voeg je in, in het action venster (menu: Window->Actions). Vanuit daar heb je twee mogelijkheden: of je kiest de actie uit in het toevoegmenu (de plus-knop links bovenin het scherm), of je sleept een actie vanuit een van de 'boekjes' in de linkerhelft van het scherm naar de code (rechterhelft). Als je een beetje rondkijkt in de linkerhelft van het scherm zul je zien dat er heel veel mogelijke actions zijn. We zullen er in dit hoofdstuk slechts een paar van behandelen. In het hoofdstuk ActionScript gaan we in wat meer detail in op de mogelijkheden met de verschillende actions.

9.3.3.1 de film starten / stopzetten

Om de hele film te stoppen kun je de stop-actie invoegen in het ActionScript. Wil je bijvoorbeeld een button maken die de film stopzet, dan moet je eerst naar het codevenster van de desbetreffende button gaan. Vervolgens druk je op de +-knop links bovenin het scherm. In het submenu basic actions klik je nu op stop. In het codevenster wordt nu de stop-actie gezet. Als je in het object-actions venster van de button zat zal Flash deze action tussen accolades achter het on (release) event zetten. Dit houdt in dat deze actie wordt uitgevoerd op het moment dat de gebruiker op de knop gedrukt heeft. Op dezelfde manier kun je ook juist de play action invoegen. De play-action zorgt ervoor dat een eenmaal gestopte film weer gestart wordt.

9.3.3.2 Naar een bepaald frame of een bepaalde scene gaan.

Soms wil je dat een bepaald stukje van een film wordt overgeslagen of dat er juist een bepaald stukje steeds herhaald wordt. Dit kun je bereiken met behulp van de gotoAndPlay actie. Ook deze action voeg je in door in het object-actions of frame-actions venster eerst op het plusje linksbovenin te drukken en dan uit het submenu basic actions de actie go to te kiezen. In het code-vak is nu de action gotoAndPlay verschenen en onderin het scherm zijn nog verschillende opties aan te geven. Allereerst kun je de scene uitkiezen. Met current scene blijf je in de huidige scene. Door te kiezen voor next scene en previous scene ga je respectievelijk naar de vorige of de volgende scene. Verder kun je in dit afrollijstje ook de naam kiezen van een bepaalde scene.
Met de combinatie van de opties type en frame bepaal je naar welk frame er wordt gegaan. Kies je bij type de optie frame number, dan kun je achter frame het nummer opgeven van het frame waar je naar toe wilt springen. Als je de frames namen (labels) hebt gegeven (dit kan in het panel frame, wat je opent door in het menu window naar het submenu panels te gaan en daar te klikken op frame), kun je in het afrolmenu type ook kiezen voor frame label, zodat je bij frames een label van een frame uit kunt kiezen. Door voor expression te kiezen kun je een stukje ActionScript code opnemen om het frame uit te kiezen, maar dat voert te ver om hier te behandelen.
Met de opties next frame en previous frame ga je respectievelijk naar het volgende en het vorige frame.
Naast de drie afrolmenu's (scene, type en frame), is er ook nog een vakje dat je aan kunt vinken, namelijk go to and play. Als je dit vakje uitschakelt, zal de film wel doorspoelen naar het door jou opgegeven frame, maar zal de film vervolgens niet doorspelen. Hiervoor zou je dan weer de opdracht play uit de vorige paragraaf kunnen gebruiken. p-inte9

9.3.3.3 Een bepaalde webpagina openen of een mail verzenden

Om de browser een bepaalde internetpagina te laten openen of om een mailtje te verzenden gebruik je de opdracht getURL. Ook deze action voeg je in door in het object-actions of frame-actions venster eerst op het plusje linksbovenin te drukken en dan uit het submenu basic actions de actie get URL te kiezen. Onder in het scherm zijn nu weer de opties (parameters) voor deze actie in te stellen. Allereerst kun je achter URL opgeven wat het adres is van de site die je wilt openen (het adres begint altijd met http:// ).
De optie window bepaalt in welk venster de nieuwe pagina geladen wordt. Je kunt kiezen uit vier mogelijkheden:
_self De pagina wordt geladen op de plek waar nu de pagina staat waarin de film speelt
_blank Er wordt een nieuw browservenster geladen en daarin wordt de pagina geladen
_parent De pagina wordt geladen in het frame (html-frame, heeft overigens niets te maken met Flash-frames) dat boven het frame ligt van de pagina waarin de Flash-film wordt afgespeeld
_top Het volledige actieve browservenster wordt gevuld met de nieuwe pagina (alle html-frames worden verlaten)
De twee die je waarschijnlijk het meest zult gebruiken zijn _self en _blank. Zolang je geen frames gebruikt doen _parent en _top exact hetzelfde als _self.
De optie variables heeft te maken met het verzenden van formulieren en zal later aan bod komen. Als je geen gebruik maakt van een webformulier, kun je deze gewoon op don't send laten staan.
Overigens is het ook mogelijk om de browser bijvoorbeeld een bestand te laten downloaden, door gewoon het http-adres of het ftp-adres (dus beginnende met ftp://) van dat bestand op te geven achter URL.
Als je wilt dat er een mailtje verstuurd kan worden, typ je achter URL geen http:// maar begin je met mailto: waarachter vervolgens direct het e-mailadres komt van degene die gemaild moet worden. Er wordt dan, als deze actie wordt uitgevoerd een leeg mailtje geopend met het adres al ingevuld. Handig als je een 'mail me' button wilt maken...

9.4 Formulieren

9.4.1 Wat is een webformulier?

Vaak kun je op een website gegevens invullen en die vervolgens met een druk op de knop verzenden. Een pagina waar je in verschillende tekstvakken informatie kunt geven (soms overigens ook met aankruisvakjes) en die vervolgens kunt verzenden, wordt formulier, of webformulier, genoemd.
Op zich is het betrekkelijk eenvoudig om in een internetpagina een formulier te zetten. De internetpagina zorgt ervoor dat de gebruiker een formulier te zien krijgt dat hij vervolgens kan verzenden. Vervolgens verzendt de internet-browser van de gebruiker de gegevens naar de internet-server van de pagina. Als je een website wilt bouwen met formulieren, zul je ervoor moeten zorgen dat de internet-server overweg kan met de informatie die hij van de web-browser krijgt (zo zal hij de informatie bijvoorbeeld op moeten slaan). We zullen hier niet ingaan op de manier waarop de server met een formulier omgaat, dat verschilt van server tot server en bovendien voert het veel te ver voor deze cursus. In deze paragraaf zullen we het hebben over de methoden om ook in je Flash-film een webformulier te verwerken.

9.4.2 Tekstvak

Een tekstvak is een gebied op een internetpagina of in je Flash-film waar een gebruiker zelf tekst in kan vullen. Zo'n gebied kun je maken door met de text tool een rechthoek te trekken en dan vervolgens in het paneel text-options (menu: window->panels->text options) in plaats van voor 'Static Text' te kiezen voor 'Input Text'. In dit paneel kun je ook instellen wat voor soort tekstvak het wordt: één-regelig (single-line), met meerdere regels (multiple line) of als een wacthwoord, zodat er sterretjes ipv de getypte tekens verschijnen (password). Als er tekst in het tekstvak is ingetypt, wordt deze tekst opgeslagen in een zogenaamde variabele (meer over variabelen in het hoofdstuk over ActionScript). De naam van deze variabele kun je ook opgeven in het paneel text-options.
De informatie die in het textvak is ingetypt kan direct naar een internetserver worden verstuurd, maar je kunt de ingetypte tekst ook gebruiken vanuit ActionScript code en gebruiken om er bijvoorbeeld het verloop van de movie mee te beïnvloeden.

9.4.3 Een formulier verzenden

Een formulier verzenden gebeurt met de actie getURL, die we al eerder gebruikt hebben. Deze actie voeg je weer in de code in door te klikken op het plusje linksbovenin het scherm en uit het submenu actions te kiezen voor getURL. Achter URL vul je nu het HTTP adres in waar de informatie naar verzonden moet worden. In het vak Variables kies je voor een van de twee opties: GET of POST. Welke je hier moet kiezen ligt aan de site waarnaar de variabelen verzonden moeten worden; meestal wordt Get gebruikt als het om een klein aantal variabelen gaat en Post wanneer het om een groter aantal gaat.
Eén van de mogelijkheden is om variabelen naar een zoek-pagina te sturen, zodat de resultaten van een zoekactie op het scherm verschijnen. Als je bijvoorbeeld in je Flash-movie de mogelijk wilt geven om te zoeken met Yahoo, dan teken je een tekstvak, die je instelt als input text en waarvan je als variabele-naam alleen de letter p intypt (deze variabele herkent de site van yahoo als de variabele die de te zoeken tekst bevat). Vervolgens plaats je een button op de stage, met als opschrift iets van 'zoeken' of iets dergelijks en je voegt in het Actions-venster van deze knop een getURL opdracht toe. Als URL geef je nu het volgende adres: http://search.yahoo.com/bin/search. Bij variables kies je voor Send using GET.
Als de gebruiker nu in het tekstveld een woord intypt waarnaar hij wil zoeken en hij drukt vervolgens op de knop, dan verschijnt er een zoekresultatenvenster van Yahoo.
Dit kan met vele zoekmachines, zoals bijvoorbeeld met altavista (alleen moet de variabele p dan q genoemd worden), met als http-adres http://www.altavista.com/q voor wereldwijd zoeken en http://nl.altavista.com/q voor zoeken binnen Nederland.

Vorig hoofdstuk Inhoudsopgave Volgend hoofdstuk