Einleitung
Was bringt dieses Tutorial?
Ein Vorteil von Flash MX ist es, dass man die ClipEvents von MovieClips direkt per ActionScript setzen kann.
Man kann also auch dynamisch erzeugten MovieClips ClipEvents geben und auch wegnehmen.
Als nützliches Beispiel kommt hier ein gescriptetes Bewegungstweening.
In Flash5 wurde oft versucht, MCs über Schleifen zu animieren:
for (i=1; i<100; i++) {
mc1._x=i;
}
Dies schlägt leider fehl, da die Anzeige erst nach dem Abarbeiten der Skriptes aktualisiert wird. Man brauchte also eine Funktion, die frameweise arbeitet.
In Flash 5 gab es hier 2 Möglichkeiten:
- Man legte einen "Controller MC" an. Also einen MC, der einen anderen steuert. Nachteil war hier, dass man pro bewegtem MC einen Controller benötigte.
- Man gab dem MC ein ClipEvent, auch hier konnte man schon Funktionen zuweisen, Nachteil war aber, das dies nicht mit attachten, also dynamisch erzeugten MCs klappte.
Aufbau
AktionScript:
Da wir die AS Funktion möglichst universell anlegen wollen, erweitern wir das Objekt MovieClip um eine Funktion tweenTo(x,y,steps)
Die Funktion erwartet 3 Parameter:
x -> die x-Ziel-Position
y -> die y-Ziel-Position
steps -> Die Anzahl der Schritte dahin
MovieClip.prototype.tweenTo= function (x,y,steps) {
..
}
In dem Skript setzten wir zunächst als einige Variablen im MC.Da diese quasi Eigenschaften des MCs darstellen beginnen ihre Namen analog zu der in Flash gebräuchlichen Schreibweise mit einem Unterstrich.
_steps ist die Anzahl der noch verbleibenden Schritte
_xstep sind die Pixel, die der MC pro Schritt in x-Richtung versetzt werden soll
_ystep sind die Pixel, die der MC pro Schritt in y-Richtung versetzt werden soll
Nachdem die Variablen gesetzt sind weisen wir dem MC ein ClipEvent für das Ereignis onEnterFrame zu, dies geschieht mit
this.onEnterFrame= function () {
...
}
In dieser Funktion prüfen wir nun bei jedem Aufruf ob noch Schritte
verbleiben.
if (this._steps){
...
}
else {
...
}
Wenn _steps 0 ist wird dieser Ausdruck "false" und der else Zweig
wird ausgeführt.Im else Zweig löschen wir die angelegten Variablen und das zugewiesene ClipEvent wieder.
Die Variablen werden mit der Funktion "delete" gelöscht. Das ClipEvent überschreiben wir einfach mit einer leeren Funktion.
delete this._xstep;
delete this._ystep;
delete this._steps;
this.onEnterFrame=function () {}
Im If Zweig müssen wir jetzt nur noch den MC einen Schritt weiter
setzten
this._x+=this._xstep; this._y+=this._ystep;und _steps um 1 runterzählen
this._steps--;Hier das fertige Skript:
MovieClip.prototype.tweenTo= function (x,y,steps) {
// Die internen Variablen setzten
// _xstep ist der Wert, um den der MC pro Schritt in x-Richtung versetzt wird
this._xstep=(Number(x)-this._x)/Number(steps);
// _ystep ist der Wert, um den der MC pro Schritt in y-Richtung versetzt wird
this._ystep=(Number(y)-this._y)/Number(steps);
// Steps ist die Anzahl der verbleibenden Schritte
this._steps=steps;
this.onEnterFrame=function () {
// Wenn Schritte über sind (-> _steps > 0 und damit true) setzen wir den MC eine Schritt weiter
if (this._steps) {
// MovieClip einen Schritt weiter setzen
this._x+=this._xstep;
this._y+=this._ystep;
// Steps runterzählen
this._steps--;
}
else {
// Nicht mehr gebrauchte Variablen löschen
delete this._xstep;
delete this._ystep;
delete this._steps;
// Das ClipEvent wieder löschen
this.onEnterFrame=function () {}
}
}
}
}
Aufgerufen wird das ganze mit
movieClipName.tweenTo(100,400,30);
So, sollte hoffentlich alles klar geworden sein...
Gruß, Jens
