MedienproduktionSommersemester 2010

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

Ablauf Heute

• Vorstellung Projekte & Gruppen

• Programmieren mit ActionScript 3

Weitere Vorlesungen

• Stoffentwicklung auf Projekte ausgerichtet

• Grundlagen Medienproduktion (Schnittmenge Digital Imaging & Interactive Media)

Projekte und Gruppen

Flash - Programmierung mit ActionScript 3

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

Flash - ActionScript

Spracheigenschaften, Syntax

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

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

medienproduktion/interactive-media/flash/actionscript/einleitung

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

medienproduktion/interactive-media/flash/actionscript/syntax

Beispiel 1: Einstiegspunkt Flash-Anwendung

• Aktion in Schlüsselbild

• Ausführung zur Laufzeit

• Ausgabe im „Ausgabefenster“

Strg-ENTER

Command-ENTER

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

medienproduktion/interactive-media/flash/actionscript/ausführung/beispiel

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

medienproduktion/interactive-media/flash/actionscript/syntax/bezeichner

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

medienproduktion/interactive-media/flash/actionscript/syntax/kommentare

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;

medienproduktion/interactive-media/flash/actionscript/syntax/variablen

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

medienproduktion/interactive-media/flash/actionscript/syntax/funktionen

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

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"

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

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

•

medienproduktion/interactive-media/flash/actionscript/datentypen

ActionScript 3die Zeitleiste

Zeitleiste

• Steuerung PlayHead über einfache Anweisungen

• Steuerung Hauptzeitleiste (Bühne) oder einer Animation (MovieClip)

• stop(); // playhead bühne anhaltenbicycle.stop(); // playhead animation fahrrad anhalten

• Anhalten, Weiterspielen, schrittweise vor/zurück

• stop(); play(); prevFrame(); nextFrame();

• Sprungbefehle

• gotoAndPlay(5); gotoAndStop(„ende“);

medienproduktion/interactive-media/flash/actionscript/zeitleiste

ActionScript 3Events

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

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

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

medienproduktion/interactive-media/flash/actionscript/events

Events verarbeiten: Workflow

Event-Handler-Funktion schreiben

Funktion mit Event verknüpfen

Mausklick AusführungEvent-Handler

Instanz.addEventListener()

function eventHandlerFunction () { ....}

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}

medienproduktion/interactive-media/flash/actionscript/events

ActionScript 3die Anzeigeliste

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

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

medienproduktion/interactive-media/flash/actionscript/displaylist

Anzeigeliste: Struktur

stage-Objekt

Hauptklasse SWF ➜ Aufruf ctor

Hierarchie an Anzeige-Objektenund Anzeige-Objekt-Containern

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;

medienproduktion/interactive-media/flash/actionscript/displaylist

ActionScript 3Timer

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

medienproduktion/interactive-media/flash/actionscript/timer

Timer: Workflow

Timer-Objekterzeugen

Funktion mit TimerEvent verknüpfen

TimerEvent AusführungEvent-Handler

myTimer.addEventListener( TimerEvent.TIMER, onTick );

var myTimer = new Timer(1000); // 1sec

function onTick( e:TimerEvent ):void { trace( "tick-tack" );}

medienproduktion/interactive-media/flash/actionscript/timer

ActionScript 3Klassen

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

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.

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.

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"; }

•

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

medienproduktion/interactive-media/flash/actionscript/klassen

ActionScript 3Pakete

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

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

medienproduktion/interactive-media/flash/actionscript/package

Pakete: Pakete verwenden

• zur Verwendung einer Klasse eines Pakets

• Paket importieren

• // import all classes in packageimport samples.*;

• Klasse des Pakets importieren

• // import only class SampleCodeimport samples.SampleCode;

• Quellcode des Pakets wird im Klassenpfad gesucht

• „Datei> Einstellungen für Veröffentlichungen“

medienproduktion/interactive-media/flash/actionscript/package