info@a-coding-project.de

Flash: Grundlagen

Die Philosophie von Animationsprogrammen wie Flash versetzt deren Anwender gleichzeitig in die Rolle aller an der Produktion eines Films mitwirkenden Personen - in erster Linie jedoch die des Regisseurs. Für das Grundverständnis ist es wichtig, dass das Konzept von Flash die erstellten Inhalte als Filme (engl.: Movies) auffasst, was die Bezeichnung der einzelnen Bestandteile des Editors erklärt.

Flash erzeugt (interaktive) Filme

Während des Arbeitens mit Flash wird schnell die Parallele zum Film deutlich. Der Benutzer bearbeitet seinen Film in einer Projektdatei, welche durch das Dateisuffix fla gekennzeichnet ist. Dabei organisiert er sein Projekt in Szenen (engl.: scenes) und einzelnen Bildern (engl.: frames), deren Inhalte er auf der Bühne verändern kann. Er bestimmt also, was im Film passieren soll, indem er ihn mit seinen einzelnen Bildern konstruiert. Das fertige Konstrukt, der Film, lässt sich abschließend in zahlreichen Multimediaformaten veröffentlichen bzw. exportieren. Neben den gängigen Videoformaten wie etwa Windows AVI, Quicktime, usw. und Grafikformaten wie z.B. BMP und JPEG (Pixelgrafik) sowie PNG und AI (Vektorgrafik), usw. ist an dieser Stelle vor allem das Small Web Format oder Shockwave- Flash-Format (Dateiendung swf) zu nennen. Dieses Format ist nicht zuletzt dafür verantwortlich, dass sich Flash in seinem Genre in den letzten Jahren durchsetzen konnte, ermöglicht es doch das Darstellen von multimedialen und interaktiven Inhalten für Webseiten in Browsern, welche für deren Einbinden lediglich ein kostenloses Plugin benötigen. Auch wenn sie nicht auf den ersten Blick die Anmutung eines Filmes haben, sind sie es doch, obgleich deren Inhalte aufgrund der sehr gut ausgeprägten Schnittstellen zu anderen Programmiersprachen und den Importierungsmöglichkeiten von Flash sehr dynamisch gestaltet werden können.

Aufbau der Entwicklungsumgebung

Eines vorweg: Das Layout des Editors ist natürlich in erster Linie von der verwendeten Version abhängig. Darüber hinaus ist dieses jedoch besonders mit Einführung der Version MX auch sehr variabel für die individuellen Anforderungen, welche an ihn gestellt werden können, konfigurierbar. Neben den wichtigsten Programmelementen Bühne, Zeitleiste, Eigenschaftsinspektor, Werkzeugleiste und Aktionseditor für die ActionScript - Anweisungen kann der Benutzer noch zahlreiche andere Bedienfelder wie Farbmischer, Positionierungshilfen, usw. einblenden und als eigenes Layout speichern.

Die Bühne

Der Name dieses Programmelements deutet bereits auf dessen Funktion hin: Ähnlich wie auf der echten Bühnen kann der Anwender hier für das jeweilige Bild bereits existierende Grafiken transformieren bzw. editieren oder mithilfe der Zeichenwerkzeuge neue erstellen. Wie in anderen Bildbearbeitungsprogrammen auch stehen in Flash dem Anwender dazu zahlreiche Hilfsmittel wie etwa frei erstellbare Hilfslinien und skalierbare Raster zur Verfügung.

Die Zeitleiste

Die Zeitleiste (engl. timestrip), das wichtigste Programmelement, kann als eigentliche Steuereinheit und im weiteren Sinne auch als Drehbuch des Flash films aufgefasst werden, mit deren Hilfe der Anwender die Regie des Films übernimmt. Sie ist kontextsensitiv: Befindet man sich im Bearbeitungsmodus des Hauptfilms, so zeigt sie dessen Hauptzeitleiste mit den entsprechenden Bildfolgen. Wechselt der Benutzer zur Bearbeitung eines Symbols wie etwa einem Movieclip oder einer Schaltfläche, so zeigt sie dessen Bildabfolge. Die einzelnen Bilder können zeitlich arrangiert und deren Elemente mithilfe eines sehr effektiven Ebenenkonzepts getrennt voneinander organisiert werden. Darüber hinaus zeigt die Zeitleiste stets die Position des aktuell auf der Bühne sichtbaren Bildes als Bildnummer und Zeitpunkt im Gesamtfilm, dessen Bildrate ebenso dargestellt wird.
Die einzelnen Bilder können ganz einfach per Drag und Drop in der Zeitleiste verschoben, gelöscht, dupliziert oder über mehrere Bilder des Films erstreckt werden.

