====== Adobe Flash ====== * {{:informatik:k6inf:Flash:flash.zip}} Adobe (Macromedia) Flash ist eine Plattform zur Programmierung und Darstellung multimedialer, interaktiver und animierter Inhalte. Flash ermöglicht es Vektorgrafiken, Rastergrafiken und Videoclips darzustellen, zu animieren und zu manipulieren. Die Programmierung von Inhalten erfolgt in der objektorientierten Skriptsprache ActionScript.\\ Der Dateityp in Flash erstellter Dokumente lautet FLA. Eine solche FLA-Arbeitsdatei ist aber noch nicht geeignet für die Wiedergabe im World Wide Web oder einem anderen Medium. Vielmehr exportiert man die fertige Datei aus Flash heraus als SWF-Film, ein Vorgang, der „Veröffentlichen“ genannt wird. Solche Dateien können mit dem Flash Player ausgeführt werden, der in den meisten Browsern als Plugin vorhanden ist. ===== Flash-Bildschirm ===== * Die Arbeitsfläche, auf der man den Film gestaltet, wird in Flash **Bühne** genannt. Hier erstellt man die für den Film benötigten Elemente und ordnet diese an. * Die **Zeitleiste** zeigt die Einzelbilder, aus denen sich der Film zusammensetzt. Hier werden die Bilder in der für den zeitlichen Ablauf richtigen Reihenfolge angeordnet. * In der **Werkzeugleiste** findet man die verschiedenen Werzeuge zum Erstellen und Bearbeiten von Objekten. * Der **Eigenschafteninspektor** dient zum Ändern der Objekteigenschaften. ''Fenster - Bedienfeldsätze - Standardlayout'' stellt den Bildschirm wieder her, wenn einzelne Fenster verloren gegangen sind. {{:informatik:k6inf:flash:flash_bildschirm.png|}} ===== Szenen ===== Ein Flash-Film kann aus einer oder mehreren Szenen bestehen, wobei jede Szene über eine eigene Bühne verfügt. \\ Szenen sind für die grobe Gliederung zuständig wie z.B.: Intro, Hauptfilm, Nachspann. Durch ''Menü-Einfügen-Szene'' können weitere Szenen in den Film eingebaut werden.\\ Ist eine Szene abgespielt worden, wird automatisch die nächste Szene gestartet. Es kann aber auch durch ActionScript direkt in den Szenen herumgesprungen werden. ===== Grundformen ===== In Adobe Flash erstellte Bilder werden als Vektorgrafiken gespeichert. Bilder können sowohl mit dem Rechteck- oder mit dem Ellipsenwerkzeug, als auch mit Freihandwerkzeugen erstellt werden. Einzelne Linien können mit dem Linien-Werkzeug gezogen und gebogen werden. ===== Zeitleiste ===== Die auf obigem Bild bereits eingezeichnete Zeitleiste, ist das wichtigste Hilfsmittel beim Erstellen von Animationen. Auf ihr wird jedes einzelne Frame (Bild) einer Animation angezeigt. Die aktuelle Geschwindigkeit, in der die einzelnen Bilder abgespielt werden, kann in der untersten Zeile der Zeitleiste entnommen werden. Die Grundeinstellung beträgt 12,0 BpS, also 12 Bilder pro Sekunde. Diese Bildraten kann man jederzeit ändern, indem man auf die BpS-Anzeige in der Zeitleiste doppelt klickt. === Schlüsselbilder-Keyframes === Bilder (Frames) mit einem Punkt sind sogenannte Schlüsselbilder (Key-Frames). Sie treten immer dann auf, wenn sich auf einer Ebene etwas entscheidend verändert. Bilder ohne Punkt werden einfach durchlaufen. Man erstellt ein Schlüsselbild, indem man einfach auf die Stelle in der Zeitleiste, an der man das Schlüsselbild einfügen möchte, Rechtsklickt, und "Schlüsselbild einfügen" wählt. ===== Ebenen ===== Wie in Photoshop gibt es auch in Flash Ebenen, wobei Elemente auf höheren Ebenen solche auf niedrigeren verdecken. In Flash unterscheidet man fünf verschiedene Ebenenarten. Die verschiedenen Ebenentypen findet man im Dialogfenster Ebeneneigenschaften: |Normal|Der standardmäßige Ebenentyp, der zum Zeichnen und Animieren von Objekten verwendet werden kann| |Führungsebene|Mit Führungsebenen kann man Objekte zum Ausrichten von Objekten und anderen Ebenen oder für Pfadanimationen erstellen.| |Ausgerichtet|Ebenen, die mit einer Führungsebene verknüpft sind| |Maske|Alle Objekte auf einer Maskenenebene erscheinen als Loch, durch das Objekte der darunter liegenden Ebenen durchscheinen. Die freien Flächen der Maskenebene erscheinen undurchsichtig.| |Maskiert|Ebenen, die mit einer Maskenebene verknüpft sind.| ===== Symbole ===== Ein grafisches Objekt in Flash wird Symbol genannt. Es wird in der Symbolbibliothek gespeichert. Sie besitzen eine eigene Zeitleiste und können somit wie ein eigener Flash-Film bearbeitet werden. Wird das Symbol dann verwendet, spricht man von einer Instanz. Instanzen sind also die Kopien eines Symbols aus der Symbolbibliothek, wodurch Speicherplatz gespart wird. Im Eigenschaften - Fenster können Instanzen Namen gegeben werden, die für das Coden mit ActionScript benötigt werden. \\ Dabei gilt folgende Regel: Ändert sich das Symbol, ändern sich auch die Instanzen. Ändert sich die Instanz, ändert sich das Muttersymbol nicht. \\ Symbole werden erstellt, indem man (idealerweise auf einer eigenen Ebene) die Figur zeichnet, die das Symbol darstellen soll, sie auswählt und im Rechtsklickmenü "In Symbol konvertieren" auswählt. Im folgenden Fenster bestimmt man den Namen und den Typ der Figur. Man sollte stets sprechende Namen für Symbole verwenden, da sonst auch schon kleine Projekten sehr schnell unübersichtlich werden. \\ Um die Frames eines Symbols zu verändern, klickt man mit einem Auswahlwerkzeug doppelt auf das Symbol. Es ist wichtig, sich stets darüber im Klaren zu sein, in welchem Symbol man arbeitet. Dies kann man an dem Pfad, der über der Zeitleiste dargestellt wird, ablesen. \\ Es gibt drei verschiedene Typen von Symbolen: * Grafiksymbole: Geeignet für einfache, wiederverwenbare Vektorgrafiken und Animationen. Nicht geeignet für Sounds oder Buttons. Die Frames eines Grafiksymbols sind immer mit denen des Hauptfilms synchronisiert. * Movieclips: Bei Movieclips kann bereits in einem einzigen Schlüsselbild der Hauptzeitleiste komplett abgespielt werden. Ein Movieclip ist sozusagen ein „Film-im-Film“, denn es kann sämtliche Elemente eines Flash-Films enthalten, einschließlich Interaktivität und Sounds. * Schaltflächensymbole: Die interne Zeitleiste der Schaltfläche besteht nur aus vier Frames: Up, Darüber, Gedrückt und Aktiv. In diesen Frames kann die Farbe des Buttons für Hover-Effekte verändert werden, bzw. mit ActionScript eine Aktion ausgeführt werden. Die Bedeutung dieser Frames (des Buttons) gliedert sich wie folgt: |Up|Der Status Up ist das Standarderscheinungsbild der Schaltfläche. Dieses wird angezeigt, wenn keine Mausaktion stattfindet.| |Darüber|Der Status Darüber tritt ein, sobald der Anwender mit dem Mauszeiger auf die Schaltfläche zeigt, die Maustaste aber nicht betätigt.| |Gedrückt|Der Status Gedrückt tritt ein, sobald der Anwender auf die Schaltfläche klickt.| |Aktiv|Soll nicht die gesamte Grafik anklickbar sein, sondern nur ein Teil davon, legt man den aktiven Bereich fest: Mit einem Zeichenwerkzeug wird der Bereich gekennzeichnet, der aktiv sein soll. Es muss sich bei dem aktiven Bereich um eine ausgefüllte Grafik handeln.| Im Fenster "Verhalten" kann man einem Button auch ohne ActionScript-Kenntnisse Skripten hinzufügen. Es kann mittels ''Fenster - Entwicklungs-Bedienfelder - Verhalten'' eingeblendet werden. ===== Tweening ===== Mit Hilfe von Tweens kann man die Änderungen zwischen zwei Schlüsselbildern automaitsiert animieren. Dazu müssen beide Schlüsselbilder bis auf das Element, das anmiert werden soll, leer sein. Deshalb sollten Tweens jeweils auf eigenen Ebenen erstellt werden, um "Kollisionen" mit anderen Bildern zu vermeiden. Außerdem können Tweens nur zwischen Instanzen von ein und dem Symbol erstellt werden. \\ Ist eines dieser Merkmale nicht erfüllt, so wird der Tween nicht wie üblich mit einem Pfeil dargestellt, sondern zerfällt in eine gestrichelte Linie. Dann löst der Tween zwar keine Fehlermeldung aus, bleibt aber wirkungslos. \\ Es gibt zwei verschiedene Arten von Tweens: \\ * **Bewegungs-Tween: ** Bei einem Bewegungs-Tween wird eine Instanz eines Movie-Clips von einer Stelle an eine Andere verschoben. * **Form-Tween: ** Bei einem Form-Tween wird die Form eines Movie-Clips verändert. Tweens werden erstellt, indem man auf der Zeitleiste den Bereich vom gewünschten Anfangs-Schlüsselbild zum Endschlüsselbild markiert, und im Rechtsklickmenü "Bewegungstween erstellen" wählt. Alternativ kann man auch auf ein Frame zwischen zwei Schlüsselbildern in der Zeitleiste klickt, und in der unteren Eigenschaftsleiste beim Punkt "Tween" entweder Bewegungs- oder Formtween auswählen. \\ Tweens können natürlich auch verschachtelt werden, indem in einem animierten Movie-Clip erneut eine Animation ausgeführt wird. ==== Pfadanimationen ==== Führungsebenen ermöglichen es, eine besondere Tween-Animationsart zu erstellen, die eine Art Erweiterung des Bewegungs-Tweens darstellt: das Positions-Tweening. Die Animation verläuft dabei an einem frei geformten Pfad. * Zunächst erstellt man in einer Ebene ein einfaches Bewegungs-Tweening aus zwei Bildern. * Unterhalb der Ebenenliste klickt man auf das Symbol ''Pfad-Ebene hinzufügen''. * In der Pfadebene wird der Bewegungspfad gezeichnet. * In der Ebene der Tween-Animation wird das Registrierungskreuz im Zentrum der Symbolinstanz exakt auf den Anfangspunkt bzw. beim letzten Schlüsselbild auf den Endpunkt gesetzt. ===== ActionScript ===== ActionScript ist sozusagen die Interne Programmiersprache von Flash. Die Syntax ist ähnlich aufgebaut wie im uns bekannten C++, Zeilen werden mit einem Strichpunkt beendet, Schleifen und If-Anweisungen funktionieren gleich ect.. Variablen werden in ActionScript jedoch mit "var" deklariert. \\ Um die Eigenschaften von Symbolen dynamisch ändern zu können, bzw. ganz allgemein, Symbole überhaupt ansprechen zu können, muss man ihnen einen Instanznamen zuweisen. Unter diesem können die Properties des Symbols mit einem Punkt als Verknüpfungsoperator aufgerufen werden. Liegt beispielsweise eine Instanz namens "Kugel" vor, deren x-Koordinate bei Klick auf einen Button namens "Knopf" geändert werden soll, schreibt man: Knopf.onPress=function() { Kugel._x+=10; } Wie wir in diesem Beispiel schon sehen, werden Properties in Flash immer mit einem Unterstrich angesprochen, um sie von Funktionen eines Objekts zu unterscheiden, die nur mit einem Punkt angesprochen werden. \\ Weiters ist es in ActionScript immer wichtig, zu wissen, an welcher Stelle des Programms man gerade schreibt. So kann beispielsweise jede Instanz über ihren Instanznamen bzw. ihren Instanznamen in Verbindung mit ihrem Wurzelelement angesprochen werden. Der Code kann aber auch direkt in die Instanz geschrieben werden, was jedoch allgemein nicht als guter Stil angesehen wird. Schreibt man Code direkt in eine Instanz, spricht man sie mit "this." an. \\ Weiters ist es oft praktisch, alle ActionScripte auf eine eigene Ebene im Flash-Dokument zu schreiben, da sonst leicht Teile des Codes verloren gehen können. ===== Aufgaben ===== ==== Auto ==== Realisiere mit Hilfe von verschachtelten Bewegungs-Tweens die Bewegung eines Autos, dessen Reifen sich drehen. ==== Buttons ==== Implementiere die Steuerung eines "Männchens", dass sich über Buttons in vier Richtungen bewegen kann.