vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbacknächstes Kapitel


Tag 16

Animationen

Die Erstellung von Animationen ist zweifelsohne eine der faszinierendsten Aufgaben eines Webdesigners. Grund genug, diesem Themen ein eigenes Kapitel zu widmen und Sie mit verschiedenen Techniken zur Erstellung von Animationen bekannt zu machen.

Die Themen heute

16.1 Animationen

Die Grundform der Animation ist eine Folge von Bildern, die nacheinander angezeigt werden.

Für die Erstellung von Animationen mit bewegten Elementen gibt es wieder unterschiedliche Techniken:

In Webseiten kann man solche Animationen auf verschiedene Weisen einbinden:

Darüber hinaus erlaubt uns DHTML auch noch andere Formen der Animation, die darauf beruhen, dass man absolut positionierte HTML-Elemente via CSS-Positionierung und JavaScript verschieben kann. So kann man

Die folgenden Abschnitte sollen Ihnen einen kleinen Überblick geben und Sie in die wichtigsten Animationstechniken einführen.

16.2 GIF-Animationen

GIF-Animationen sind Frame-Animationen, das heißt, eine Folge von Bildern wird Bild für Bild hintereinander abgespielt. Um GIF-Animationen erstellen zu können, braucht man

Bildwechsler und einfache Animationen mit ImageMagick

ImageMagick ist eine Sammlung von Konsolenprogrammen zur Grafikbearbeitung. Wegen der fehlenden grafischen Benutzeroberfläche ist die Bedienung etwas gewöhnungsbedürftig, aber dafür stehen die Programme kostenfrei für fast alle Plattformen zur Verfügung.

Die ImageMagick-Programmsammlung kann von www.simplesystems.org/ImageMagick heruntergeladen werden.

Nachdem Sie ImageMagick heruntergeladen und installiert haben (siehe begleitende Dokumentation), brauchen Sie nur noch in einem geeigneten Grafikprogramm die Bilder für die Frames zu erstellen, und schon kann es losgehen.

Für das folgende Beispiel verwenden wir drei Photos mit Ansichten amerikanischer Städte (siehe Abbildung 16.2).

Abbildung 16.2:  Einzelne Frames für den Bilderwechsler

Die einzelnen Frames haben alle den gleichen Namen, plus einer Indexnummer. Für die Arbeit mit dem ImageMagick-Tool ist dies ganz wichtig. Um aus diesen drei Frames eine GIF-Animation zu machen, gehen Sie wie folgt vor:

  1. Kopieren Sie die einzelnen Bilder in das Verzeichnis, in dem die ImageMagick-Tools (EXE-Dateien) installiert wurden.
  2. Rufen Sie eine Konsole auf (unter Windows Start/Programme/MSDOS- Eingabeaufforderung) und wechseln Sie in dieser in das Installationsverzeichnis von ImageMagick.
  3. Rufen Sie das convert-Tool wie folgt auf:
    > convert -loop 0 -delay 100 usa*.jpg usaAnim.gif

Das erste Argument, -loop 0, gibt an, wie oft die Animation wiederholt werden soll. Der Wert 0 steht hierbei für eine endlose Wiederholung.

Der zweite Argument, -delay 100, gibt an, wie viele Hundertstelsekunden jedes Bild angezeigt werden soll.

Das dritte Argument gibt die Frames an. usa*.jpg bewirkt, dass alle JPG-Bilder, deren Dateinamen mit usa anfängt und die im aktuellen Verzeichnis stehen, aufgenommen werden. Die Reihenfolge der Bilder in der Animation richtet sich nach der lexikographischen Reihenfolge ihrer Dateinamen (in unserem Beispiel also nach den auf das Präfix usa folgenden Nummern).

Schließlich geben wir noch den Namen der zu erzeugenden Animationsdatei an (hier usaAnim.gif).

Abbildung 16.3:  Aufruf von convert

Die erzeugte GIF-Datei können wir in ein Verzeichnis auf dem Webserver kopieren und per <img>-Tag in eine Webseite einbinden:

<img src="usaAnim.gif" alt="Animation" /> 

Auf die gleiche Weise kann man mit Hilfe des convert-Tools zeichentrickähnliche Animationen, Übergänge oder Ähnliches erstellen.

Animationen und Sprites mit dem Ulead GIF-Animator

Wer unter Windows arbeitet, kann zwischen einer Vielzahl von Shareware-Programmen zur Erstellung von GIF-Animationen wählen. Eines der populärsten und leistungsfähigsten ist der Ulead GIF-Animator. Von www.ulead.com können Sie sich eine Probeversion (Download/Trial-Link) herunterladen.

Einfache Frame für Frame-Animationen

Sofern Sie die einzelnen Frames für die Animation bereits erstellt haben, ist die Erzeugung der GIF-Animationsdatei mit dem Ulead GIF-Animator kein Problem mehr.

  1. Starten Sie die Software.
  2. Beginnen Sie eine neue Animation mit dem Befehl File/New/Document.
  3. Laden Sie Bilder mit Hilfe des Menübefehls Layer/Add Images.
  4. Korrigieren Sie gegebenenfalls die Reihenfolge der Bilder, indem Sie den Frame eines Bildes im linken Arbeitsbereich anklicken und den markierten Frame dann mit Hilfe der Befehle Layer/Move Layer Up und Layer/Move Layer Down verschieben. (Ulead spricht von Layers statt von Frames.)
  5. Legen Sie über die Eigenschaft delay die Anzeigedauer für die einzelnen Bilder fest (in Hundertstelsekunden). (Wenn die Werkzeugleiste mit den Bildeigenschaften nicht auf Ihrem Bildschirm angezeigt wird, rufen Sie den Befehl View/Attribute Toolbar auf).
  6. Legen Sie die Häufigkeit der Wiederholungen fest. Klicken Sie im linken Arbeitsbereich auf den Eintrag Global Information und setzen Sie dann in der Attribute-Werkzeugleiste die Eigenschaft infinite (endlos) beziehungsweise geben Sie darunter die Anzahl der Wiederholungen an.
  7. Optimieren Sie die Frames. Wählen Sie im rechten Arbeitsbereich die Registerkarte Optimize und klicken Sie auf Optimize now.
  8. Speichern Sie die GIF-Datei.

    Abbildung 16.4:  Bearbeitungsstand nach Schritt 5

Mit Ulead können Sie aber auch Animationen mit Sprites erzeugen.

Animationen mit Sprites

Als Ausgangsmaterial für die folgende Animation dient uns die Kopf-Clipart aus dem vorangehenden Abschnitt und eine kleine selbstgezeichnete Fliege. In der GIF-Animation soll die Fliege um den Kopf herumfliegen.

Abbildung 16.5:  Die Ausgangsbilder

Beide Bilder hätte man übrigens auch im Ulead GIF-Animator erstellen können, aber so können wir Ihnen die Bilder auf der Buch-CD zur Verfügung stellen.

Bilder laden

  1. Beginnen Sie eine neue Animation mit dem Befehl File/New/Document.
  2. Laden Sie mit Hilfe des Menübefehls Layer/Add Images zuerst das Bild kopf.gif und dann das Bild fliege.gif.

Korrigieren Sie gegebenenfalls die Reihenfolge der Bilder, indem Sie den Frame eines Bildes im linken Arbeitsbereich anklicken und den markierten Frame dann mit Hilfe der Befehle Layer/Move Layer Up und Layer/Move Layer Down verschieben.

Wenn Sie einen Frame löschen wollen, markieren Sie ihn im linken Arbeitsbereichfenster und rufen Sie den Menübefehl Edit/Delete auf.

Bildeigenschaften kontrollieren und ändern

Nachdem Sie fliege.gif geladen haben, werden Sie unter Umständen enttäuscht sein, dass man die Fliege gar nicht erkennen kann, da der transparente Hintergrund der Fliege durch den globalen schwarzen Hintergrund ersetzt wird.

Abbildung 16.6:  Bildhintergrund und globaler Hintergrund passen nicht

  1. Klicken Sie dann links auf den Eintrag Global information und wählen Sie in der Attribute-Werkzeugleiste als Hintergrundfarbe (background color) den Index der weißen Farbe.