Die Darstellung dieser Bilder bzw. Bildfolgen folgt einer flasheigenen Symbolik, deren wichtigste im Folgenden aufgelistet sind:

Die einzelnen Symbole in der Übersicht
Darstellung: Die einzelnen Symbole in der Übersicht

Die Schlüsselbilder markieren stets Veränderungen eines Elements oder Objekts eines Bildes in Farbe, Größe, Position, etc. auf der Bühne. Sie sind beispielsweise beim Tweening die gewünschten Start- und Endzustände der zu berechnenden Animation (Bewegung, Verformung, etc.). Erstrecken sich staticframes oder keyframes über mehrere Bilder, so ist deren symbolische Darstellung dementsprechend ein über die betroffenen Bilder gestrecktes Rechteck.

Der Eigenschaftsinspektor

Der Eigenschaftsinspektor dient im Wesentlichen einem höheren Bedienkomfort des Editors, da er kontextsensitiv die wichtigsten Eigenschaften eines auf der Bühne ausgewählten Elementes oder eines ausgewählten Werkzeugs in einer Programmmaske bereitstellt. Wählt man beispielsweise das Freihandwerkzeug aus der Werkzeugleiste aus, so zeigt der Eigenschaftsinspektor dessen Attribute wie Strichfarbe, -stärke und -stil an. Im Falle der Auswahl eines Textelements hingegen beinhaltet er die wichtigsten Optionen zur Textbearbeitung, wie etwa Schriftart, -größe, -farbe usw. Die gezeigten Attribute lassen sich dann beliebig in diesem Bedienfeld editieren.

Die Werkzeugleiste

Die Werkzeugleiste fasst die in Flash zur Verfügung stehenden Auswahl-, Zeichen- und Bearbeitungswerkzeuge und deren Eigenschaften in einem Bedienfeld übersichtlich zusammen. So finden sich dort die gängigen Zeichen- und Malwerkzeuge wie etwa Stift, Pinsel, Füller, u.ä. sowie Lupe, Radiergummi, usw.. Wählt man ein Werkzeug aus dieser Leiste aus, kann man im gleichen Zuge dessen spezifische Eigenschaften im gleichen Bedienfeld modifizieren.

Das Bedienfeld Aktionen

Dieses Programmelement stellt die Arbeitsumgebung für die in Flash erstellbaren ActionScript e dar, wobei hierbei in der Version MX zwei unterschiedliche Bearbeitungsmodi, der so genannte Normalmodus und der Expertenmodus, zur Verfügung stehen. Der erstgenannte verfügt über sehr nützliche und elementare Debuggerfunktionen, welche direkt während des Formulierens von Anweisungen wirksam werden. So können beispielsweise die Befehle aus einer vorgefertigten Liste ausgewählt und deren Parameter o.ä. mithilfe einer Eingabemaske ergänzt werden. Eingabebegleitende Codehinweise wie beispielsweise für erwartete Parameter einer Funktion oder sonstige Syntaxhilfestellungen sowie das Debugging mithilfe von Breakpoints erleichtern dabei zusätzlich besonders Anfängern das Arbeiten mit der Scriptsprache, auf deren Fülle von Befehlen und Komponenten (Operatoren, Funktionen, Objekte sowie deren Eigenschaften, usw.) mithilfe einer sehr übersichtlichen Referenz mit Codebeispielen schnell und komfortabel zugegriffen werden kann. Das Bedienfeld Aktionen beinhaltet zudem eine Drop - Down - Liste, welche eine direkte Navigation zu allen anderen erstellten Aktionen im aktuellen Bild ermöglicht.
Der so genannte Normalenmodus wurde mit der Version MX 2004 abgeschafft, wird allerdings in Flash 8 unter anderer Bezeichnung wieder vorhanden sein.

Die Struktur eines Flashfilms

Gerade beim Erstellen größerer Projekte in Flash erscheint es sinnvoll, den Ablauf des Films in thematische, wohlmöglich wiederkehrende Abschnitte zu gliedern, um die Übersichtlichkeit zu erhöhen und nicht redundantes Material zu erschaffen, was letztendlich den Speicherbedarf des Films erhöht.

