Introduktion til Flash Kaspar Rosengreen Nielsen kaspar@interactivespaces.net Om mig Kaspar Rosengreen Nielsen. Uddannet datalog med sidefag i multimedier. Arbejder på Interactive Spaces under Alexandra Instituttet som systemudvikler. Har bl.a. arbejdet med Flash i en lang række forskellige projekter på centeret. Jeg kan træffes på kaspar@interactivespaces.net i tilfælde af spørgsmål.
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 tastatur som input. Duk op til øvelser og få brugt Flash. Det er den bedste måde at lære det på! Forelæsningsplan 3/2: Introduktion til Flash. Brugergrænsefladen Vigtige koncepter Animationsformer 10/2: Introduktion til ActionScript, del 1. Introduktion til sproget (sammenlignet med Java) Mus og tastatur som input 17/2: Introduktion ActionScript, del 2. Objektorienteret programmering i Flash
Hvad er Flash? Flash er en del af CS4 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. 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.
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 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
Eksempel: Websider Eksempel: http://www.guldsmedbent.dk Dreamweaver fra CS4 pakken I så i forrige forelæsning er et bedre værktøj til at lave hjemmesider i. 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.
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. 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
Oprettelse af ny Flash film Start programmet Vælg Create new > Flash File (ActionScript 3.0) Der åbnes nu en tom scene Introduktion til brugergrænsefladen 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. 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. 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. 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 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. 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 på hver af disse. Tweening animation Guided animation Shape animation
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
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.
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 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.
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 brændes på en cd og distribueres. Kræver ikke at Flash er installeret på maskinen. Eksempel: Simpelt slideshow
Lær mere om Flash Mange gode sider på nettet. http://www.adobe.com/devnet/flash http://tv.adobe.com/show/learn-flash-professional-cs4/ http://www.kirupa.com/developer/flash/index.htm http://www.actionscript.org Brug Google! Der er mange forummer og tutorials på nettet, hvor man kan blive klogere. Opgave Opgave: Jeres egen musikvideo! Opgaven skal besvares individuelt og afleveres i Aula. 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)
Kåring af bedste musikvideo De bedste musikvideoer bliver vist d. 10/2-2010. Vinderen bliver fundet ved afstemning.