Sie können die Hintergrundfarbe auch über die Palette auswählen. Falls die Farbpalette nicht angezeigt wird, rufen Sie zuerst den Befehl View/Color Toolbar auf. Klicken Sie dann auf das Farbfeld neben dem Index-Feld für die Hintergrundfarbe. Wenn Sie jetzt die Maus über die Farbpalette bewegen, verwandelt sich der Mauszeiger in eine Pipette und Sie können eine Farbe durch Klick mit der Pipette auswählen.

Klicken Sie dann auf den Eintrag des kopf-Frames. Dieser verwendet per Voreinstellung keine transparente Farbe. Wenn Sie wollen, können Sie dem Frame aber über die Option Transparent index eine transparente Farbe zuweisen.

Klicken Sie zum Schluss noch einmal auf den fliege-Frame. Die Fliege sollte dank der Änderung der globalen Hintergrundfarbe jetzt gut zu erkennen sein.

Vorschau und Platzierung von Sprites

Sie haben immer noch das fliege-Frame markiert. Klicken Sie jetzt im rechten Arbeitsbereich auf den Reiter Preview. Ulead spielt die Animation auf dem derzeitigen Arbeitsstand ab, das heißt, Sie müssten jetzt den Kopf mit einer blinkenden Fliege über der Nasenspitze sehen.

Beachten Sie, dass die Frames nicht mehr im Wechsel eingeblendet werden. Dies liegt daran, dass die Frames unterschiedliche Bildgrößen haben. Der erste Frame wird daher als Hintergrund verwendet.

Die Fliege soll vom linken Ohr (im Bild rechts) zum unteren Teil der Nase fliegen. Wir müssen die Fliege also auf ihre Ausgangspostion am linken Ohr verschieben.

  1. Wechseln Sie zum Register Compose. Klicken Sie dann auf das Bild der Fliege und verschieben Sie es mit gedrückt gehaltener Maustaste zu der Position, an der ungefähr das linke Ohr des Kopfes liegt.

Alternativ können Sie die Position auch über die Felder X-Offset und Y-Offset aus der Attribute-Werkzeugleiste setzen. Gute Werte sind X-Offset gleich 81 und Y-Offset gleich 35.

Abbildung 16.7:  Die platzierte Fliege

Frames kopieren und Sprites bewegen

Als Nächstes wollen wir neun Kopien des Fliegen-Frames anlegen. In jedem dieser Frames soll die Fliege ein wenig weiter nach links geflogen sein, bis sie in der neunten Kopie unter der Nase angekommen ist.

Eine Möglichkeit, die neuen Frames zu erstellen, wäre, den fliege-Frame zu markieren, dann über die Zwischenablage (Befehle Edit/Copy und Edit/Paste Image) zu kopieren, neun Mal einzufügen und die Fliege in jedem Frame neu zu positionieren. Man kann sich diese Arbeit aber auch ein wenig erleichtern.

  1. Markieren Sie den fliege-Frame und rufen Sie den Befehl Edit/Duplicate auf. In dem erscheinenden Dialogfenster geben Sie die Anzahl der anzufertigenden Kopien (9) und die Verschiebung des Sprites pro Kopie ein (wir lassen hier nur um 6 Pixel nach links verschieben).

    Abbildung 16.8:  Sprite kopieren und verschieben

  2. Gehen Sie die einzelnen Frames dann durch und ziehen Sie die Fliege jeweils ein wenig mehr oder weniger nach unten, so dass sie in einer Wellenbewegung vom Ohr zur Nase fliegt. Im letzten Frame soll die Fliege halb über der Nase liegen.

So wie die Animation jetzt konfiguriert ist, wird die Fliege auf jeder Position eingezeichnet und bleibt eingezeichnet. Damit die vorangehenden Positionen automatisch gelöscht werden, könnte man die fliegen-Frames zusammen markieren und ihnen im Feld How to remove die Option To Previous State zuweisen. Doch leider wird diese Option nicht von allen Browsern unterstützt. Besser ist es, wenn wir die einzelnen Sprites wieder mit dem Hintergrundbild zu normalen Frames verwandeln.

Bilder/Frames verschmelzen

  1. Zuerst fertigen Sie mit Hilfe des Befehls Edit/Duplicate 9 Kopien des kopf-Frames an (natürlich ohne Verschiebung).
  2. Dann rufen Sie den Befehl Layer/Merge Images auf und wählen im erscheinenden Dialogfeld den ersten kopf- und den ersten fliegen-Frame aus ((Strg)-Taste beim Anklicken gedrückt halten). Aktivieren Sie die Option Replace original image layers, so dass die markierten Frames nach dem Verschmelzen gelöscht werden. Drücken Sie auf OK.
  3. Verfahren Sie analog mit allen neun kopf/fliege-Pärchen.

In Frames zeichnen

Den letzten Frame, in dem die Fliege halb über der Nase liegt, müssen wir von Hand ein wenig nachkorrigieren.

  1. Markieren Sie den Frame (sollte jetzt 10: Merged Layer heißen) und wechseln Sie zur Edit-Registerkarte.

Anzeigedauer für die Bilder festlegen

In der Attribute-Werkzeugleiste können Sie über die delay-Eigenschaft festlegen, wie lange der ausgewählte Frame angezeigt werden soll (in Hunderstel Sekunden). Sollen mehrere Frames die gleiche delay-Eigenschaft zugewiesen bekommen, kann man die Frames gemeinsam markieren (durch Gedrückthalten der (Strg)-Taste) und dann die delay-Eigenschaft einmal für alle markierten Frames einstellen.

  1. Setzen Sie die delay-Eigenschaft für die einzelnen Bilder auf 0.4 Sekunden (40 Hunderstel).

Abschlussarbeiten

Zum Abschluss der Animation brauchen wir noch einen Kopf ohne Fliege, der den Teil der Animation darstellt, in dem die Fliege hinter dem Kopf zurück zum Ohr fliegt.

  1. Markieren Sie den letzten Frame und fügen Sie dann mit Hilfe des Menübefehls Layer/Add Images das Bild kopf.gif am Ende der Frames-Liste ein.
  1. Legen Sie die Häufigkeit der Wiederholungen fest. Klicken Sie im linken Arbeitsbereich auf den Eintrag Global Information und setzen Sie dann in der Attribute-Werkzeugleiste die Eigenschaft infinite (endlos) beziehungsweise geben Sie darunter die Anzahl der Wiederholungen an.
  2. Optimieren Sie die Frames. Wählen Sie im rechten Arbeitsbereich die Registerkarte Optimize und klicken Sie auf Optimize now.
  3. Speichern Sie die GIF-Datei.
  4. Setzen Sie eine Webseite auf, in der Sie die GIF-Animation einbinden. Testen Sie die Webseite in den verschiedenen Browsern.

Listing 16.1: fliegenAnim.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>GIF-Animation</title>
</head>

<body>
<h1>Mit Sprite erstellte Animation</h1>

<div style="margin-left: 100px">
<img src="fliegenAnim.gif" alt="Animation" />
</div>

</body>
</html>

Weitere Quellen

Im Internet gibt es eine Vielzahl von Quellen für GIF-Animations-Software oder auch fertige und frei verfügbare GIF-Animationen. Starten Sie einfach Ihren Browser, steuern Sie eine Suchseite an (yahoo, lycos, fireball, etc.) und suchen Sie nach Begriffen wie GIF oder GIF-Animation.

16.3 JavaScript-DHTML-Animationen

Von DHTML, oder »dynamischem HTML«, sprechen wir, wenn wir mit JavaScript auf den HTML-Code einer Webseite zugreifen und so das Erscheinungsbild der Webseite beziehungsweise einzelner HTML-Elemente verändern. Von DHTML im engeren Sinne sprechen wir, wenn wir JavaScript mit HTML/CSS-Techniken zur Positionierung und Sichtbarkeitseinstellung von HTML-Elementen kombinieren.

Ein erstes Beispiel dazu haben Sie bereits in Abschnitt 10.7 bei der Implementierung dynamischer Listen gesehen. In diesem Abschnitt wollen wir Ihnen am Beispiel einer kleinen Hai-Animation weitere DHTML-Techniken vorstellen.

Obwohl wir in diesem Abschnitt eine zeichentrickähnliche Animation mit Bildern erstellen, ist die Animation mit Bildern keineswegs das einzige Einsatzgebiet für DHTML. Mit DHTML können Sie praktisch jedes beliebige Element einer Webseite verrücken, ausblenden, animieren.

