Introduktion til ActionScript

Introduktion til ActionScript Kaspar Rosengreen Nielsen kaspar@interactivespaces.net HUSK: Studentermøde for datalogistuderende Torsdag d. 11/2 kl. 15 - i lokale Ada 333 Har du en mening om dit studie? Vær med til at diskutere emner som: Kurser og eksamen Vejledningsmuligheder ( f.eks. om tilvalgsfag) emner, som du ønsker at tage op De fysiske studierammer (hvad er vigtigt, når vi får nye lokaler?)

Dagens program Opsamling på sidste forelæsning og øvelserne. Introduktion til ActionScript som er Flash programmeringssprog. Herunder hvordan mus og tastatur kan bruges som input i Flashfilm. Herudover hvordan man bruger komponenter og lyde. Undervejs vil der blive liveprogrammering så kod gerne med på jeres egne maskiner. Opsamling Sidste gang lærte vi om de forskellige typer for animation: Tweening animation, Guided animation og Shape animation Flash kunne gøre en stor del af arbejdet for os. En vigtig pointe var, at det er muligt at lave animationer i animationer, da symboler har deres egen tidslinie. I dag vil vi bl.a. kigge på, hvordan vi kan styre afspilningen af animation vha. ActionScript.

Slideshow Det er nemt at lave et slideshow af billeder i Flash. Importer billeder til biblioteket og placer billederne strategisk på tidslinien. Publicer filmen. Vi kan også vælge af sætte lyd på. Hvad hvis vi gerne vil tilføje interaktivitet til filmen? F.eks. at navigere i billederne vha. museklik eller piletasterne? Til dette skal vi anvende ActionScript! Hvad er ActionScript? ActionScript er Flash indbyggede programmeringssprog. Kan bruges til at styre tidslinien og animere på de samme parametre, som vi så i sidste forelæsning. Kan tilføje interaktivitet til filmene med mus og tastatur. Kan også bruges til at styre timere, læse xml- filer og forbinde til servere. ActionScript er objektorienteret og sproget minder derfor på mange måder om Java. Kombinationen af animation på tidslinien og ActionScript er en god måde at arbejde på og er godt i tværfaglige konstellationer.

ActionScript versioner Der har været tre versioner af ActionScript. I dag bruges 2.0 og 3.0 primært. 1.0 blev brugt en overgang til mobiludvikling men den nye version af Flash Lite understøtter 2.0 nu. ActionScript 1.0 Flash Player 5+ / Flash Lite 1.0+1.1 ActionScript 2.0 Flash Player 7+ / Flash Lite 2.1 ActionScript 3.0 Flash Player 9+ Vi vil bruge ActionScript 3.0 i dette kursus, da det er den nyeste version. Der er sket en række væsentlige forbedringer i forhold til tidligere versioner: Bedre performance Mere robust programmeringsmodel Større modularisering i objektmodellen Understøttelse af pakker Bedre event håndteringssystem ActionScript er blevet mere konsistent end tidligere versioner og er baseret på ECMAScript, der er et internationalt standardiseret programmeringssprog til scripting. ActionScript 3.0

ActionScript 3.0 forts. Der er dog den ulempe, at indlæringskurven er blevet lidt stejlere, da ActionScript er blevet mere som et rigtigt programmeringssprog end et scriptingsprog. Det er en fordel at kende lidt til følgende begreber: Pakker Importering af pakker Eventhåndtering Funktioner Det kender I allerede i nogen grad, og jeg vil gennemgå eksempler på alle dele. ActionScript 3.0 For at kunne afvikle ActionScript 3.0 kræves det at Flash Player 9 er installeret på maskinen. CS 4 kommer Flash Player 10. Flash Player 9 er installeret på omkring 90-94% af maskiner i verden. Så der er god mulighed for at bruge de nye muligheder på nettet: http://www.adobe.com/products/player_census/flashplayer/ version_penetration.html

