Komm, flash mit!

von Alexander Berndl (Ausgabe 05/1, März 2005)

 

Kasten: Links

 

Wer kennt sie nicht, die Arbeitspausen, in denen Planeten vor angreifenden Aliens beschützt, Mäuse zum Käse geführt oder Bauklötze gekonnt übereinander gestapelt werden müssen. Oder die meist bunt gehaltenen Videos, die zum Schmunzeln oder Nachdenken animieren. Nicht zu vergessen manch wunderschön gestaltete Webseite, die den Besuchern nicht selten ein "Na Bumm" entlockt. All das und noch viel mehr kann Flash - eine Software der Firma Macromedia, die sich mittlerweile als Standard-Anwendung im WWW durchgesetzt hat. Ihren Ursprung hatten die Entwicklungsumgebung und der dazugehörige Player (nach einigen Vorversionen mit dem Namen Splash) in der Version 1 im Jahre 1997, wobei damals die Funktionen und Möglichkeiten noch sehr eingeschränkt waren.

Mittlerweile ist Flash den Kinderschuhen entwachsen und präsentiert sich nun als flexibles, grafisch ansprechendes und anspruchsvolles Allzweckwerkzeug. Sein Einsatzbereich beschränkt sich längst nicht mehr auf Unterhaltung und Design - Flash kann für die unterschiedlichsten Aufgaben verwendet werden, beispielsweise als Hilfestellung beim Ausfüllen von Formularen oder zur Navigation in Plänen. Nicht zuletzt eignet sich Flash auch ausgezeichnet für didaktische Zwecke, z.B. zur Darstellung komplexer Abläufe oder zur Veranschaulichung von Statistiken und Rechenaufgaben. Im Bereich eLearning sind zahlreiche Anwendungsmöglichkeiten für Flash-Animationen denkbar (zwei preisgekrönte Beispiele finden Sie im Kasten Links); daher sind ab dem Wintersemester 2005 im Rahmen des ZID-Kursprogramms auch Flash-Schulungen geplant.

Zu den wichtigsten Features von Flash zählen die relativ einfache Anwendung sowie die Möglichkeit, eine Animation vollständig in eine Webseite zu integrieren. Sei es die Weitergabe von eingegebenen Daten an Schnittstellen jeder Art, sei es nur ein einfaches Banner oder gleich eine komplette Homepage im Flash-Design: Alles kein Problem. Die integrierte Programmiersprache Action-Script sorgt im Hintergrund für die nötige Interaktivität und Dynamik.

Flash verwendet zwei Datei-Endungen: .fla kennzeichnet die Entwicklungsversion, in der jederzeit nachgebessert werden kann - aus ihr wird die endgültige, nicht mehr editierbare .swf-Datei kreiert. Eine solche mit Flash erstellte Datei wird über die HTML-Tags object und embed in die HTML-Seite eingebettet (der Internet Explorer liest die Informationen des object-Tags, alle anderen Browser werten das embed-Tag aus).

Wann verwendet man Flash?

Will man seine Homepage grafisch ansprechend gestalten, so stößt man mit HTML - von animierten GIF-Bildern, aneinander gereihten Hintergründen und ein paar Mouse-Over-Effekten abgesehen - bald an die Grenzen der kreativen Realisierbarkeit. Webmaster, die schon einen Schritt weiter sind und ihre Homepages interaktiv oder dynamisch und noch dazu grafisch anspruchsvoll gestalten wollen, kommen um das Produkt von Macromedia kaum herum.

Ursprünglich war Flash nur dazu gedacht, Vektor-Grafiken in Animationen Speicherplatz sparend darzustellen. Mittlerweile (die Entwicklungsumgebung ist derzeit bei der Version Flash MX 2004, das Browser-Plugin Flash Player bei der Version 7.0 angelangt) hat sich das Leistungsspektrum vervielfacht, den BenutzerInnen stehen unzählige Entwicklungs- und interaktive Designwerkzeuge für die Verwirklichung ihrer Ideen zur Verfügung.

