Introduktion och grundläggande animering Interaktiv Flash-animering Introduktion och grundläggande animering jenny.nilsson@kau.se 054-700 11 35 21D 408

Interaktiv Flash-animering Om mig…

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.

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.

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. 251-260 i Interaktiv…” 26 januari 21D402 Drag-and-drop och styra enkla figurer Drag-and-drop: s. 3-5 i häftet Styra figurer: s. 10-13 i häftet 27 januari 2 februari Kollisionshantering och ljud Kollision: s. 13-14 i häftet Ljud: kapitel 6 i ”Interaktiv…” och s. 6-10 i häftet 3 februari 9 februari 21A 345 Hantera movieclips och movies dynamiskt S. 20-22 i häftet 10 februari 16 februari Reglage och pre-loaders Reglage: s. 22-25 i häftet Pre-loaders (loadbars): s. 244-249 i ”Interaktiv…” och s. 15-20 i häftet 17 februari 23 februari Reserv 24 februari Repetition 2 mars Kl 8-13 EXAMINATION

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

Interaktiv Flash-animering Adobe Flash

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

Interaktiv Flash-animering ActionScript

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

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

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!”);

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.

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 ” ”

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…

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

Hjälp i Actions ActionScript 2.0 Language Reference Interaktiv Flash-animering Hjälp i Actions ActionScript 2.0 Language Reference http://help.adobe.com/en_US/AS2LCR/Addendum_10.0/

Placering av ActionScript Interaktiv Flash-animering Placering av ActionScript

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

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

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(){

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

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

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

Namnkonventioner i ActionScript Interaktiv Flash-animering Namnkonventioner i ActionScript

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”

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

Datatyper i ActionScript Interaktiv Flash-animering Datatyper i ActionScript

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

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;

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

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

Funktioner i ActionScript Interaktiv Flash-animering Funktioner i ActionScript

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

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 {

Interaktiv Flash-animering Operatorer

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

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

Interaktiv Flash-animering Villkorssatser

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

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.

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

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

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)

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

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

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

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

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

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