Technisches Vorwissen

Um mit JavaScript beliebige Animationen oder DHTML-Anwendungen aufsetzen zu können, sollten Sie mit folgenden Techniken vertraut sein:

Von all diesen Techniken fehlt uns nur noch die letzte.

Periodische Wiederholung von Code

Die einfachste Möglichkeit, einen Code mehrfach hintereinander auszuführen, besteht in der Implementierung einer Schleife. Für die Implementierung von Animationen mit JavaScript sind Schleifen aber üblicherweise nicht sinnvoll, weil es keine vernünftige Möglichkeit gibt, zwischen den einzelnen Schleifeniterationen Pausen von festgelegter Dauer einzurichten.

Hingegen bietet uns JavaScript die Möglichkeit, eine Funktion nach Ablauf einer bestimmten Zeitspanne aufzurufen - und zwar mit Hilfe von setTimeout().

setTimeout("eineFunktion()",200);

Die window-Methode setTimeout() übernimmt als Argumente den Namen einer JavaScript-Funktion und eine Zeitangabe in Millisekunden. Nach Ablauf dieser Zeitspanne wird die übergebene Funktion aufgerufen.

Nehmen wir nun an, wir wollten ein HTML-Element alle zwei Sekunden um zehn Pixel nach rechts bewegen. Um dies mit Hilfe von setTimeout() implementieren zu können, bedarf es eines kleinen Tricks: Man definiert eine Animations-Funktion, in der man das HTML-Element um zehn Pixel verrückt. Am Ende der Funktion ruft man setTimeout() mit 2000 (gleich 2 Sekunden) als zweitem und - jetzt kommt der Trick - der Animations- Funktion als erstem Argument auf.

function animFunk()
{
// Code der HTML-Element verrückt
if (weitermachen)
setTimeout("animFunk()",2000);
}

So sorgt die Funktion selbst dafür, dass sie in regelmäßigen Abständen aufgerufen (und das HTML-Elemente immer weiter gerückt) wird. Die if-Bedingung, die den Aufruf setTimeout() kontrolliert, wird benötigt, um die Animation irgendwann abzubrechen.

Die Animation

Die Animation, die wir in diesem Abschnitt erstellen werden, zeigt eine Studie zum Fressverhalten des Weißen Hais und sollte im Internet Explorer 4/5, Netscape Navigator 4 und Netscape 6-Browser laufen.

Abbildung 16.10:  Drei Auschnitte aus der Animation

Schauen wir uns zuerst den reinen HTML-Code an:

Listing 16.2: HaiAnimation.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>Der weiße Hai</title>

