Definition einer Funktion, die eine Wellenlinie in einem Movieclip zeichnet

zurück zum Hauptmodul
In diesem Arbeitsschritt wird eine Funktion curve definiert mit der man in einem beliebigen Movieclip eine Wellenlinie zeichnen kann. Diese Funktion wird dann in den nachfolgenden Arbeitsschritten verwendet, um Movieclips mit einer Grafik zu füllen. Es können natürlich anstelle der Wellenlinie beliebige Grafiken oder z.B. Text verwendet werden.
Es geht in dieser Übung nicht um die Wellenlinie, sondern um das Erzeugen von Movieclips und deren Steuerung durch Maus und Tastatur.

Ergebnis der swf-Datei

Der Programmcode mit Kommentar ohne Erklärungen

Kommentare sind im nachfolgenden Code grau geschrieben.

// ZEICHNEN EINER WELLENLINIE IN EINEM MOVIECLIP
//
// Ausgangspunkt der Kurve festlegen
var point: Array = [0,Stage.height/2];
// Aufruf der Gesamtkurvenfunktion mit baseCurve als Basiskurvenfunktion
curve(this, baseCurve, point, 45, 200, 1, 0x000000);
/*
Definieren der Funktion curve(), Kurve mit Parametern
Input: mc, Movieclip in dem die Kurve gezeichnet wird
      bc, Funktion der Basiskurve
      pt, Ausgangspunkt der Gesamtkurve
      a, eine ganze Zahl - Breite des Basiskurvenabschnitts
      b, eine ganze Zahl - Höhe des Basiskurvenabschnitts
      lineWidth, eine ganze Zahl - Strichstärke
      lineColor, eine Hexadezimalzahl - Linienfarbe
Output: -
*/
function curve(mc:MovieClip, bc:Function, pt:Array, a:Number, b:Number, lineWidth:Number, lineColor:Number):Void {
   mc.lineStyle(lineWidth, lineColor);
   mc.moveTo(pt[0], pt[1]);
   do {
      pt = bc(mc, pt, a, b);
   } while (0<=pt[0] && pt[0]<Stage.width && 0<=pt[1] && pt[1]<Stage.height);
}
/*
Definieren der Funktion baseCurve(), Basiskurve mit Parametern
Input: mc, Movieclip in dem die Kurve gezeichnet wird
      pt, Ausgangspunkt der Kurve
      a, eine ganze Zahl - Breite des Kurvenabschnitts
      b, eine ganze Zahl - Höhe des Kurvenabschnitts
Output: Endpunkt der Kurve
*/
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

Defintion der Funktionen baseCurve() und curve()

Die Funktion baseCurve beschreibt die Grundschwingung der Wellenlinie, die in der Funktion curve nebeneinander gesetzt und wiederholt wird.
Der Programmcode wird in der Übung Einführung in die Programmierung mit ActionScript in den Arbeitsschritten 7 - 9 genau erklärt.
Der einzige Unterschied besteht darin, dass der Movieclip, in dem die Kurve gezeichnet werden soll, als Parameter an die Funktionen übergeben wird.

function curve(mc:MovieClip, ....
{
   mc.lineStyle(....);
   mc.moveTo(....);
   do {
      pt = bc(mc, pt, a, b);
   ....

function baseCurve(mc:MovieClip, ....
   mc.curveTo(....);
   mc.curveTo(....);
   ....

Alle Movieclipzeichnungsmethoden werden relativ zum übergebenen Movieclip-Parameter mc aufgerufen.

mc.lineStyle(....)
mc.moveTo(....)
mc.curveTo(....)

In der Funktion curve wird über den Funktionsaufruf bc(mc, pt, a, b) der Movieclip an die Basiskurvenfunktion baseCurve weitergereicht.

Funktionsaufruf

Das Script ist nach wie vor im ersten Frame der Timeline des Mainmovies plaziert. D.h. mit this wird in dem Script das Mainmovie bezeichnet.
Im nachfolgenden Funktionsaufruf wird über this das Mainmovie als Movieclip an die Funktion curve übergeben und somit wird die Kurve auf der Bühne des Mainmovies gezeichnet.
Das Mainmovie wir innerhalb der Funktion curve als Movieclip an die Basisfunktion baseCurve weitergereicht, in der der eigentliche Zeichenvorgang erfolgt.

curve(this, baseCurve, point, 45, 200, 1, 0x000000);

Wenn man vorher einen neuen Movieclips erzeugt hat, kann man diesen als Eingabeparameter an die Funktion curve übergeben.
Das Erzeugen von Movieclips wird im nächsten Arbeitsschritt erklärt.

zurück zum Hauptmodul