Starten und Stoppen der Abwärtbewegung durch Mausklick auf Linie und Bühne

Ergebnis der swf-Datei

Der Programmcode mit Kommentar ohne Erklärungen

Kommentare sind im nachfolgenden Code grau und die wesentlichen Veränderungen gegenüber dem vorigen Arbeitsschritt rot geschrieben.

// ZEICHNEN EINER WELLENLINIE
// NACH ANKLICKEN DER KURVE BEWEGT SICH DIESE NACH UNTEN
// DURCH KLICK AUF DIE BÜHNE WIRD DIE BEWEGUNG GESTOPPT
/*
Zeichnen der Wellenlinie in einem eigenen neuen Movieclip welle_mc mit Loinienstärke 3
*/
createEmptyMovieClip("welle_mc", this.getNextHighestDepth());
welle_mc._x = 0;
welle_mc._y = 0;
curve(welle_mc, baseCurve, [0, 0], Stage.width, 100, 100, 3, 0xFF0000);
/*
Definieren des Bewegungszustands:
moving == false -> die Kurve bewegt sich nicht und
moving == tru
e -> die Kurve bewegt sich nach unten
*/
var moving:Boolean = false;
/*
Nach Anklicken der Kurve bewegt sich diese in Richtung unterer Bühnenrand.
*/
welle_mc.onPress = function() {
   moving = true;
   this.onEnterFrame = function() {
      if (this._y<Stage.height) {
         this._y += 10;
      } else {
         delete this.onEnterFrame;
         delete this.onPress;
         moving = false;
      }
   };
};
/*
Stoppen der Abwärtsbewegung durch Klicken mit der Maus auf der Bühne.
*/
this.onMouseDown = function() {
   if (moving) {
      delete welle_mc.onEnterFrame;
      moving = false;
   }
};
/*
Definieren der Funktionen curve(), baseCurve()
*/
function curve(mc:MovieClip, bc:Function, pt:Array, l:Number, a:Number, b:Number, lineWidth:Number,                lineColor:Number):Void {
   mc.lineStyle(lineWidth, lineColor);
   mc.moveTo(pt[0], pt[1]);
   while (l>0) {
      pt = bc(mc, pt, a, b);
      l = l-a;
   }
}
function baseCurve(mc:MovieClip, pt:Array, a:Number, b:Number):Array {
   mc.curveTo(pt[0]+a/4, pt[1]-b/2, pt[0]+a/2, pt[1]);
   mc.curveTo(pt[0]+3*a/4, pt[1]+b/2, pt[0]+a, pt[1]);
   pt[0] = pt[0]+a;
   return pt;
}

Der Programmcode mit Erklärungen

Definieren und Merken des Bewegungszustands

Es gibt zwei Bewegungszustände: Die Linie steht still oder sie bewegt sich nach unten.
Das heißt das Programm muss "wissen" welcher Zustand gerade vorliegt. Das ist ein typischer Anwendungsfall für die Verwendung einer Variablen. In einer Variablen kann man einen Zustand zu einem bestimmten Zeitpunkt abspeichern und später darauf zugreifen, in dem man z.B. diesen Zustand abruft, abfrägt oder auch wieder herstellt.

Da in diesem Fall nur zwei Zustände (bewegen - nicht bewegen) relevant sind, kann man eine Boolsche Variable zum Speichern des Zustands verwenden. Eine Boolsche Variable kann die Werte true und false abspeichern. Man muss nur festlegen, welcher Zustand mit true bzw. false gemeint ist. In unserem Fall wird mit false definiert, dass die Linie stillsteht und mit true, dass sich die Linie nach unten bewegt.

Da die Linie am Anfang stillstehen soll, wird die Boolsche Variable moving mit dem Wert false initialisiert.

var moving:Boolean = false;

Starten der Bewegung durch Mausklick auf die Kurve

Wenn eine swf-Datei im Shockwave-Player abgespielt wird, so wird jedesmal, wenn man über einem Movieclip die linke Maustaste hinunterdrückt, beim Movieclip das Ereignis Press ausgelöst.
Es wird nun beim Movieclip welle_mc dem Event-Handler onPress ein Funktionsliteral zugewiesen, das bei Eintreten des Press-Ereignisses aufgerufen wird.

welle_mc.onPress = function() {
...
};

Da sich die Linie nach dem Anklicken nach unten bewegt, erhält die boolsche Variable moving den Wert true: moving = true

Anschließend wird dem Event-Handler onEnterFrame ein Funktionsliteral zugewiesen, das den Movieclip welle_mc bei EnterFrame-Ereignissen nach unten bewegt, solange noch nicht der untere Bühnerand erreicht ist.
Da der Event-Handler onPress für den Movieclip welle_mc definiert wird und der Event-Handler onEnterFrame innerhalb des onPress-Funktionsliterals, bezieht sich das this in this.onEnterFrame auf den MovieClip welle_mc.

Wenn der untere Bühnenrand erreicht ist, wird sowohl der Event-Handler für onEnterFrame als auch für onPress gelöscht. Dadurch reagiert die Line nicht mehr auf einen Mausklick und bleibt am unteren Bühnenrand stehen. Der Wahrheitswert von moving wird auf den Wert false gesetzt, was bedeutet, dass die Linie still steht.

welle_mc.onPress = function() {
   moving = true;
   this.onEnterFrame = function() {
      if (this._y<Stage.height) {
         this._y += 10;
      } else {
         delete this.onEnterFrame;
         delete this.onPress;
         moving = false;
      }
   };
};

Stoppen der Bewegung durch Mausklick auf die Bühne

Der Event-Handler onMouseDown wird über this dem Mainmovie zugeordnet.
Wenn nun irgendwo auf der Bühne die linke Maustaste hinuntergedrückt wird und die Variable moving den Wert true hat, wird der onEnterFrame-Event-Handler des Movieclips welle_mc, der für die Abwärtbewegung verantwortlich ist, gelöscht.
Der Wahrheitswert von moving wird wieder auf den Wert false zurückgesetzt, was bedeutet, dass die Linie still steht.

this.onMouseDown = function() {
   if (moving) {
      delete welle_mc.onEnterFrame;
      moving = false;
   }
};

Eine Denkaufgabe

Wenn man den linken Codeabschnitt, der oben besprochen wurde, durch den rechten ersetzt, erreicht man dasselbe Ergebnis. Warum?

this.onMouseDown = function() {
   if (moving) {
      delete welle_mc.onEnterFrame;
      moving = false;
   }
};

welle_mc.onMouseDown = function() {
   if (moving) {
      delete this.onEnterFrame;
      moving = false;
   }
};