Im Internet, insbesondere im WWW, hat sich im Laufe der Zeit vieles verändert - manches hat sich verbessert und vieles ist möglich geworden. Leider bringen neue Techniken auch meist neue Auflagen mit sich, die es zwar den BenutzerInnen erlauben, einfacher, schöner oder hilfreicher durchs Web zu surfen, doch manch unzumutbare Bedingung hat einige gut gemeinte Techniken ins Aus befördert und sprichwörtlich von der Bildfläche verschwinden lassen. Ein Beispiel für eine solche Auflage sind Browser-Plugins: kleine Gratis-Downloads, die, einmal am Computer installiert, die verschiedensten Techniken zum Leben erwecken. Eines dieser Programme, das sich durchgesetzt hat und von dem angenommen werden darf, dass es auf Klienten-Seite vorhanden ist, ist das Flash Browser-Plugin. Dieses ermöglicht die Darstellung von Animationen im Browser. Der große Vorteil: Das Plugin ist für jedes Betriebssystem erhältlich. Der Nachteil: Steht das Plugin dem Browser nicht zur Verfügung, sieht der Benutzer anstelle der Flash-Seite gar nichts. Daher ist es ratsam, alternativ auch eine HTML-Variante der Homepage anzubieten.

Wann ist von Flash eher abzuraten?

Ob Sie Ihre komplette Webseite oder einfach nur den Seitenkopf mit diesem Medium bestücken, spielt keine Rolle. Abzuraten ist jedoch von Produktionen, bei denen vor allem die Funktion und weniger die grafische Aufwertung im Mittelpunkt steht - wie z.B. bei einem Gästebuch. Hier empfiehlt es sich, anstelle von Flash die HTML-Variante zu wählen und das Design mit CSS zu gestalten, da die Seite dadurch erheblich schneller lädt.

Einige Nachteile von Flash seien noch erwähnt: Zum einen die schon oben beschriebene Notwendigkeit, dass das Browser-Plugin auf dem PC installiert ist. Ebenso ist es (noch) nicht möglich, Flash-Seiten mit einem Text-Browser, einem Handheld oder einem Handy abzurufen; derartige Geräte und Software sind aber bereits in Vorbereitung. Auch Suchmaschinen können im Text solcher Seiten weder lesen noch indizieren. Für BenutzerInnen, die sich mittels Modem ins Internet einwählen, könnte auch die Größe einer umfangreichen Flash-Datei zum Handicap werden. Und leider sind noch sämtliche Betriebssysteme außer Windows und MacOS von der Möglichkeit ausgeschlossen, mithilfe von Flash MX Animationen zu erstellen (eine Version für Linux befindet sich jedoch in Vorbereitung).

Voraussetzungen

Dieser Artikel ist natürlich keine vollständige Anleitung oder Lernhilfe - vielmehr soll anhand von zwei einfachen praktischen Beispielen ein kleiner Einblick in die Anwendungsmöglichkeiten und die Bedienung von Flash gegeben werden. Um die folgenden zwei Tutorials auch praktisch nachvollziehen zu können, benötigen Sie das Programm Macromedia Flash MX 2004 (Version 7.x), welches als 30 Tage lang gültige Shareware (siehe Kasten Links) bzw. für Uni-MitarbeiterInnen als Standardsoftware erhältlich ist.

Systemvoraussetzungen sind Windows 98, 2000, XP, Windows Server 2003 oder MacOS ab Version 10.2.6, mindestens 85 MB Festplattenplatz, 16 Bit Farbtiefe und 128 MB Hauptspeicher. Die fertigen .swf- und .fla-Dateien zu den Tutorials finden Sie unter www.univie.ac.at/ZID/flash/ . Zuvor noch eine kurze Einführung in die Oberfläche des Entwickler-Programms, die sich in der neuesten Version aufgeräumt und übersichtlich präsentiert (siehe Abb. 1):

