Introduktion til ActionScript

Introduktion til ActionScript Kaspar Rosengreen Nielsen kaspar@interactivespaces.net i n t e r a c t i v e s p a c e s. n e t Kaspar Nielsen, kaspar@interactivespaces.net 1

Dagens program Opsamling på sidste forelæsning og øvelserne. Introduktion til ActionScript som er Flash programmeringssprog. Herunder hvordan mus og keyboard kan bruges som input i Flashfilm. Undervejs vil der blive liveprogrammering så kod gerne med på jeres egne maskiner. 2

Opsamling Sidste gang lærte vi om de forskellige typer for animation: Tweening animation Guided animation Shape animation Flash kunne gøre en stor del af arbejdet for os, bare vi specificerede en startframe og en slutframe. 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. Ellers nogle spørgsmål til emnet sidste gang? 3

Slideshow Det er nemt at lave et slideshow af billeder i Flash, som I også prøvede til øvelserne. 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! Dette bliver emnet for opgaverne til øvelserne næste gang. 4

Hvad er ActionScript? ActionScript er Flash indbyggede programmeringssprog. ActionScript kan bruges til at kontrollere tidslinien, lytte efter mus- og keyboardinput samt lave almindelig beregning. Det er forholdsvis nemt at komme i gang med, da man kan arbejde på flere niveauer. Det kan dog også en række avancerede ting og understøtter bl.a. ting fra objektorienteret programmering (som f.eks. Java). Den bedste strategi er en kombination af tidslinien og ActionScript. 5

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 de 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 6

ActionScript 3.0 Vi vil bruge ActionScript 3.0 i dette kursus, da det er den nyeste version samt at der 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 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 7

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. 8

Udviklingsværktøjer Udvikling af ActionScript sker primært vha. tre vinduer i Flash CS3: 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) 9

Actions vindue Vælges under Window > Actions eller F9. Her skrives jeres kode ind. 10

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. 11

Compiler Errors vindue Dette vindue viser fejl i din ActionScript kode på en liste. Kan findes under Windows > Compiler Errors eller Alt+F2. 12

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. 13

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. 14

Heltalsvariabler Java: int value = 0; System.out.println( Værdi: +value); ActionScript var value:number = 0; trace( Værdi: +value); 15

Strengvariabler Java: String value = ; System.out.println( Værdi: +value); ActionScript: var value:string = ; trace( Værdi: +value); 16

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

Listevariabler Java: String[] value = new String[3]; System.out.println( Værdier: +value[0]+, +value[1]+, +value[2]); ActionScript: var value:array = new Array(3); trace( Værdier: +value[0]+, +value[1]+, +value[2]); 18

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. Næste slide vil illustrere med et eksempel. 19

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. 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 20

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. ); 21

While-løkker 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) 22

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]); 23

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(var value:array):void { for (var i:number=0; i<value.length; i++) { trace(value[i]); 24

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); 25

Eksempel: Simpel lommeregner Vi kan nemt lave en enkel lommeregner vha. funktioner. Lad os lave en lommeregner der lægger to tal sammen hver gang vi starter filmen. Kan skrives på fire linier: function addnumbers(value1:number, value2:number):number { return value1+value2; trace(addnumbers(2, 2)); Her kan vi naturligvis nemt udvide med funktioner til minus, gange og dividering. Disse funktioner vil nemt kunne kaldes, når vi trykker på knapper i en Flashfilm og derved lave en grafisk lommeregner. 26

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... ); 27

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); Denne måde at lave funktioner der bliver udført på en bestemt event er meget almindelig i Flash. 28

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. 29

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(); this.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); 30

Mus som input Nu hvor vi har basiskoncepterne på plads, kan vi begynde at lytte efter museinput. På scenen på boksen fra før: function mouseclickhandler(event:event) { event.target.rotation = event.target.rotation+5; box1_mc.addeventlistener(mouseevent.click, mouseclickhandler); event.target angiver det klip vi har tilføjet en event listener på. Drag n drop af klip startes og stoppes med funktionerne: startdrag(false); stopdrag(); Jeg vil nu give et par eksempler. 31

Keyboard som input Vi kan også lytte efter keyboardinput. Keyboard events føjes til scenen og ikke til enkelt klip. 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); Jeg vil nu give et par eksempler. 32

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); 33

Eksempel: Kontrol vha. 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); Knapper kan også bruges til at indsætte klip fra biblioteket dynamisk. Der kan også lægges lydeffekter på knapperne. 34

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. Er der nogle spørgsmål til dagens emne? 35

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. 36

Ugens opgave Slideshow! I skal i denne opgave fortsætte jeres slideshow implementation fra sidste gang. Denne opgave skal I bruge til at blive fortrolige med at tilføje interaktion til jeres Flash film. Opgave 1 Føj navigationsknapper (f.eks. frem, tilbage, første billede, sidste billede, pause) til jeres slideshow. Opgave 2 Gør det muligt at trykke på navigationsknapperne med musen. Opgave 3 Gør det muligt at styre slideshowet med tastaturet. 37