Sequenz von Anweisungen: Bühnenrechteck mit Farbe füllen und konturieren

Grundeinstellungen des Mainmovies

Bühnengröße: 600 x 400 px
Hintergrundfarbe: Weiß
Bildrate: 12 BpS


Für alle nachfolgenden Beispiele wird das Script im ersten Frame des Scripts-Kanals geschrieben.

Koordinatensystem des Mainmovies


Jeder Movieclip hat seinen Ursprung im linken oberen Pixel mit der Koordinate (0/0).
Da man bei 0 zu zählen beginnt, die Bühne 600 Pixel breit und 400 Pixel hoch ist, hat das rechte untere PIxel die Koordinate (599/399).

Ergebnis der swf-Datei

Der Programmcode ohne Erklärungen

// 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();

ActionScript ist case-sensitive, d.h. Groß-Kleinschreibung ist zu beachten !


Der Programmcode mit Erklärungen

Kommentare

// BÜHNENRECHTECK MIT FARBE FÜLLEN UND KONTURIEREN

Jeden Programmcode kann und soll man mit Kommentarzeilen versehen, um die inhaltliche Verständlichkeit und die optische Gliederung des Codes zu verbessern.
Wenn man einen Code nach Wochen oder Monaten wieder lesen oder an KollegInnen weitergeben möchte, ist ein kommentierter Code absolut notwendig.

Lieber zu viel als zu wenig kommentieren !

In ActionScript beginnt eine Kommentarzeile mit // und wird vom Compiler ignoriert. D.h. nach // kann man beliebigen Text schreiben.
Wenn man mehr Kommentarzeilen schreiben möchte, kann man diese in einem Kommentarblock zusammenfassen, der mit /* beginnt und mit */ endet.

/*
Das ist ein
Kommentarblock
über mehrere Zeilen.
*/

Einschub: Compiler

Der Compiler übersetzt den Programmcode in die Maschinensprache des Prozessores, da dieser den Text nicht "versteht", der in einer höheren Programmiersprache (z.B. ActionScript, Java, C++) geschrieben ist. Prozessoren haben einen eingeschränkten Satz von Befehlen (Befehlssatz), die unmitttelbar Aktionen auf der Hardwareebene bewirken. Wenn der Compiler den Code direkt in die Maschinensprache übersetzt, ist das Ergebnis ein ausführbares (executable) Programm (z.B. in Windows eine exe-Datei), das betriebssystemabhängig ist und von diesem ausgeführt werden kann. Das Betriebssystem kommuniziert mit dem Prozessor.

Ein Compiler kann den Code aber auch auf eine Zwischensprachebene übersetzen, der von einem Player "verstanden" (interpretiert) werden kann. Der Player (z.B. ShockwaveFlash-Player) ist betriebssystemabhängig und übernimmt hier die Kommunikation mit dem Betriebssystem. In diesem Fall sind die vom Compiler erzeugten Dateien, die der Player als Input erhält, betriebssystemunabhängig.
Ein in Flash erstelltes Programm (eine fla-Datei) wird vom Compiler in eine betriebssystemunabhängige ShockwaveFlash-Datei (swf-Datei) übersetzt, die vom betriebssystemabhängigen Flash-Player auf dem jeweiligen System abgespielt werden kann.

Sequenz

Das Script besteht aus einer linearen Abfolge von Anweisungen, die der Prozessor Anweisung für Anweisung abarbeitet.
Die Sequenz ist die einfachste Form, mehrere Anweisungen in einer Abfolge zusammenzufassen.

Man muss dem Compiler nur mitteilen, wann eine Anweisung endet und eine neue beginnen kann. Im Fall von ActionScript ist das Trennzeichen der Strichpunkt ;
In anderen Programmen beginnt z.B. durch eine neue Programmzeile eine neue Anweisung.

Das Schlüsselwort this

this.lineStyle(1, 0x000000);

Im vorigen Arbeitsschritt wurde erklärt, dass Movieclips Objekte mit Eigenschaften und Methoden sind. Wir wollen nun auf der Bühne des Mainmovies, das ein spezieller Movieclip ist, Linien zeichen. Dazu müssen wir das Mainmovie ansprechen und die Methoden zum Zeichnen von Linien aufrufen. Das Script wurde in der Timeline des Mainmovies plaziert, d.h. das Programm wird im Mainmovie ausgeführt. Mit dem Schlüsselwort this kann man nun genau das Objekt ansprechen in dem Programm plaziert ist und ausgeführt wird. Mit this wird in diesem Fall daher das Mainmovie bezeichnet. Über die Punktnotation kann man nun auf dessen Methoden zugreifen.

In unserem Beispiel könnte man this. weglassen und das Programm würde trotzdem funktionieren. Aber es ist besser, gleich vom Anfang an mit this zu arbeiten, um zu betonen, dass man auf Eigenschaften und Methoden der aktuellen Instanz zugreift.

Zeichenmethoden für Movieclips

