Timeline en scene navigatie met behulp van Actionscript 3 en Flash Programmeren | Interactieve Media | Hogeschool van Amsterdam
Arjen Tienkamp 7 maart 2012
Inleiding Flash staat bekend om het werken met een timeline en scenes om bijvoorbeeld animaties op het juiste moment in beeld te brengen. Met behulp van Actionscript 3 kan men navigeren tussen de verschillende frames binnen de timeline en de scenes in het Flashproject. Om de inhoud van dit paper te verduidelijken eerst een hermeneutische blik op de woorden timeline en navigatie. In het woordenboek is de volgende definitie van tijdlijn te vinden: “Een ‘tijdbalk’ of een ‘tijdlijn’ is een grafische weergave van een chronologische opvolging van gebeurtenissen of periodes. Het schema heeft de vorm van een balk en bezit tijdsaanduidingen met een inschrift of een bijschrift. De tijdbalk heeft een duidelijke schaalindeling.” Navigeren wordt als volgt aangeduid: “Het doorlopen van een logische structuur, zoals een inhoudsopgave, menu of lijst van koppelingen (links).” Wanneer we spreken van navigatie op een tijdlijn, betekent dit dat we een chronologische opvolging van gebeurtenissen doorlopen. Deze opvolging van gebeurtenissen heeft een duidelijke schaalindeling: in Flash zijn dit frames.
Frames in de timeline
Scene 1 is geselecteerd
Dit is een screenshot van Adobe Flash CS5 met daarin duidelijk het onderscheid tussen de frames in de timeline en de scenes.
2
Mogelijk wordt het principe duidelijker aan de hand van een metafoor. We kunnen de vergelijking maken met een boek. Een scene staat gelijk aan een hoofdstuk in een boek, de frames staan gelijk aan de pagina’s met tekst binnen dat hoofdstuk. Ieder hoofdstuk heeft z’n eigen verhaal. De basis Het mag voor zichzelf spreken dat het navigeren tussen scenes alleen van toepassing is op projecten met meerdere scenes. In onderstaand voorbeeld hebben we een project met twee scenes. Met behulp van gotoAndPlay() kunnen we van de eerste naar de tweede scene navigeren. De tweede scene begint direct met afspelen als deze wordt weergegeven. De code ziet er als volgt uit: gotoAndPlay(1, “Scene 2”); Er zijn twee parameters op te geven, de eerste (in het voorbeeld ‘1’) is het frame waar de scene begint met spelen. De tweede parameter is de scene waarnaar genavigeerd wordt. In het scene overzicht in Flash zijn de scenes te hernoemen. Wanneer we niet willen dat de scene direct begint met afspelen nadat erheen genavigeerd is, maken we gebruik van gotoAndStop(). De parameters voor deze code zijn gelijk aan die van gotoAndPlay. Het navigeren tussen frames gaat op dezelfde manier als de navigatie tussen scenes. Kijk naar onderstaand codevoorbeeld: gotoAndPlay("laatste"); of gotoAndPlay(15); Bij het eerste codevoorbeeld zal genavigeerd worden naar het frame met de naam ‘laatste’ in de huidige scene. Bij het tweede codevoorbeeld navigeren we naar het 15e frame.
3
Werken met Events Met de invoering van Actionscript 3 werden ook de mogelijkheden voor timeline navigatie uitgebreider. Zo kunnen we informatie over het huidige frame weergeven in een trace, of dynamisch navigeren met behulp van currentFrame. Met het commando totalFrames kunnen we handelingen uitvoeren waarin we het totaal aantal frames betrekken. We zouden een actie kunnen uitvoeren als de timeline voor de helft afgelopen is, zonder dat we de code hoeven te wijzigen als er frames toegevoegd of verwijderd worden. Hiervoor maken we gebruik een EventListener, die op een bepaald punt een functie aanroept. addEventListener(Event.ENTER_FRAME, halverwege); var halverwegeFrame:int = totalFrames / 2; function halverwege(event:Event):void { if (currentFrame == halverwegeFrame) { gotoAndStop(halverwegeFrame); } else { trace(halverwegeFrame); } } In bovenstaande code gebeurt het volgende: een EventListener start op het punt ENTER_FRAME de functie halverwege. Daaronder wordt de variabele halverwegeFrame gedefinieerd door totalFrames te delen door twee. De functie halverwege kijkt of het currentFrame gelijk is aan halverwegeFrame. Wanneer dit het geval is wordt de animatie stopgezet op halverwegeFrame. Een ander voorbeeld waarin gebruik gemaakt wordt van Events is navigatie met behulp van een button. Nadat een button is gecreëerd in Flash, kan met behulp van een aantal regels code een mouse click event worden gemaakt.
4
knop.addEventListener(MouseEvent.CLICK, navigatie); function navigatie(event:MouseEvent):void { gotoAndPlay(1, “Scene 2”); } Het is belangrijk dat de instance name van de button overeenkomt met het object waar de event listener naar luistert (in het codevoorbeeld; dikgedrukt knop). In het codevoorbeeld gebeurt het volgende: De event listener is gekoppeld aan de button ‘knop’. Als op deze button het MouseEvent ‘Click’ plaatsvindt, wordt de code binnen de curly brackets (functie: navigatie) uitgevoerd. In dit geval wordt er genavigeerd naar het eerste frame van de tweede scene. In dit paper zijn lang niet alle mogelijkheden om te navigeren besproken. De mogelijkheden zijn eindeloos wanneer men gebruik maakt van events. Om een vollediger beeld van het onderwerp te geven, onderstaand een aantal veelgebruikte commando’s:
• • • • •
prevFrame():void prevScene():void nextFrame():void nextScene():void stop();
-
Terug naar het vorige frame, en stoppen Terug naar de vorige scene Naar het volgende frame, en stoppen Naar de volgende scene Navigatie/afspelen stoppen
Overweging Na mijn onderzoek naar de mogelijkheden om met Actionscript 3 in de timeline en scenes te navigeren heb ik een aantal handige inzichten opgedaan voor de uitwerking van het teamproject. Mijn interesse in Flash en Actionscript is enorm toegenomen, en in met name het werken met ‘dynamische commando’s’ zoals currentFrame en totalFrames wil ik me verder verdiepen.
5
Bronnen Technana.com – gotoAndPlay() http://technana.com/web-development/gotoandplay-and-gotoandstop-in-flash-actionscript-30
Flashexplained.com – Controlling the timeline with actionscript http://flashexplained.com/actionscript/controlling-the-timeline-with-actionscript/
Enclyclo.nl – Voor hermeneutisch onderzoek http://www.encyclo.nl/zoek.php?woord=navigeren http://www.encyclo.nl/zoek.php?woord=tijdbalk Adobe Actionscript 3 Reference http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/ MovieClip.html
6
