Parametrisierung eines Anweisungsblocks

Ergebnis der swf-Datei

Das Zeichnen des Bühnenrandes und der Wellenlinie wurde parametrisiert.
Dadurch lassen sich sehr einfach bestimmte Eigenschaften verändern.

 

Parametrisierung des Bühnenrechtecks

Bis jetzt wurde das Bühnenrechteck immer mit hellgelber Farbe gefüllt und mit einer 1px-starken schwarzen Linie konturiert.
Füllfarbe, Linienstärke und -farbe waren fix in den Anweisungsblock der Funktion fillStage() hineingeschrieben.
Sinnvoll ist es jedoch, diese Eigenschaften als Eingabeparameter der Funktion zu definieren. Dadurch kann die Funktion in verschiedenen Situationen flexibler genutzt werden.

Parametrisierung der Wellenlinie

Dasselbe gilt für die Wellenlinie. Bis jetzt war die Größe der Basiswellenlinie auf ganz bestimmte Werte fixiert.

Man kann nun eine Funktion baseCurve für den "Grundbaustein" der Wellenline definieren bei der die Breite a, Höhe b und der Startpunkt (x|y) als Eingabeparameter dienen.
Die Kurvenpunkte (Anker- und Steuerpunkte) müssen dann in Abhängigkeit von den Eingabeparametern angegeben werden.
Als Rückgabewert liefert die Funktion den Endpunkt des Kurvenstücks, damit dieser für den nächsten Funktionsaufruf als Eingabeparameter für den Startpunkt dienen kann.

Array, Feld

Die oben beschriebene Funktion baseCurve hat einen Punkt als Eingabeparameter. Ein Punkt in der Ebene wird durch seine x- und y-Koordinate bestimmte, d.h. durch zwei Zahlenwerte.
Man könnte nun für die x- und y-Koordinate getrennt zwei Eingabeparameter definieren oder man fasst diese mit Hilfe eines Arrays zu einer Einheit zusammen und übergibt den gesamten Punkt als einen Eingabewert an die Funktion.

Ein Array, auch (indiziertes) Feld genannt, kann man sich als eine Reihe von nummerierten Schachteln (Elementen) vorstellen, die unter einem Namen zusammengefasst werden. In diesen Schachtel können Inhalte abgelegt werden. Arrays kommen in fast allen Programmiersprachen vor.

Man beginnt bei der Nummerierung wieder bei 0. D.h. wenn das Array aus n Schachteln (n Elementen) aufgebaut ist, so hat die letzte Schachtel in der Reihe die Nummer (den Index) n-1 .
n ist die Länge (length) des Arrays.

Eine Arraydeklaration in ActionScript. hat folgende Gestalt:

var name = new Array(Inhalt0, Inhalt1, Inhalt2, ...);

oder

var name = [Inhalt0, Inhalt1, Inhalt2, ...];

Die Inhalte können beliebige Ausdrücke (z.B. Zahlen, Zeichenketten, Terme) sein.
Wenn der Inhalt von einem Arrayelement wieder ein Array ist, spricht man von einem geschachtelten Array.
new Array() bzw. [ ] sind Arrays, die keine Elemente enthalten.

Auf den Inhalt der einzelnen Elemente (Schachteln) des Arrays kann man dann über den Arraynamen und die Elementnummer (Index) zugreifen.

name[Elementnummer]

In unserem Fall könnte man einen Punkt (u|v) als Array mit zwei Elementen für die x- und y-Koordinate darstellen:
var punkt = new Array(u,v);

punkt[0] liefert die x-Koordinate und punkt[1] die y-Koordinate.

Benannte Arrayelemente

Schöner wäre es jedoch, wenn man "Punkt-x" und "Punkt-y" für die x- und y-Koordinate des Punktes schreiben könnte.
Das ist möglich, wenn man den Arrayelementen einen Namen gibt.

Eine Arraydeklaration hat dann folgende Gestalt:

var name = new Array();
name.elementname0 = Inhalt0;
name.elementname1 = Inhalt1;
name.elementname2 = Inhalt2;
...

Abgerufen kann der Inhalt eines benannten Elements werden durch

name.elementname

Einen Punkt (u|v) als Array mit zwei Elementen für die x- und y-Koordinate könnte man jetzt folgendermaßen darstellen:
var punkt = new Array();
punkt.x = u;
punkt.y = v;

punkt.x liefert dann die x-Koordinate und punkt.y die y-Koordinate.

Der Programmcode ohne Erklärungen

