Medienproduktion Sommersemester Dipl.-Inform. Alexander Schulze Prof. Dr. Ing. Klaus Rebensburg

Transkript

1 Medienproduktion Sommersemester 2010 Dipl.-Inform. Alexander Schulze Prof. Dr. Ing. Klaus Rebensburg

2 Ablauf Heute Vorstellung Projekte & Gruppen Programmieren mit ActionScript 3 Weitere Vorlesungen Stoffentwicklung auf Projekte ausgerichtet Grundlagen Medienproduktion (Schnittmenge Digital Imaging & Interactive Media)

3 Projekte und Gruppen

4 Flash - Programmierung mit ActionScript 3

5 ActionScript 3.0 Was ist AS3? Basiseigenschaften die Syntax Bezeichner, Kommentare, Variablen, Datentypen, Strings, Arrays, Funktionen Events / Ereignisse die Anzeigeliste Timer die Zeitleiste in ActionScript Klassen Pakete

6 Flash - ActionScript Spracheigenschaften, Syntax

7 medienproduktion/interactive-media/flash/actionscript/einleitung Zur Erinnerung: Was ist ActionsScript? Programmiersprache für die Flash Player Laufzeitumgebung Realisierung von Interaktion, Verarbeitung von Daten und Events AS Anweisungen werden von der Actionscript Virtual Maschine ausgeführt AS Programmcode wird in Bytecode kompiliert und in SWF-Dateien gespeichert Flash Player Laufzeitumgebung führt den Bytecode aus

8 medienproduktion/interactive-media/flash/actionscript/einleitung ActionScript 3: Eigenschaften robustes, objektorientiertes Programmiermodell an Standards ausgerichteter Sprachumfang Sprachkern basiert auf ECMAScript XML-API zur Verwendung von XML als nativer Datentyp der Sprache (Basis E4X-Spezifikation) Event-Modell auf Basis der DOM3-Ereignisspezifikation

9 medienproduktion/interactive-media/flash/actionscript/syntax Syntax: Anweisungen Anweisungen jede Anweisung in einer Zeile mit Semikolon beendet stop(); gotoandplay(50); trace( hello world! ); Ausführung bei Erreichen eines Schlüsselbildes mit einem Skript Skript des Bildes bei Aufruf einer Funktion Anweisungen der Funktion bei Events Anweisungen der Event-Listener-Funktion

10 medienproduktion/interactive-media/flash/actionscript/ausführung/beispiel Beispiel 1: Einstiegspunkt Flash-Anwendung Aktion in Schlüsselbild Ausführung zur Laufzeit Ausgabe im Ausgabefenster Strg-ENTER Command-ENTER

11 medienproduktion/interactive-media/flash/actionscript/ausführung/beispiel Beispiel 2: Einstiegspunkt Flash-Anwendung Dokumentenklasse als externe.as - Datei Verknüpfung FLA Dokumentenklasse Eigenschaften-Inspektor der Bühne (Dokument) bei Start wird Konstruktor der Klasse aufgerufen Anforderungen: Dokumentenklasse Subklasse Movieclip oder Sprite Klasse und Konstruktor sind public deklariert

12 medienproduktion/interactive-media/flash/actionscript/syntax/bezeichner Bezeichner wahlfreie Namen für Variablen und Funktionen keine Umlaute Beginn mit Buchstaben oder _ gefolgt von Zeichen, Ziffern, _ keine Leerzeichen, nicht mit Zahl beginnen, kein. Kollision mit AS-Schlüsselwörtern und -Objekten vermeiden best practice (Camel Case) mysuperdupervariable = 5; parseconfigxml();

