Introduktion til Flash

Transkript

1 Introduktion til Flash Kaspar Rosengreen Nielsen Om mig Kaspar Rosengreen Nielsen. Uddannet datalog med sidefag i multimedier i Ansat på Interactive Spaces under Alexandra Instituttet. Har der deltaget i en lang række forsknings- og konsulentprojekter - bl.a. udviklingen af interaktive gulve, borde og sækkestole, web-portaler og mobilsoftware. Har undervist i Flash på bl.a. IT-bachelor, Multimedier og Arkitektskolen.

2 Formålet med forelæsningerne De næste par forelæsninger vil give jer en introduktion til, hvordan I bruger Flash. Formålet er: At I lærer at tegne og animere i Flash vha. de indbyggede værktøjer samt importere fra andre programmer. At I lærer hvordan man koder i ActionScript. At I lærer at lave interaktive film, der anvender mus og tastatur som input. Duk op til øvelser og få brugt Flash. Det er den bedste måde at lære det på! Forelæsningsplan 2/2: Introduktion til Flash og ActionScript Brugergrænsefladen og vigtige koncepter Tegning og animation ActionScript sproget Mus og tastatur som input 9/2: ActionScript Nyttige klasser og funktioner i ActionScript Komponenter Objektorienteret programmering i ActionScript

3 Hvad er Flash? Hvad er Flash? Flash er en del af CS5 pakken fra Adobe, der også inkluderer programmer som Illustrator, Photoshop og Dreamweaver. Flash kan bruges til at lave interaktive film, der kan vises på en hjemmeside eller som et regulært program på computeren. Flash har en udviklingsomgivelse, der understøtter hele processen fra tegning af grafik til kodning og publicering.

4 Hvad er Flash? Flash understøtter tegning og animation i vektorgrafik, hvilket gør at grafikken nemt kan skaleres og animeres. Programmeringssproget er objektorienteret og minder en del om Java. I forhold til Flash Builder er fokus mere på grafik og animation end kode. Det er muligt at kode, men værktøjerne er væsentligt bedre i Flash Builder. Der er dog mulighed for at bruge de to værktøjer sammen. Websider

5 Eksempel: Websider De fleste websider med fancy animation og interaktion er lavet i Flash. Omkring 98% af verdens maskiner har Flash installeret. Dele af siden kan være lavet i Flash (f.eks. reklamebannere, afspillere eller menuer). Kan også bruges til at indlejre et spil på en hjemmeside: og deviation/ Eksempel: Websider Det er også muligt at lave hele siden i Flash, men der er mange ulemper, man bør overveje: Indeksering af søgemaskiner kan være problematisk. Ikke mulighed for at lave bogmærker til bestemte sider i browseren. Vanskeligt tilgængeligt for blinde/svagtseende. Standard browserfunktionalitet deaktiveres Copy/paste ofte ikke muligt iphone/ipad kan ikke køre Flash

6 Eksempel: Websider Eksempel: Stand-alone applikationer

7 Eksempel: Stand-alone applikationer Flash kan også bruges til at lave projektorer. Dvs. film der kan køre i fuld skærm uden en Flash afspiller. Der laves typisk en.swf eller en.exe fil. Dette gør Flash velegnet til at illustrere en idé til et computerprogram relativt hurtigt, da det er en mellemting mellem at arbejde grafisk og programmere. God til at arbejde på tværs af faggrupper hvor en gruppe er god til at animere/lave grafik og en anden er god til at kode. Kan kombineres med Java/.Net/QT ifloor Interaktivt gulv udviklet til Hovedbiblioteket. Brugerne styrer en fælles cursor med kroppen. Samarbejde spiller en vigtig rolle. Spørgsmål kan indsendes og besvares med SMS. Benytter kameratracking til interaktion.

8 ifloor video Vidensbrønden Vidensbrønden er en installation på Møllevangsskolen, der kan bruges i undervisningen. Kører et program med forskellige Flash-spil, som er koblet op på kameratracking. Eleverne kan interagere med spillene vha. kroppen.

9 Eksempel: Squeeze Interaktivt møbel. Prototype udviklet i projekt med Microsoft. Interaktiv sækkestol til hjemmet. Legende tilgang til at være sammen som familie. Sensorer er indbygget i sækkestolen og en grænseflade skrevet i Flash/.Net reagerer på sensorinput. Brugergrænsefladen i Flash

10 Brugergrænsefladen i Flash Flash indeholder alle nødvendige værktøjer til at lave interaktive film. Man kan både tegne, animere og kode, hvorefter man kan eksportere til den endelige film. Jeg vil gennemgå disse vigtige dele af programmet: Scenen Tidslinie og lag Biblioteket Tegning Konvertering til symboler Import fra andre programmer Oprettelse af ny Flash film Start programmet Vælg Create new > Flash File (ActionScript 3.0) Der åbnes nu en tom scene

11 Efter oprettelse af nye Flash film Med Essentials workspace Scenen Scenen er en central del af Flashfilmen, og er det, som brugeren ser. Her kan vises forskellige klip og animationer udføres. Properties vinduet giver bl.a. mulighed for at ændre opløsning, framerate samt baggrundsfarve.