Abb. 1: Die Arbeitsoberfläche von Macromedia Flash MX

 

 

  • Wie bei den meisten Entwickler-Programmen befindet sich die eigentliche Arbeitsfläche in der Mitte (B), und rundherum gruppieren sich diverse Werkzeug-, Informations-, Bearbeitungs- und Einstellungs-Fenster.
  • Einen der wichtigsten Bereiche findet man oberhalb der Mitte: Die Zeitleiste (A). In dieser lassen sich die Animationen in einzelne Frames bzw. Bilder unterteilen und somit - ähnlich einem Videobearbeitungsprogramm - wie gewünscht "zusammenschneiden".
  • Direkt unterhalb der Arbeitsoberfläche befindet sich der Action-Script-Editor (C), welcher die bequeme Eingabe und Bearbeitung der Programmiersprache ermöglicht, die im Hintergrund diverse Abfragen, Verarbeitungen und Steuerungen regelt.
  • Ein wichtiger Bereich (in Abb. 1 nicht aufgeklappt) ist das Hilfe-Feld (D). Die Hilfe aktualisiert sich selbständig über das Internet und eignet sich aufgrund ihrer Übersichtlichkeit und der Übungsbeispiele ausgezeichnet für Anfänger zum Nachlesen. Aber auch fortgeschrittene AnwenderInnen finden hier ein umfassendes Nachschlagewerk und eine komplette Action-Script-Befehlsreferenz.
  • Im untersten Teil, mittig, finden Sie das Eigenschaften-Fenster (E), welches je nach markiertem Objekt dessen editierbare Optionen anzeigt.
  • Die linke Seite enthält - wie bei anderen Macromedia- oder Adobe-Programmen - die Werkzeuge (F). Mit diesen Instrumenten lassen sich Bereiche auswählen, Texte verfassen, Formen erstellen, ausschneiden, anmalen, füllen und vieles mehr.
  • Zu Ihrer Rechten können verschiedenste Fenster ein- oder ausgeblendet werden (G). Hiervon ist eine große Auswahl im Menü Fenster - Bedienfelder verfügbar: Farbmischer, Ausrichten, Transformieren oder Verhalten, um nur einige zu nennen.
  • Eines dieser Fenster präsentiert Ihnen den Inhalt Ihrer Bibliothek (H). Dies ist eine Ablage für sämtliche Bilder, Videos und Schaltflächen, die in der zugehörigen Animation zum Einsatz kommen. Da jedes Objekt nur einmal in der Bibliothek gesichert wird, benötigt eine mehrfache Verwendung keinen zusätzlichen Speicherplatz - die Dateigröße minimiert sich und die Animation wird schneller geladen.

Tutorial 1: Text-Animation

Ziel dieses ersten Kurses ist es, eine Text-Animation zu erstellen. Der Text soll sich dabei einblenden, skalieren, um die eigene Achse drehen und schlussendlich zentriert am Bildschirm innehalten. (Achtung: Die folgende Beschreibung orientiert sich an der Windows-Version von Flash MX. Die Mac-Version ist weitgehend identisch; anstelle der <Strg>-Taste muss hier jedoch die "Apfel"-Taste verwendet werden. Darüber hinaus sind bei MacOS X die Tasten F9 bis F11 häufig für die Betriebssystem-Funktion Exposé belegt und zeigen dann in Flash MX nicht die gewünschte Wirkung.)

Nach dem Start von Flash MX erscheint standardmäßig ein Begrüßungsbildschirm, auf dem aus diversen vordefinierten Arbeitsoberflächen oder Vorlagen ausgewählt werden kann. Um eine neue Datei zu erstellen, wählen Sie hier Flash-Dokument. Nun sehen Sie in der Mitte eine 550x400 Pixel große Arbeitsfläche. Sollten Sie mit der weißen Hintergrundfarbe nicht zufrieden sein, wählen Sie im Eigenschaften-Fenster neben Hintergrund die gewünschte Farbe aus (in unserem Beispiel ist dies ein dunkles Blau).

Als nächsten Schritt klicken Sie mit dem Textwerkzeug etwa in die Mitte der Arbeitsfläche und geben den gewünschten Text ein. Nachdem Sie diesen komplett markiert haben, können Sie im Eigenschaften-Fenster diverse Textoptionen wie Schriftart, Schriftstil und Schriftfarbe korrigieren. Wechseln Sie anschließend zum Auswahlwerkzeug (V) und klicken Sie auf den Text. Mit der Tastenkombination <Strg>+K rufen Sie nun das Fenster Ausrichten auf. Wählen Sie An Bühne ausrichten/anpassen (im Mauszeiger-Infotext zu lesen) und positionieren Sie den Text mittig mit Hilfe der Buttons Horizontal Zentriert und Vertikal Zentriert.

Anschließend (der Text muss immer noch ausgewählt sein) wandeln Sie mit der Taste F8 den Bereich in ein Symbol um, indem Sie im sich öffnenden Fenster einen aussagekräftigen Namen vergeben, die Option Grafik auswählen und mit OK bestätigen. Durch diesen Vorgang wird das nun kreierte Symbol automatisch der Bibliothek hinzugefügt. Zur Kontrolle und zur besseren Übersicht blenden Sie das Bibliothek-Fenster mit der Taste F11 ein.

Nun klicken Sie unterhalb der Zahl 30 in die Zeitleiste und erstellen mit der Taste F6 an dieser Stelle ein Schlüsselbild, welches das Ende der Textanimation definiert. Der in rot gehaltene Zeitleisten-Cursor und die schwarze Markierung sollten sich noch immer auf Bild 30 befinden. Holen Sie nun mit <Strg>+T das Transformieren-Fenster auf die Arbeitsoberfläche und setzen Sie den ersten Wert auf etwa 160% (die Option Proportion muss aktiviert sein), sodass sich der Text relativ bildfüllend über dem blauen Hintergrund präsentiert. Bestätigen Sie die Eingabe mit <Enter>.

