Introduktion til Flash Kaspar Rosengreen Nielsen kaspar@interactivespaces.net Kaspar Rosengreen Nielsen, kaspar@interactivespaces.net 1 Om mig Kaspar Rosengreen Nielsen. Uddannet datalog med sidefag i multimedier. Arbejder på Interactive Spaces under Alexandra Instittutet som udvikler. Har bl.a. arbejdet med Flash i en lang række forskellige projekter på centeret. Jeg kan træffes på kaspar@interactivespaces.net eller på kontor Hopper-118 i tilfælde af spørgsmål. 2 Formålet med forelæsningerne De næste tre 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 keyboard som input. Duk op til øvelser og få brugt Flash. Det er den bedste at lære det på! 3 1
Foreløbig forelæsningsplan 6/11: Introduktion til Flash. Brugergrænsefladen Vigtige koncepter Animationsformer 13/11: Introduktion til ActionScript, del 1. Introduktion til sproget (sammenlignet med Java) Mus og keyboard som input 20/11: Introduktion ActionScript, del 2. Objektorienteret programmering i Flash 4 Hvad er Flash? Flash er en del af CS3 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 program på en PC. Flash har et en udviklingsomgivelse, der understøtter hele processen fra tegning af grafik til kodning og publisering. 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. 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). http://www.youtube.com Kan også bruges til at indlejre et spil på en hjemmeside: http://www.binballwizard.com og http://www.deviantart.com/deviation/40255643 6 2
Eksempel: Websider Det er også muligt at lave hele siden i Flash, men der er mange ulemper, man bør overveje: Ingen indeksering af Google. Ikke mulighed for at lave bogmærker til bestemte sider i browseren. Vanskeligt tilgængeligt for blinde/svagtseende. Standard højrekliksfunktionalitet deaktiveres Ingen mulighed for at åbne links i nye faneblade Copy/paste ofte ikke muligt Eksempel: http://www.guldsmedbent.dk Dreamweaver fra CS3 pakken er et bedre værktøj til at lave hjemmesider i. 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. 8 Eksempel: 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 3
Om grænsefladen 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 10 Oprettelse af ny Flash film 1. Start programmet 2. Vælg Create new > Flash File (ActionScript 3.0) 3. Der åbnes nu en tom scene 11 Introduktion til brugergrænsefladen 12 4
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. 13 Tidslinie og lag Tidslinien befinder sig lige ovenfor 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. 14 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. 15 5
Tegning Flash indeholder værktøjer til tegning af figurer på scenen, som også kendes fra andre grafikprogrammer. 16 Symboler For at gemme en figur i biblioteket vælges Modify > Convert to Symbol eller bare F8. Figuren kan nu animeres på tidslinien. 17 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 wav mov 18 6
Animation i Flash Flash er nemt at animere i og gør meget af arbejdet for jer. 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 vigtige at kunne: Tweening animation Guided animation Shape animation Jeg vil gennemgå et eksempel på hver af disse. Filerne kommer online. 19 Tweening Animation Tweening udspringer af in between. Der angiver 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 20 Guided Animation Animationsform hvor et klip følger en guide. Guiden befinder sig i sit eget lag og angiver en bevægelsessti for klippet. Slut Start 21 7
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! 22 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. 23 Publishing 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 eventuel brændes på en cd og distribueres. Kræver ikke at Flash er installeret på maskinen. 24 8
Lær mere om Flash Mange gode sider på nettet. http://www.adobe.com/devnet/flash http://www.kirupa.com http://www.actionscript.org Brug Google! Der er mange forummer og tutorials på nettet, hvor man kan blive klogere. 25 9