Flash-Effekte zur Winterzeit: Schneefall und Herbstwind

Wer kennt Sie nicht die Flash Effekte, die Tag täglich im weltweiten Datennetz auftauchen. Wir haben uns für dieses Tutorial mal zwei Effekte herausgepickt, die hervorragend zur Herbst und Winterzeit passen. Es handelt sich um einen Schneefall und um eine Pollenflug-Simulation, wie es im Frühjahr und Herbst üblich ist. Den Allergikern sei gesagt, dass der Pollenflug völlig unbedenklich ist.

Bibliothek und Bühne

Um die beiden Effekte realisieren zu können, benötigen wir lediglich einen MovieClip, welcher den Symbolnamen fClip erhält, »f« wie Flocke.

Noch wichtiger als der Symbolname ist der Verknüpfungsbezeichner für den Flocken-MovieClip.

Wir haben uns dafür entschieden, den Verknüpfungsbezeichner ebenfalls mit fClip anzugeben. Dieser Verknüpfungsbezeichner wird benötigt, um den MovieClip via ActionScript dynamisch auf die Bühne zu projizieren. Schliesslich wollen wir uns keine unnötige Arbeit machen und Dutzende von MovieClips auf der Bühne per Hand platzieren. Diese Aufgabe wird unser Skript übernehmen.

Um das Szenario noch etwas attraktiver zu gestalten, haben wir uns noch einen Schneemann samt Hintergrund angelegt.

Was nun noch fehlt sind die Schneeflocken, die vom Himmel fallen.

Schneeflocken Effekt

Das Skript zur Realisierung des Effekts schaut, wie folgt aus:

function schnee(pAnzahl, pBreite, pHoehe,pFlockenDim,pFlockenDichte) {
for (var i = 0; i<=pAnzahl; i++) {
this.attachMovie(„fClip“, „flocke“+i, i);
this[„flocke“+i].skal = 50+(Math.random()*pFlockenDim);
this[„flocke“+i].alpha = 20+(Math.random()*pFlockenDichte);
this[„flocke“+i]._xscale = this[„flocke“+i].skal;
this[„flocke“+i]._yscale = this[„flocke“+i].skal;
this[„flocke“+i]._alpha = this[„flocke“+i].alpha;
this[„flocke“+i].xpos = this[„flocke“+i]._x;
this[„flocke“+i]._x = -10+(Math.random()*pBreite);
this[„flocke“+i].zufall = 1+(Math.random()*2);
this[„flocke“+i]._y = -10+(Math.random()*pHoehe);
this[„flocke“+i].wind = -Math.PI+(Math.random()*Math.PI);
this[„flocke“+i].onEnterFrame = function() {
this.rad += ((this.wind/180)*Math.PI);
this._x -= Math.cos(this.rad);
this._y += this.zufall;
if (this._y>=pHoehe) {
this._y = -5;
}
if ((this._x>=pBreite) || (this._x<=0)) {
this._x = -10+(Math.random()*pBreite);
}
};
}
}

// Aufruf der Funktion (Schnee-Effekt ausführen)
schnee(100,Stage.width,Stage.height,100,50);

Mit Hilfe der Funktionsparameter pBreite, pHoehe wird der Bewegungsraum für die Flocken festgelegt. Der Parameter pAnzahl legt die maximale Anzahl der zu erzeugenden Flocken fest. Die letzten beiden Parameter pFlockenDim und pFlockenDichte legen die Grösse und die Deckkraft der Flocken fest. Wie man sieht, lassen sich die wichtigsten Einstellungen für den Schneefall-Effekt via Funktionsparameter festlegen.

Ohne uns nun mit den mathematischen Grundlagen herumzuschlagen, seien folgende Anpassungen zum Ausprobieren vorgeschlagen:

this._x -= Math.cos(this.rad);
this._y += Math.sin(this.rad) + this.zufall;

oder

this._x += Math.cos(this.rad);
this._y += Math.sin(this.rad);

Die zufällige Grösse der einzelnen Flocken wird durch folgende Codezeilen beeinflusst:

this[„flocke“+i].skal = 50+(Math.random()*pFlockenDim);

this[„flocke“+i]._xscale = this[„flocke“+i].skal;
this[„flocke“+i]._yscale = this[„flocke“+i].skal;

Für die Deckraft der einzelnen Flocken sorgen folgende Codezeilen:

this[„flocke“+i].alpha = 20+(Math.random()*pFlockenDichte);

this[„flocke“+i]._alpha = this[„flocke“+i].alpha;

Bei der weiteren Analyse des Skripts wünschen wir viel Freude!

Pollenflug Effekt

Der Pollenflug Effekt ist ähnlich aufgebaut und basiert auf den mathematischen Grundlagen des Schneefall Effekts; daher werden wir diesen nur kurz vorstellen.

MovieClip.prototype.herbstwind = function(pObj, pAnzahl, pBreite, pHoehe) {
for (var i = 0; i<=pAnzahl; i++) {
this.attachMovie(pObj, „flocke“+i, i);
this[„flocke“+i]._x = Math.round(Math.random()*pBreite);
this[„flocke“+i]._y = Math.round(Math.random()*pHoehe);
this[„flocke“+i].faktor = ((Math.random()*100));
this[„flocke“+i]._xscale = (this[„flocke“+i]._yscale=1000/this[„flocke“+i].faktor);
this[„flocke“+i].zufall = 1+(Math.random()*5);
this[„flocke“+i].onEnterFrame = function() {
this.kante = pBreite+this._width;
this.spos = -this._width;
this.xpos = this._x;
this.tempo += this.zufall;
this.rad = (this.tempo/180)*Math.PI;
if (this.rad>Math.PI*2) {
this.rad = this.rad-Math.PI*2;
}
if (this.xposthis._x = this._x+this.zufall;
this._y = this._y+Math.cos(this.rad);
} else {
this._x = this.spos;
}
};
}
};

// Aufruf der Funktion (Pollenflug-Effekt ausführen)
herbstwind(„fClip“, 50, Stage.width, Stage.height);

Auch in diesem Fall werden mit Hilfe der Funktionsparameter die wesentlichen Einstellungen vorgenommen. Der Paramater pObj legt fest, welcher MovieClip aus der Bibliothek zur Darstellung des Effekts verwendet werden soll. Der Parameter pAnzahl legt die maximale Anzahl der Clips fest, und die Parameter pBreite und pHoehe legen den Bewegungsraum für die Clips fest.

Fazit

Flash-Effekte müssen nicht immer auf Hunderten von Zeitleisten-Ebenen angelegt und per Hand animiert werden. Wie man sieht, bietet ActionScript auch für diese speziellen Gimmicks reichlich Potential. Lediglich die eigene Kreativität und Phantasie legen die Grenzen fest!

Ein Tipp von: Matthias Kannengiesser, bearbeitet und aktualisiert von: Designer in Action
1 1

Kommentieren

Ich akzeptiere die Datenschutzerklärung.