Markieren Sie nun in der Zeitleiste wieder das erste Schlüsselbild (Bild 1) und geben Sie im Transformieren-Fenster den Wert 20% ein. Als nächsten Schritt wählen Sie - immer mit markiertem Text im Hauptfenster - im Eigenschaften-Fenster unter Farbe den Eintrag Alpha aus und korrigieren Sie den Wert ganz nach unten (-100%), sodass die Buchstaben nicht mehr zu sehen sind.

Nun kommt der wichtigste Teil: das so genannte Tweening, mit dem eine Bewegung oder eine Formveränderung zwischen zwei zuvor definierten Schlüsselbildern erstellt wird. Dazu wählen Sie - bei ausgewähltem ersten Schlüsselbild in der Zeitleiste - im Drop-Down-Feld Tween den Eintrag Bewegung aus. Zusätzlich können Sie noch unter Drehen die Option Nach rechts (also im Uhrzeigersinn) anklicken und gleich daneben mit 1mal ergänzen, um dem Text den richtigen Schwung zu versetzen. Wenn Sie nun in der Zeitleiste eine durchgehende Linie mit Pfeil auf violettem Hintergrund sehen, haben Sie alles richtig gemacht.

Als letzter Schritt muss in der Animation noch ein Haltepunkt gesetzt werden, um eine endlose Wiederholung zu vermeiden. Dies geschieht wieder durch Markierung des letzten Schlüsselbildes unterhalb der Zahl 30 in der Zeitleiste und Drücken der Taste F9, um den Action-Script-Editor aufzurufen. Klicken Sie nun im linken Teil des neuen Fensters auf die erste Rubrik Globale Funktionen, um dann den Ordner Zeitleistensteuerung durch Klick zu öffnen. Mittels Doppelklick auf den Eintrag stop wird dem Schluss der Animation ein Haltepunkt zugewiesen.

Endlich können Sie Ihr Werk in der Vorschau durch die Tastenkombination <Strg>+<Enter> bewundern. Mit der Taste F12 wird die Vorschau direkt in Ihrem Standard-Browserfenster angezeigt. Im Hintergrund erstellt und speichert das Programm automatisch im selben Verzeichnis eine .html- und eine zugehörige .swf-Datei, die sich sofort weiterverwenden lassen.

Tutorial 2: Loginseite - Ausfüllhilfe

Voraussetzung für dieses Beispiel ist Tutorial 1. Für die zweite Übung benötigen Sie zwei bereits vorbereitete Bilder: das Bildschirmfoto einer Login-Maske und das Bild eines Mauszeigers. Sie können diese vorab selbst erstellen oder unter www.univie.ac.at/ZID/flash/ herunterladen (pfeil.gif, loginseite.gif).

Beginnen Sie mit einem neuen Flash Dokument. Importieren Sie die beiden Bilder mittels Datei - Importieren - In Bühne (= Arbeitsbereich) importieren. Markieren Sie eines der beiden Bilder mit dem Auswahlwerkzeug. Öffnen Sie nun das Fenster In Symbol konvertieren, indem Sie die Taste F8 drücken. Nach Eingabe eines sprechenden Namens, Auswahl von Grafik und Bestätigung mit OK wird das Bild in ein Symbol umgewandelt, welches automatisch in der Bibliothek (Aufruf mit F11) erscheint. Wiederholen Sie diesen Vorgang mit dem zweiten Bild.

Löschen Sie nun die Bildfläche mit einem Doppelklick auf das Radiergummiwerkzeug (E) und erstellen Sie mit der Taste F6 in der Zeitleiste bei Bild 100 ein Schlüsselbild. Fügen Sie nun fünf weitere Ebenen hinzu (mittels Einfügen - Zeitleiste - Ebene) und benennen Sie diese der Reihe nach um (von oben nach unten durch einen Doppelklick auf den Ebenennamen). Anstatt der Standard-Ebenennamen vergeben Sie den Namen Aktion für die Aktionen-Bilder, Maus für den Mauspfeil, Klick für die Darstellung des Mausklicks, Text1 für die Eingabe der UserID, Text2 für die Eingabe des Passworts und schließlich Hintergrund für das Hintergrundbild, welches die Loginseite darstellt.

