Emner. Baggrund Flash s historie, udbredelse, scene og anvendelse.

Transkript

1 Flash crash course

2 Emner Baggrund Flash s historie, udbredelse, scene og anvendelse. Flash IDE Et kig på Flash udviklingsmiljøet. (stage, timeline, symboler, paneler, tools) Demo: Textfields Demo: Animation (simple tweeninger) Demo: Interaktivitet Vector grafik Demo: Illustration Flash og Wordpress (swfobject og PressConnect)

3 Historien om Flash Fra simpel tegne- og animationspakke til komplet multimedie udviklingsmiljø Futuresplash Macromedia Flash Adobe Flash Maj 1996 November 1996 December 2005

4 Flash Player udbredelse Flash filer konverteres til swf filer når de publiceres. En Flash Player er et browser plug-in der kan køre swf filer.

5 Flash design Flash udvikling grafik illustration animation usability interaktions design koncept scripting applikationsudvikling system arkitektur

6 Profiler Brendan Dawes Yugo Nakamura Joshua Davis Erik Natzke Brendan Hall Ralph Hauwert Keith Peters Grant Skinner

7 Hvad bruges Flash til? Webdesign med kant Historiefortælling Spil

8 Hvad bruges Flash til? Webapplicationer Datavisualisering/art

9 Et kig på Flash IDE

10 Flash - ActionScript Når man opretter et nyt dokument med Flash, kan man vælge om man vil bruge ActionScript 2 eller 3 og om vil lave en ren script fil (.as) eller en timelinie fil (.fla). For at teste en.as file, skal den includes i en.fla fil: # include myscript.as

11 Stage Stagen er filmens rod. Her findes Main Timeline. Alt hvad der ligger uden for Stage bliver ikke vist når filmen spilles. Man kan ændre farven på Stage.

12 Timeline Timeline skal ses som en matrix bestående af lag på den verticale led og frames på den horisontale led. Lag bruges til at fordele filmens elementer. En frame svarer til en tilstand i filmen på et givet tidspunkt. En keyframe vises med en sort cirkel og markerer et skift (ny tilstand).

13 Timeline til en kompleks animation Lag Frames

14 En timeline kan indeholde scripts, tweeninger og framelabels og bruges til at animere tekst og grafik eller til at styre flowet i et program. En tweening er en bevægelse fra én tilstand til en anden. En timeline looper som default gennem sine frames. De mest almindelige timeline kommandoer: stop(), play(), gotoandstop(), gotoandplay().

15 Symboler MovieClips kan have et uendeligt antal frames og lag, kan styres med kode og deres timeline er uafhængig. Graphic: Kan ikke styres med kode. preview af timeline ved scrub på maintimeline. Relevant i animationer. Button: timeline er fastlagt i 4 stadier:, interaktion uden kode.over, up, Down og Hit. Knappen kan tilgås med kode.

16 Prototype vs. instans Når du er inde og editere et symbol arbejder du på prototypen for alle instanser af dét symbol. Hvis du vil ændre på alle instanser af et movieclip, så lav ændringen inde i prototypen. Hvis du vil ændre på én instans, så gør det udenpå symbolet.

17 Demo Arbejde med timeline, symboler, paneler og tools 1. Dynamiske tekstfelter 2. Tweeninger på timeline 3. Interaktivitet 4. Grafiske effekter. 5. Illustration

18 Masker

19 Vektor grafik Vector grafik er en sekvens af matematiske udtryk, der beskriver hvordan en serie punkter skal forbindes. I modsætning til raster grafik som består af en serie farvede punkter. Joshua Davis

20 scaleret raster grafik scaleret vector grafik

21 Bygge vector grafik med line tool 1 Foto placeres på nederste lag Outlines 2 tegnes på laget over 3 Outlines kopieres til nyt lag, hvor der fyldes farve i. Outlines gemmes og detaljer tilføjes 4

22 Forskellen mellem trace bitmap og vector illustration

23 Flash og wordpress 1 Brug swfobject til at embedde movieclip ét eller flere steder i theme filerne. Brug flashvars til at sende data med til Flash wp theme load med parametre swf loaded swf

24 Flash og wordpress 2 Byg en Flash front-end som hiver data fra wordpress databasen via php (evt. PressConnect). Kræver godt kendskab til PHP, XML og ActionScript wordpress databasen Data hentes via php funktioner Fla front-end Data lagres via wordpress s php funktioner wordpress cms (dashboard)

25 Anbefalede posts 1) "Mine ambitioner og den faktiske implementering" Denne post kan omhandle tekniske og designmæssige overvejelser man har gjort sig undervejs i arbejdet med bloggen set i relation til det som faktisk er blevet opnået. 2) "Gruppearbejdsprocessen" Denne post skal indeholde reflektioner over den valgte gruppearbejdsform og de styrker og svagheder man har oplevet ved arbejdsformen. 3) "Det individuelle udtryk" Denne post skal omhandle de overvejelser man har gjort sig for at gøre bloggen bemærkelsesværdig - og de metoder man har anvendt til designarbejdet.

26 Ressourcer: Flash tutorials Vectorillustration: Tutorial samling: ActionScript 2: ActionScript med fokus på forskelle mellem as2 og as3: Animation (CS4):

27 Ressourcer Wordpress-Flash integration med PressConnect: tvwonline.net/lab/pressconnect/