Mit den ActionScript-Zeichenmethoden eines Movieclip-Objekts kann man direkt auf der Zeichenfläche des Movieclips (Bühne beim Mainmovie) Grafiken erstellen. Das entspricht dem Erstellen von Grafiken mit Hilfe der Werkzeuge aus der Werkzeuge-Palette in der Flash-Autorenumgebung. Nur werden in diesem Fall die Grafiken erst zur Laufzeit des Programms generiert.
Folgende Befehle stehen zur Verfügung:

beginFill, beginGradientFill, clear, curveTo, endFill, lineGradientStyle, lineStyle, lineTo, moveTo

Eine genaue Beschreibung der einzelnene Methoden ist in der Flash-Hilfe zu finden.

Festlegen der Strichstärke und -farbe, Hexadezimaldarstellung

this.lineStyle(1, 0x000000);

Durch lineStyle() wird für nachfolgende Aufrufe der Methode lineTo() ein Linienstil (Strichstärke und Linienfarbe) definiert. Dieser Stil gilt solange bis er durch den nächsten Aufruf von lineStyle() neu festgelegt wird.
Die Strichstärke wird in Pixel angegeben.

Die Linienfarbe wird als RGB-Wert in Hexadezimaldarstellung angegeben: 0x gefolgt von den Hexadezimalwerten für Rot, Grün und Blau.
Die Werte für Rot, Grün und Blau liegen im Dezimalzahlenbereich von 0 - 255.
Hexadezimalzahlen verwenden statt der Basis 10 die Basis 16 und haben 16 Ziffern 0, 1, ... , 9, A, B, C, D, E, F.
A entspricht der Dezimalzahl 10, B entspricht der Dezimalzahl 11, ... , F entspricht der Dezimalzahl 15.
Die Hexadezimalzahl FF entspricht der Dezimalzahl 255: FF = F*16^1+F*16^0 = 15*16+15 = 255.

Die Hexadezimalzahl 00 entspricht der Dezimalzahl 0 (00 = 0*16^1+0*16^0 = 0).
00 00 00 steht für den RGB-Wert (0, 0, 0) und somit für die Farbe Schwarz..
00 00 00 wird in ActionScript als 0x000000 geschrieben.

Im konkreten Beispiel wird die Linienstärke auf 1 Pixel und die Linienfarbe auf Schwarz eingestellt.

Festlegen der Füllfarbe und Füllen des Linienzugs mit der Füllfarbe

this.beginFill(0xFFFFCC);

// Zeichnen eines Linienzugs
....

this.endFill();

Durch beginFill() wird für den nachfolgenden Linienzug eine Füllfarbe in Hexadezimaldarstellung definiert.
endFill() versieht den Linienzug, der seit dem letzten Aufruf von beginFill() hinzugefügt wurden mit der Füllfarbe, die im vorherigen Aufruf von beginFill() definiert wurde.

Die Hexadezimalzahl CC entspricht der Dezimalzahl 204 (CC = 12*16^1+12*16^0 = 204).
FF FF CC steht für den RGB-Wert (255, 255, 204) und somit für ein helles Gelb als Füllfarbe.

Zeichenstift zur Ausgangsposition bewegen

this.moveTo(0, 0);

moveTo() bewegt den "angehobenen Zeichenstift" zur angeggebenen Movieclip-Koordinate.

Gerade Linien zeichnen, Bühneninformationen abrufen, Terme

this.lineTo(Stage.width-1, 0);
this.lineTo(Stage.width-1, Stage.height-1);
this.lineTo(0, Stage.height-1);
this.lineTo(0, 0);

lineTo() zeichnet eine gerade Linie in dem durch lineStyle() definierten Linienstil von der momentanen Zeichenstiftposition zur angeggebenen Movieclip-Koordinate.

Über die Klasse Stage kann man auf Eigenschaften dieser Klasse zugreifen, um Informationen über die Begrenzungen einer swf-Datei zu erhalten.
Stage.width und Stage.height liefern die Anzahl der Pixel in der Breite und Höhe der Bühne des Mainmovies der swf-Datei. In unserem Fall ist die Breite = 600 Pixel und die Höhe = 400 Pixel.

Da man bei 0 zu zählen beginnt, die Bühne 600 Pixel breit und 400 Pixel hoch ist, hat das rechte untere PIxel der Bühne die Koordinate (599/399).
Daher werden die Linien nur bis zur Bühnenbreite und -höhe minus 1 gezeichnet.

Stage.width-1 ist ein Term (Ausdruck) in dem eine erste einfache Berechnung durchgeführt wird.
Ein Term wird immer von innen nach außen ausgewertet und liefert einen Endwert.
Zuerst wird Stage.width ausgewertet und liefert den Wert 600. Die Zahl 1 muss nicht weiter ausgewertet werden.
Anschließend wird vom Wert 600 die Zahl 1 subtrahiert und als Ergebnis liefert der gesamte Term den Wert 599, der anschließend als Eingabewert für die x-Koordinate in der Methode lineTo verwendet wird.

Durch den oben angegebenen Code wird die Bühne konturiert.