<style type="text/css">
body { background-color: #cdcdcd }
#hai { position: absolute; top: 100px; left: 20px; z-index: 2 }
#opfer { position: absolute; top: 100px; left: 520px; z-index: 1 }
</style>

<script language="JavaScript">
// hier fehlt noch der Skriptcode
</script>

</head>

<body onload="animate()">

<h1>Eine kleine Animation</h1>

<div id="hai"><img src="Hai.gif" width="332" height="140" /></div>
<div id="opfer"><img src="taucher.gif" width="90" height="80" /></div>

</body>
</html>

In den letzten Zeilen fällt auf, dass die Bilder in <div>-Tags eingeschlossen wurden. Dies ist erforderlich, da der Netscape Navigator keine direkte Verschiebung von <img>- Elementen erlaubt.

Des Weiteren fällt auf, dass den <div>-Tags IDs zugewiesen wurden. Wir benötigen diese nicht nur zur Verknüpfung mit den Stylesheets aus dem Header-Bereich der Webseite, sondern auch später, um im JavaScript-Code auf den Hai und den Taucher zugreifen zu können.

Damit wären wir bei den Stylesheets. Wie Sie sehen, dienen diese dazu, die Bilder an ihre Anfangspositionen zu rücken. Die absolute Positionierung hat aber auch noch einen weiteren Effekt: Netscape Navigator speichert alle absolut positionierten Elemente in seinem layers[]-Array. Das layers[]-Array wurde zwar nie in den HTML-Standard aufgenommen und wird auch vom Netscape 6-Browser nicht mehr unterstützt, doch stellt es die einzige Möglichkeit dar, Animationen zu schreiben, die im Navigator laufen.

Beachten Sie auch die z-index-Werte, die dafür sorgen, dass der Hai über dem Taucher angezeigt wird, wenn sich beide Bilder überlagern. So können wir den Eindruck erwecken, dass der Hai den Taucher verschluckt.

Lassen Sie uns jetzt den Skript-Code durchgehen. Beim Laden der Webseite werden die Anweisungen im Skript-Tag ausgeführt.

<script language="JavaScript">

var isNav4 = false;
var isNet6 = false;
var isIE = false;

var loop = 1;

var haibilder = new Array();
haibilder[0] = new Image();
haibilder[0].src = "hai.gif";
haibilder[1] = new Image();
haibilder[1].src = "hai2.gif";

Wir haben Boolesche Variablen zur Unterscheidung der Browser definiert und auf false gesetzt. Die globale Variable loop soll die Anzahl der Iterationen zählen und die Animation nach 50 Iterationen abbrechen.

Schließlich laden wir die beiden Haidarstellungen (mit geschlossenem und offenem Maul in ein JavaScript-Array.

Wenn der Besucher der Website auf den Start-Schalter drückt, wird die JavaScript- Funktion animate() aufgerufen (siehe HTML-Code oben). Diese ruft ihrerseits als Erstes die Funktion init() auf, die feststellt, in welchem Browser die Webseite angezeigt wird und dementsprechend eine der oben definierten Booleschen Variablen auf true setzt.

function init() 
{
var brw = navigator.appName.toLowerCase();

if (brw.indexOf("microsoft") != -1) // Internet Explorer
{
isIE = true;
}
else if (brw.indexOf("netscape") != -1) // Netscape
{
if (parseInt(navigator.appVersion) < 5) // Navigator 4
{ // oder früher
isNav4 = true;
}
else // Netscape 6
{ // oder später
isNet6 = true;
}
}
else
{
alert("Unbekannter Browser, Animation wird vermutlich nicht funktionieren");
}
}

Damit wären wir bei der eigentlichen Animationsfunktion angelangt. Nach dem Aufruf von init() bewegt diese Hai und Taucher um einen Schritt weiter.

function animate()
{
init();

if(isIE)
{
document.all.hai.style.left = 20 * loop + "px";
document.all.opfer.style.top = 100 + 2*loop + "px";
document.all.opfer.style.left = 520 + 2*loop + "px";
}
else if (isNav4)
{
document.layers["hai"].left = 20 * loop;
document.layers["opfer"].top = 100 + 2*loop;
document.layers["opfer"].left = 520 + 2*loop;
}
else
{
var vhai = document.getElementById('hai');
vhai.style.left = 20 * loop + "px";

var vopfer = document.getElementById('opfer');
vopfer.style.top = 100 + 2 * loop + "px";
vopfer.style.left = 520 + 2 * loop + "px";
}

Die neuen Positionen werden als absolute Positionen berechnet. Der Einbau der Schleifenvariablen loop sorgt dafür, dass die Positionen von Iteration zu Iteration weiter vorgerückt werden. Für alle drei Browser erfolgt die Positionierung über die Eigenschaften top und left, die Browser unterscheiden sich allerdings darin, wie man auf diese Positionen zugreifen kann.

Im Internet Explorer nutzen wir die Tatsache, dass alle HTML-Elemente unter der proprietären document-Eigenschaft all verfügbar sind und über ihre ID - sofern sie über eine solche verfügen - angesprochen werden können. Die Eigenschaften top und left sind im Internet Explorer die CSS-Stylesheet-Eigenschaften und werden daher über das style-Unterobjekt angesprochen.

document.all.hai.style.left   = 20 * loop + "px";

Im Netscape Navigator werden die absolut positionierten Elemente in das proprietäre layers-Array eingetragen und können mit ihrer ID als Index angesprochen werden. Der Navigator unterstützt keine CSS-Stileigenschaften, verfügt aber ebenfalls über Eigenschaften top und left, die man zur Positionierung verwenden kann (man hängt dann aber keine Einheit an den Zahlenwert an!).

document.layers["hai"].left   = 20 * loop;

Der Netscape 6-Browser unterstützt wie der Internet Explorer die CSS-Stileigenschaften und das style-Unterobjekt. Allerdings muss man sich für den Zugriff auf die HTML- Elemente der DOM-Methoden, hier getElementById() bedienen.

var vhai = document.getElementById('hai');
vhai.style.left = 20 * loop + "px";

Jetzt sind beide Bilder vorgerückt. Als Vorbereitung auf die nächste Iteration inkrementieren wir den internen Zähler loop:

   ++loop;

Um die Animation ein wenig interessanter zu machen, tauschen wir im Internet Explorer und im Netscape 6-Browser nach 10 Iterationen das Hai-Bild (der Hai reißt dann das Maul auf).

   if((loop > 10 && loop < 15) && (isIE || isNet6) )
{
document.images[0].src = haibilder[1].src;
}

Nach 15 Iterationen ist der Hai so weit vorgerückt, dass er den Taucher halb verdeckt. Damit der Taucher später nicht wieder hinter dem Hai auftaucht, verbergen wir nach 15 Iterationen das Taucher-Bild, indem wir die visibility-Eigenschaft auf hidden (verborgen) setzen. Wie zuvor bei der Positionierung müssen wir dabei für die verschiedenen Browser unterschiedliche Wege gehen.

Im Internet Explorer und im Netscape 6-Browser schließen wir danach auch noch das Maul des Hais.

   if(loop > 15)
{
if(isIE)
{
document.all.opfer.style.visibility = "hidden";
}
else if (isNav4)
{
document.layers["opfer"].visibility = "hidden";
}
else
{
var vopfer = document.getElementById('opfer');
vopfer.style.visibility = "hidden";
}

if (isIE || isNet6)
document.images[0].src = haibilder[0].src;
}

Damit wären wir am Ende der Funktion. Jetzt müssen wir nur noch dafür sorgen, dass die animate()-Funktion so lange weiter aufgerufen wird, bis ca. 50 Iterationen durchlaufen sind. Dafür würde im Grunde eine if-Bedingung genügen. Wir wollen den Hai aber in der mittleren Bewegungsphase, wenn er das Maul aufreißt, schneller schwimmen lassen. Daher rufen wir setTimeout() in Abhängigkeit von der Iteration (Wert in loop) mit verschiedenen Zeitangaben auf.

  if(loop < 8)
setTimeout("animate()",200);
else if (loop < 18)
setTimeout("animate()",100);
else if (loop < 50)
setTimeout("animate()",200);
}
</script>

Damit hätten wir Ihnen nun gezeigt, wie man CSS-StyleSheets zur Animation nutzen kann. Die schwierigste und lästigste Arbeit ist dabei zweifelsohne die Unterstützung der verschiedenen Browser - und dabei kann man noch nicht einmal sicher sein, ob die Animation in den nächsten Browserversionen auch noch lauffähig ist. Es bleibt aber zu hoffen, dass sich die großen Browser mehr und mehr dem DOM-Standard annähern (Netscape hat dies in seinem Netscape 6-Browser ja schon getan) und wir uns die Fallunterscheidungen in baldiger Zukunft sparen können.

JavaScript/DHTML versus GIF-Animationen

GIF-Animationen, sofern sie gut gemacht sind, laufen meist schneller und weniger ruckhaft als vergleichbare JavaScript-Animationen. Mit JavaScript kann man dafür

16.4 Java-Animationen

Ich hoffe, Sie haben es nicht versäumt, Kapitel 15 über die Erstellung von Java-Applets zu lesen. Denn ohne Grundwissen über den Aufbau von Applets, die Applet- Standardmethoden, die Auswertung von HTML-Parametern und die grundlegende Java- Syntax werden Sie in diesem Abschnitt nicht viel verstehen. Sie haben Kapitel 15 gelesen? Na prima, dann können wir uns gleich auf ein neues Konzept stürzen: die Threads.

Threads

Das englische Wort »Thread« bedeutet soviel wie »Faden«. Wenn man diesen Faden als einen Handlungsfaden auffasst, bekommt man schon eine ganz gute Ahnung davon, worum es bei der Thread-Programmierung geht. Normalerweise besteht ein Applet (wie im Übrigen jedes beliebige Programm) aus einem einzigen Handlungsfaden, der beim Programmstart aufgenommen und Anweisung für Anweisung verfolgt und ausgeführt wird.

Manchmal wäre es aber von Vorteil, wenn ein Programm zwei Aufgaben gleichzeitig erledigen könnte. Schauen wir uns ein Beispiel aus der täglichen Praxis an. Sie sitzen an Ihrem Computer und bearbeiten in Ihrem Textverarbeitungsprogramm ein größeres Dokument. Das Textverarbeitungsprogramm verfügt über einen einzelnen Handlungsfaden, der ausgeführt wird, während Sie mit dem Programm arbeiten. Jetzt wollen Sie das Dokument auf dem aktuellen Bearbeitungsstand ausdrucken. Das Textverarbeitungsprogramm muss das Dokument (falls es sehr umfangreich ist und der Drucker nur über wenig eigenen Speicher verfügt) häppchenweise aufbereiten und an den Drucker schicken. Wenn Ihr Textverarbeitungsprogramm nicht threadfähig ist, konzentriert es sich jetzt ganz auf die Bearbeitung der Druckausgabe und Sie haben keine Chance, den Text, während er gedruckt wird, weiter zu bearbeiten - älteren Windows- Anwender dürfte ein solches Szenario wohl bekannt sein. ;-) Ist das Programm dagegen threadfähig, erzeugt es für das Ausdrucken einen neuen Thread. Dieser neue Thread oder Handlungsfaden bearbeitet die Druckerausgabe. Der Hauptthread des Programms wird davon nicht beeinträchtigt und kann weiter ausgeführt werden, das heißt, Sie können während des Druckens mit dem Programm normal weiter arbeiten.

Threads und das Betriebssystem

Multithreading ist nicht nur eine Frage der Implementierung eines Programms, sondern auch eine Frage des Betriebssystems. Dieses muss dafür ausgelegt sein, mehrere Programme oder Threads1 gleichzeitig ausführen zu können. Den Begriff »gleichzeitig« darf man dabei nicht zu wörtlich nehmen, besser wäre es von quasi gleichzeitig oder quasiparallel zu reden.

Wenn ein Thread ausgeführt wird, belegt es den Prozessor des Rechners. Hier, im Prozessor, wird der Code des Threads abgearbeitet und ausgeführt. Hat ein Rechner nur einen einzigen Prozessor, kann aber auch immer nur ein Thread gleichzeitig ausgeführt werden. Wie ist dann aber die gleichzeitige Ausführung von mehreren Threads möglich?

Wann immer ein Thread gestartet wird, nimmt das Betriebssystem den Thread in Empfang und reiht ihn in eine schön geordnete Warteschleife ein. Das Betriebssystem geht die Warteschleife in einem endlosen Zyklus durch, greift sich einen nach dem anderen die Threads heraus und stellt ihnen für eine bestimmte Zeit den Prozessor zur Verfügung. Während ein Thread über den Prozessor verfügt, wird sein Code ausgeführt. Nach kurzer Zeit klopft dann aber das Betriebssystem an, gibt Bescheid, dass die Zeit abgelaufen ist, und teilt dem nächsten Thread den Prozessor zu, während sich der alte Thread wieder in die Warteschleife einreiht. So werden die einzelnen Threads nacheinander immer Stück für Stück ausgeführt. Ist der Rechner schnell genug, läuft diese häppchenweise Ausführung der Threads aber so schnell ab, dass der Anwender gar nichts davon merkt, sondern das Gefühl hat, dass die einzelnen Threads (oder Programme) parallel ausgeführt werden.

Diese quasiparallele Ausführung ist eine Eigenschaft des Betriebssystems. Multithreadfähige Betriebssysteme sind Unix/Linux sowie Windows 95/98/NT/2000, aber nicht Windows 3.x. Die Aufspaltung eines Programms in mehrere Threads ist dagegen eine Frage der Implementierung des Programms.

1

    Soweit es die parallele Ausführung betrifft, gibt es im Grunde keinen Unterschied zwischen Programmen und Threads. Ein Programm ist in diesem Sinne einfach ein Hauptthread mit keinem, einem oder mehreren weiteren Threads.

Threads für Java-Applets

Wenn wir Animationen in Java-Applets implementieren, nutzen wir die Möglichkeiten der Thread-Programmierung. Zum einem können die Animationen dann parallel zum Hauptthread des Applets ausgeführt werden, zum anderen können wir mit Hilfe der für Threads verfügbaren Methoden die Animationen gezielt starten, zeitweise anhalten oder ganz stoppen.

Thread-Programmierung in Java

In Java gibt es zwei Möglichkeiten, Threads zu implementieren:

Die Klasse Thread

Die Realisierung eines Threads ist zunächst ganz einfach. Man leitet eine eigene Klasse von Thread ab

class MeineKlasse extends Thread
{

und erbt dadurch eine Reihe von interessanten Methode, die zur Steuerung eines Threads benötigt werden (siehe Tabelle 16.1).

Methode

Beschreibung

run()

Diese Methode ist das Herz des Threads. Hierhin gehören alle Anweisungen, die er während seines Lebens ausführen soll. Die run()-Methode bestimmt auch die Lebensdauer des Threads: wenn sie beendet wird, endet auch der Thread. Die run()-Methode dürfen Sie nicht direkt aufrufen, da dann kein neuer Thread im Betriebssystem angelegt wird.

start()

Diese Methode rufen Sie als Programmierer auf, um einen Thread zu starten. Es werden einige interne Initialisierungen durchgeführt und dann run() aktiviert.

boolean isAlive()

Liefert true, wenn der Thread gestartet worden ist und noch am Laufen ist.

Thread currentThread()

Liefert eine Referenz auf den Thread, der gerade vom Prozessor abgearbeitet wird. Die Methode kann ohne Instanz als Thread.currentThread() aufgerufen werden.

sleep(long z)

Veranlasst, dass sich der Thread für z Millisekunden schlafen legt. Der Aufruf muss in einem try-catch Block geklammert werden. Die Methode kann ohne Instanz aufgerufen werden. In diesem Fall legt sich der den Aufruf umgebende Thread schlafen.

yield()

Der aufrufende Thread gibt freiwillig den Prozessor ab und legt sich schlafen, bis er wieder vom Laufzeitsystem den Prozessor erhält.

Tabelle 16.1: Thread-Methoden

Die Schnittstelle Runnable

Will man Applets threadfähig machen, stößt man auf das Problem, dass man die Appletklasse nicht von der Klasse Thread ableiten kann, weil sie ja bereits von der Basisklasse Applet abgleitet wird (und Java keine Ableitung von zwei Basisklassen erlaubt). Dass man Applets dennoch threadfähig machen kann, verdanken wir der Schnittstelle Runnable.

Eine Schnittstelle kann man sich vielleicht am einfachsten als eine Klasse vorstellen, in der eine oder mehrere Methoden deklariert, aber nicht definiert sind. Das heißt, die Schnittstelle gibt an, wie die Methoden heißen und welche Parameter sie übernehmen, aber sie definiert keine Anweisungsblöcke für die Methoden. Schnittstellen sind für Java-Klassen so etwas wie Zertifikate. Wenn Sie sich irgendwo als Webdesigner oder Programmierer bewerben wollen, müssen Sie nachweisen, dass Sie über Erfahrungen in Webdesign, JavaScript oder einer Programmiersprache wie Java verfügen. Dazu belegen Sie einen Kursus oder ein Studium, das Sie mit einem Zertifikat abschließen. Wenn eine Java-Klasse am Thread-Mechanismus teilhaben will, leitet sie sich von der Klasse Thread ab oder implementiert die Schnittstelle Runnable und weist sich dadurch als threadfähig aus.

Eine Klasse kann sich von beliebig vielen Schnittstellen ableiten. Man spricht dann allerdings nicht von Ableitung, sondern von Implementierung, denn eine Klasse, die eine Schnittstelle benutzt, muss alle in der Schnittstelle deklarierten Methoden implementieren (das heißt, sie muss Anweisungsblöcke für die Methoden definieren). Im Falle der Schnittstelle Runnable ist dies nur eine Methode: run().

Threadfähige Applets

Was also ist zu tun, wenn man ein Applet threadfähig machen will?

  1. Zuerst geben Sie in der Klassendefinition an, dass die Applet-Klasse die Schnittstelle Runnable implementiert.
    public class MeinApplet extends Applet implements Runnable
    {
  2. Dann definieren Sie in der Klasse die Methode run(). In den Anweisungsblock dieser Methode schreiben Sie alle Anweisungen, die ausgeführt werden sollen, wenn der Thread gestartet wird.
      public void run()
    {
    // Anweisungen
    }
  3. Bis jetzt haben Sie aber noch keinen neuen Thread. Diesen erzeugen Sie, indem Sie mit Hilfe des new-Operators ein Thread-Objekt anlegen. Dem Konstruktor der Klasse Klasse Thread übergeben Sie dabei das Schlüsselwort this, das im Code der Applet- Klasse für das Applet selbst steht. Der Java-Compiler weiß dann, dass er die run()- Methode des Thread-Objekts nicht in dem Objekt selbst, sondern in der Applet-Klasse findet.
    public class Laufschrift extends Applet implements Runnable
    {
    Thread m_thread = null;

    ...

    public void start()
    {
    if (m_thread == null)
    {
    m_thread = new Thread(this);
    ...
  4. Zu guter Letzt starten Sie den Thread, indem Sie die start()-Methode des Thread- Objekts aufrufen.
      public void start()
    {
    if (m_thread == null)
    {
    m_thread = new Thread(this);
    m_thread.start();
    }
    }

Wie dies in der Praxis aussieht, demonstriert der folgende Abschnitt.

Laufschriften (Ticker)

Das folgende Applet erzeugt eine Laufschrift, die endlos von rechts nach links über das Anzeigefeld des Applets läuft. Über spezielle Parameter kann man vom HTML-Code aus den Text, die Farben und die Schriftgröße der Laufschrift einstellen.

Listing 16.3: Laufschrift.java

// Laufschrift-Applet
import java.awt.*;
import java.applet.*;

public class Laufschrift extends Applet implements Runnable
{
Thread m_thread = null;

String m_text;
int m_breite;
int m_hoehe;
int m_hg_rot, m_hg_gruen, m_hg_blau;
int m_vg_rot, m_vg_gruen, m_vg_blau;
int m_font_groesse;
int x, y;


public void init()
{
m_text = getParameter("text");
m_breite = Integer.valueOf(getParameter("breite")).intValue();
m_hoehe = Integer.valueOf(getParameter("hoehe")).intValue();
m_hg_rot = Integer.valueOf(getParameter("hg_rot")).intValue();
m_hg_gruen = Integer.valueOf(getParameter("hg_gruen")).intValue();
m_hg_blau = Integer.valueOf(getParameter("hg_blau")).intValue();
m_vg_rot = Integer.valueOf(getParameter("vg_rot")).intValue();
m_vg_gruen = Integer.valueOf(getParameter("vg_gruen")).intValue();
m_vg_blau = Integer.valueOf(getParameter("vg_blau")).intValue();
m_font_groesse =
Integer.valueOf(getParameter("font_size")).intValue();

x = m_breite;
y = m_hoehe/2;
setBackground(new Color(m_hg_rot, m_hg_gruen, m_hg_blau));
setForeground(new Color(m_vg_rot, m_vg_gruen, m_vg_blau));
setFont(new Font("Monospaced", Font.BOLD, m_font_groesse));
}

public void start()
{
if (m_thread == null)
{
m_thread = new Thread(this);
m_thread.start();
}
}

public void stop()
{
if (m_thread != null)
{
m_thread.interrupt();
m_thread = null;
}
}

public void run()
{
while (m_thread == Thread.currentThread())
{
try
{
repaint();
Thread.sleep(100);
}
catch (InterruptedException e)
{
return;
}
}
}

public void paint(Graphics gc)
{
FontMetrics fm = gc.getFontMetrics();
gc.drawString( m_text, x, y );
x -= 5;
if( x < -fm.stringWidth( m_text ) )
x = m_breite;
}
}

Lassen Sie uns gemeinsam den Lebenslauf dieses Applets verfolgen.

Wenn eine Webseite mit diesem Applet in einen Browser geladen wird, richtet das Applet zuerst einmal Speicher für eine Reihe von Instanzvariablen ein: eine Instanzvariable m_thread für den Thread, eine Reihe von Instanzvariablen für die Argumente, die vom HTML-Code übergeben werden und zwei Instanzvariablen x und y, die angeben, wo die Laufschrift in jedem Schritt einzuzeichnen ist.

  Thread  m_thread = null;

String m_text;
int m_breite;
int m_hoehe;
int m_hg_rot, m_hg_gruen, m_hg_blau;
int m_vg_rot, m_vg_gruen, m_vg_blau;
int m_font_groesse;
int x, y;

Dann ruft der Browser die Applet-Methode init() auf.

  public void init()
{
m_text = getParameter("text");
m_breite = Integer.valueOf(getParameter("breite")).intValue();
m_hoehe = Integer.valueOf(getParameter("hoehe")).intValue();
m_hg_rot = Integer.valueOf(getParameter("hg_rot")).intValue();
m_hg_gruen = Integer.valueOf(getParameter("hg_gruen")).intValue();
m_hg_blau = Integer.valueOf(getParameter("hg_blau")).intValue();
m_vg_rot = Integer.valueOf(getParameter("vg_rot")).intValue();
m_vg_gruen = Integer.valueOf(getParameter("vg_gruen")).intValue();
m_vg_blau = Integer.valueOf(getParameter("vg_blau")).intValue();
m_font_groesse =
Integer.valueOf(getParameter("font_size")).intValue();

x = m_breite;
y = m_hoehe/2;
setBackground(new Color(m_hg_rot, m_hg_gruen, m_hg_blau));
setForeground(new Color(m_vg_rot, m_vg_gruen, m_vg_blau));
setFont(new Font("Monospaced", Font.BOLD, m_font_groesse));
}

In dieser Methode liest das Applet die HTML-Argumente ein. Ein passender HTML-Code zur Einbindung des Applets würde beispielsweise wie folgt aussehen:

Listing 16.4: Auszug aus Laufschrift.html

<applet code="Laufschrift.class" width="600" height="40">
<param name="text" value="Heute Zucchinis im Sonderangebot" />
<param name="breite" value="600" />
<param name="hoehe" value="40" />
<param name="hg_rot" value="255" />
<param name="hg_gruen" value="0" />
<param name="hg_blau" value="0" />
<param name="vg_rot" value="255" />
<param name="vg_gruen" value="255" />
<param name="vg_blau" value="255" />
<param name="font_size" value="18" />
</applet>

Der Text für die Laufschrift wird in der Instanzvariablen m_text gespeichert.

Die aktuellen Anzeigepositionen für die Laufschrift, x und y, werden so gesetzt, dass die Laufschrift am rechten Rand in mittlerer Höhe des Laufbandes (der Anzeigefläche des Applets) beginnt.

Das Setzen der Hintergrund- und Vordergrundfarbe ist etwas umständlich, da es kein einfaches Verfahren zur Umwandlung von Strings mit hexadezimalen Werten (beispielsweise »0xFF0000«, wie Sie getParameter() zurückliefern würde) in hexadezimale Integer-Werte (wie sie der Konstruktor der Klasse Color erwartet) gibt. Aus diesem Grunde übergeben wir für jeden Farbanteil der RGB-Farben einen eigenen Integer-Wert im Bereich zwischen 0 und 255.

Schließlich wird noch eine neue proportionale, fette Schrift in der angegebenen Größe erzeugt und als Standardschrift für die Applet-Ausgabe eingerichtet (Aufruf von setFont()).

Nach der init()-Methode ruft der Browser die start()-Methode auf.

  public void start()
{
if (m_thread == null)
{
m_thread = new Thread(this);
m_thread.start();
}
}

In der start()-Methode prüfen wir, ob bereits ein Thread-Objekt existiert. Wenn dies nicht der Fall ist, liefert die if-Bedingung true zurück und wir erzeugen ein neues Thread- Objekt und starten den Thread durch Aufruf seiner start()-Methode. Wie Sie aus der Einleitung zu diesem Abschnitt wissen, wird daraufhin automatisch die run()-Methode des Threads aufgerufen. Da wir dem Thread-Konstruktor das Schlüsselwort this übergeben haben, das unser Applet repräsentiert, ist dies die run()-Methode aus unserem Applet.

  public void run()
{
while (m_thread == Thread.currentThread())
{
try
{
repaint();
Thread.sleep(100);
}
catch (InterruptedException e)
{
return;
}
}
}

Die run()-Methode besteht im Wesentlichen aus einer while-Schleife, die so lange ausgeführt wird, wie das Applet angezeigt wird. In der Schleife wird das nächste Bild der Animation gezeichnet (Aufruf von repaint()). Danach wird der Thread für 100 Millisekunden schlafen gelegt (Aufruf von Thread.sleep(100);) - ansonsten würde die Schrift so schnell animiert, dass man sie nicht lesen könnte.

Kompliziert wird die Sache durch zwei Umstände:

Die run()-Methode ruft alle Zehntelsekunde die Methode repaint() auf, die ihrerseits die paint()-Methode des Applets aufruft.

  public void paint(Graphics gc)
{
FontMetrics fm = gc.getFontMetrics();
gc.drawString( m_text, x, y );
x -= 5;
if( x < -fm.stringWidth( m_text ) )
x = m_breite;
}

Die paint()-Methode lässt sich zuerst ein FontMetrics-Objekt zurückliefern, über das Sie Informationen zu der verwendeten Schrift abfragen kann. Dann zeichnet Sie den Schriftzug (Inhalt von m_text) an den Koordinaten x, y.

Damit die Schrift beim nächsten Mal weiter rechts eingezeichnet wird, wird der Wert von x anschließend um 5 verringert.

Jetzt müssen wir nur noch dafür sorgen, dass die Animation wieder von vorne beginnt, wenn die Schrift am rechten Rand entschwunden ist. Dazu lassen wir uns von der FontMetrics-Methode stringWidth() die Breite des Textes in m_text zurückliefern. Wenn x kleiner ist als die negative Breite des Textes, ist der Text ganz am linken Rand verschwunden. Dann setzen wir x zurück auf die Breite des Applet-Anzeigefeldes.

Irgendwann verlässt der Besucher die Webseite. Dann ruft der Browser die stop()- Methode des Applets auf.

  public void stop()
{
if (m_thread != null)
{
m_thread.interrupt();
m_thread = null;
}
}

In der stop()-Methode prüfen wir, ob der Thread noch ausgeführt wird. Wenn ja (if- Bedingung liefert true), wird der Thread abgebrochen (Aufruf von interrupt()) und unsere Thread-Variable m_thread setzen wir auf null. So erreichen wir, dass die run()- Methode sofort beendet wird, und die start()-Methode kann anhand des Wertes von m_thread feststellen, ob sie einen neuen Thread erstellen soll oder nicht (siehe oben).

Abbildung 16.11:  Java-Laufschrift

16.5 Flash-Animationen

Macromedia Flash ist eines der populärsten Grafikprogramme zur Erstellung interaktiver Grafiken und Animationen für das Web (obwohl es nicht unter Unix/Linux läuft). Es wäre hoffnungslos, wollten wir im Rahmen dieses Buches versuchen, Ihnen Flash mit all seinen Möglichkeiten und Konzepten in nur halbwegs angemessener Ausführlichkeit vorzustellen. Wir werden uns daher auf das Thema beschränken, das uns im Rahmen dieses Abschnitts am meisten interessieren: die Erstellung von Animationen mit Flash. Wir werden zwar auch dieses Thema nicht vollständig behandeln können, aber wir können Sie in die grundlegenden Techniken einführen, mit Ihnen zusammen erste Animationen erstellen, schauen wie man mit Hilfe von Flash die Erstellung von Animationen automatisieren kann und zum Abschluss eine schon recht komplexe Animation implementieren. Danach sollten Sie in der Lage sein, mit Flash eigene einfache Animationen aufzusetzen oder sich mit Hilfe weiterführender Literatur tiefer in Flash einzuarbeiten.

Eine aktuelle Trial-Version kann man sich von http://www.macromedia.com herunterladen.

Flash-Animationen erstellen

Als erste Animation wollen wir ein Standardbeispiel für Animationstechnik nachstellen: den hüpfenden Ball.

Abbildung 16.12:  Hüpfender Ball

Beginn einer neuen Animation

  1. Starten Sie jetzt Flash. Flash legt automatisch ein neues Arbeitsdokument namens Movie1 an.
  1. Schließen Sie alle Fenster außer dem Tools-Fenster und dem Fenster mit dem Titel Movie1 (in der deutschen Version Film1).
  2. Rufen Sie den Befehl Modify/Movie auf. Setzen Sie im Dialogfenster (siehe auch Abbildung 16.16) die Abmaße der Leinwand auf 150 px Breite (Width) mal 300 px Höhe (Height). Die Abmaße der Filmleinwand sind gleichzeitig die Abmaße der einzelnen Frames. Für unseren hüpfenden Ball ist eine schmale, hohe Leinwand bestens geeignet.
  3. Aktivieren Sie die Menüoption View/Grid/Show Grid. In der Leinwand erscheint ein Hilfsgitter, dass Ihnen das Zeichnen erleichtern kann.
  4. Speichern Sie die Animation mit Hilfe des Befehls File/Save unter dem Namen Ball1.fla.

    Abbildung 16.13:  Einrichtung der Arbeitsfläche

Das Dokumentenfenster Ball1.fla ist in zwei Bereiche geteilt:

Beide Bereiche kann man über die entsprechenden Befehle im Menü View ein- und ausblenden.

Frames zeichnen

  1. Markieren Sie in der Zeitleiste den ersten Frame.
  2. Wählen Sie im Tools-Fenster das Oval-Werkzeug aus. Klicken Sie danach mit der Maus in die Arbeitsfläche des Frames und ziehen Sie einen Kreis auf.
  3. Wählen Sie im Tools-Fenster das Oval-Werkzeug aus. Klicken Sie danach mit der Maus in die Arbeitsfläche des Frames und ziehen Sie einen Kreis auf (siehe Abbildung 16.14).
  1. Kopieren Sie den Ball in den nächsten Frame.
  1. Jetzt verschieben wir den Ball in dem zweiten Frame ein Stück nach unten (beispielsweise um zwei Gitterkästchen). Wählen Sie in der Tools-Leiste das schwarze Zeiger-Symbol. Klicken Sie danach in den Ball im Frame und verschieben Sie ihn mit gedrückt gehaltener Maus nach unten.
  2. Legen Sie auf diese Weise cirka 11 Schlüsselframes (Keyframes) an, in denen der Ball zuerst nach unten und dann wieder nach oben verschoben ist.

Um besser kontrollieren zu können, wie sich die Animation von Frame zu Frame verändert, bietet Flash Ihnen die Möglichkeit, die benachbarten Frames in aufgehellten Farben mit einzublenden. Sie müssen dazu nur unten in der Zeitleiste den Schalter Onion Skin (Zwiebelhaut) drücken und in der über den Frames gelegenen Skala einstellen, wie viele Frames die Zwiebelhautdarstellung umfassen soll (siehe Abbildung 16.15).

Abbildung 16.15:  Zwiebeldarstellung der Animation

  1. Speichern Sie die Animation (File/Save).

Animation testen

Zum Testen der Animation gibt es verschiedene Möglichkeiten:

Vielleicht läuft Ihnen die Animation zu schnell ab. Dann rufen Sie noch einmal den Befehl Modify Movie auf und ändern Sie die Frame-Rate (Anzahl der Bilder pro Sekunde).

Abbildung 16.16:  Animationseigenschaften setzen

Flash-Animationen in Webseiten einbinden

Flash-Animationen werden mit Hilfe des <object>- beziehungsweise des <embed>-Tags in Webseiten eingebettet. Sie brauchen den betreffenden Code nicht selbst aufzusetzen, lassen Sie ihn lieber direkt von Flash generieren.

  1. Speichern Sie Ihre Animation.
  2. Rufen Sie den Befehl File/Publish Settings auf.
  1. Klicken Sie dann auf den Schalter Publish.

    Abbildung 16.17:  Parameter für die Einbettung in HTML-Code

Danach finden Sie in dem Verzeichnis, in dem Sie die Flash-Animation (.fla) abgespeichert haben,

Voraussetzung ist allerdings, dass die Browser das Flash-Abspielplugin (den frei verfügbaren Flash-Player) installiert haben (das mittlerweile aber standardmäßig in den großen Browsern integriert ist).

Listing 16.5: Von Flash erzeugte HTML-Datei: ball1.html

<HTML>
<HEAD>
<TITLE>Ball1</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<!-- URL's used in the movie-->
<!-- text used in the movie-->
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs
¬/flash/swflash.cab#version=5,0,0,0"
WIDTH=150 HEIGHT=300>
<PARAM NAME=movie VALUE="Ball1.swf">
<PARAM NAME=menu VALUE=false>
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>

<EMBED src="Ball1.swf" menu=false quality=high bgcolor=#FFFFFF
WIDTH=150 HEIGHT=300 TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/
¬index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT>
</BODY>
</HTML>

Abbildung 16.18:  Flash-Animation in Browser

Das <object>-Tag enthält den Code für die Einbettung in den Internet Explorer (wobei der Flash-Player über eine eindeutige Objekt-ID spezifiziert wird). Das <embed>-Tag bindet die Animation so ein, dass sie vom Netscape Navigator und vom Netscape 6-Browser identifiziert und abgespielt werden kann. Durch die Einbettung des <embed>-Tags in das <object>-Tag wird sichergestellt, dass alle drei Browser den für sie relevanten Code finden und nur diesen ausführen.

Sie können die von Flash erzeugte Webseite weiter bearbeiten oder den Code für die Einbettung der Animation in eine andere Webseite kopieren.

Automatische Erzeugung von Zwischenbildern

Man kann sich die Erstellung von Animationen in Flash wesentlich erleichtern, indem man nur die Schlüsselframes einer Animation vorgibt und die dazwischenliegenden Frames automatisch von Flash generieren lässt. Was aber sind in diesem Sinne Schlüsselframes?

Ein Schlüsselframe ist in diesem Sinne jeder Frame, in dem die Animation (sprich die Bewegung des animierten Objekts) eine andere Richtung nimmt. Im Falle unseres hüpfenden Balls sind die Schlüsselframes schnell identifiziert: es sind

Im Folgenden werden Sie sehen, wie man die »Hüpfender Ball«-Animation durch Definition der drei Schlüsselframes und einer Technik namens Motion-Tweening erzeugt.

Neue Animation beginnen

  1. Schließen Sie die alte Animation, indem Sie den Befehl File/Close aufrufen.
  2. Beginnen Sie eine neue Animation mit File/New.
  3. Richten Sie die Animation wie im Abschnitt 16.5.1 ein.
  4. Speichern Sie die neue Animation unter dem Namen Ball2.fla.

Bewegungssequenz erzeugen

  1. Zeichen Sie wie in Abschnitt 16.5.1 einen Ball in den ersten Frame.
  1. Um den Ball von Flash animieren zu lassen, müssen wir ihn zu einem Symbol machen.

Die für eine Animation eingerichteten Symbole können Sie sich über den Befehl Window/Library anzeigen lassen.

  1. Jetzt müssen wir den Endpunkt des Motion Tweens als neuen Schlüsselframe festlegen. Klicken Sie in der Zeitleiste mit der rechten Maustaste in den - sagen wir - fünften Frame und wählen Sie den Befehl Insert Keyframe aus.
  1. Testen Sie den Motion Tween durch Drücken der (Return)-Taste.
  2. Vervollständigen Sie die Animation durch einen zweiten Motion Tween, der den Ball wieder nach oben hüpfen lässt.
  3. Speichern und exportieren Sie die Animation (siehe Abschnitt 16.5.1).

Shape Tween (Morphing)

Flash kann neben Bewegungen auch Formen animieren (Morphing). In diesem Falle gehen Sie grundsätzlich genauso vor, wie beim Motion Tween. Statt aber im End- Schlüsselframe das zu animierende Objekt zu verschieben, verändern Sie seine Form (oder zeichnen eine neue Form). Außerdem müssen Sie den Befehl Window/Panels/ Fame aufrufen und in dem erscheinenden Dialogfeld unter Tweening die Option Shape auswählen.

Komplexere Animationen mit Hintergründen und Sprites

Zum Schluss wollen wir noch eine etwas komplexere Animation erstellen. Sie soll einen von einer Fliege umschwirrten Cartoon-Kopf vor einem Sonnenuntergang zeigen. Sonnenuntergang, Kopf und Fliege werden wir jeweils auf eigenen Ebenen anlegen - so bleibt die Animation übersichtlich und wir können die Ebenen für sich bearbeiten. Für die Animation der Fliege werden wir eine weitere Variante des Motion Tweens kennen lernen: die Bewegung entlang eines Laufpfades.

Neue Animation beginnen

  1. Schließen Sie die alte Animation, indem Sie den Befehl File/Close aufrufen.
  2. Beginnen Sie eine neue Animation mit File/New.
  3. Richten Sie die Animation wie im Abschnitt 16.5.1 ein. Setzen Sie die Leinwandgröße diesmal auf 300 mal 150 Pixel.
  4. Speichern Sie die neue Animation unter dem Namen kopf.fla.

Bilder importieren

Als Hintergrund unserer Animation wollen wir das Photo eines Sonnenuntergangs verwenden. Die Bilddatei, himmel.jpg, finden Sie auf der Buch-CD.

  1. Markieren Sie in der Zeitleiste den ersten Frame.
  2. Rufen Sie den Befehl File/Import auf und wählen Sie im erscheinenden Dialogfenster die Datei himmel.jpg aus.
  3. Platzieren Sie das importierte Bild mittig im Frame.

Statische Inhalte

Das Hintergrundbild soll die gesamte Animation über unverändert bleiben. Sagen wir unsere Animation soll 15 Frames umfassen. Wir könnten jetzt 14 weitere Frames anlegen und das Hintergrundbild in jeden dieser Frames neu importieren. Wir können uns die Arbeit aber auch vereinfachen.

  1. Klicken Sie in der Zeitleiste mit der rechten Maustaste in den - sagen wir - fünfzehnten Frame und wählen Sie den Befehl Insert Frame aus (nicht Insert Keyframe wie beim Tweening)!

Neue Ebene anlegen

Über diesen Hintergrund wollen wir den Cartoon-Kopf aus kopf.gif legen. Dazu verwenden wir eine zweite Ebene.

  1. Rufen Sie den Befehl Insert/Layer auf.
  1. Markieren Sie den ersten Frame in der 2. Ebene (Layer 2).
  2. Rufen Sie den Befehl File/Import auf, um das Bild des Kopfes (kopf.gif) zu importieren.

Beachten Sie, dass Flash den importierten Kopf automatisch in alle Frames der Animation kopiert. Beachten Sie des Weiteren, dass der Hintergrund nur durchscheint, wenn das GIF-Bild des Kopfes mit transparenter Hintergrundfarbe abgespeichert ist.

Ebenen ausblenden

  1. Legen Sie mit Insert/Layer eine dritte Ebene an.
  2. Markieren Sie den ersten Frame in der 3. Ebene (Layer 3).
  3. Rufen Sie den Befehl File/Import auf, um das Bild der Fliege (fliege.gif) zu importieren.

Die schwarze Fliege sieht man nur schlecht vor dem Hintergrund des Sonnenuntergangs. Da der Hintergrund für die weitere Bearbeitung der Animation nicht wichtig ist, blenden wir ihn aus.

  1. Klicken Sie einfach in das Farbfeld der 1. Ebene (Layer 1). Das Farbfeld wechselt von ausgefüllt zu umrahmt und der Inhalt der Ebene wird in den Frames ausgeblendet.

Motion Tween entlang eines Laufpfades

Als Erstes machen wir aus der statischen Animation der Fliege einen Motion Tween.

  1. Markieren Sie die Fliege im Frame und rufen Sie den Befehl Insert/Create Motion Tween auf.
  2. Klicken Sie mit der rechten Maustaste in der Zeitleiste in den letzten (fünfzehnten) Frame und wählen Sie den Befehl Insert Keyframe aus.
  3. Verschieben Sie die Fliege im letzten Frame zur Endposition der Animation (unter der Nase).

Die Fliege soll aber nicht auf einer geraden Linie zwischen Start- und Endpunkt verschoben werden, sondern auf einer Wellenlinie. Diese Wellenlinie, den Laufpfad des Motion Tweens, müssen wir als eigene Ebene einrichten.

  1. Markieren Sie die Ebene der Fliege.
  2. Klicken Sie am unteren Rand der Zeitleiste auf die Schaltfläche Add Guide Layer.
  3. Zeichen Sie jetzt mit dem Stift-Werkzeug den Laufpfad ein.

Start- und Enddarstellung des zu bewegenden Objekts müssen direkt über Beginn und Ende des Laufpfads liegen. Wechseln Sie gegebenenfalls in die Ebene der Fliege und positionieren Sie in Start- und Ende-Frame das Kreuz des Fliegen-Objekts über dem Laufpfad.

Bewegtes Objekt in Pfadrichtung drehen

Jetzt wollen wir nur noch erreichen, dass unsere Fliege sich so dreht, wie sie fliegt.

  1. Markieren Sie die Ebene der Fliege und in der Ebene das Fliegen-Objekt selbst.
  2. Rufen Sie dann den Befehl Modify/Instance auf.
  3. Wechseln Sie im Dialogfeld zur Registerkarte Frame. Aktivieren Sie dort die Option Orient to Path und wählen Sie für Rotate den Eintrag None.

    Abbildung 16.23:  Objekte in Pfadrichtung drehen

  4. Speichern und veröffentlichen (publish) Sie die Animation.
  5. Laden Sie die von Flash erzeugte HTML-Seite in Ihren Browser.

    Abbildung 16.24:  Animation mit drei Ebenen und Laufpfad

Damit beenden wir unsere Einführung in die Erstellung von Flash-Animationen. Viele interessante Optionen und Möglichkeiten der Flash-Software konnten wir nicht ansprechen, beispielsweise das Abbremsen von Bewegungen oder das Einbinden von Sound. Wenn Sie mehr über Flash erfahren wollen, schauen Sie sich die Dokumentation an, die der Software beiliegt oder suchen Sie nach geeigneter Fachliteratur.

16.6 Zusammenfassung

Nach dem anstrengenden Java-Kapitel am gestrigen Tag haben wir uns heute ein wenig Entspannung gegönnt und ein Thema angeschnitten, für das sich wohl jeder Webdesigner begeistern kann: der Erstellung von Animationen.

Nach einer ganz kurzen Einführung in einige Grundbegriffe der Animationstechnik sind wir direkt in media res gegangen und haben uns angeschaut, wie man mit Hilfe von

Animationen für Webseiten erstellen kann.

Wir haben Ihnen Beispiele für Bildwechsler, Zeichentrickanimationen und Laufschriften gezeigt und Sie in die Arbeit mit dem Ulead GIF-Animator sowie der Flash-Software von Macromedia eingeführt.

16.7 Fragen und Antworten

Frage:
Kann man mit Java auch Animationen mit Bildern schreiben?

Antwort:
Ja, allerdings muss man dazu wissen, wie man Bilder in Applets lädt, was nicht ganz trivial ist (siehe entsprechende Fachliteratur).

Frage:
Ist Flash auch für den Macintosh verfügbar?

Antwort:
Ja, nur für UNIX/Linux-Plattformen gibt es derzeit noch keine Flash-Software.

16.8 Workshop

Der Workshop enthält Quizfragen, die Ihnen helfen sollen, Ihr Wissen zu festigen, und Übungen, die Sie anregen sollen, das eben Gelernte umzusetzen und eigene Erfahrungen zu sammeln. Versuchen Sie, das Quiz und die Übungen zu beantworten und zu verstehen, bevor Sie zur Lektion des nächsten Tages übergehen.

Quiz

  1. Nennen Sie eine Software zur Erstellung von GIF-Animationen, die für alle Plattformen verfügbar ist!
  2. Wie kann man erreichen, dass eine JavaScript-Funktion in regelmäßigen Zeitabständen immer wieder aufgerufen wird?
  3. Wie kann man Java-Applets threadfähig machen?
  4. Welche Flash-Animationstechniken haben Sie kennen gelernt?
  5. Wie bindet Flash seine Animationen in HTML-Code ein?

Übungen

Zu dem heutigen Tag gibt es keine vorgeschriebenen Übungen. Nutzen Sie die Zeit, um mit Hilfe irgendeiner der an diesem Tag beschriebenen Techniken eine eigene Animation zu implementieren.



vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbackKapitelanfangnächstes Kapitel


© Markt+Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH