Multimediakurs Leinfelder: Inhalt/Modul 8 "Animation und Co./ 8.7 Flash

(© copyright)     Letzte Änderungen:23.10.2002


Modul 8.7: Verwendung von Flash für fortgeschrittene Animationen und Visualisierungen

[an error occurred while processing this directive]Allgemeines | statische Grafiken | Daumenkino-Anim | Bewegungstweening | Formtweening |
Szenen, Grafik- und FilmsymboleSchaltflächen und Skripting | sonstiges

Zum Studium dieses Moduls benötigen Sie das Flash-5 Plugin.
Falls Sie unten verwendete Flash-Beispiele nicht angezeigt bekommen, holen Sie das Plugin hier

In Modul 6.1.7 (Einbau von Objekten mit GoLive) sind wir bereits einmal mit dem Einbau von Flash-Filmen in Berührung gekommen. Flash-Anwendungen auf Webseiten sind relativ stark verbreitet, der noch weiteren Verbreitung steht wohl nur der Preis der Macromedia-Software entgegen sowie die Tatsache, dass man sich doch relativ stark einarbeiten muss, um Flash zu verstehen. Das Ziel dieses Moduls ist es nun nicht, Ihnen ein klassisches Tutorial zu erstellen, sondern vielmehr, Sie mit den wesentlichen Möglichkeiten und der generellen Arbeitsmethodik von Flash bekannt zu machen und Ihnen dazu den Einsteig zu erleichtern. Danach können Sie entscheiden, ob Flash-Objekte für Ihre Website sinnvoll sind. Insbesondere die Zeichenoptionen erläutern wir nur kurz. Auf Animations- und Script-Möglichkeiten gehen wir jedoch ausführlicher ein.

Flash-Projekte sind jedoch nicht nur auf Webseiten verwendbar, sondern können auch als Standalone-Projekt auf CDs gepresst werden (dann sollte allerdings ins sog. Projektor-Format umgewandelt werden, siehe CD-Modul. Flash-Projekte fürs Web müssen als Flash-Player-Format exportiert werden).

Tipp: Auf der Macromedia-Website können Sie sich eine 30 Tage voll funktionsfähige Version von Flash 5 herunterladen: http://www.macromedia.com/de/software/flash/trial/

Außerdem gibt es bei Macromedia auch Video-Tutorials: http://www.macromedia.com/software/flash/productinfo/tutorials/gettingstarted/

Auch ansonsten gibt es im Web viele weitere Flash-Tutorials: Eine Suche in Google nach Flash Tutorial ergibt z.B. diese Liste.

Folgende Grundanwendungen für die Darstellung wissenschaftlicher Inhalte auf Webseiten (oder CDs) mit Flash sehe ich:

  1. Einbau von Zeichnungen im Vektorformat, d.h. mit sehr kleinen Dateigrößen
  2. Interaktive Beschriftung bzw. Informationsabruf von Grafiken
  3. Visualisierung dynamischer Abläufe (Modelle etc.) (sehen Sie dieses Beispiel)
  4. Beschriftung sowie Interaktivität für Quicktime-Videos
  5. Vertonung von Angeboten mit mp3-Files.
  6. Frage-Antwort-Projekte zum Selbsttest (ggf. auch mit Datenbankanschluss).
  7. Erstellung kompletter interaktiver Module für Unterrichtseinheiten.

Auch für optisches Gestalten von Webseiten ist Flash äußerst interessant. Ähnlich wie mit dhtml können Sie überlappende Bereiche gestalten und können die Seite zeitabhängig aufbauen lassen. Zusätzlich und im Unterschied zu dhtml sind aber auch Transparenzen und komplexe Animationen möglich.

Bevor Sie sich nun auf Flash stürzen, müssen Sie aber auch folgendes wissen:

Nachfolgend stelle ich Ihnen eine Auswahl der Arbeitsweisen und Möglichkeiten von Flash vor.

Einbettungen von Vektorgrafiken:

Sie können in Flash wie mit einem Zeichenprogramm zeichnen und diese Vektorgrafiken dann in Webseiten einbetten. Oder aber Sie kopieren Vektorgrafiken anderer Programme in Flash. Die unten abgebildete Graphik wurde mit einem einfachen vektorbasierten Graphikprogramm erstellt, über Copy and Paste in Flash eingesetzt und als .swf-Datei exportiert. Die Größe der Datei ist mit 1,7 kb unschlagbar klein.

Flash erlaubt aber auch die Erstellung komplexer Zeichnungen. Flash verfügt über beliebig viele Ebenen sowie alle bekannten Zeichenwerkzeuge incl. Bezierkurven. Sehr schön können Sie auch Beschneidungen vornehmen (das läuft etwas anders als z.B. mit Illustrator oder CorelDraw). Außerdem können Sie Text in Grafiken umwandeln, Transparenzen verwenden, Pixelbilder einladen, diese auf Wunsch auch vektorisieren und vieles mehr. Gezeichnet wird auf der sog. Bühne.

Auswahl einiger Besonderheiten:

Tipp: Sie können auch Pixelgrafiken laden und als Malfarbe z.B. für den Pinsel definieren. Damit können Sie aus Fotos tolle Umrisse gestalten. Sie können dieses Bild dann sogar mit Exportieren wieder ins jpg-Format umwandeln und als solches in Webseiten einbauen. Nebenstehende Grafik wurde so erstellt (ist zwar auch mit Photoshop möglich, aber dort deutlich mühsamer).

Nachstehend ein Screenshot der Bühne und der Werkzeugpalette von Flash. Rote Zahlen: 1 Ebenenanzeige (hier nur eine verwendet), 2 Zeitleiste (hier nur ein Bild verwendet, da keine Animation vorliegt), 3 Zeichenwerkzeugpalette, 4 Bühne (Hauptarbeitsbereich), 5 shortcuts zu diversen Paletten (die ansonsten über das Menu Fenster, Steuerung oder Modifizieren zu erreichen sind).


Eine einfache Daumenkinoanimation:

Neben stehendes ist natürlich kein Kunstwerk, aber es geht uns auch nur ums Prinzip: der Vulkan spuckt kontinuierlich Rauch aus. Die Animation besteht aus sieben gezeichneten Schlüsselbildern, die Abspielrate ist mit 6 Bilder pro Sekunde eingestellt. Wäre natürlich auch über ein animiertes GIF möglich gewesen, aber nicht mit einer Dateigröße von nur 1.4 kb! Und diese Daumenkinoanimation ist noch eine sehr speicherintensive Art für Flash.

Unten sehen Sie den Screenshot für dieses Beispiel. In der Zeitleiste sehen Sie nun 7 Schlüsselbilder dargestellt. Der Abspielknopf (rotes Rechteck mit Strichverlängerung) befindet sich auf dem sechsten Bild. Die Bilder wurden einfach jeweils kopiert und dann der Rauch entsprechend von Hand geändert. Dazu ist die "Zwiebelschalenfunktion" hilfreich, die das jeweils letzte Bild transparent durchscheinen lässt (eingeschaltete Zwiebelschalenfunktion rot eingekreist)

screenshot vulkanerstellung

Stichwortartige Kurzanleitung:


--> 8.7b Animation mit Tweening


<< Modul 8.6: JavaApplets