Photoshop
Cinema 4d
HTML / CSS
JavaScript
PHP
Flash
Fotografie
Terragen
Webserver
Informatik
Sonstige
Dynamischer Schneefall in Flash (Flash Tutorial)
Tutorial erstellt von MJK, letzte Änderung am 18.12.2006
Wilkommen zu meinem Flashtutorial,
unterteilt in zwei Schritte.
Ich arbeite in dem Tutorial mit der Flash 8 Entwicklungsumgebung, aber die benutzten Methoden müssten ab Flash 6 vorhanden sein.
Es geht darum, beliebig viele Schneeflocken in verschiedener Größe mit mit verschiedener Geschwindigkeit fallen zu lassen.
Als Schneeflocke dient uns dabei ein 100*100 Pixel großes Bild,
in diesen Tutorial benutze ich dieses png.
Der erste Schritt besteht darin, dass wir uns überlegen wie wir die Zufallsgröße und -bewegung der Schneeflocken realisieren.
Dazu erstellen wir ein neues Flashdokument, setzten die Größe auf 400*300 und die Hintergrundfarbe auf Schwarz(am unteren Bildschirmrand->Eigenschaften).
Als nächstes wird die Grafik über hotkey strg+R oder "Datei->Importieren->in Bühne importieren..." in unser Dokument geladen.
Dann wird die Grafik selektiert wird und über hotkey F8 oder "Modifizieren->In Symbol komvertieren" in einen Moviclip umgewandelt.
Wenn wir diesen Movieclip(kurz:mc) selektieren und am unteren Bildschirmrand die Registerkarte "Aktionen" öffnen können wir dem mc als Objekt Quellcode hinzufügen um ihn zu verändern und zu bewegen.
Da wird dasselbe ja vorhaben kommt dort folgender Code rein:
Code:
Da so ein Code nicht immer leicht zu lesen ist, gehe ich denselben Schritt für Schritt durch.
Der Hauptcode steht in dem OnLoad-Ereigniss:
Code:
Dieses Ereigniss wird aufgerufen wenn das Objekt geladen wird, in diesem Fall ist es das Ereigniss welches als erstes in unserem MovieCLip aufgerufen wird.
Die Bewegung der Schneeflocke wird über ein Tween gesteuert, der Syntax hierfür lautet:
Code:
Dabei wird von dem Objekt die Objekteigenschaft von dem Startwert auf den Endwert innerhalb der Dauer in einem flüssigen Übergang geändert.
Für den Tween-Befehl brauchen wir folgende Klassen:
Code:
Als nächstes werden die Werte für die Größe und Fallgeschwindigkeit zufällig festgelegt und in Variablen gespeichert.
Code:
Die Funktion Math.random() gibt einen zufälligen Wert zurück, der größer als 0 und kleiner als 1 ist(dementsprechend ist die Größe 5-45).
Die nächsten beiden Zeilen setzen die Größe unseres mcs auf den vorher bestimmten Wert.
Code:
Wobei sich "this" auf das aktuelle Objekt, also auf unseren mc bezieht und "_xscale" und "_yscale" die horizantale und vertikale Größe in Prozent der Originalgröße ist.
Da es langweilig wäre wenn alle Schneeflocken an der Ausgangsposition starten würden kommt nun eine zufällige Setzung der horizontalen Position:
Code:
Da der Pivot-Punkt(das kleine weiße kreuz) unseres mcs in der rechten oberen Ecke ist und dort auch die _x-position angesetzt wird müssen wir schauen, dass dieser nicht größer als 400(Breite unseres Dokuments) minus der breite des mcs(this._width) wird.
Da unser Schneeflocken-MC jetzt eine zufällige Größe, Fallgeschwindigkeit und position hat müssen wir ihn nurnoch über
Code:
Fertig sieht das ganze so aus:
Wer bis hierhin Probleme hat kann sich das Dokument hier runterladen
Also, da die Überlegungen zur zufälligen Erscheinung etc. abgeschlossen sind wollen wir viele Schneeflocken fallen lassen.
Dazu wird ein neues Flashdokument mit denselben Eigenschaften erstellt.
Allerdings fügen wir den neuen Code der Ebene1 zu:
Hier der code:
Code:
Als erstes werden wieder die Tween-Klassen importiert, dann wird die globale Variable, die die Schneeflocken zählt auf 0 gesetzt:
Code:
Der Sinn davon liegt darin, dass alle Schneeflocken nacher als einzelne Objekte erzeugt werden und einen eindeutigen, einmaligen Namen brauchen. Mithilfe der Zählervariablen können wir dynamisch beliebig viele Namen wie Schneeflocke1, Schneeflocke2, Schneeflocke4 usw. vergeben.
In der nächsten Zeile wird ein neuer Movieclip erzeugt, der seinerseits dafür zuständig sein wird Schneeflocken zu erzeugen:
Code:
Für diesen mc wird jetzt ein neues onEnterFrame-Ereigniss geschrieben.
Code:
Das hat denselben Effeckt als wenn wir in der Entwicklungsumgebung einen MovieClip erzeugen(wie in Schritt 1) und dort den code reinschreiben:
Code:
onClipEvent(enterFrame){
<anweisung>
}
Das onEnterFrame-Eriegniss wird permanent aufgerufen, was hier den Vorteil hat unser Schneerzeugender MovieClip permanent Schneeflocken erzeugen kann.
Dazu kommen die folgen codeschnipsel in sein onEnterFrame-Erigniss:
Code:
Um den Bildschirm nicht mit Schneeflocken zu überfüllen wird nur mit einer 35% Wahrscheinlichkeit eine neue Flocke erstellt.
Code:
this["schneeflocke"+_global.schneeflockenzaehler]=this.createEmptyMovieClip("schneeflocke0"+_global.schneeflockenzaehler,this.getNextHighestDepth()); erstellteSchneeflocke=this["schneeflocke"+_global.schneeflockenzaehler];
[code]
Hier wird eines neuer, leerer MovieClip erzeugt(der Syntax dafür lautet createEmptyMovieClip(name,Tiefe)) und in einer Variablen gespeichert.
Dabei ist wichtig, dass der Name und die tiefe einzigartig sind. Das wird erreicht indem der Name aus "schneeflocke0" und dem vorher erhöhten Schneeflockenzähler zusammengesetzt wird und die Tiefe über this.getNextHighestDepth()(gibt die nächsthöchste, freie Tiefe) gesetzt wird.
Dann fügen wir unserem Schneeflockem-MC ein Unterobjekt namens "bild" zu und lassen dieses unstere Schneeflockengrafik laden und anzeigen:
[code]
erstellteSchneeflocke.bild=createEmptyMovieClip("bild"+_global.schneeflockenzaehler,this.getNextHighestDepth());
erstellteSchneeflocke.bild.loadMovie("schneeflocke_vorlage.png");
Hier dasselbe Spielchen mit Name und Tiefe.
Die nächsten Zeilen müssten aus Schritt 1 bekannt sein,
Code:
derselbe Code von Schritt 1, nur dass wir diesmal statt "this" "erstellteSchneeflocke.bild." davorsetzen müssen, da der Code sich nicht in dem Objekt selbst befindet.
Als letztes legen wir für den Bild-MovieClip ein onEnterFrame-Ereigniss an:
Code:
erstellteSchneeflocke.onEnterFrame = function(){
if(this.bild._y>=600){
delete this.onEnterFrame;
unloadMovie(this.bild); //löschen;
}
}
Dort wird permanent geprüft, ob sich der MC definitiv außerhalb des sichtbaren Bereiches befindet. Falls dies der Fall ist wird das Objekt gelöscht, da es nicht mehr gebraucht wird und nur Speicher fressen würde.
Hier wird wieder "this" verwendet, weil sich der Code dann in dem Schneeflocken-bild-MovieClip befindet.
Aus dem ganzen Code folgt:
Wer mehr Schneeflocken haben will, erhöht bei
Code:
die 35.
Und wer die Schneeflocken langsamer fallen lassen will, erhöht in
Code:
Hier nochmal zum logischen Verständniss:
Das wars auch schon, bei diesem Tutorial ist vor allem wichtig, dass man mit den Methoden und Funktionen viel herumprobiert.
Falls wer Schwierigkeiten hat gibt es auch den 2ten Schritt als download
Zu bemerken ist noch, dass bei vielen Schneeflocken die Bewegungen derselbigen logischerweise anfangen zu ruckeln, da alle bewegt werden müssen.
Aber ich hoffe dass durch dieses Tutorial hauptsächlich die Dynamik, die in Flash steckt, mit weniger als 30 Zeilen code beliebig viele Schneeflocken fallen zu lassen, klargeworden ist.
>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!
unterteilt in zwei Schritte.
Ich arbeite in dem Tutorial mit der Flash 8 Entwicklungsumgebung, aber die benutzten Methoden müssten ab Flash 6 vorhanden sein.
Es geht darum, beliebig viele Schneeflocken in verschiedener Größe mit mit verschiedener Geschwindigkeit fallen zu lassen.
Als Schneeflocke dient uns dabei ein 100*100 Pixel großes Bild,
in diesen Tutorial benutze ich dieses png.
Der erste Schritt besteht darin, dass wir uns überlegen wie wir die Zufallsgröße und -bewegung der Schneeflocken realisieren.
Dazu erstellen wir ein neues Flashdokument, setzten die Größe auf 400*300 und die Hintergrundfarbe auf Schwarz(am unteren Bildschirmrand->Eigenschaften).
Als nächstes wird die Grafik über hotkey strg+R oder "Datei->Importieren->in Bühne importieren..." in unser Dokument geladen.
Dann wird die Grafik selektiert wird und über hotkey F8 oder "Modifizieren->In Symbol komvertieren" in einen Moviclip umgewandelt.
Wenn wir diesen Movieclip(kurz:mc) selektieren und am unteren Bildschirmrand die Registerkarte "Aktionen" öffnen können wir dem mc als Objekt Quellcode hinzufügen um ihn zu verändern und zu bewegen.
Da wird dasselbe ja vorhaben kommt dort folgender Code rein:
Code:
onClipEvent(load){ //einmalige setzungen beim Laden des Objektes als erstes Ereigniss
import mx.transitions.Tween; ///////////////
import mx.transitions.easing.*; //import der tween-klassen
groesse=Math.random()*40+5 ; //groesse festlegen
fallgeschwindigkeit=groesse/100*20; //geschwindigkeit festlegen
this._xscale=groesse;
this._yscale=groesse; //größe setzen.
this._x=Math.random()*400-this._width; //Zufällige horiz. Position
new Tween(this, "_y", None.easeNone, 0, 600, fallgeschwindigkeit, true); //bewegung
}
import mx.transitions.Tween; ///////////////
import mx.transitions.easing.*; //import der tween-klassen
groesse=Math.random()*40+5 ; //groesse festlegen
fallgeschwindigkeit=groesse/100*20; //geschwindigkeit festlegen
this._xscale=groesse;
this._yscale=groesse; //größe setzen.
this._x=Math.random()*400-this._width; //Zufällige horiz. Position
new Tween(this, "_y", None.easeNone, 0, 600, fallgeschwindigkeit, true); //bewegung
}
Da so ein Code nicht immer leicht zu lesen ist, gehe ich denselben Schritt für Schritt durch.
Der Hauptcode steht in dem OnLoad-Ereigniss:
Code:
onClipEvent(load){
<anweisungen>
}
<anweisungen>
}
Dieses Ereigniss wird aufgerufen wenn das Objekt geladen wird, in diesem Fall ist es das Ereigniss welches als erstes in unserem MovieCLip aufgerufen wird.
Die Bewegung der Schneeflocke wird über ein Tween gesteuert, der Syntax hierfür lautet:
Code:
new Tween(Objekt,Objekteigenschaft,Startwert,Endwert,Dauer)
.Dabei wird von dem Objekt die Objekteigenschaft von dem Startwert auf den Endwert innerhalb der Dauer in einem flüssigen Übergang geändert.
Für den Tween-Befehl brauchen wir folgende Klassen:
Code:
import mx.transitions.Tween; ///////////////
import mx.transitions.easing.*; //import der tween-klassen
import mx.transitions.easing.*; //import der tween-klassen
Als nächstes werden die Werte für die Größe und Fallgeschwindigkeit zufällig festgelegt und in Variablen gespeichert.
Code:
groesse=Math.random()*40+5 ; //groesse festlegen
fallgeschwindigkeit=groesse/100*20; //geschwindigkeit festlegen
fallgeschwindigkeit=groesse/100*20; //geschwindigkeit festlegen
Die Funktion Math.random() gibt einen zufälligen Wert zurück, der größer als 0 und kleiner als 1 ist(dementsprechend ist die Größe 5-45).
Die nächsten beiden Zeilen setzen die Größe unseres mcs auf den vorher bestimmten Wert.
Code:
this._xscale=groesse;
this._yscale=groesse; //größe setzen.
this._yscale=groesse; //größe setzen.
Wobei sich "this" auf das aktuelle Objekt, also auf unseren mc bezieht und "_xscale" und "_yscale" die horizantale und vertikale Größe in Prozent der Originalgröße ist.
Da es langweilig wäre wenn alle Schneeflocken an der Ausgangsposition starten würden kommt nun eine zufällige Setzung der horizontalen Position:
Code:
this._x=Math.random()*400-this._width; //Zufällige horiz. Position
Da der Pivot-Punkt(das kleine weiße kreuz) unseres mcs in der rechten oberen Ecke ist und dort auch die _x-position angesetzt wird müssen wir schauen, dass dieser nicht größer als 400(Breite unseres Dokuments) minus der breite des mcs(this._width) wird.
Da unser Schneeflocken-MC jetzt eine zufällige Größe, Fallgeschwindigkeit und position hat müssen wir ihn nurnoch über
Code:
new Tween(this, "_y", None.easeNone, 0, 600, fallgeschwindigkeit, true);
bewegen.Fertig sieht das ganze so aus:
Wer bis hierhin Probleme hat kann sich das Dokument hier runterladen
Also, da die Überlegungen zur zufälligen Erscheinung etc. abgeschlossen sind wollen wir viele Schneeflocken fallen lassen.
Dazu wird ein neues Flashdokument mit denselben Eigenschaften erstellt.
Allerdings fügen wir den neuen Code der Ebene1 zu:
Hier der code:
Code:
import mx.transitions.Tween; ///////////
import mx.transitions.easing.*; ///import der klassen für tween
_global.schneeflockenzaehler=0; //dynamische Namenverteilung
schneeflockenwerfer=_root.createEmptyMovieClip("schnee_ctrl",thos.getNextHighestDepth()); //ein controler-objekt erzeugen
schneeflockenwerfer.onEnterFrame = function(){ //neue funktions-tzuweisung
if(Math.random()*100<=35){
_global.schneeflockenzaehler+=1; //dynamische Namenverteilung
this["schneeflocke"+_global.schneeflockenzaehler]=this.createEmptyMovieClip("schneeflocke0"+_global.schneeflockenzaehler,this.getNextHighestDepth()); //neues Schneeflocken-Objekt anlegen
erstellteSchneeflocke=this["schneeflocke"+_global.schneeflockenzaehler];
erstellteSchneeflocke.bild=createEmptyMovieClip("bild"+_global.schneeflockenzaehler,this.getNextHighestDepth()); //neues objekt für das letzt Schneeflocken-objekt anlegen, in das das Bild geladen wird.
erstellteSchneeflocke.bild.loadMovie("schneeflocke_vorlage.png"); //schneeflocken-Bild laden
erstellteSchneeflocke.groesse=Math.random()*40+5; //groesse festlegen
erstellteSchneeflocke.fallgeschwindigkeit=erstellteSchneeflocke.groesse/100*20; //geschwindigkeit festlegen
erstellteSchneeflocke.bild._xscale=erstellteSchneeflocke.groesse;
erstellteSchneeflocke.bild._yscale=erstellteSchneeflocke.groesse; //größe setzen.
erstellteSchneeflocke.bild._x=Math.random()*400-this._width; //Zufällige horiz. Position innerhalb des Sichtbaren Bereiches
new Tween(erstellteSchneeflocke.bild, "_y", None.easeNone, 0, 600, erstellteSchneeflocke.fallgeschwindigkeit, true); //bewegung
erstellteSchneeflocke.onEnterFrame = function(){ //neue funktions-tzuweisung
if(this.bild._y>=600){ //unterhalb des unteren Rand
delete this.onEnterFrame;
unloadMovie(this.bild); //löschen;
}
}
}
}
import mx.transitions.easing.*; ///import der klassen für tween
_global.schneeflockenzaehler=0; //dynamische Namenverteilung
schneeflockenwerfer=_root.createEmptyMovieClip("schnee_ctrl",thos.getNextHighestDepth()); //ein controler-objekt erzeugen
schneeflockenwerfer.onEnterFrame = function(){ //neue funktions-tzuweisung
if(Math.random()*100<=35){
_global.schneeflockenzaehler+=1; //dynamische Namenverteilung
this["schneeflocke"+_global.schneeflockenzaehler]=this.createEmptyMovieClip("schneeflocke0"+_global.schneeflockenzaehler,this.getNextHighestDepth()); //neues Schneeflocken-Objekt anlegen
erstellteSchneeflocke=this["schneeflocke"+_global.schneeflockenzaehler];
erstellteSchneeflocke.bild=createEmptyMovieClip("bild"+_global.schneeflockenzaehler,this.getNextHighestDepth()); //neues objekt für das letzt Schneeflocken-objekt anlegen, in das das Bild geladen wird.
erstellteSchneeflocke.bild.loadMovie("schneeflocke_vorlage.png"); //schneeflocken-Bild laden
erstellteSchneeflocke.groesse=Math.random()*40+5; //groesse festlegen
erstellteSchneeflocke.fallgeschwindigkeit=erstellteSchneeflocke.groesse/100*20; //geschwindigkeit festlegen
erstellteSchneeflocke.bild._xscale=erstellteSchneeflocke.groesse;
erstellteSchneeflocke.bild._yscale=erstellteSchneeflocke.groesse; //größe setzen.
erstellteSchneeflocke.bild._x=Math.random()*400-this._width; //Zufällige horiz. Position innerhalb des Sichtbaren Bereiches
new Tween(erstellteSchneeflocke.bild, "_y", None.easeNone, 0, 600, erstellteSchneeflocke.fallgeschwindigkeit, true); //bewegung
erstellteSchneeflocke.onEnterFrame = function(){ //neue funktions-tzuweisung
if(this.bild._y>=600){ //unterhalb des unteren Rand
delete this.onEnterFrame;
unloadMovie(this.bild); //löschen;
}
}
}
}
Als erstes werden wieder die Tween-Klassen importiert, dann wird die globale Variable, die die Schneeflocken zählt auf 0 gesetzt:
Code:
_global.schneeflockenzaehler=0;
Der Sinn davon liegt darin, dass alle Schneeflocken nacher als einzelne Objekte erzeugt werden und einen eindeutigen, einmaligen Namen brauchen. Mithilfe der Zählervariablen können wir dynamisch beliebig viele Namen wie Schneeflocke1, Schneeflocke2, Schneeflocke4 usw. vergeben.
In der nächsten Zeile wird ein neuer Movieclip erzeugt, der seinerseits dafür zuständig sein wird Schneeflocken zu erzeugen:
Code:
schneeflockenwerfer=_root.createEmptyMovieClip("schnee_ctrl",thos.getNextHighestDepth());
Für diesen mc wird jetzt ein neues onEnterFrame-Ereigniss geschrieben.
Code:
schneeflockenwerfer.onEnterFrame = function(){
Das hat denselben Effeckt als wenn wir in der Entwicklungsumgebung einen MovieClip erzeugen(wie in Schritt 1) und dort den code reinschreiben:
Code:
onClipEvent(enterFrame){
<anweisung>
}
Das onEnterFrame-Eriegniss wird permanent aufgerufen, was hier den Vorteil hat unser Schneerzeugender MovieClip permanent Schneeflocken erzeugen kann.
Dazu kommen die folgen codeschnipsel in sein onEnterFrame-Erigniss:
Code:
if(Math.random()*100<=35){
Um den Bildschirm nicht mit Schneeflocken zu überfüllen wird nur mit einer 35% Wahrscheinlichkeit eine neue Flocke erstellt.
Code:
this["schneeflocke"+_global.schneeflockenzaehler]=this.createEmptyMovieClip("schneeflocke0"+_global.schneeflockenzaehler,this.getNextHighestDepth()); erstellteSchneeflocke=this["schneeflocke"+_global.schneeflockenzaehler];
[code]
Hier wird eines neuer, leerer MovieClip erzeugt(der Syntax dafür lautet createEmptyMovieClip(name,Tiefe)) und in einer Variablen gespeichert.
Dabei ist wichtig, dass der Name und die tiefe einzigartig sind. Das wird erreicht indem der Name aus "schneeflocke0" und dem vorher erhöhten Schneeflockenzähler zusammengesetzt wird und die Tiefe über this.getNextHighestDepth()(gibt die nächsthöchste, freie Tiefe) gesetzt wird.
Dann fügen wir unserem Schneeflockem-MC ein Unterobjekt namens "bild" zu und lassen dieses unstere Schneeflockengrafik laden und anzeigen:
[code]
erstellteSchneeflocke.bild=createEmptyMovieClip("bild"+_global.schneeflockenzaehler,this.getNextHighestDepth());
erstellteSchneeflocke.bild.loadMovie("schneeflocke_vorlage.png");
Hier dasselbe Spielchen mit Name und Tiefe.
Die nächsten Zeilen müssten aus Schritt 1 bekannt sein,
Code:
erstellteSchneeflocke.groesse=Math.random()*40+5; erstellteSchneeflocke.fallgeschwindigkeit=erstellteSchneeflocke.groesse/100*20;
erstellteSchneeflocke.bild._xscale=erstellteSchneeflocke.groesse;
erstellteSchneeflocke.bild._yscale=erstellteSchneeflocke.groesse;
erstellteSchneeflocke.bild._x=Math.random()*400-this._width;
new Tween(erstellteSchneeflocke.bild, "_y", None.easeNone, 0, 600,
erstellteSchneeflocke.bild._xscale=erstellteSchneeflocke.groesse;
erstellteSchneeflocke.bild._yscale=erstellteSchneeflocke.groesse;
erstellteSchneeflocke.bild._x=Math.random()*400-this._width;
new Tween(erstellteSchneeflocke.bild, "_y", None.easeNone, 0, 600,
derselbe Code von Schritt 1, nur dass wir diesmal statt "this" "erstellteSchneeflocke.bild." davorsetzen müssen, da der Code sich nicht in dem Objekt selbst befindet.
Als letztes legen wir für den Bild-MovieClip ein onEnterFrame-Ereigniss an:
Code:
erstellteSchneeflocke.onEnterFrame = function(){
if(this.bild._y>=600){
delete this.onEnterFrame;
unloadMovie(this.bild); //löschen;
}
}
Dort wird permanent geprüft, ob sich der MC definitiv außerhalb des sichtbaren Bereiches befindet. Falls dies der Fall ist wird das Objekt gelöscht, da es nicht mehr gebraucht wird und nur Speicher fressen würde.
Hier wird wieder "this" verwendet, weil sich der Code dann in dem Schneeflocken-bild-MovieClip befindet.
Aus dem ganzen Code folgt:
Wer mehr Schneeflocken haben will, erhöht bei
Code:
if(Math.random()*100<=35){
die 35.
Und wer die Schneeflocken langsamer fallen lassen will, erhöht in
Code:
erstellteSchneeflocke.fallgeschwindigkeit=erstellteSchneeflocke.groesse/100*20;
die 20.Hier nochmal zum logischen Verständniss:
Das wars auch schon, bei diesem Tutorial ist vor allem wichtig, dass man mit den Methoden und Funktionen viel herumprobiert.
Falls wer Schwierigkeiten hat gibt es auch den 2ten Schritt als download
Zu bemerken ist noch, dass bei vielen Schneeflocken die Bewegungen derselbigen logischerweise anfangen zu ruckeln, da alle bewegt werden müssen.
Aber ich hoffe dass durch dieses Tutorial hauptsächlich die Dynamik, die in Flash steckt, mit weniger als 30 Zeilen code beliebig viele Schneeflocken fallen zu lassen, klargeworden ist.
>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!