Udviklingsværktøjer Udvikling af ActionScript sker primært vha. tre vinduer i Flash CS4: Actions Output Compiler Errors Der eksisterer også en række open source programmer, der kan anvendes i kombination med Flash. Primært relevant for erfarne udviklere: FlashDevelop (http://osflash.org/flashdevelop) Flere værktøjer her (http://osflash.org/projects) Action vindue Vælges under Window > Actions eller F9. Her skrives jeres kode ind.

ActionScript placering ActionScript kode kan placeres i frames på scenen eller i en ekstern.as fil. Når der er kode i en frame på scenen vises det med et lille a i framen. Man kan lægge koden i et hvilket som helst lag eller frame, men det er god praksis at samle sin kode i et lag kaldet ActionScript eller blot Actions. Output vindue Her kan der udskrives undervejs for at teste om filmen virker. F.eks. om et museklik bliver registreret rigtigt. Svarer til konsollen når et program kører i Java.

Compiler Errors vindue Dette vindue viser fejl i ActionScript koden på en liste. Kan findes under Windows > Compiler Errors eller Alt +F2. Sproget Jeg vil på de følgende slides præsentere de vigtigste sprogkonstruktioner i ActionScript. Følgende emner vil blive dækket: variabler if-sætninger while- og for-løkker funktioner Undervejs vil jeg komme ind på de vigtigste variabler og funktioner i Flash.

Variabler Variabler er det samme, som I kender fra Java. Variabler er kasser, der kan gemmes en værdi i, man kan hente igen senere i programmet. Variabler kan være heltal, kommatal, strenge, booleans, lister osv. Java: type navn = værdi; ActionScript: var navn:type = værdi; De næste slides vil give nogle konkrete eksempler. Heltalsvariabler Java: int value = 0; System.out.println( Værdi: +value); ActionScript var value:number = 0; trace( Værdi: +value);

Strengvariabler Java: String value = ; System.out.println( Værdi: +value); ActionScript: var value:string = ; trace( Værdi: +value); Boolean-variabler Java: Boolean value = true; System.out.println( Værdi: +value); ActionScript: var value:boolean = true; trace( Værdi: +value);

Listevariabler Java: String[] value = new String[3]; System.out.println( Værdier: +value[0]+, +value [1]+, +value[2]); ActionScript (dog ikke mulighed for typer): var value:array = new Array(3); trace( Værdier: +value[0]+, +value[1]+, +value [2]); Vigtige variabler i Flash Flash har indbygget en række variabler til alle filmklip, som det er godt at kende. Når vi har fat i et filmklip har det en række forskellige egenskaber: x!! angiver x-koordinaten y!! angiver y-koordinaten rotation! angiver rotationen width!! angiver bredden height!! angiver højden alpha!! angiver gennemsigtighed visible!! angiver om filmklippet er synligt eller ej text!! indeholder tekststrengen i en tekst.

Eksempel: Sætte variabler for firkant Tegn en firkant vha. tegneværktøjet og marker den og konverter til et symbol (F8). I property-boksen kan der angives det navn, firkanten kan tilgås med vha. ActionScript. Giv f.eks. firkanten navnet box1_mc i boksen. Dette filmklip kan nu tilgåes som box1_mc i en frame da firkanten befinder sig på scenen. Eksempel: Sætte variabler for firkant Nu kan værdier ændres for klippet: box1_mc.x = 100; // Flyt til x-koordinat 100 box1_mc.rotation = 45; // Roter 45 grader box1_mc.width = 200; // Gør 200 pixels bred box1_mc.visible = false; // Skjul filmklip på scenen

If-sætninger If-sætninger anvendes til at lave en betingelse som skal være opfyldt for at indholdet skal udføres. Java: int value = 6; if (value>5) { System.out.println( Variablen value er større end 5. ); ActionScript: var value:number = 6; if (value>5) { trace( Variablen value er større end 5. ); Kan bruges til at løbe igennem en liste af værdier. Java: String[] value = new String[3]; value[0] = Test ; int i = 0; while (i<1) { System.out.println(value[i]); i++; // Tæl værdien en op (i+1) ActionScript: var value:array = new Array(3); // opret liste med tre pladser value[0] = Test ; var i:number = 0; while (i<1) { trace(value[i]); i++; // Tæl værdien en op (i+1) While-løkker

For-løkker For-løkker er en mere kompakt udgave af while-løkker. Java: for (int i=0; i<value.length; i++) { System.out.println(value[i]); ActionScript: for (var i:number=0; i<value.length; i++) { trace(value[i]); Funktioner Funktioner er en handling, der skal udføres. Også kaldet metoder i Java. En funktion kan tage en eller flere parametre og returnere en værdi. Java eksempel der udskriver liste: public void printlist(string[] value) { for (int i=0; i<value.length; i++) { System.out.println(value[i]); ActionScript eksempel der udskriver liste function tracelist(value:array):void { for (var i:number=0; i<value.length; i++) { trace(value[i]);

Funktioner fortsat Funktion kan nu kaldes i programmet (ActionScript): var value:array = new Array(3); // opret liste med tre pladser value[0] = Lad ; value[1] = os ; value[2] = teste... ; tracelist(value); Vigtige funktioner i Flash Stop afspilning af film stop(); Start afspilning af film play(); Afspil bestemt frame eller ved frame marker gotoandplay(1); eller gotoandplay( StartFrame ); gotoandstop(1); eller gotoandstop( StartFrame ); Udskriv tekst i output vinduet (som vi har brugt flere gange allerede) trace( Udskriv denne tekst... );

Eventhåndtering i Flash I ActionScript 3 er events et helt centralt begreb. Events fungerer på den måde, at der registreres en event listener på et objekt med en funktion, der skal kaldes, når event en indtræffer. function eventresponse(eventobject:eventtype):void { // Actions performed in response to the event go here. eventtarget.addeventlistener(eventtype.event_name, eventresponse); For at fjerne en eventlistener igen kaldes følgende: eventtarget.removeeventlistener(eventname:string, listener:object); Eventhåndtering i Flash Der er mange forskellige events, man kan lytte på. Nogle af de mest brugte er: Event.ENTER_FRAME MouseEvent.MOUSE_DOWN MouseEvent.MOUSE_UP KeyboardEvent.KEY_DOWN Jeg vil gennemgå eksempler på disse på de følgende slides.

Funktioner i Flash (på frames) Man kan også lægge funktioner på filmklip. F.eks. noget der skal udføres hver gang filmen går ind i en ny frame: function enterframehandler(event:event) { event.target.rotation = event.target.rotation+5; box1_mc.addeventlistener(event.enter_frame, enterframehandler); event.target angiver det klip vi har tilføjet en event listener på. I dette tilfælde er det et filmklip, hvor vi kan tilgå dets variabler som f.eks. x, y og rotation. Mus som input Vi kan også bruge event listeners til at lytte efter museklik. F.eks. kan vi rotere et klip på scenen hver gang, der klikkes på det. function mouseclickhandler(event:mouseevent) { event.target.rotation = event.target.rotation+5; box1_mc.addeventlistener(mouseevent.click, mouseclickhandler); Bemærk at event er af type MouseEvent. Dette er vigtigt, hvis vi gerne vil tilgå musens koordinater på scenen. Det samme gør sig gældende med KeyboardEvent, vi skal se om et øjeblik.

Eksempel: Drag n drop Nu kan vi ved at bruge et par indbyggede funktioner i Flash lave drag n drop af filmklip på scenen. Drag n drop af klip startes og stoppes med funktionerne: startdrag(false); stopdrag(); Vi tilføjer muselyttere, der starter og stopper med at trække: function mousedownhandler(event:mouseevent) { event.target.startdrag(false); box1_mc.addeventlistener(mouseevent.mouse_down, mousedownhandler); function mouseuphandler(event:mouseevent) { event.target.stopdrag(); box1_mc.addeventlistener(mouseevent.mouse_up, mouseuphandler); Keyboard som input Vi kan også lytte efter keyboardinput. Keyboard events føjes til scenen. function keydownhandler(event:keyboardevent) { if (event.keycode == 37) { // left box1_mc.x = box1_mc.x-5; else if (event.keycode == 39) { // right box1_mc.x = box1_mc.x+5; else if (event.keycode == 38) { // up box1_mc.y = box1_mc.y-5; else if (event.keycode == 40) { // down box1_mc.y = box1_mc.y+5; stage.addeventlistener(keyboardevent.key_down, keydownhandler);

Indsæt symboler fra biblioteket Symboler kan indsættes dynamisk fra biblioteket vha. ActionScript. For at kunne det skal symbolet eksporteres til ActionScript. Højreklik på symbolet i biblioteket og vælg Linkage. Flash genererer nu en klasse for objektet, der kan instantieres. Det er også muligt at skrive sin egen klasse. Det vil vi komme lidt ind på til næste forelæsning. Indsæt symboler fra biblioteket forts. Der kan nu laves en ny instans af klassen Box i en frame: var box1_mc:box = new Box(); addchild(box1_mc); Der kan nu sættes egenskaber for boksen som før: box1_mc.x = 100; box1_mc.y = 100; Og tilføjes event listeners: function enterframehandler(event:event) { event.target.rotation = event.target.rotation+5; box1_mc.addeventlistener(event.enter_frame, enterframehandler);

Eksempel: Knapper Med teknikkerne vist på de forrige slides kan vi nu styre filmen vha. nogle knapper vi selv laver. Knapperne kan f.eks. kalde de funktioner, der kan styre tidslinien. F.eks. kan mus og keyboard bruge funktionen gotoandplay. button1_mc.addeventlistener(mouseevent.mouse_down, backbuttonmousedownhandler); function backbuttonmousedownhandler(event:mouseevent) { if (currentframe>1) { gotoandplay(currentframe-1); else { gotoandplay(2); Eksempel: Afspilning af lyd Lyd kan også startes vha. ActionScript. var sound:sound = new Sound(new URLRequest("Musik/01.mp3")); sound.play(); Musik/01.mp3 er en mp3-fil, der befinder sig i folderen Musik i forhold til der, hvor Flash-filen er gemt. Man kan også starte på en bestemt position (1000 ms) og loope et antal gange (3): var snd:sound = new Sound(new URLRequest( Musik/02.mp3")); snd.play(1000, 3); Lyden kan også pauses. var snd:sound = new Sound(new URLRequest( Musik/03.mp3")); var channel:soundchannel = snd.play(); var pauseposition:int = channel.position; channel.stop(); channel = snd.play(pauseposition);

Komponenter i Flash Flash har en samling af standard UI komponenter, man kan bruge i sin Flash film fremfor at lave dem selv. Knapper og tekstfelter er nemme at lave selv, men en liste med scroll er straks sværere. Listen over UI komponenter findes under Window > Components. Her findes komponenter man kender fra andre miljøer: tekstfelter, lister, checkbox, slider etc. Komponenter forts. UI komponenterne kan trækkes direkte ind på scenen og manipuleres ligesom andre klip i biblioteket. De kan gives et navn, så de kan tilgås via ActionScript. Højde, bredde, x og y kan indstilles via Property Inspector. Her er der også en ekstra fane kaldet Parameters, der indeholder indstillinger for komponenten. F.eks. om det skal være muligt at markere flere elementer i en liste ad gangen.

Komponenter forts. Når en komponent er blevet givet et navn, kan den manipuleres vha. ActionScript, som I kender det. Den kan flyttes og roteres, og der kan tilføjes en event listener til den. List En af de komponenter der kan tilføjes er en liste. Vi har f.eks. oprettet listen og kaldt den listcomponent. Vi kan nu manipulere den vha. ActionScript. listcomponent.x = 100; listcomponent.height = 45; Vi kan tilføje indgange til listen gennem Property Inspector eller via ActionScript. listcomponent.additem({label: Test, data:32);

List forts. Hvis vi læser nogle data ind i en liste (f.eks. fra en xml-fil) kan listen angives som en DataProvider. import fl.data.dataprovider; var listitems:array = new Array(); listitems[0] = {label: Test, data:32); listcomponent.dataprovider = new DataProvider(listItems); List forts. Hvis vi gerne vil modtage besked, når der vælges en ny indgang i listen registrerer vi en event listener: listcomponent.addeventlistener(event.change, listchangedeventhandler); I funktionen kan vi nu hente data værdien fra den valgte indgang i listen. function listchangedeventhandler(event:event) { trace( Indgangen med data: +event.target.selecteditem.data+ er valgt. );

Opsamling I dag har vi set hvordan ActionScript fungerer. Minder på mange måder om Java, som I kender. Kræver dog ikke at man skriver så meget kode i nogle tilfælde. Klips fra biblioteket kan indsættes dynamisk på scenen. Egenskaber såsom position, rotation, alpha osv. kan sættes/ animeres. Det er muligt at lytte på mus og keyboard, så film kan gøres interaktive. Vi også hvordan man afspillede lyd dynamisk og bruge komponenter. Næste gang Næste gang vil vi komme ind på brugen af klasser og interfaces til objektorienteret programmering, som I kender det fra Java. En række nyttige teknikker i forhold til bl.a. timere og kollisionstjek. Hvordan vi læser indhold ind fra en XML-fil. Kameratracking og hack-et-keyboard