Markieren Sie auf der letztgenannten Ebene Hintergrund das erste Bild in der Zeitleiste mit dem Auswahlwerkzeug und ziehen Sie mittels Drag & Drop das Hintergrundbild (die Grafik Loginseite) von der Bibliothek auf die Arbeitsfläche. Denselben Vorgang wiederholen Sie auf der Ebene Maus mit der Grafik Pfeil aus der Bibliothek, die Sie auf eine freie Fläche im rechten Teil der Oberfläche platzieren.

Setzen Sie auf der Maus-Ebene mit F6 ein Schlüsselbild auf Bild 15. Verschieben Sie danach das Symbol Pfeil bis über das erste Eingabefeld. Nach Klick auf Bild 1 wählen Sie im Optionen-Fenster unter Tween den Eintrag Bewegung aus. Durch Verschieben des roten Zeitleisten-Cursors können Sie den Bewegungsablauf des Mauszeigers nachvollziehen.

Um nun einen Mausklick optisch darzustellen, erstellen Sie zuerst auf der Ebene Klick ein Schlüsselbild bei ca. Bild 17 (F6) und zeichnen Sie danach unter der Spitze des Mauspfeiles mit dem Ellipsenwerkzeug, das Sie auf der linken Seite in der Werkzeugleiste finden, einen Kreis. Zuvor können Sie noch unterhalb der Werkzeugleiste eine Hintergrund- und Rahmenfarbe wählen (im vorliegenden Beispiel wurde Farblos für den Rand und ein intensives Rot für den Hintergrund verwendet). Nach einem neuerlichen Schlüsselbild (F6) bei Bild 22, einem Klick auf Bild 23 und anschließendem Löschen mit Hilfe der <Entf>-Taste haben Sie durch kurzes Einblenden eines Kreises einen Mausklick simuliert.

Wechseln Sie nun auf die Maus-Ebene und erstellen Sie einen Bewegungs-Tween, um den Mauszeiger wieder weg zu bewegen. Dazu definieren Sie mit F6 ein Schlüsselbild bei Bild 23 (Pfeil steht im ersten Eingabefeld) und ein weiteres bei ca. Bild 33 (Pfeil steht rechts von den Eingabefeldern). Klicken Sie auf das Schlüsselbild 23 und anschließend unter Tween auf Bewegung.

Markieren Sie dann auf der Ebene Text1 das Bild 35 und fügen Sie ein Schlüsselbild ein. Setzen Sie nun das Textwerkzeug an den Anfang des UserID-Eingabefeldes. Wählen Sie im Fenster Eigenschaften die gewünschte Farbe, Größe und Schriftart aus und geben Sie anschließend den Buchstaben a ein. Drücken Sie vier Bilder danach F6 und fügen Sie die erste Zahl der UserID ein. Wiederholen Sie diesen Vorgang so lange, bis Sie die komplette UserID eingegeben haben.

Erstellen Sie nun auf der Ebene Maus nach obiger Beschreibung (beginnend bei Setzen Sie auf der Maus-Ebene mit F6 ein Schlüsselbild auf Bild 15) die Bewegung der Maus auf das zweite Eingabefeld (inklusive Klick) und wieder weg vom Feld und fügen Sie auf der Ebene Text2 ein Passwort in Form von Sternen ein. Ein letzter Transfer der Maus zum OK-Button im Bild mit anschließendem Klick (auf den Ebenen Maus bzw. Klick) beendet fast unser Werk. Einzig die in Tutorial 1 beschriebene Aktionen-Bild-Anweisung stop, mit der eine ständige Wiederholung vermieden wird, darf nicht fehlen. Achten Sie darauf, dass bei diesem Schritt das letzte Bild auf der Ebene Aktion ausgewählt ist.

Sie haben alle "Regieanweisungen" befolgt? Wenn Sie alles richtig gemacht haben, sollte Ihr Zeitleistenfenster nun in etwa der Abb. 2 entsprechen. Zeit für "Film ab!" - lehnen Sie sich entspannt zurück und drücken Sie die Taste F12, um Ihr Werk in Augenschein zu nehmen.

 

Abb. 2: Die Zeitleiste, wie sie am Ende von Tutorial 2 aussehen sollte

Links

Macromedia Flash MX 2004 Download:

Seiten zum Thema Flash (in Deutsch):

Flash-Beispielseiten:

  • www.mathe-online.at
    Mehrfach ausgezeichnete "Galerie multimedialer Lernhilfen" mit vielen Flash-Animationen.

  • www.pastperfect.at
    Preisgekröntes Webprojekt zur Geschichte des 16. Jahrhunderts.