Spielwiese
Von den einen geliebt, von den anderen gehasst - aus dem Web wegzudenken sind Flash-Animationen auf jeden Fall nicht mehr. Was mancher vielleicht nicht glauben will: nicht erst mit der gerade freigegebenen Version Flash MX lassen sich auch professionelle Anwendungen erstellen. Ein dreiteiliges Tutorial hilft bei den ersten Schritten.
- Regina Müller
Für die Webpräsentation animierter und interaktiver Inhalte ist Flash häufig das Werkzeug der Wahl. Im Laufe der Jahre hat sich die Software vom reinen Animationsprogramm zum professionellen Autorentool entwickelt, mit dem sich komplexe, datengesteuerte Webanwendungen erstellen lassen. Für knapp 500 US-$ bietet Macromedia sowohl Webdesignern als auch Anwendungsprogrammierern eine Entwicklungsumgebung, die das Erstellen multimedialer Websites interaktiv unterstützt. Wie sich die diversen Werkzeuge und die an ECMAScript angelehnte Sprache ActionScript nutzen lassen, vermittelt ein dreiteiliges Tutorial. Dabei geht speziell der letzte Teil auch auf die neuen Funktionen des während der CeBIT freigegebenen Flash MX ein.
Interessenten, die keine Flash-Entwicklungsumgebung haben, können über Macromedias Website eine kostenlose auf 30 Tage begrenzte Version beziehen und so die Beispiele nachvollziehen. Systemvoraussetzung sind ein Windows- oder Macintosh-Rechner mit mindestens 85 MByte Festplattenplatz und 16 Bit Farbtiefe. Laut Herstellerempfehlung sollten außerdem 128 MByte Hauptspeicher zur Verfügung stehen.
Ursprünglich war Flash dafür gedacht, Platz sparende und verlustfrei skalierbare Vektorgrafiken beziehungsweise -animationen für das Web zu erstellen. Inzwischen kann die Software darüber hinaus mit diversen anderen Medienformaten umgehen: Bitmap-Grafiken, Sounddateien und digitales Video lassen sich über das Plug-in wiedergeben. Zur weiten Verbreitung von Flash-Anwendungen trägt nicht zuletzt die Verfügbarkeit des Plug-ins für diverse Browser auf unterschiedlichen Rechnerplattformen bei.
Der erste Teil des Tutorials gibt einen Überblick über die Flash-Funktionen. Wie sich Hintergrundgrafiken und einfache Animationen erstellen lassen, erläutern die beiden kleinen Beispiele in den Textkästen.
Die Filmmetapher als Designkonzept
Vor der Erstellung einer neuen Anwendung sollte man überlegen, welche Elemente mit welchen Zuständen sie beinhalten muss. Eine Variante des Spiels Snake etwa bräuchte einen Hintergrund, ein tatsächliches Spielfeld, einen Schlangenkopf, ein Grafikelement, aus dem der Schlangenkörper im Laufe des Spiels zusammengebaut wird, ein Grafikelement, welches das ‘Futter’ darstellt, eine Punkteanzeige et cetera. Ergänzt man das Spielfeld um ein Startbild mit einen ‘Beginn’-Button, hat die Anwendung bereits zwei Zustände.
Vor der Umsetzung sollte man zudem festlegen, was das Programm können muss: Soll es Benutzereingaben verarbeiten? Reagieren bestimmte Grafikelemente auf Tastatur oder Maus? Diese Überlegungen werden im zweiten Teil des Tutorials interessant, wenn es um die Programmierung mit ActionScript geht.
Wie viele Animationsprogramme arbeitet Flash mit der Filmmetapher. Dementsprechend sind die einzelnen Elemente benannt: Der Anwender erzeugt ‘Filme’ oder ‘Movies’, organisiert die Inhalte in ‘Szenen’, ordnet sie räumlich auf der ‘Bühne’ an und kann für jedes ‘Bild’ bestimmen, was passieren soll. Der fertige Film wird als eigenständiger ‘Projektor’ oder in einem eigenen ‘Flash-Player’ wiedergegeben.
Beim Öffnen über das Startmenü legt Flash automatisch eine neue Datei an, die der Benutzer nach Belieben bearbeiten kann. In einem leeren Film zeigt der kontextsensitive Eigenschaftsinspektor die Eigenschaften des Films an. Hier legt man die Eckdaten des Films fest und stellt Höhe und Breite, Hintergrundfarbe sowie Abspielgeschwindigkeit ein (Abb. 1).
Die Framerate legt in Bildern pro Sekunde (bps oder fps beziehungsweise ‘frames per second’) die maximale Bildrate fest, die der Zielrechner bei der Wiedergabe nicht überschreiten darf. In der Regel genügt eine Angabe von 12 Bildern pro Sekunde, damit das menschliche Auge die Animation als flüssige Bewegung wahrnimmt und andererseits die Steuerung einer Spielfigur nicht zu schwierig wird. Je höher die Framerate, desto mehr Rechenleistung benötigt das Programm bei der Darstellung.
Wichtigstes Werkzeug bei der Arbeit mit Flash sind die Zeitleisten, da sie festlegen, welchen Inhalt der Film zu jedem Zeitpunkt während seines Ablaufs hat. Für jedes einzelne Bild eines Films bestimmt der Flash-Anwender, welche Grafikelemente zu sehen und welche Sounds zu hören sein sollen, und spezifiziert die Interaktionsmöglichkeiten für den Benutzer. Eine rote Markierung, der so genannte Abspielkopf, zeigt das jeweils aktuelle Bild an. Um den Ablauf von Animationen zu ändern, kann man Bilder auswählen, löschen, einfügen oder durch Ziehen an eine neue Position verschieben.
Die einzelnen Elemente lassen sich in der Zeitleiste in Ebenen (Layer) anordnen und bei Bedarf in Ordnern zusammenfassen (Abb. 2). Für mehr Übersichtlichkeit auf der Bühne kann man Ebenen aus- oder einblenden, sperren oder ihre Inhalte als Outlines anzeigen. Neue Ebenen können hinzugefügt, nicht mehr verwendete gelöscht oder die Reihenfolge vorhandener Ebenen durch Drag & Drop beliebig geändert werden.
Wie transparente Schichten liegen die Ebenen in der Zeitleiste übereinander und können mehrere Objekte enthalten. Objekte in höheren Ebenen zeichnet Flash auf dem Bildschirm über Objekte in niedrigeren Ebenen. Mehrere Objekte in eine Ebene zu legen, ist sinnvoll, wenn sie gemeinsam animiert werden sollen. Anders als bei Programmen wie Adobes Photoshop hat die Anzahl der vorhandenen Ebenen keinen Einfluss auf die Dateigröße.
Ein Flash-Film setzt sich aus Einzelbildern zusammen, wobei so genannte Schlüsselbilder Änderungen auf der Bühne definieren. Die Bilder zwischen diesen Keyframes enthalten entweder keine Änderungen (Standbilder) oder Flash berechnet sie (Tween). Die Länge eines Tween kann der Anwender durch Verschieben der Schlüsselbilder in der Zeitleiste ändern. Schlüsselbilder können außerdem weitere Informationen enthalten: Ein ‘a’ bezeichnet eine Bildaktion, eine rote Flagge bedeutet, dass ein Bild eine Markierung oder einen Kommentar beinhaltet.
Flash-Objekte sind Instanzen von Symbolen
Als Assets werden alle Flash-Objekte auf der Bühne oder in der Bibliothek bezeichnet sowie externe, verlinkte Dateien, die zur Laufzeit dazugeladen werden. Nicht notwendigerweise sind Objekte auf der Bühne auch ActionScript-Objekte. Die meisten Objekte lassen sich skalieren, rotieren oder verzerren.
Symbole und ihre Instanzen auf der Bühne sind die wichtigsten Flash-Objekte. Ein Symbol ist ein wiederverwendbares Element mit eigener Zeitleiste, die Flash unabhängig von der Hauptzeitleiste abspielt. Es gibt drei verschiedene Arten: Grafiksymbole, Buttons und Movieclips (Filmsequenzen). Lediglich über die letzten beiden lässt sich einem Flash-Film Interaktivität einhauchen.
Beim Erstellen eines Symbols legt Flash es automatisch in der Bibliothek ab. Jedes Vorkommen eines Symbols auf der Bühne ist eine Instanz. Da Flash die Daten für das Symbol nur einmal in der Filmdatei speichert, ist deren Größe unabhängig von der Anzahl der verwendeten Instanzen. Während sich Änderungen eines Symbols automatisch auf alle Instanzen auswirken, haben Modifikationen der Eigenschaften einer Instanz keine Auswirkungen auf das Symbol oder dessen andere Instanzen.
Viele Formate sind importierbar
Flash kann viele Grafikformate importieren. Beliebt sind vor allem GIF-, JPEG-, PNG- sowie FreeHand-Dateien. Importierte Bitmaps lassen sich komprimieren, glätten (Antialiasing) und als Füllmuster für gezeichnete Shapes verwenden. Bei Bedarf kann man importierte Bitmaps in einem externen Editor weiter bearbeiten, vorausgesetzt, die Quelldatei bleibt am gleichen Platz gespeichert.
Neu in der Version MX ist, dass sie digitale Videodateien (MOV, AVI, MPEG und FLV) nicht nur importieren, sondern auch im aktuellen Flash-Player (Version 6) abspielen kann. Flash-Filme, die Videos enthalten, können im QuickTime- oder im SWF-Format (Small Web Format) veröffentlicht werden. Intern komprimiert dabei der Sorenson Codec die Videos. Sie lassen sich komplett importieren oder stehen über eine URL zur Verfügung.
Importierte Sounddateien (WAV, AIFF oder MP3) sind auf zwei Arten abspielbar: Streaming-Sound erklingt, sobald Flash die ersten Daten geladen hat und mit der Zeitleiste synchronisieren kann. Der so genannte Ereignissound dagegen muss vor dem Abspielen komplett geladen sein und eignet sich somit besser für Loops.
Für das Veröffentlichen der SWF-Datei bietet Flash verschiedene Komprimierungsoptionen an, die die Audioqualität und die Größe der exportierten SWF-Datei beeinflussen. Die Optionen gelten entweder für einzelne Sounds oder für die komplette Flash-Datei.
Konfiguration der Arbeitsumgebung
Ein Klick mit der rechten Maustaste (oder Option+Klick auf dem Mac) auf das aktuell gewählte Objekt öffnet ein Kontextmenü. Die wichtigsten Eigenschaften des Objekts zeigt außerdem immer der Eigenschaftsinspektor an. Daneben stellt Flash eine Fülle weiterer Bedienfelder zur Verfügung. Diese reichen von Positionierhilfen bis zu Farbeinstellungen für die Zeichenwerkzeuge. Um die eigene Arbeitsumgebung an persönliche Vorlieben anzupassen, zieht die Anwenderin häufig verwendete Bedienfelder an die gewünschten Positionen, und speichert dieses Layout (Fenster > Bedienfelder-Layout speichern), das sich bei Bedarf wieder laden lässt. Die in einem Flash-Film verwendeten Objekte kann man in der Bibliothek in Ordnern zusammenfassen und nach verschiedenen Kriterien sortieren. Dabei illustriert ein Icon jeweils den Typ eines Objekts.
Alle Inhalte einer Flash-Datei inklusive Texte und ActionScripts kann der Benutzer über den Film-Explorer einsehen (Abb. 3). Dabei ist wählbar, welche Objekttypen der Explorer anzeigen soll. In dieser hierarchisch strukturierten Übersicht lässt sich nach einzelnen Elementen suchen, was besonders für Anwender praktisch ist, die sich in fremden Flash-Filmen zurechtfinden müssen, da sie auf diese Weise die Struktur des Films kennen lernen.
Editierbare Dateien speichert Flash mit der Endung .FLA. Diese kann der Player nicht anzeigen. Die exportierten Flash-Filme dagegen bekommen die Dateiendung .SWF und sind im Flash-Player oder im Browser (mit Plug-in) darstellbar. Falls nötig, lassen sich Arbeitsdateien der neuen Version im Flash-5-Format speichern, wenn auch nicht mit allen neuen Funktionen.
Beim Speichern einer Datei ergänzt Flash sie normalerweise um die aktuellen Änderungen. Mit der Zeit kann die FLA-Datei dadurch relativ groß werden. Wer die Dateigröße verringern möchte, kann sie unter einem anderen Namen speichern. Dies führt zu einer kompletten Neuorganisation der Datei ohne die nicht mehr benötigten Daten aus früheren Versionen des Projekts.
Nach erfolgreichem Test innerhalb der Entwicklungsumgebung kann man ein Projekt veröffentlichen. Dabei kann Flash nicht nur die .SWF-Datei exportieren, sondern gleichzeitig auch eine HTML-Datei, in die der Flash-Film eingebettet wird.
Zeichnen in Flash: Die Werkzeuge
Die Toolbox bietet Zugriff auf Werkzeuge für die Bearbeitung der auf der Bühne befindlichen Objekte. Für das Erstellen und Bearbeiten von Vektorgrafiken gibt es umfangreiche Möglichkeiten. Mit dem Bleistift gezogene Freiformlinien kann Flash automatisch glätten oder begradigen. Präzise Pfade zeichnet man mit der Feder, und mit dem Pinsel lassen sich kalligrafische Effekte erzeugen. Wer will, kann auch importierte Bitmaps als Füllmuster für Pinselstriche verwenden.
Objekte lassen sich nicht nur beliebig transformieren (verzerren, vergrößern et cetera), sondern auf der Bühne auch pixelgenau positionieren. Dies geschieht entweder mit Hilfe von Rastern und Hilfslinien oder über das Bedienfeld ‘Ausrichten’. Dabei kann die Anordnung der Objekte entweder relativ zu der Bühne oder zu anderen Objekten erfolgen. Als Basis für die Positionierung dient entweder die Oberkante, die Unterkante oder der Registrierungspunkt eines Objekts (Abb. 4).
Statische und dynamische Texte
Flash kennt verschiedene Arten von Texten: statische, deren Inhalt und Darstellung während des Authoring festgelegt werden, dynamische, deren Inhalt und Darstellung zur Laufzeit änderbar sind, und Eingabetexte, deren Inhalt erst der Betrachter des Films eingibt. Ein Beispiel für dynamischen Text wäre der Punktezähler im SnakeMe-Spiel. Bei der Darstellung bestimmt die Anwenderin Schriftart und -größe, Stil, Farbe, Kerning und Grundlinie des Textes sowie Ausrichtung, Ränder, Einzüge und Zeilenabstände (Abb. 5).
Bei Instanzen von Textfeldern auf der Bühne handelt es sich um ActionScript-Objekte mit einer Reihe von Eigenschaften und Methoden, über die sie angesprochen und geändert werden können. Neu in Flash MX sind die vorprogrammierten horizontalen und vertikalen Rollbalken, die sich Textfeldern einfach hinzufügen lassen. Ebenfalls neu ist das Zerlegen von Textblöcken in einzelne Buchstaben, ohne dass die Editierbarkeit dieser Einzelteile verloren geht.
Wer viel mit Text arbeitet, wird immer wieder in die Verlegenheit kommen, Schriftarten zu verwenden, die auf dem Zielrechner wahrscheinlich nicht vorhanden sind. Daher erlaubt es Flash, Schriftarten in verschiedenen Formaten (PostScript Type-1, TrueType sowie auf dem Mac Bitmaps) einzubinden und im Flash-Film mitzuliefern.
In der Entwicklungsumgebung werden Fonts, die auf dem Rechner nicht installiert sind, zwar ersetzt, jedoch ändert das nichts an der eingestellten Schriftart. Konvertiert man eine Schriftart in ein Symbol und exportiert dieses in eine Bibliothek, können auch andere Flash-Filme sie nutzen. Dieses Schriftartensymbol erscheint im Texteigenschaftsinspektor in der Liste der vorhandenen Schriftarten (mit einem * hinter dem Namen) und lässt sich wie ein normaler Font einem Textblock zuweisen.
Über die Option ‘Systemschriftarten’ (‘Device fonts’) lässt sich die Dateigröße eines Flash-Films minimieren. Auf diese Weise verwendet der Player die auf dem Zielsystem installierten Schriften. Allerdings kann es passieren, dass der Text auf dem Zielrechner erheblich anders aussieht, als geplant, weil Flash nicht vorhandene Fonts bei Bedarf ersetzt.
Bewegung in die Szene bringen
Um einer Szene Leben einzuhauchen, hat man die Möglichkeit, verschiedene Objekteigenschaften zu animieren: Position, Form, Größe, Farbe, Transparenz, Rotation et cetera. Die Animation kann auf drei Arten erfolgen. Vergleichbar mit einem Daumenkino ist es, in jedem Bild der Zeitleiste die Änderungen zu dem vorhergehenden Bild zu definieren (‘Bild-für-Bild-Animation’). Alternativ lassen sich in der Zeitleiste Anfangs- und Endzustand in Schlüsselbildern bestimmen. In diesem Fall berechnet Flash die Zwischenbilder. Auf die dritte Möglichkeit - Änderung der Objekteigenschaften per ActionScript - wird der zweite Teil des Tutorials näher eingehen.
Die erste Methode eignet sich für komplexe Animationen, bei denen sich zwischen zwei Bildern so viel ändert, dass Flash die Übergänge nicht ohne weiteres berechnen kann. Nachteil dieser Animationsmethode sind die resultierenden großen Dateien, da sie für jedes Bild die komplette Information und nicht nur eventuelle Änderungen enthalten müssen.
Dagegen eignet sich die zweite Methode, das Tweening, besonders für Animationen, bei denen sich Position, Größe oder sonstige Eigenschaften des Objekts ändern, die Flash selbst in den Zwischenbildern berechnen kann. Dateien mit Tweening-Animationen sind im Normalfall relativ klein, da sie nur für jedes Schlüsselbild die komplette Bildinformation enthalten müssen. Die Informationen über das Aussehen der Zwischenbilder berechnet die Software zur Laufzeit.
In einer Bild-für-Bild-Animation ist jedes Bild ein Schlüsselbild. In der Zeitleiste kennzeichnet jedes Schlüsselbild ein schwarzer Punkt. Ein leeres Schlüsselbild - also eins, das noch keinen Inhalt hat - dagegen bezeichnet ein leerer Kreis (Abb. 6).
Zwischenbilder eines Bewegungs-Tween sind an einem schwarzen Pfeil auf hellblauem Hintergrund erkennbar, während ein schwarzer Pfeil auf hellgrünem Hintergrund anzeigt, dass es sich bei der Animation um ein Form-Tween handelt. Eine gestrichelte Linie bedeutet, dass ein Tween unvollständig ist beziehungsweise, dass das Schlüsselbild am Ende fehlt.
Um dem aktuellen Schlüsselbild ein Element aus der Bibliothek hinzuzufügen, zieht man es aus der Bibliothek auf die Bühne. Sollen beim Erstellen von Animationen mehrere Bilder gleichzeitig zu sehen sein, kommt Flashs Zwiebelschichteffekt (‘Onion Skinning’) zum Einsatz, der vorhergehende Bilder der Animation anzeigt, während der Entwickler das aktuelle Bild bearbeitet.
Einige ActionScript-Beispiele werden im zweiten Teil des Tutorials Basisaktionen und Buttonklicks erläutern, die zur Navigation in Flash-Filmen dienen können. Weiteres Thema ist die Steuerung eines einfachen Spiels.
Regina Müller
arbeitet als Multimedia-Programmiererin bei der a.f.i.m. gmbh in München.
iX-TRACT
- Ein großer Teil der im Web zu findenden Animationen basiert auf der Software Flash, deren aktuelle Version MX Macromedia im März freigegeben hat.
- Flash erlaubt den Import diverser Datenformate und unterstützt die Erstellung komplexer, dynamischer Webanwendungen sowohl durch eine grafische Entwicklungsumgebung als auch durch die Sprache ActionScript.
- Während die Entwicklung von Flash-Anwendungen lediglich auf Windows- und Macintosh-Rechnern möglich ist, steht der frei verfügbare Viewer für eine Vielzahl von Plattformen zur Verfügung.
