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 Fortsetzung Programmierung mit Flash objektorientierte Programmierung - Dokumentklassen grafische Ausgaben: Zeichnen mit AS3 Animation mit greensock s Tweening-Library

3 Flash - Fortsetzung - Programmierung mit ActionScript 3

4 ActionScript Dokumentklassen - Einführung & Übung

5 medienproduktion/interactive-media/flash/actionscript/goodpractice/dokumentklasse Wiederholung: Fakten Dokumentklassen kein/weniger QuellCode in Zeitleiste Trennung von Code und Darstellung in separater.as-datei im Textformat gespeichert Haupteinstiegspunkt einer Flash-Anwendung mit FLA-Datei explizit assoziiert

6 medienproduktion/interactive-media/flash/actionscript/goodpractice/dokumentklasse Dokumentklasse: Workflow Dokumentklasse erstellen und in AS-Datei speichern FLA erzeugen und Bühne mit Dokumentklasse assoziieren mydocument.as

7 medienproduktion/interactive-media/flash/actionscript/goodpractice/dokumentklasse Dokumentklasse: Beispiele Beispiel //Eine elementare Dokumentklasse package { // Die Dokumentklasse muss zwingend eine Subklasse von // MovieClip oder von Sprite sein //import flash.display.sprite; import flash.display.movieclip; //Die Klasse muss public sein //public class dokumentklasse extends Sprite{ public class dokumentklasse extends MovieClip{ //Der Konstruktor muss public sein public function dokumentklasse(){ trace("die Dokumentklasse läuft"); } } }

8 Übung Dokumentklassen - Basics

9 medienproduktion/interactive-media/flash/actionscript/goodpractice/dokumentklasse Übung - Ziele und Arbeitsschritte weitere Schritte mit Actionscript machen einen Flash-Film (.FLA) anlegen eine externe Actionscript anlegen eine Dokumentklasse programmieren Flash-Film mit Dokumentklasse assoziieren

10 los geht s... Übung Dokumentklassen - Basics

11 Übung Dokumentklassen am Beispiel anwenden

12 medienproduktion/interactive-media/flash/actionscript/goodpractice/dokumentklasse Übung - Ziele Umstellung des Beispiels der Übung Schaltflächen zur Trennung von Code und Design

13 medienproduktion/interactive-media/flash/actionscript/goodpractice/dokumentklasse Übung - Ziele und Arbeitsschritte Ziele Zugriff auf Instanzen aus Dokumentklassen importieren von AS-Klassen Arbeitsschritte im einzelnen: verbinden der Flash-Datei mit Dokumentklasse entfernen aller Skripte aus der Flash-Datei erweitern der Dokumentklasse um Funktionalität der entfernten Skripte

14 medienproduktion/interactive-media/flash/actionscript/goodpractice/dokumentklasse Übung - vorher

15 medienproduktion/interactive-media/flash/actionscript/goodpractice/dokumentklasse Übung - nachher.fla (Flash-Film)....as (DokumentKlasse)

16 los geht s... Übung Dokumentklasse am Beispiel anwenden

17 ActionScript grafische Objekte mit AS3 erzeugen - Einführung & Übung

18 Zeichnen mit AS3 Grundlagen

19 medienproduktion/interactive-media/flash/actionscript/drawing Grundlegendes zeichnen von Vektorgrafiken mit ActionScript (Linien, Kurven, Formen, Füllungen und Farbverläufe) Zeichenfunktionen Teil der Klasse Graphics zeichnen in Container ( Leinwand ): Shape, Sprite oder MovieClip enthalten dazu Graphics- Instanz als Eigenschaft nur Container als Einheit manipulierbar (ausblenden, verschieben,...)

20 medienproduktion/interactive-media/flash/actionscript/drawing Grundlegendes Zeichenmethoden der Graphics-Klasse lineto(), curveto() drawcircle(), drawrect(), drawrountrect(), drawelipse() moveto() linestyle(), linegradientstyle(), beginfill(), begingradientstyle() beginbitmapfill()

21 medienproduktion/interactive-media/flash/actionscript/drawing Beispiele gerade Linie myshape.graphics.moveto(100, 100); myshape.graphics.lineto(200, 200); Kurve myshape.graphics.moveto(100, 100); myshape.graphics.curveto(150, 50, 200, 100);

22 Übung Dreiecke zeichnen

23 medienproduktion/interactive-media/flash/actionscript/drawing Ziele erstes Kennenlernen des Zeichen-API Konzept Zeichenstift verschieben verstehen Shape-Klasse kennenlernen Zeichnen in Objekt als Leinwand verstehen