// BÜHNENRECHTECK MIT FARBE FÜLLEN UND KONTURIEREN
fillStage(1, 0xFF0000, 0xCCCCFF);
/*
ZEICHNEN EINER WELLENLINIE
*/
this.lineStyle(2, 0xFF0000);
var m:Number = Stage.height/2;
var point = new Array();
point.x = 0;
point.y = m;
this.moveTo(point.x, point.y);
var w:Number = 50;
var h:Number = 200;
for (var i:Number = 0; i<6; i++) {
   point = baseCurve(point, w, h);
}
/*
DEKLARATION DER FUNKTIONEN baseCurve() UND fillStage()
*/
function baseCurve(pt:Array, a:Number, b:Number):Array {
   this.curveTo(pt.x+a/4, pt.y-b/2, pt.x+a/2, pt.y);
   this.curveTo(pt.x+3*a/4, pt.y+b/2, pt.x+a, pt.y);
   pt.x = pt.x+a;
   return pt;
}
function fillStage(lineWidth:Number, lineColor:Number, fillColor:Number):Void {
   this.lineStyle(lineWidth, lineColor);
   this.beginFill(fillColor);
   this.moveTo(0, 0);
   this.lineTo(Stage.width-1, 0);
   this.lineTo(Stage.width-1, Stage.height-1);
   this.lineTo(0, Stage.height-1);
   this.lineTo(0, 0);
   this.endFill();
}

 

Der Programmcode mit Erklärungen

Parametrisierung des Bühnenrechtsecks

function fillStage(lineWidth:Number, lineColor:Number, fillColor:Number):Void {
   this.lineStyle(lineWidth, lineColor);
   this.beginFill(fillColor);
   this.moveTo(0, 0);
   this.lineTo(Stage.width-1, 0);
   this.lineTo(Stage.width-1, Stage.height-1);
   this.lineTo(0, Stage.height-1);
   this.lineTo(0, 0);
   this.endFill();
}

Die Funktionsdeklaration von fillStage hat drei Eingabeparameter vom Typ Number für die Linienstärke, -farbe und Füllfarbe.
Mit diesen Parametern werden im Anweisungsblock lineStyle und beginFill definiert.

fillStage(1, 0xFF0000, 0xCCCCFF);

Die Funktion fillStage wird mit Linienstärke 1px, der Linienfarbe Schwarz und einer hellblauen Füllfarbe aufgerufen.
Die Farbewerte werden als Hexadezimalzahlen eingegeben.

Punkt als Array

var point = new Array();
point.x = 0;
point.y = m;

Hier wird die Variable point vom Typ Array definiert, die zwei Elemente mit den Namen x und y enthält.

Vorbereitungen für das Zeichnen der Kurve, Festlegen der Eingabeparameterwerte

this.lineStyle(2, 0xFF0000);
var m:Number = Stage.height/2;
var point = new Array();
point.x = 0;
point.y = m;
this.moveTo(point.x, point.y);
var w:Number = 50;
var h:Number = 200;

Die Linienstärke wird auf 2 Pixel, die Farbe auf rot festgelegt.
Anschließend wird der Startpunkt, gespeichert in der Variablen point, auf die Mitte des linken Bühnenrands positioniert und
die Breite und Höhe der Basiskurve wird auf 50 und 200 gesetzt.

Durch point , a und b sind die Ausgangswerte für den Verlauf der Gesamtkurve definiert und können als Parameter an die Funktion baseCurve übergeben werden.

Parametrisierung der Basiskurve

function baseCurve(pt:Array, a:Number, b:Number):Array {
   this.curveTo(pt.x+a/4, pt.y-b/2, pt.x+a/2, pt.y);
   this.curveTo(pt.x+3*a/4, pt.y+b/2, pt.x+a, pt.y);
   pt.x = pt.x+a;
   return pt;
}

Mit den Eingabeparametern pt , a und b wird die Kurve relativ zu diesen gezeichnet (siehe obige Skizze).
Nachdem die Zeichnung des Kurvenabschnitts erledigt ist, wird der Endpunkt der Kurve unter pt gespeichert. Da der y-Wert gleich bleibt, wird nur der x-Wert überschrieben (um a nach rechts verschoben).
Abschließend wird der Inhalt des Punktes (= Endpunkt der Kurve) mit der neuen x-Koordinate zurückgegeben.

Zeichnen der Gesamtkurve mit Hilfe der Basiskurve

for (var i:Number = 0; i<6; i++) {
   point = baseCurve(point, w, h);
}

Die for-Schleife wird 6-mal durchlaufen. In diesem Fall wird, im Gegensatz zu den bisherigen Versionen, die Variable i nicht mehr im Anweisungsblock der Schleife benötigt.

Im ersten Schleifendurchlauf wird die Funktion baseCurve mit den vorbereiteten Startwerten in point , w und h aufgerufen. D.h. der Inhalt der Variablen point wird an den Eingabeparameter pt (aus der Funktionsdefintion) übergeben, der Inhalt von der Varibalen w an den Eingabeparamter a und der Inhalt der Variablen h an den Eingabeparameter b

Die Funktion gibt einen Punkt zurück, der wieder in der Varibalen point abgespeichert wird. Der alte Wert von point wurde überschrieben und durch einen neuen Wert, nämlich dem Endpunkt des ersten Kurvenstücks, ersetzt.
Beim nächsten Schleifendurchlauf wird die Funktion baseCurve mit dem neuen Wert in point aufgerufen. Somit wird der Endpunkt des vorhergehenden Kurvenstücks zum Startpunkt des nächsten, usw.