Introduktion och grundläggande animering

En presentation över ämnet: "Introduktion och grundläggande animering"— Presentationens avskrift:

1 Introduktion och grundläggande animering
Interaktiv Flash-animering Introduktion och grundläggande animering 21D 408

2 Interaktiv Flash-animering
Om mig…

3 Interaktiv Flash-animering
Från kursplanen Efter genomgången kurs förväntas studenten kunna hantera grundläggande funktioner i Flash Action Script: - skapa "drag-och-släpp"-funktionalitet, - hantera ljud på olika sätt i Flash, - styra enkla figurer, - kollisionshantering, - hantera movieclips och movies dynamiskt, - skapa reglage.

4 Kurslitteratur Interaktiv Flash-animering
Interaktiv multimedia med Flash CS3 Haugland, A. & Larsson, U. (2008) Adobe Flash – the Definitive Övningshäfte Clerwall. C (2008) Referenslitteratur: ActionScript 3.0 Bible Braunstein, R., Wright, M.H. & Noble, J.J. (2008) Flash 8 för alla Ek, J. (2006) Flash 8 ActionScript Bible Lott, J. & Reinhardt, R. (2006) Adobe Flash CS3 Professional Bible Reinhardt, R. & Dowd, S. (2007 and later) OBS! Kurslitteraturen och Flash 8-böckerna behandlar Action Script 2.0. ”Biblarna” behandlar Action Script 3.0.

5 Kursens upplägg Interaktiv Flash-animering Datum Tid Sal Område
Läsanvisning 19 januari föreläsning kl 13-15 datorlabb kl 15-17 21D 402 21D 403 Introduktion och enklare animering Kapitel 1 & 2 i ”Interaktiv multimedia med Flash CS3” 20 januari föreläsning kl 10-12 datorlabb kl 13-17 1D 227 Introduktion till ActionScript 2.0 Om AS: kapitel 4 i ”Interaktiv…” Publicera: s i Interaktiv…” 26 januari 21D402 Drag-and-drop och styra enkla figurer Drag-and-drop: s. 3-5 i häftet Styra figurer: s i häftet 27 januari 2 februari Kollisionshantering och ljud Kollision: s i häftet Ljud: kapitel 6 i ”Interaktiv…” och s i häftet 3 februari 9 februari 21A 345 Hantera movieclips och movies dynamiskt S i häftet 10 februari 16 februari Reglage och pre-loaders Reglage: s i häftet Pre-loaders (loadbars): s i ”Interaktiv…” och s i häftet 17 februari 23 februari Reserv 24 februari Repetition 2 mars Kl 8-13 EXAMINATION

6 Interaktiv Flash-animering
Adobe Flash Verktyg för att skapa presentationer eller applikationer med interaktion Enkla animationer, videofilmer, komplexa presentationer, applikationer… SWF (ShockWaveFlash) och FLA-fil Programversion: CS3 CS4 kom 15 oktober 2008

7 Interaktiv Flash-animering
Adobe Flash

8 Att jobba i Flash CS3… Interaktiv Flash-animering
Demonstration av programmet

9 Interaktiv Flash-animering
ActionScript

10 ActionScript Det finns flera versioner av ActionScript
Interaktiv Flash-animering ActionScript Det finns flera versioner av ActionScript ActionScript 1.0 (2000) Simplaste formen av ActionScript, används i vissa versioner av Flash Lite Player. AS 1.0 och 2.0 kan samexistera i samma FLA-fil. ActionScript 2.0 (2003) Lättare att lära sig än 3.0. Långsammare än AS 3.0-kod. 2.0 kan användas till projekt som inte är beräkningsintensiva, t ex designorienterat. ActionScript 3.0 (2006) Snabbast. Kräver mer kunskap i objektorienterad programmering än tidigare versioner. ”Interaktiv Flash-animering = AS 2.0

11 ActionScript Interaktiva mediaelementen Logik i applikation
Interaktiv Flash-animering ActionScript Interaktiva mediaelementen Logik i applikation Ny bild visas om användaren klickar på en knapp, applikationen beter sig på olika sätt beroende på vad användaren gör eller något annat villkor