24 medienproduktion/interactive-media/flash/actionscript/drawing Arbeitsschritte ActionScript Dokument-Klasse inkl. Code-Gerüst erzeugen Flash-Datei erzeugen Flash-Datei mit Dok-Klasse assoziieren Code-Gerüst um Zeichenbefehle erweitern Instanz der Shape-Klasse anlegen zwei Vektor-Dreiecke in der Instanz zeichnen jeweils Füllfarbe festlegen jeweils initiale Zeichenposition festlegen jeweils drei Linien zeichnen Shape-Instanz zur Anzeigeliste zufügen

25 medienproduktion/interactive-media/flash/actionscript/drawing verwendete Klassen Shape eine Shape-Instanz dient als Leinwand um Inhalte zu zeichnen Mithilfe der Shape-Klasse können Formen erstellt werden, die wenig Speicherplatz belegen, indem zum Zeichnen die ActionScript- API verwendet wird. Die Shape-Klasse enthält eine graphics- Eigenschaft, mit der Sie auf Methoden der Graphics-Klasse zugreifen können. Adobe AS3 Dokumentation Graphics realisiert das Zeichnen von Linien, Kurven, Formen bietet verschiedene Linien- und Füllstile erlaubt für Farbverläufe für Linien und Füllungen

26 medienproduktion/interactive-media/flash/actionscript/drawing verwendete Methoden Graphics linestyle()...legt Aussehen von Linien fest beginfill()...legt einfarbige Füllung inkl. Transparenzen fest moveto()...legt Zeichnungsposition mit x,y-koordinaten fest lineto()...zeichnet Linie der aktuellen Farbe, ab der aktuellen Position zur angegebenen Position (x,y)

27 medienproduktion/interactive-media/flash/actionscript/drawing Quell-Code: Dreiecke zeichnen Initialisierung, Shape- Objekt erzeugen Füllung und Linie festlegen, Dreieck 1 zeichnen Dreieck 2 zeichnen Zeichnung sichtbar machen

28 medienproduktion/interactive-media/flash/actionscript/drawing Ergebnis: Dreiecke zeichnen

29 los geht s... Übung Dreiecke zeichnen

30 los geht s... Übung Dreiecke zeichnen

31 Übung Schachbrettmuster zeichnen

32 medienproduktion/interactive-media/flash/actionscript/drawing Ziele & Arbeitsschritte Ziele Vertiefung Zeichen-API Zeichenfunktionen für Formen (hier Rechteck) kennenlernen Arbeitsschritte wie in Übung Dreiecke Quellcode ändern

33 medienproduktion/interactive-media/flash/actionscript/drawing Quell-Code: Dreiecke zeichnen Shape als Klassen- Eigenschaft Konstruktor Zeichnen des Schachbretts Zeichnung sichtbar machen Funktion zum zeichnen der Recht-ecke

34 medienproduktion/interactive-media/flash/actionscript/drawing Ergebnis: Schachbrettmuster zeichnen

35 los geht s... Übung Schachbrettmuster zeichnen

36 ActionScript Animation...mit TweenMax

37 medienproduktion/interactive-media/flash/actionscript/animation/tweenmax GreenSock TweenMax: Demos einige Features: sanftes animieren Überblenden von Position, Größe, Transparenz, Farbe,... Animation von Filtern wie Unschärfe,... 2D-Physik-Engine mit Gravitation, Beschleunigung, etc. anhalten, fortsetzen, abbremsen, beschleunigen von Animationen anfügen von Animationsbefehlen an eine interaktive, virtuelle Zeitleiste

38 medienproduktion/interactive-media/flash/actionscript/animation/tweenmax GreenSock TweenMax: die Fakten...verbreitete Animation-Bibliothek für AS2 und AS3 reich an Features: auch Besonderheiten wie 2D Physik-Engine, MotionBlur,......für kostenlose Projekte auch kostenlose Verwendung...für kommerzielle Projekte, kommerzielle Lizenz verfügbar ($150$/Jahr oder einmal $750 pro Entwickler)

39 medienproduktion/interactive-media/flash/actionscript/animation/tweenmax TweenMax: Installation & Verwendung Installation Download AS3-Version von ZIP entpacken Ordner com ins Verzeichnis der eigenen FLA-Datei oder in den Klassenpfad einbinden Verwendung Quellcode wird bei Kompilation eingebunden alles im SWF enthalten, keine externen Abhängigkeiten, com- Verzeichnis nur zur Übersetzungszeit notwendig im Quellcode: import com.greensock.*; import com.greensock.easing.*;

40 los geht s... Demo Animation mit TweenMax