Das Patentrezept für lebendige Websites heisst Flash und kommt von Macromedia. Leider wurde Flash in der Vergangenheit oft missverstanden: Die Flash-Technologie ermöglicht weit mehr als lustige Animatiönchen. Spätestens seit Version 4 ist das vektorbasierte Animationstool ein hervorragendes Werkzeug zum Erstellen hochinteraktiver Websites - vorausgesetzt, man hat die Zeit und das Budget, die enormen Möglichkeiten der Technologie wirklich zu nutzen.
Nett gemeint, aber völlig überstrapaziert sind die sogenannten Flash-Intros: Beim Aufruf einer Website erscheint statt einer informativen Startseite zunächst ein meist absolut nichtssagender Flash-Film, in dem irgendwelche Firmenlogos wild herumtanzen. Am schlimmsten ist es für den ungeduldigen Surfer, wenn sich das Intro nicht einmal abbrechen lässt und er gezwungen ist, abzuwarten, bis die Animation endlich abgespielt ist. Unter einer lebendigen Website verstehen wir ganz klar etwas anderes.
Die folgenden fünf Praxisbeispiele zeigen, wie man eine Webseite mit Flash-Movies beleben kann. Es handelt sich dabei nicht etwa um die ausgeklügeltsten Expertentricks, sondern um einfache, aber wirkungsvolle Flash-Techniken, die jeder Anwender sofort versteht, der die Grundlagen der Flash-Bedienung intus hat.
In allen Beispielen verwenden wir die neueste Flash-Version 5, in der die integrierte Programmiersprache ActionScript stark verbessert wurde. Sie folgt nun einem ähnlichen Sprachmodell wie JavaScript, was gegenüber Flash 4 einige Änderungen mit sich bringt, vor allem was den Zugriff auf die einzelnen Elemente eines Movie betrifft. Alles in allem ist ActionScript nun konsistenter und klarer strukturiert.
Sparsam eingesetzt, sind animierte Texteffekte durchaus zu begrüssen - zum Beispiel für Titel, Aktionen oder ganz allgemein Elemente der Seite, auf die der Surfer speziell hingewiesen werden soll. Besonders interessant sieht eine transparente Textmaske aus, hinter der ein anderer Movie-Clip abläuft: Erstellen Sie zuerst ein neues Movie. Am besten sieht heller Text auf dunklem Hintergrund aus: In den Movie-Eigenschaften (Mausklick rechts auf der Movie-Fläche) stellen Sie sodann die Hintergrundfarbe auf Schwarz ein.
Auf dem ersten Layer, den wir "Titel" nennen, plazieren Sie nun den gewünschten Text mit der Textfarbe Weiss und aktivieren in den Layer-Eigenschaften (Mausklick rechts auf den Layer-Namen) die Option "Mask".
Generieren Sie einen zweiten Layer "Masken-Movie" und plazieren Sie ihn per Drag&Drop unter dem Titel-Layer. Flash markiert den Layer automatisch mit einem Pfeilsymbol als maskierten Layer.
Im Layer Masken-Movie erstellen Sie nun ein neues Symbol "Masken-Movie" vom Typ Movie Clip. Er enthält das bewegte Bild, das hinter dem Text erscheinen soll. Das kann eine Flash-Shape oder eine importierte Bilddatei sein, die mit den Flash-Tools animiert wird. Attraktiv wirken hin- und herbewegte, rotierende gemorphte oder skalierte Flächen mit Farbverläufen, Streifenmustern oder anderen Texturen.
Alternativ zur Erstellung eines neuen Movie-Clips kann auch ein bestehender Flash-Clip in den Masken-Movie-Layer importiert werden. In beiden Fällen ist darauf zu achten, dass das Masken-Movie in allen Phasen der Animation den gesamten Textbereich des Titel-Layers abdeckt. Sonst verschwindet während der Animation ein Teil des Textes.
Den animierten Titel bringen Sie entweder direkt auf der Website an oder speichern ihn als Movie-Clip, um ihn in anderen Movies mit dem Befehl "open as Library" wieder verwenden zu können.
Zahlenwerte, die für irgendeine weitere Verarabeitung benötigt werden, gibt man üblicherweise per Textfeld ein. Viel attraktiver ist die Angabe über einen Schieberegler: Per Drag&Drop lassen sich nur Movie-Clips bewegen, keine einfachen Button-Symbole. Deshalb kreieren Sie ein neues Symbol "Bewegter Knopf" vom Typ Movie-Clip, plazieren Sie dann darin den Basisknopf und zentrieren Sie ihn mit Hilfe des Align-Panels (Option To Stage) exakt in der Mitte, sonst springt er beim Drag&Drop ungewollt hin und her.
Mit nur zwei ActionScript-Befehlen wird der Knopf Drag-and-Drop-fähig. Klicken Sie hierfür den Knopf mit der rechten Maustaste an und wählen Sie die Option Actions. Es erscheint der ActionScript-Editor, in dem Sie folgenden Code eingeben:
Besonders wichtig sind die Zahlenwerte im StartDrag-Befehl. Sie bestimmen, wie sich der Knopf bewegen lässt. Unser Regler soll sich nur vertikal in einem Bereich von -100 bis 100 Pixel vom Ursprung der Stage verschieben lassen (y-Koordinaten Top und Bottom). Mit einer Null in den beiden x-Koordinaten Left und Right verhindern wir eine horizontale Bewegung.
Erstellen Sie jetzt nochmals ein neues Movie-Clip-Symbol mit Namen "Schieberegler" mit zwei Layern. Im ersten Layer plazieren Sie nun eine Instanz des bewegten Knopfs. Benennen Sie ihn mit "knopf_in_regler" und zentrieren Sie ihn. In einem dahinterliegenden zweiten Layer zeichnen Sie eine Skala mit Markierungen bei -100, 0 und 100. Bei der exakten Plazierung der Linien für die Skala sind die Funktionen Rulers und Guides hilfreich, die man über das View-Menü aktiviert.
Nun kommen wir zum Hauptmovie, das wir mit drei Layern und drei Frames aufbauen: Auf dem ersten Layer fügen wir auf allen drei Frames eine Instanz des Schiebereglers ein und benennen sie mit "regler_1". Er lässt sich ("Test Movie"-Befehl) bereits verschieben; der eingestellte Wert wird aber noch nirgends angezeigt. Auf dem zweiten Layer plazieren wir deshalb ein Textfeld im Modus dynamic text, das seine Werte aus der Variablen "reglerstand" beziehen soll (Panel Text Options).
Der dritte Layer nimmt neben dem Hintergrundbild das ActionScript zur Übertragung des Reglerstandes in eine Variable auf, das wir in Frame 2 des Movie einfügen:
Der "with"-Befehl ersetzt in Flash 5 das frührere "Tell Target", das man nicht mehr anwenden sollte. Unser Beispiel zeigt auch die neue, JavaScript-ähnliche Syntax von ActionScript, mit der sich nun alle Objekte eines Movie direkt über eine Punkt-Notation ansprechen lassen.
"_root" bezeichnet die aktuelle Flash-Timeline, aus der das Script aufgerufen wird. Die übrigen Objektnamen haben wir zuvor beim Erstellen der einzelnen Elemente des Reglers eingegeben. Die Eigenschaft "_y" gibt die aktuelle Position des Reglerknopfs in dessen lokalen Koordinaten ein. Da im Flash-Koordinatensystem positive Werte nach unten weisen, kehren wir das Vorzeichen per Minuszeichen um und runden per "int"-Anweisung gleichzeitig auf ganzzahlige Werte auf.
Der Wert der Variablen "reglerstand" sollte zu keinem Zeitpunkt undefiniert sein. Man setzt sie deshalb im ersten Frame mit dem Befehl "reglerstand = 0" auf Null.
In Flash 5 werden Variablen mit dem "="-Operator definiert. Der aus früheren Versionen bekannte Befehl "Set Variable" wird nicht mehr benötigt. Der dritte Frame schliesslich enthält als einziges den ActionScript-Befehl, um den Movie endlos ablaufen zu lassen:
Von der Windows-Oberfläche her kennen wir die Tooltips: eine Art Sprechblasen, die beim Überfahren eines Buttons mit der Maus erscheinen und die Funktion der betreffenden Schaltfläche erläutern.
Mit wenigen Drag&Drop-Actions lässt sich auch ein Flash-Movie mit derartigen Hilfetips ausstatten. Dazu wird neben dem Hauptmovie ein zweiter Movie-Clip benötigt, dessen erste zwei Frames ausser einigen ActionScript-Befehlen leer bleiben: Erzeugen Sie einen Movie-Clip namens "tooltip_clip" mit sieben Frames, zwei Frames mehr als der Hauptmovie "Buttons" enthält. Im ersten Frame bauen Sie folgende Action ein:
Mit dieser Vorgehensweise wird der Movie-Clip, den wir später im Hauptmovie mit "unsichtbar" benennen, gleich zu Beginn als Drag&Drop-Element aktiviert. Der "true"-Parameter gibt an, dass der Clip stets der Maus folgen soll, was dem "lockcenter"-Parameter von Flash 4 entspricht.
Der zweite, ebenfalls leere Frame erhält eine "stop();"-Action und bildet den Ruhezustand des Movie-Clip.
In den restlichen fünf Frames plazieren Sie in einem nächsten Schritt die gewünschten Tooltips in Form von Grafik- oder Textelementen, die zu den Buttons des Hauptmovie erscheinen sollen.
Der Hauptmovie umfasst einen Frame. Hier richten wir eine Instanz des zuvor erstellten tooltip_clip ein, die wir "unsichtbar" nennen.
Die fünf Buttons kommen ebenfalls in den ersten Frame des Hauptmovie. Jeder von ihnen erhält ein Script nach folgendem Muster:
Das "on rollover"-Statement gibt an, welcher Tooltip bei Mausberührung erscheinen soll - statt "xxx" ist hier für jeden Button das entsprechende Frame des Tooltip-Clips anzugeben. Im Rollout-Zustand kehrt der Clip zum unsichtbaren zweiten Frame zurück. Unter "on release" gibt man die Befehle an, die beim Anklicken des Buttons ausgeführt werden sollen, zum Beispiel der Aufruf einer URL oder die Verzweigung zu einer anderen Szene.
Text in Flash-Movies ist im Vergleich mit HTML-Text für hohe Ästhetik bekannt: Flash lässt beliebige Schriftarten zu und ermöglicht mehr typografische Feinheiten. Der Hauptnachteil: Bei jeder Textänderung muss das Flash-Movie editiert werden.
Ab Version 4 erlaubt Flash jedoch auch, von einem Movie aus über ein CGI-Interface Daten aus externen Quellen zu lesen (und auch zu schreiben). So kann zum Beispiel Text aus einer .txt-Datei in ein Flash-Textfeld geladen und angezeigt werden: Hierfür erstellen Sie ein Movie mit 4 Frames. Der erste Frame enthält Actions zum Initialisieren der Variablen, die den Text aufnehmen soll, und zum Laden des Textfiles:
Unser Beispiel geht von einer Datei beispiel_1.txt aus, die im gleichen Verzeichnis liegt wie das Flash-Movie. Technisch gesehen wird beim Laden der Inhalt des Textfiles in die Flash-Variable "derText" geladen. Dazu muss das Textfile mit dem Namen der Variablen beginnen, gefolgt von einem Gleichheitszeichen: "derText=".
Der gesamte Text nach dem Gleichheitszeichen wird in die Variable geladen - bis zum nächsten Ampersand-Zeichen ("&"). Das Ampersand wird als Ende einer Variablen betrachtet und sollte im Text nicht vorkommen, da ansonsten nicht korrekt zwischen Text und Anweisungen unterschieden werden kann und der Ablauf gestört wird.
Den zweiten Frame bezeichnen Sie nun mit "laden" und fügen folgende Action ein:
Das Movie durchläuft jetzt so lange eine Schleife vom zweiten zum dritten Frame, bis die Variable "derText" fertig geladen ist.
Bezeichnen Sie sodann den vierten Frame mit dem Label "ende" und versehen Sie ihn mit einer "Stop"-Action. Auf diesem Frame wird nun ein Textfeld vom Typ Dynamic Text plaziert, das den Inhalt der Variablen "derText" anzeigt. Für eine optimale Textdarstellung sollten auch die Attribute Multiline und Word Wrap aktiviert sowie Selectable deaktiviert werden.
Der gesamte geladene Text dürfte meist länger sein als der Platz, den das Textfeld zur Verfügung stellt. Wir fügen deshalb im vierten Frame Scroll-Buttons hinzu, mit denen der Text zeilenweise verschoben werden kann. Das ActionScript für den "Aufwärts"-Button lautet:
Beim zweiten Button lautet die Anweisung "…derText.scroll+1": Die Eigenschaft "scroll" einer in einem Dynamic-Text-Feld angezeigten Textvariablen gibt an, ab welcher Textzeile die Anzeige beginnen soll.
Trotz kompaktem Fileformat sind grosse Flash-Movies nicht in Sekundenbruchteilen geladen. In solchen Fällen empfiehlt sich ein sogenannter Preloader, der dem Surfer anzeigt, dass ein Ladevorgang abläuft. Dabei handelt es sich um eine zusätzliche Szene zu Beginn des Movie, die laufend überprüft, ob schon alle Frames der Hauptszene geladen sind.
Unser Beispiel zeigt ein Movie mit 15 Frames. In Frame 1, 5, 10 und 15 wird jeweils ein grosses Bitmap-Bild geladen; grob gesehen entsprechen diese Frames also 25, 50, 75 und 100 Prozent der gesamten Datenmenge.
Erstellen Sie hierfür die zwei Szenen "preloader" und "hauptszene"; in der Hauptszene bringen Sie die grossen Bilder und alle weiteren gewünschten Elemente unter. Der Einfachheit halber machen wir die Preloader-Szene ebenfalls 15 Frames lang.
Kreieren Sie weiter vier Symbole (Grafik oder Movie-Clip) zur Anzeige der vier Ladezustände 25, 50, 75 und 100 Prozent.
Jetzt definieren Sie den ersten Frame der Preloader-Szene als Keyframe und benennen ihn mit dem Label "25prozent". Nun brauchen Sie noch das 25-Prozent-Symbol und folgendes ActionScript einzufügen:
Ganz wie beim ersten Schritt verzweigen Sie nun in Frame 9 auf den Frame "50prozent" zurück. Das Label "75prozent" kommt zum Frame 10, und das zugehörige ActionScript wird analog zum bisherigen Prozedere aufgebaut.
In Frame 15, wenn also alle Frames der Hauptszene geladen sind, wird im ActionScript dann schliesslich die Hauptszene aufgerufen.
Gerade weil sich der Aufwand für die Anfertigung einer Preloader-Sequenz im Rahmen hält, sollte man den Site-Besuchern diesen Komfort unbedingt bieten.
