Zeichnen einer Wellenlinie

Ergebnis der swf-Datei

Der Programmcode ohne Erklärungen

Codeabschnitte, die sich nicht vom vorigen Arbeitsschritt unterscheiden, werden grau geschrieben.

// BÜHNENRECHTECK MIT FARBE FÜLLEN UND KONTURIEREN
//
this.lineStyle(1, 0x000000);
this.beginFill(0xFFFFCC);
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();

/*
ZEICHNEN DER WELLENLINIE
*/
this.lineStyle(2, 0xFF0000);
var m:Number = Stage.height/2;
this.moveTo(0, m);
this.curveTo(50, m-70, 100, m);
this.curveTo(150, m+70, 200, m);
this.curveTo(250, m-70, 300, m);
this.curveTo(350, m+70, 400, m);
this.curveTo(450, m-70, 500, m);
this.curveTo(550, m+70, 600, m);



Der Programmcode mit Erklärungen

Linienstil definieren

this.lineStyle(2, 0xFF0000);

Der Linienstil wird neu definiert. Linienstärke: 2 Pixel; Linienfarbe: Rot mit dem RGB-Wert (255,0,0) = Hexadezimalwert (FF,00,00).

Variable und Wertzuweisung

Eine Variable kann man sich als eine Schachtel mit Namen vorstellen, in die bestimmte Inhalte hineingelegt werden können. Wenn man den Namen der Schachtel kennt, kann man später auf deren Inhalt zugreifen.
Variablen bewahren Zustände, Informationen aus der Vergangenheit und Gegenwart, die man in der Zukunft wieder abfragen möchte.
Technischer gesprochen, wird durch eine Variablendefinition (Variablendeklaration) ein bestimmter Speicherplatz im Hauptspeicher reserviert. Über den Variablennamen wird dieser Speicherplatz angesprochen, d.h. man kann den Inhalt abfragen bzw. einen neuen Inhalt hineinschreiben.
Bei der Variablendeklaration wird neben dem Varaiblennamen auch der Variablentyp festgelegt. Durch den Typ wird festgelegt, wieviel Speicherplatz reserviert werden soll und welche Inhalte in die Schachtel gelegt werden dürfen. Bevor ein Inhalt in die Schachtel gelegt wird (= der Variablen ein Wert zugewiesen wird), wird geprüft, ob der Typ des Inhalts mit dem der Variablen übereinstimmt (= type checking). Wenn das nicht der Fall ist erfolgt eine Fehlermeldung - meist durch den Compiler beim Übersetzen des Programms (= type mismatch error).
Wenn bei einer Variablendeklaration ein Speicherplatz definiert wird, ist dieser nicht "leer", denn die Bits haben auf jeden Fall den Wert 0 oder 1. Nur ist die darin enthaltene Information sinnlos (= undefined). Man muss daher, bevor man das ersten Mal auf den Inhalt der Variablen zugreift, dieser einen Anfangswert zuweisen (= initialisieren). Die Speicherung eines Inhalt in einer Variablen nennt man Wertzuweisung (assignment).

var m:Number = Stage.height/2;

Das obige Beispiel ist eine Kombination aus Variablendeklaration mit Wertzuweisung (Initialisierung) und könnte auch so geschrieben werden:

var m:Number;
m = Stage.height/2;

Über das Schlüsselwort var wird eine Variablendeklaration eingeleitet, gefolgt vom Varaiblennamen und dem Typ: var name:type
Somit wurde ein Speicherplatz unter dem Namen m reserviert, der als Inhalt Zahlen aufnehmen kann.

Im nächsten Schritt wird der Varibalen m ein Wert zugewiesen, indem der Term Stage.height/2 ausgewertet und das Ergebnis der Variablen m zugewiesen wird.
/ ist der Divisionsoperator. Die Variable m enthält jetzt den Wert 200, das ist die halbe Bühnenhöhe.

Eine Wertzuweisung auf eine Variable hat die allgemeine Gestalt: var = term
wobei zuerst der Term auswertet und anschließend das Ergebnis aus einem Zwischenspeicher (Rechenregister) auf den durch die Variable definierten Speicherplatz übertragen wird.

Startpunkt der Kurvenlinie festlegen

this.moveTo(0, m);

Unter Verwendung der Variablen m wird der Startpunkt der Kurvenlinie in der Mitte des linken Bühnenrandes festgelegt (0|m).

Erstes Kurvensegment zeichnen

Neben dem Zeichnen von geraden Liniensegmenten mit lineTo() gibt es auch die Möglichkeit, mit curveTo() Kurvensegmente zu zeichnen und diese aneinanderzuhängen.
Dabei werden in ActionScript quadratische Bézierkurvensegmente verwendet, die jeweils durch 2 Ankerpunkte und einem dazwischenliegenden Steuerpunkt (control vertex) definiert werden.
Das gebogene Liniensegment verläuft durch die Ankerpunkte und wird vom Steuerpunkt "angezogen".

Die meisten anderen vektororientierten Programme (wie Freehand, Illustration, CorelDraw, 3ds max) verwenden kubische Bézierkurven, die zwei Steuerpunkte verwenden, um die Biegung zwischen zwei Ankerpunkten zu definieren.

Bézier-Kurven

this.curveTo(50, m-70, 100, m);

Nachdem die Koordinate des ersten Ankerpunktes durch die momentane Position des Zeichenstiftes bereits definiert ist ( in unserem Fall durch moveTo()), genügt es in der curveTo-Methode nur die Koordinaten des Steuerpunktes und des zweiten Ankerpunktes anzugeben.
In unserem Fall hat für das erste Segment der Steuerpunkt die Koordinate (50 | m-70) und der zweite Ankerpunkt die Koordinate (100 | m).

Kurve bis zum rechten Bühnenrand weiterzeichnen

Anschließend werden die restlichen Kurvensegmente bis zum rechten Bühnenrand gezeichnet, wobei der zweite Ankerpunkt aus dem vorhergehenden Kurvensegment der erste des neuen Segments ist und nicht mehr extra definiert werden muss. In der obigen Grafik sind die Steuer- und Ankerpunkte gelb zusammengefasst, die in demselben curveTo-Methodenaufruf verwendet werden.
Durch die abwechselnde Folge von m+70 und m-70 entsteht die gleichmäßige Schwingung.

this.curveTo(150, m+70, 200, m);
this.curveTo(250, m-70, 300, m);
this.curveTo(350, m+70, 400, m);
this.curveTo(450, m-70, 500, m);
this.curveTo(550, m+70, 600, m);