12 Tidslinie og lag Tidslinien befinder sig lige under scenen og angiver scenens udseende på forskellige tidspunkter i filmen. På tidslinien kan der animeres og arbejdes med lag, som det kendes fra andre programmer som f.eks. Photoshop. Biblioteket Biblioteket indeholder de klips, der anvendes i filmen. Kan både være billeder, animationer, videoer med mere. Disse kan trækkes ind på scenen og bruges i animationer på tidslinien.

13 Værktøjer Flash indeholder værktøjer til tegning af figurer på scenen, som også kendes fra andre grafikprogrammer. Symboler En figur, et billede eller lignende kan konverteres til et symbol, der gemmes i biblioteket. Symboler bruges bl.a. til animationer. For at gemme en figur i biblioteket vælges Modify > Convert to Symbol eller bare F8. Figuren kan nu animeres på tidslinien.

14 Symboler Der er tre symboltyper MovieClip Button Graphics Vi vil primært bruge de to første. Import fra andre programmer Flash understøtter en lang række formater for både grafik, video og lyd. For at importere en fil til scenen gå under File > Import > Import to stage. For at importere en fil direkte til biblioteket gå under File > Import > Import to library. Understøtter bl.a.: gif / jpg / png / ai / mp3 / mov

15 Animation i Flash Animation i Flash Flash er nemt at animere i og gør meget af arbejdet for jer. Der er sket en del ændringer fra CS3 til CS4/5. Det er muligt at lave animation på scenen men også i de enkelte symboler. Gør det muligt at lave animationer i animationer. Tre centrale former for animation i Flash, der er gode at kunne. Jeg vil gennemgå et eksempel med de to første. Tweening animation Guided animation Shape animation

16 Tweening Animation Tweening udspringer af in between. Der angives en startframe og en slutframe (f.eks. en cirkel som skaleres og skifter farve). Flash sørger for at fylde alle frames indimellem ud. Der kan tweenes på forskellige parametre Størrelse Rotation Gennemsigtighed Farve Start Slut Guided Animation Animationsform hvor et klip følger en guide. Slut Start

17 Shape Animation Animation der morpher formen af et stykke grafik til et andet stykke grafik. Ved at tegne et stykke grafik som en firkant med tegneværktøjet er det muligt uden videre. På tekst skal først kaldes kommandoen Modify > Break Apart. Kun muligt at gøre med grafik ikke symboler! Motion Editor Den nye Motion Editor i CS4 giver nye muligheder for at finjustere sin animation. For lidt mere avancerede brugere.

18 Animation i symboler Symboler har deres egen tidslinie, når man dobbeltklikker på dem på scenen. På denne tidslinie kan der også animeres. F.eks. kan en firkant roteres, men den følger en guide på hovedscenen. Dette giver mulighed for at lave animation i animation. Lyd i Flash

19 Lyd i Flash Der kan tilføjes lyd til en Flash film ved at importere musikfilen til biblioteket og gå ind på en keyframe og redigere i Properties. Publicering i Flash

20 Publicering i Flash Når filmen er færdig kan filmen publiseres til: En swf-fil En html-side En projector-fil En swf-fil kræver at der er installeret en Flash afspiller. En html-side er til at lægge på en webserver og vise i en browser. En projector-fil kan brændes på en cd og distribueres. Kræver ikke at Flash er installeret på maskinen. Hvad er ActionScript?

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

22 ActionScript 3.0 For at kunne afvikle ActionScript 3.0 kræves det at Flash Player 9 er installeret på maskinen. CS 4 og 5 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: version_penetration.html Udviklingsværktøjer Udvikling af ActionScript sker primært vha. tre vinduer i Flash CS5: Actions Output Compiler Errors Der eksisterer også en række programmer, der kan anvendes i kombination med Flash. Primært relevant for erfarne udviklere: FlashDevelop ( FlashBuilder (fra Adobe)

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

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

25 Sproget 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.

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

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

28 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]); 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.

29 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

30 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

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

32 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 ActionScript

33 Eventhåndtering i ActionScript 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.

34 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å og som modtager event i target fasen. 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 eventlisteners 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.

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

36 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. Komponenter i Flash (lister, tekstfelter med mere) En række nyttige teknikker i forhold til bl.a. timere og kollisionstjek. Hvordan vi læser indhold ind fra en XML-fil. Lær mere om Flash Mange gode sider på nettet Brug Google! Der er mange forummer og tutorials på nettet, hvor man kan blive klogere.

37 Opgave Opgave: Jeres egen musikvideo! Opgaven skal besvares individuelt og afleveres. Opgave 1 Skab et Flash-dokument, der spiller et stykke musik efter eget valg og som indeholder figurer, billeder eller lignende, der danser i takt til musikken. Opgave 2 Lav overblændinger, rotationer, shape transforms (eller andre valgfrie transitionseffekter) mellem de grafiske elementer i jeres musikvideo Opgave 3 Tilføj passende tekst til jeres musikvideo (gerne med transitionseffekt) Opgave 4 Lav knapper der reagerer på musetryk til at starte og genstarte musikvideoen. Kåring af bedste musikvideo De bedste musikvideoer bliver vist d. 16/ Vinderen bliver fundet ved afstemning.