13 medienproduktion/interactive-media/flash/actionscript/syntax/kommentare Kommentare einzeiliger Kommentar hinter zwei Schrägstrichen (//) wird die restliche Zeile ignoriert mehrzeiliger Kommentar Inhalte zwischen /* und */ wird ignoriert für mehrzeilige Kommentare (Beschreibung von Funktionen und Methoden) Deaktivieren von Codeabschnitten

14 medienproduktion/interactive-media/flash/actionscript/syntax/variablen Variablen Schlüsselwort var zum Deklarieren Schema: var name:typ; Beispiele var i; // zulässig aber Compiler-Warnung im strikten Modus var i:int; var myvar:number = 2; var a:int, b:int, c:int; var a:int = 10, b:int = 20, c:int = 30;

15 medienproduktion/interactive-media/flash/actionscript/syntax/funktionen Funktionen Funktionen definieren function Funktionsname(ParamName:ParamTyp):ReturnTyp {... } Beispiele function runme():void { trace("this is the runme function"); } runme(); function doublenum(basenum:int):int { return (basenum * 2); }

16 medienproduktion/interactive-media/flash/actionscript/datentypen Datentypen Ein Datentyp definiert Werte z.b. Boolean lässt zwei Werte zu: true und false Typen z.b.: Boolean, String, Number, Array, int, uint,... Werte = Objekte Alle Werte in ActionScript 3.0 sind Objekte (auch Grundwerte wie Werte des Datentyps int) Grundwerte vs komplexe Typen Grundwerte können ohne new-operator verwendet werden var someint:int = 3; var someint:int = new int(3);

17 medienproduktion/interactive-media/flash/actionscript/datentypen Strings Unterstützung für ASCII und UniCode var bandname1:string = "The Beatles"; var bandname2:string = 'The Rolling Stones'; var bandname3:string = new String("Guns n Roses"); Escape-Sequenzen \' (Einfaches Anführungszeichen), \" (Doppeltes Anführungszeichen), \unnnn (Unicode nnn als hex), \\xnn (Ascii-Code nn als hex),... Länge: trace(mystr.length()); Verketten von Strings var str3:string = "green" + "ish"; // str3 == "greenish"

18 medienproduktion/interactive-media/flash/actionscript/datentypen Arrays einfache indizierte Arrays assoziative Arrays über Schlüssel zugreifbar mehrdimensionale Arrays mit Elementen die auch Arrays sein können Beispiele...

19 medienproduktion/interactive-media/flash/actionscript/datentypen einfache Arrays: Beispiele Beispiele var names:array = new Array(); trace(names.length); // output: 0 var names:array = new Array(3); trace(names.length); // output: 3 var names:array = new Array("John", "Jane", "David"); trace(names.length); // output: 3 var names:array = ["John", "Jane", "David"]; trace(names.length); // output: 3

20 ActionScript 3 die Zeitleiste

21 medienproduktion/interactive-media/flash/actionscript/zeitleiste Zeitleiste Steuerung PlayHead über einfache Anweisungen Steuerung Hauptzeitleiste (Bühne) oder einer Animation (MovieClip) stop(); // playhead bühne anhalten bicycle.stop(); // playhead animation fahrrad anhalten Anhalten, Weiterspielen, schrittweise vor/zurück stop(); play(); prevframe(); nextframe(); Sprungbefehle gotoandplay(5); gotoandstop( ende );

22 ActionScript 3 Events

23 medienproduktion/interactive-media/flash/actionscript/events Events Basis DOM3-Eventmodell des W3C verschiedene Typen von Events typisch Maus-Events: click, double_click, roll_over, roll_out,... Mechanismus: Event vs Event-Ziel Beispiel: Event: Mausklick Eventziel: Button für eigene Funktionalitäten muss man aktiv horchen wird über AS-Funktion aktiviert Event-Ziel oft grafisches Objekt z.b. Button

24 medienproduktion/interactive-media/flash/actionscript/events Events Events werden durch Ereignisobjekt dargestellt dies ist Instanz der Event-Klasse (oder einer Unterklasse) Ereignisobjekt speichert Informationen über ein Ereignis enthält Methoden zur Bearbeitung des Ereignisobjektes Beispiel Mausklick Ereignisobjekt wird erzeugt (eine Instanz der MouseEvent-Klasse) speichert Mauskoordinaten für Klick

25 medienproduktion/interactive-media/flash/actionscript/events Events: Event-Fluss & Anzeigeliste grafische Elemente sind Teil der Anzeigeliste (display list) Anzeigeliste hierarchisch strukturiert ist Event-Ziel grafisches Element dann... Event propagiert sich durch Anzeigeliste bis zum Ziel

26 medienproduktion/interactive-media/flash/actionscript/events Events verarbeiten: Workflow Event-Handler- Funktion schreiben function eventhandlerfunction () {... } Funktion mit Event verknüpfen Instanz.addEventListener() Mausklick Ausführung Event-Handler

27 medienproduktion/interactive-media/flash/actionscript/events Events verarbeiten: Workflow eventhandler-funktion schreiben function eventhandlerfunction (e:mouseevent) { // Aktion für das Ereignis der betreffenden Schaltfläche } eventhandler-funktion als Listener registrieren Instantz addeventlistener(ereignis, eventhandlerfunction); Beispiel function eventhandlerfunction (e:mouseevent) { // Aktion für das Ereignis der betreffenden Schaltfläche }

28 ActionScript 3 die Anzeigeliste

29 medienproduktion/interactive-media/flash/actionscript/displaylist Anzeigeliste: Grundlagen jede Flash-Anwendung beinhaltet Anzeigeliste (display list) display list = Hierachie von Anzeige-Objekten Anzeige-Objekte: alle sichtbaren Elemente einer Flash-Anwendung werden durch Anzeige- Objekte repräsentiert Anzeige-Objekt-Container: können weitere Anzeige-Objekte oder Anzeige-Objekt-Container enthalten enthaltene Unterobjekte in Child-Liste

30 medienproduktion/interactive-media/flash/actionscript/displaylist Anzeigeliste: Grundlagen jedes SWF hat mindestens: Bühne (stage object) Basis-Container aller Anzeigeobjekte an der Spitze der Hierachie zusätzlich ist eine Instanz der Hauptklasse für jedes SWF enthalten, bei Start wird deren Ctor aufgerufen zufügen von neuen grafischen Elementen durch anfügen an die Child-Liste eines Containers Container.addChild(Unterobjekt);

31 medienproduktion/interactive-media/flash/actionscript/displaylist Anzeigeliste: Struktur stage-objekt Hauptklasse SWF Aufruf ctor Hierarchie an Anzeige-Objekten und Anzeige-Objekt-Containern

32 medienproduktion/interactive-media/flash/actionscript/displaylist Anzeigeliste: Beispiele Beispiele Text auf die Bühne bringen: (zufügen zur display list der bühne) var mytext:textfield = new TextField(); mytext.text = "Hello!"; addchild(mytext); Text wieder von der Bühne löschen: (entfernen aus der display list der bühne) removechild(mytext); Text ausblenden aber in display list belassen: mytext.visible = false;

33 ActionScript 3 Timer

34 medienproduktion/interactive-media/flash/actionscript/timer Timer: Einleitung zum Auslösen von Events wenn Zeitintervalle erreicht werden eigene Timer-Klasse verschiedene Events: TIMER und TIMER_COMPLETE Hilfsfunktionen als Methoden der Timer-Klasse

35 medienproduktion/interactive-media/flash/actionscript/timer Timer: Workflow Timer-Objekt erzeugen var mytimer = new Timer(1000); // 1sec Funktion mit TimerEvent verknüpfen mytimer.addeventlistener( TimerEvent.TIMER, ontick ); TimerEvent Ausführung Event-Handler function ontick( e:timerevent ):void { trace( "tick-tack" ); }

36 ActionScript 3 Klassen

37 medienproduktion/interactive-media/flash/actionscript/klassen Klassen ähnliche Funktionalität wie in C++, C#, Java,... abstrakte Darstellung eines Objekts aus Variablen, Konstanten und Methoden ähnliche oder gleiche Schlüsselwörter: class, extends, public,... Definition einer Klasse: ein Beispiel: public class Shape { var visible:boolean = true; }

38 medienproduktion/interactive-media/flash/actionscript/klassen Klassenattribute Verwenden von Klassenattributen: dynamic class SampleCode(); Klassenattribute (gelten für Klassen) dynamic zur Laufzeit können Eigenschaften zu Instanzen der Klasse hinzugefügt werden. final Klasse kann nicht von einer anderen Klasse erweitert werden. internal (default) Klasse ist (nur) innerhalb des aktuellen Pakets sichtbar. public Klasse ist (auch) außerhalb des aktuellen Pakets sichtbar.

39 medienproduktion/interactive-media/flash/actionscript/klassen Klasseneigenschaftenattribute Klasseneigenschaftenattribute internal (default) Eigenschaft nur in innerhalb des Pakets sichtbar. private Eigenschaft nur in innerhalb der Klasse sichtbar. protected Eigenschaft nur in innerhalb der Klasse und davon abgeleiteter Klassen sichtbar. public Überall sichtbar, außerhalb Klasse / Paket. static statische Eigenschaft die nicht an Instanz der Klasse gebunden ist. NameEinesNamespace Benutzerdefinierter Namespace-Name.

40 medienproduktion/interactive-media/flash/actionscript/klassen Klasseneigenschaftenattribute gelten für Variable, Konstanten und Methoden einer Klasse Verwenden von Klasseneigenschaftenattributen class PrivateExample { private var privvar:string = "private variable"; }

41 medienproduktion/interactive-media/flash/actionscript/klassen Verknüpfung von Klassen und Assets für Assets aus der Bibliothek einer FLA-Datei für Assets wird dann Klasse im Klassenpfad gesucht ansonsten automatisch angelegt mit Instanzen der Klassen können dann Instanzen des Asses angelegt werden

42 ActionScript 3 Pakete

43 medienproduktion/interactive-media/flash/actionscript/package Pakete Pakete bündeln mehrere Klassendefinitionen zur gemeinsamen Nutzung mehrere Klassen werden als Teil eines Pakets definiert: package samples { public class SampleCode { public var samplegreeting:string; public function samplefunction() { trace(samplegreeting + " from samplefunction()"); } } }

44 medienproduktion/interactive-media/flash/actionscript/package Pakete Pakete können Namenskonflikte vermeiden helfen Klassen mit identischen Namen können in unterschiedlichen packages koexistieren Compiler wandelt Klassenname um aus Funktion samplefunction() der Klasse samplecode im Paket samples wird samples.samplecode.samplefunction()

45 medienproduktion/interactive-media/flash/actionscript/package Pakete: Pakete verwenden zur Verwendung einer Klasse eines Pakets Paket importieren // import all classes in package import samples.*; Klasse des Pakets importieren // import only class SampleCode import samples.samplecode; Quellcode des Pakets wird im Klassenpfad gesucht Datei> Einstellungen für Veröffentlichungen