Starten und Stoppen der Abwärtbewegung durch Mausklick

Ergebnis der swf-Datei

Der Programmcode mit Kommentar ohne Erklärungen

Kommentare sind im nachfolgenden Code grau und die wesentlichen Veränderungen rot geschrieben.

// ZEICHNEN EINER WELLENLINIE, DIE SICH BEI GEDRÜCKTER MAUSTASTE ZUM UNTEREN BÜHNENRAND BEWEGT
/*
Zeichnen der Wellenlinie in einem eigenen neuen Movieclip welle_mc
*/
createEmptyMovieClip("welle_mc", this.getNextHighestDepth());
welle_mc._x = 0;
welle_mc._y = 0;
curve(welle_mc, baseCurve, [0, 0], Stage.width, 100, 100, 1, 0xFF0000);
/*
Definieren des Bewegungszustands
*/
var moving:Boolean = false;
/*
Bewegen der Kurve bei Mausklick in Richtung unterer Bühnenrand.
Beim nächsten Mausklick auf der Bühne wird die Bewegung gestoppt.
*/
this.onMouseDown = function() {
   if (not moving) {
      moving = not moving;
      this.onEnterFrame = function() {
         if (welle_mc._y<Stage.height) {
            welle_mc._y += 10;
         } else {
            delete this.onEnterFrame;
            delete this.onMouseDown;
            moving = not moving;
         }
      };
   } else {
      delete this.onEnterFrame;
      moving = not moving;
   }
};
/*
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. In Abhängigkeit vom momentanen Bewegungszustand muss bei einem Mausklick die Bewegung gestartet bzw. gestoppt werden.
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 und Stoppen der Bewegung durch Mausklick

Wenn eine swf-Datei im Shockwave-Player abgespielt wird, so wird jedesmal, wenn die linke Maustaste gedrückt wird, das Ereignis MouseDown ausgelöst.
Es wird nun dem Event-Handler onMouseDown ein Funktionsliteral zugewiesen, das bei Eintreten des MouseDown-Ereignisses aufgerufen wird.

this.onMouseDown = function() {
...
};

Beim Drücken der Maustaste wird zuerst geprüft, ob sich die Linie bewegt:
Wenn not moving den Wert true liefert, so bewegt sich die Linie nicht. Denn wenn die Variable moving den Wert false enthält, steht, wie oben festgelegt, die Linie still. Durch not wird der Wahrheitswert umgedreht (negiert). Somit liefert der Term not moving bei Stillstand den Wahrheitswert true.

this.onMouseDown = function() {
   if (not moving) {
...
   }
};

In dem Fall, dass sich die Linie nicht bewegt (d.h. not moving den Wert true liefert), wird im ersten Schritt der Wahrheitswert von moving durch moving = not moving umgedreht.
Durch das Umdrehen des Wahrheitswertes von moving wird beim nächsten Mausklick der andere Zweig der if-Anweisung abgearbeitet.
Das ist das allgemeine Prinzip, alternierend zwischen zwei Zuständen zu wechseln.
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.

this.onMouseDown = function() {
   if (not moving) {
      moving = not moving;
      this.onEnterFrame = function() {
         if (welle_mc._y<Stage.height) {
            welle_mc._y += 10;
         } else {
            ....
         }
      };

   } else {
      delete this.onEnterFrame;
      moving = not moving;
   }
};

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

this.onMouseDown = function() {
   if (not moving) {
      moving = not moving;
      this.onEnterFrame = function() {
         if (welle_mc._y<Stage.height) {
            .....
         } else {
            delete this.onEnterFrame;
            delete this.onMouseDown;
            moving = not moving;
         }

      };
   } else {
      delete this.onEnterFrame;
      moving = not moving;
   }
};

Wenn sich bei einem Mausklick die Linie gerade bewegt, d.h. moving enthält den Wert true und not moving liefert den Wert false, wird die Bewegung dadurch gestoppt, dass der Event-Handler onEnterFrame gelöscht wird. Anschließend wird der Wahrheitswert von moving wieder umgedreht und enthält jetzt den Wert false, d.h. die Linie ist gestoppt und steht still.

this.onMouseDown = function() {
   if (not moving) {
      ...
   } else {
      delete this.onEnterFrame;
      moving = not moving;
   }

};