12 Händelser, meddelanden & hanterare
Interaktiv Flash-animering Händelser, meddelanden & hanterare Händelsestyrt: skript aktiveras av en händelse Spelhuvudet kommer till den aktuella bildrutan stop(); onEnterFrame repeterar kod lika ofta som frame rate this.onEnterFrame = function(){ checkKeys(); poang_txt.text = score; Användaren klickar på en knapp minKnapp_btn.onRelease = function(){ trace (”Användaren klickade på knappen!”);

13 Fönstret Actions i Flash CS3
Interaktiv Flash-animering Fönstret Actions i Flash CS3 Knappraden: Kontrollera och formatera kod, infoga eller ta bort kommentarer mm. Verktygslådan Åtgärder: bibliotek över AS-koder. Skriptnavigatorn: Navigera mellan script i ditt Flash-dokument.

14 Hjälp i Actions Grön text inom ” ” Automatiska indrag vid {
Interaktiv Flash-animering Hjälp i Actions Automatiska indrag vid { Blå text = reserverat ord (t ex datatyp, klass eller metod) var up:Boolean = false Var up:boolean = False Grön text inom ” ”

15 Hjälp i Actions Interaktiv Flash-animering
Om du vill få ”kodtips” i Actions när du skriver: deklarera variablerna var score:Number; score.xxx döp instanserna med suffix myMC_mc.xxx Button_btn MovieClip_mc Sound_sound String_str TextField_txt osv…

16 Hjälp i Actions Beskrivning av fel Interaktiv Flash-animering
Dubbelklicka eller ”Go to Source”

17 Hjälp i Actions ActionScript 2.0 Language Reference
Interaktiv Flash-animering Hjälp i Actions ActionScript 2.0 Language Reference

18 Placering av ActionScript
Interaktiv Flash-animering Placering av ActionScript

19 Placering av ActionScript
Interaktiv Flash-animering Placering av ActionScript På en och samma plats En eller flera externa ActionScript-filer Frame 1 i tidslinjen (frame script). Frame script Första eller andra framen Lagret ”actions” Första eller andra lagret Två lager för ActionScript med separata funktioner Varför? Koden är lätt att hitta Koden blir lättare att felsöka

20 Placering av ActionScript
Interaktiv Flash-animering Placering av ActionScript I kursboken Tidslinjer Knappar Movie clips

21 Addressering av knappar
Interaktiv Flash-animering Addressering av knappar Knapp på scenen ActionScript på keyframe knapp1_btn.onRelease = function(){ gotoAndStop(”Del 1”); }; Istället för script på knappen knapp1_btn on (release){ Om knappen ligger i movie clipet mittMovieClip_mc: mittMovieClip_mc.knapp1_btn.onRelease = function(){

22 Kommentarer och trace ( )
Interaktiv Flash-animering Kommentarer och trace ( )

23 Kommentarer Hur och varför Undvik att bara översätta Flera rader
Interaktiv Flash-animering Kommentarer Hur och varför Undvik att bara översätta Flera rader /* Text */ En rad // Text Inte för mycket

24 trace ( ) Utskrifter i Output-fönstret vid testkörning
Interaktiv Flash-animering trace ( ) trace (”Här skrivs text ut”); Utskrifter i Output-fönstret vid testkörning Används för att hitta fel

25 Namnkonventioner i ActionScript
Interaktiv Flash-animering Namnkonventioner i ActionScript

26 Namnge t ex variabler Förkortningar Camel Case
Interaktiv Flash-animering Namnge t ex variabler Förkortningar Begränsa Konsekvent Tydliga "sec" = "section" eller "second”? Camel Case Ihopskrivna ord för att skapa namn Både gemener och versaler för att urskilja orden ”nySkalbagge”, inte ”ny skalbagge” eller ”nyskalbagge”

27 Namnge t ex variabler Inled variabler med liten bokstav
Interaktiv Flash-animering Namnge t ex variabler Inled variabler med liten bokstav versal är reserverade för klasser mm. Beskriv vad som sker getUserName() istället för getData() Håll namnen så korta som möjligt, men ändå beskrivande Undvik reserverade ord, keywords

28 Datatyper i ActionScript
Interaktiv Flash-animering Datatyper i ActionScript

29 Exempel på datatyper Interaktiv Flash-animering Boolean Number String
1/0, true/false Number Ex: 3.14 String ”JavaScript”, ”Enkelt värde” och ”3.14” MovieClip Refererar till det grafiska elementet movie clip, metoder i MovieClip-klassen null Inget värde, ingen data Object Definieras av Object klassen, basklass för alla klassdefinitioner i ActionScript Undefined Innehåller ett värde, ”undefined” Void Innehåller ett värde, ”void” Funktioner som inte returnerar värde

30 Strict data typing Datatypsdeklarationer var variableName:dataType;
Interaktiv Flash-animering Strict data typing Datatypsdeklarationer var variableName:dataType; var year:Number; year = 79; var str:String; str = ”abc”; var isOn:Boolean; isOn = true;

31 Interaktiv Flash-animering
Datatyper Vi kan inte stoppa in vad som helst när som helst i våra variabler var day:Number; day = ”tisdag”; Resulterar i varningsmeddelandet: Type mismatch in assignment statement: found String where Number is required. Dvs ActionScript 2.0 gör s.k. datatypskontroll (type checking) för oss när vi använder datatypsdeklarationer

32 Datatyper Kan dock göra om t ex number till string
Interaktiv Flash-animering Datatyper Kan dock göra om t ex number till string var userScore:Number = 0; score_txt.text = "0"; userScore++; score_txt.text = String(userScore);

33 Funktioner i ActionScript
Interaktiv Flash-animering Funktioner i ActionScript

34 Funktioner Returnerar Returnerar inte (:Void) Tar parametrar
Interaktiv Flash-animering Funktioner function namn(parameter):datatypRetur { //... } Returnerar Returnerar inte (:Void) Tar parametrar Tar inte parametrar

35 Funktioner Kan kombineras Interaktiv Flash-animering
Returnerar men tar inte parametrar function myCircle():Number { //... } Returnerar och tar parametrar function myCircle(circle):Number { //… Varken returnerar eller tar parametrar function myCircle():Void {

36 Interaktiv Flash-animering
Operatorer

37 Operatorer Artimetiska operatorer Interaktiv Flash-animering + - * /
- (negation) % (modulus), division mellan heltal, returnerar resten) ++ (räknas upp med 1) --

38 Operatorer Tilldelningsoperator Relationsoperatorer < mindre än
Interaktiv Flash-animering Operatorer Tilldelningsoperator = variabel = värde Relationsoperatorer < mindre än <= mindre än eller lika med > större än >= större än eller lika med == lika med

39 Interaktiv Flash-animering
Villkorssatser

40 Villkorssatser Interaktiv Flash-animering Sekvens Iteration
Kommandon utförs rad för rad i den ordning de står skrivna. Iteration I loopar kan man använda variabelnamn med bara en bokstav For statement for (init; condition; update) { var i:Number; for (var i = 0; i<4; i++) { trace (”Nuvarande nr är ” + i); } While statement do { // statements } while (condition);

41 Villkorssatser Selection Interaktiv Flash-animering If statement
if (condition) { // statements } else if (condition) { else { Behöver inte skriva == true. Falskt? något==false eller !något.

42 Villkorssatser Selection Interaktiv Flash-animering Switch statement
switch (condition) { case A : // statements // falls through case B : break; case Z : default : }

43 Kort om objektorientering i ActionScript
Interaktiv Flash-animering Kort om objektorientering i ActionScript

44 Interaktiv Flash-animering
Objekt Objektorienterad programmering: försöker efterlikna hur vi kan kommunicera/tänka om objekt i ”verkligheten”. egenskaper som om de gjorde saker (bilen svängde, bollen flög). rent generellt utan att nämna något specifikt Den här datorn [pekar på datorn] fungerar inte bra (specifik, bestämd form) Datorer fungerar oftast inte när man verkligen vill att de ska fungera (alla datorer, ingen specifik, obestämd form)

45 Klasser Klassen dokumenterar objekten Relationer till andra objekt
Interaktiv Flash-animering Klasser Klassen dokumenterar objekten vilken information som den gör tillgänglig (attribut) vad den kan göra (operatorer) objekten utför saker och ting på egen hand (Disney-värld!) ge information om sig själv förändra sitt tillstånd Relationer till andra objekt

46 Klass & instans/objekt
Interaktiv Flash-animering Klass & instans/objekt Klassen = ”fabrik” som skapar objekt operatorn new klassNamn(); var objektNamn_suffix:klassNamn = new klassNamn(); Skapa ett objekt av typen Sound: var mittLjud_sound:Sound = new Sound();

47 Inbyggda klasser Inbyggda klasser beskrivs i hjälpen
Interaktiv Flash-animering Inbyggda klasser Inbyggda klasser beskrivs i hjälpen Vanligaste i AS 2.0: Movie Clip Button Sound Video TextField osv...

48 Objekt, egenskap och metod
Interaktiv Flash-animering Objekt, egenskap och metod Objekt och egenskap skrivs med punkt emellan Egenskap börjar med _ objekt._egenskap = egenskapsvärde; mittMC_mc._visible = false; Objekt och metod skrivs med punkt emellan Objekt.metod(parameter); mittDatum_date.getDate();

49 Funktioner ”Vanlig” funktion Interaktiv Flash-animering
function skapaCirkel():String{ //funktion return "Cirkel är skapad"; }

50 Funktioner Anonym funktion Interaktiv Flash-animering Lyssnare
Deklarera funktioner dynamiskt var mittObjekt:Object = new Object(); mittObjekt.skapaFyrkant = function():String{ return "Fyrkant är skapad"; }; minVariabel = skapaFyrkant(); minVariabel = mittObjekt.skapaFyrkant(); minVariabel = this.skapaFyrkant();