Schnee-Animation in Flash


Darstellung einer Schnee-Animation in Flash
Wenn es in der Realität schon nicht schneit, können Sie es nun zumindest auf Ihrer Webseite schneien lassen. Erfahren Sie alles über die Erstellung einer Schnee-Animation in Flash und statten Sie Ihre Webseite mit einer jahreszeitlich passenden Animation aus.
Eine ordentliche Schneedecke auf den Feldern und Wiesen Deutschlands ist genauso selten geworden wie ein deutlicher Sieg der deutschen Nationalmannschaft im allseits beliebten Rasensport Fußball. Während der Schlitten deutscher Kinder durch den Mangel an Schnee immer häufiger im Keller verweilen muss, können wir mit Hilfe eines kurzen ActionScripts wenigstens auf Ihrer Webseite für Schnee sorgen.

Die zur Jahreszeit passende Animation kommt dabei mit einer einzigen Grafik und nur wenigen Zeilen ActionScript aus. Beginnen wir mit der Erstellung der Grafik. Da Schnee zumindest in unberührter Natur weiß ist, soll auch unsere Grafik weiß sein.
Damit die Schneeflocken auch zu sehen sind, müssen Sie zunächst die Hintergrundfarbe der Bühne über das Bedienfeld „Eigenschaften“ auf eine dunkle Farbe setzen. Zeichnen Sie anschließend auf der Bühne eine horizontale, zirka 10 Pixel lange Linie ein. Markieren und kopieren Sie die Linie. Fügen Sie die Linie anschließend an derselben Position ein. Dies erreichen Sie beispielsweise über das Kontextmenü der rechten Maustaste über den Menüeintrag „An Position einfügen“. Drehen Sie die eingefügte Linie über das Bedienfeld „Transformieren“ um 90 Grad. Wiederholen Sie das Einfügen und Drehen noch zwei weitere Male mit einem Winkel von 45 und 135 Grad. Wenn Sie alles richtig gemacht haben, erhalten Sie das folgende Gebilde:


Eine einfache Schneeflocke

Markieren Sie das gesamte Gebilde und konvertieren Sie es in ein Grafik-Symbol. Sie erhalten somit eine Instanz des Grafik-Symbols auf der Bühne. Markieren Sie diese Instanz und wandeln Sie diese in ein MovieClip-Symbol mit den Namen „Schneeflocke2“ um. Wiederholen Sie diesen Schritt. Geben Sie dem MovieClip-Symbol dieses Mal den Namen „Schneeflocke1“. Wechseln Sie anschließend in den Bearbeitungsmodus von „Schneeflocke2“. Benennen Sie die bestehende Ebene „display“ und erzeugen Sie eine weitere Ebene „path“. Die Ebene „path“ soll das Herabfallen einer Schneeflocke animieren. Da Schneeflocken nicht gerade, sondern in einem kurvigen Verlauf herabfallen, benötigen wir eine Führungsebene. Markieren Sie hierfür im Kontextmenü der rechten Maustaste den Eintrag „Führungsebene“, um die Ebene in eine Führungsebene umzuwandeln. Zeichnen Sie daraufhin mit dem Freihandwerkzeug einen möglichst natürlichen Verlauf für die Schneeflocke ein. Wenn die Ebene „display“ noch nicht der Führungsebene untergeordnet ist, holen Sie dies nun nach und verschieben anschließend die Grafik-Instanz der Schneeflocke an den oberen Verlaufspunkt der Führungsebene. Erzeugen Sie im 50. Bild der Ebene „display“ durch Betätigen der Funktionstaste F6 ein neues Schlüsselbild und verschieben Sie die Grafik-Instanz in diesem Bild an den unteren Verlaufspunkt der Führungsebene. Erstellen Sie in der Ebene „path“ einen Bewegungs-Tween zwischen dem 1. und 50. Bild der Ebene.

Sobald die Schneeflocke herab gefallen und die Animation somit beendet ist, benötigen wir die entsprechende MovieClip-Instanz nicht mehr. Um Performance zu sparen, wollen wir die Instanz daher löschen. Erzeugen Sie zu diesem Zweck eine neue Ebene „action“ und erstellen Sie im 50. Bild der Ebene ein neues Schlüsselbild. Rufen Sie anschließend über die Funktionstaste F9 das Aktionen-Fenster auf und platzieren Sie hier die folgende Anweisung:

001:
 removeMovieClip(this);

Um die Animation noch realistischer zu gestalten, können Sie der Grafik-Instanz im 50. Bild einen Alpha-Wert von 0% zuweisen. Die Schneeflocke wird somit im Verlauf der Animation ausgeblendet. Die fertige Zeitleiste des MovieClip-Symbols „Schneeflocke2“ sollte wie folgt aussehen:


Zeitleiste von „Schneeflocke2“

Wechseln Sie in den Bearbeitungsmodus von „Schneeflocke1“. Geben Sie der Instanz von „Schneeflocke2“ den Instanznamen „flocke“. Erstellen Sie eine zweite Ebene „action“. Markieren Sie das erste Bild der Ebene und rufen Sie von hier aus das Aktionen-Fenster auf. Damit wir mehr als eine Schneeflocke auf unserem Bildschirm erhalten, benötigen wir folgendes ActionScript in diesem Bild:

001:
002:
003:
004:
005:
006:
007:
008:
009:
010:
011:
012:
013:
014:
 var y;
 
 MovieClip.prototype.verteilen = function(clip, x) {
     duplicateMovieClip(clip, "clip" + x, x);
     this["clip" + x]._x = random(400);
     this["clip" + x]._y = random(15);
     this["clip" + x]._xscale = random(20) + 10;
     this["clip" + x]._yscale = random(20) + 10;
 
     y = x + 1;
     clip._visible = false;
 };
 
 verteilen(flocke, y);

Vorab initialisieren wir eine Variable y. In einer Funktion „verteilen“ duplizieren wir den im ersten Parameter übergebenen MovieClip. Der Instanzname des neuen MovieClips setzt sich aus der Zeichenkette „clip“ und dem Wert des zweiten Parameters x zusammen. Der Wert von x bestimmt zudem die Tiefenordnung des neuen MovieClips. Schließlich weisen wir dem neuen MovieClip eine zufällige X- und Y-Koordinate zu. Die Ausmaße werden ebenso größtenteils durch zufällige Werte bestimmt. Somit erhalten wir zum einen Schneeflocken an verschiedenen Positionen im Flashfilm, zum anderen besitzen die einzelnen Schneeflocken daher eine unterschiedliche Größe. Zuletzt setzen wir den Wert von „y“ auf den um eine Einheit erhöhten Wert von „x“ und blenden die MovieClip-Instanz „clip“ aus. Mit der letzten Zeile rufen wir die soeben beschriebene Funktion auf und übergeben dabei als Parameter die MovieClip-Instanz „flocke“ und den Wert von y.

Erstellen Sie nun ein zweites Schlüsselbild in der Ebene „action“ und fügen Sie auch hier das obige ActionScript ein. Bei Bedarf können Sie hier die Ausmaße der Flocken und deren Position variieren. Das Script ist somit fertig. Durch Verschieben der Instanz von „Schneeflocke1“ lassen Sie es nun an einer beliebigen Stelle in Ihrer Flash-Datei schneien.

Die Animation lässt sich beliebig erweitern. Wenn Sie zum Beispiel unterschiedliche Fallanimationen haben wollen, erstellen Sie weitere MovieClips. Verwenden Sie in den neuen MovieClips dieselben Animationen und Darstellungen wie in „Schneeflocke2“ und variieren Sie lediglich den Verlauf der Führungsebene. Benennen Sie die Instanzen der neuen MovieClips durch eine fortlaufende Nummerierung („flocke1“, „flocke2“, usw.).
Um nun beim Aufruf der Funktion „verteilen“ eine zufällige MovieClip-Instanz auszuwählen, verwenden wir erneut den Befehl „random“:

001:
 verteilen(eval("flocke" + random(2) + 1), y);

Mit der obigen Anweisung wählen Sie zufällig zwischen den MovieClip-Instanzen „flocke1“ und „flocke2“ aus. Beachten Sie, dass Sie beim Veröffentlichen der Datei ActionScript 1.0 im Flash Player 5 verwenden müssen, da die Eigenschaft „prototype“ in ActionScript 2.0 nicht verwendet wird.

 

Beispieldatei: Schnee-Animation [Schnee-Animation_in_Flash.zip]