Szenen

Eine solcher Maßnahmen ist das Unterteilen des Films in thematische Abschnitte, wie man es auch von den "richtigen" Filmen kennt. Diese Reihe von Szenen wird von Flash beim Abspielen des Films chronologisch durchlaufen, solange nicht mithilfe interaktiver Steuerungsbefehle ( ActionScript ) darauf Einfluss genommen wird.

Der Szenenablauf
Darstellung: Der Szenenablauf

Jede Szene verfügt über eine eigene Zeitleiste mit dazugehörigen Ebenen sowie einer eigenen Bühne. Erstellt man in Flash ein neues Filmprojekt, so enthält dieses bereits eine erste Szene. Szenen lassen sich am einfachsten aus dem Bedienfeld Szenen heraus verwalten. Hier kann man neue Szenen hinzufügen, Szenen umbenennen, duplizieren oder löschen. Vorhandene Szenen werden in diesem Fenster aufgelistet. Durch Verschieben der Einträge dieser Liste kann man die chronologische Abfolge der Szenen verändern. Durch doppeltes Anklicken des Symbols vor den Szenen kann man in deren Bearbeitungsmodus wechseln, d.h. Änderungen an deren Bilder vornehmen.

Das Arbeiten mit Ebenen

Die Anordnung in Ebenen, welche in der Zeitleiste des Films vorgenommen werden kann, bringt einige Vorzüge für das Arbeiten mit Flash mit sich. Man kann sich eine Ebene als eine transparente Folie vorstellen, deren Gesamtheit übereinander gelegt das gesamte Bild des Films auf der Bühne ergibt. Elemente höherer Ebenen überdecken, wie in obiger Abbildung gezeigt, dabei die darunter liegender Ebenen. Einzelne oder, wenn in einem Ordner zusammengefasst, Gruppen von Ebenen können ausgeblendet, gelöscht, deren Weiterbearbeitung gesperrt oder in der Deckhierarchie verschoben werden. Des Weiteren ist das Maskieren von Ebenen mithilfe einer übergeordneten Ebene, wie es im folgenden Abschnitt angesprochen wird, oft ein sehr sinnvolles Instrument.
Die einzelnen Ebenen oder vielmehr die darauf befindlichen Elemente können unterschiedlich animiert und transformiert werden. Jede Ebene erhält dazu in der Zeitleiste eine eigene Zeile, in der in flasheigener Symbolik die Animationsabläufe, also im Prinzip das Storyboard des Elements, von links nach rechts dargestellt werden.

Das Ebenenkonzept
Darstellung: Das Ebenenkonzept

Das Arbeiten mit Masken

In Flash kann man mehreren Ebenen eine übergeordnete Maskenebene zuordnen, deren Bühneninhalt den Blick auf die darunter liegenden Ebenen einschränkt. Dies funktioniert wie das Prinzip der transparenten Folie, wobei hier hingegen nur diejenigen Bereiche der maskierten Ebenen zu sehen sind, welche direkt unter dem Inhalt der Maskenebene liegt, als von diesem überdeckt, maskiert, wird.
Um eine Maske für eine Ebene hinzuzufügen, muss man die darüber liegende Ebene auswählen bzw. eine neue Ebene oberhalb der zu maskierenden Ebene erstellen und deren Bühneninhalt erzeugen. Anschließend wählt man im Kontextmenü der oberen Ebene (rechte Maustaste) die Option Maske, wodurch diese in eine Maskenebene umgewandelt wird, was an eine anderen Icon vor der Maske und der maskierten Ebene, welche zunächst nur eine ist, zu erkennen ist. Es ist zudem auch möglich, weitere Ebenen in dieses Set per Drag und Drop einzufügen, wodurch diese ebenfalls von der umgewandelten Ebene (Maskenebene) maskiert werden. Es ist jedoch nicht möglich, eine Maskenebene durch eine weitere zu maskieren.
Maskenebenen selbst können sowohl eine Form, eine Instanz eines Grafiksymbols oder Movieclips oder ein Textobjekt sein. Besonders ansehnliche Effekte lassen sich erzielen, wenn es sich bei den Masken um animierte Masken handelt, diese also etwa Motion - oder Formtweens enthalten.
Des Weiteren können Movieclipinstanzen durch die Methode setMask(NameDerMaske) des Movieclip - Objekts auch dynamisch maskiert werden. Ein Beispiel:

myMovieClip.setMask(myMask);

//Demaskierung:
myMovieClip.setMask(null);

In diesem Beispiel wird der Movieclip names myMask verwendet, um den Movieclip myMovieClip zu maskieren. Anschließend wird diese Maske wieder verworfen. Weitere Informationen zum Verständnis der Syntax von ActionScript finden sich im entsprechenden Kapitel wieder.

Textarten in Flash

Flash unterscheidet im Großen und Ganzen zwischen drei Arten von Texten: statische, dynamische Texte sowie Eingabetexte.
Der Inhalt von statischen Texten sowie deren Formatierung wie zum Beispiel Schriftart, -größe, -farbe, usw. ist lediglich während der Entwicklung des Flash films, d.h. im Authoringmodus, veränderbar, da sie aufgrund fehlender Bezeichner nicht mittels ActionScript angesprochen werden können. Die Formatierung dynamischer Texte, welche in ActionScript Instanzen des Textfield - Objekts darstellen, sowie deren Inhalt können hingegen während der Laufzeit mit der flasheigenen Scriptsprache beeinflusst werden. Eingabetextfelder bieten dem Betrachter des Flash films die Möglichkeit, selbst deren Inhalte zu verändern bzw. zu bestimmen.
Horizontale Texte können darüber hinaus als Link fugieren, indem man im Eigenschaftsinspektor des jeweiligen Textblocks im Feld URL-Verknüpfung eineURLnotiert. Diese wird dann im gewählten Ziel, d.h. Frame mit bekannten Bezeichnungen wie _self, _blank, _parent oder _top, im Browser aufgerufen. Ein weiterer Vorteil besteht darin, dass dynamische Texte sowie Eingabetextfelder auch HTML-formatierten Text aufnehmen können, wozu man im Eigenschaftsinspektor der jeweiligen Instanz lediglich die Option "Text als HTML wiedergeben" auswählen muss. Nicht zuletzt sei der Vorzug von Flash erwähnt, Schriftarten in einen Flash film einbetten zu können, wodurch auch Schriftarten, welche auf dem System des Filmbetrachters nicht installiert sind, angezeigt werden können.

Formulare in Flash

Formulare stellen eine wichtige Schnittstelle zum Betrachter des Films dar, mit denen es ihm ermöglicht wird, Informationen einzugeben und damit Einfluss auf den Film zu nehmen.
Formularelemente zählen zu den Komponenten in Flash und sind daher nichts anderes als Instanzen von vordefinierten Movieclips mit einigen Parametern, welche dazu dienen, bestimmte Eigenschaften festzulegen bzw. zu modifizieren. Dazu zählen neben den bereits erwähnten Effekten für Instanzen auch sehr spezifische Eigenschaften, welche charakteristisch für das jeweilige Formularelement sind.
Flash kennt die gebräuchlichen Elemente eines Formulars: Checkboxen, Radiobuttons, Auswahllisten (Listboxes), Dropdownlisten (Comboboxes), Buttons (Pushbuttons), Scrollleisten (Scrollbars) und eingebundene Fenster mit Scollleisten (Scollpanes).
Diese Komponenten können nur während der Entwicklung des Flash films (Authoring) erstellt werden, wobei dem Entwickler hier im Eigenschaftsinspektor oder im Bedienfeld Komponentenparameter kontextsensitiv die entsprechenden Parameter für die Konfiguration des jeweiligen Elements angeboten werden. Diese sind relativ gut strukturiert, so dass sie im Prinzip selbsterklärend sind. Um ein Flash element zu erstellen, muss man es einfach nur im Bedienfeld Komponenten auswählen und per Drag und Drop auf die gewünschte Position der Bühne ziehen. Mithilfe des Frei-Transformieren-Werkzeugs kann beispielsweise auch die Größe des jeweiligen Elements verändert werden, um auch mögliche längere Texte ohne Abschneiden darstellen zu können.
Sämtliche Formularelemente können mit den Methoden und Eigenschaften ihres entsprechenden Objekts in ActionScript dynamisch konfiguriert und gesteuert werden, wie das Beispiel im entsprechenden Kapitel zeigt. Des Weiteren ist es auch möglich, das Aussehen von Formularelementen im Einzelnen oder sogar zentral über das FStyleFormat - Objekt von ActionScript - ähnlich, wie man es von CSS kennt, zu beeinflussen.

Weiterlesen: ⯈ Symbole, Bibliotheken und Instanzen

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Auch interessant