Dynamisches Zeichnen in Flash MX

Mit Flash MX ist es erstmals in der Geschichte von Flash möglich, mit ein paar einfachen Befehlen und ohne Umwege oder Hindernisse ein Objekt zu zeichnen. Wir wollen dies sogleich an einem Rechteck und an einer Ellipse demonstrieren. Bevor wir jedoch mit dem Einzeichnen der Objekte beginnen können, müssen wir einige Vorarbeiten erledigen. So benötigen wir zunächst einen passenden Cursor. Erstellen Sie ein neues Flash-Dokument. Die bestehende Ebene soll den Namen „cursor“ tragen. Erstellen Sie ein zirka 10 Pixel großes Kreuz, wie in folgender Grafik (800-fach vergrößert):


Der Cursor

Über die Funktionstaste F8 wollen wir das Kreuz in ein MovieClip-Symbol konvertieren. Markieren Sie anschließend die Instanz des MovieClip-Symbols und rufen Sie über die Funktionstaste F9 das Aktionen-Fenster auf. Nachfolgend benötigen wir einige Anweisungen in ActionScript. So wollen wir zum Beispiel den ursprünglichen Mousecursor verstecken, während wir den eigenen Cursor einblenden. Des Weiteren müssen wir dafür sorgen, dass unser Cursor der Mausposition folgt.


Sobald der MovieClip geladen wird, führen wir die nachfolgenden Anweisungen aus. In der ersten Zeile blenden wir über „Mouse.hide()“ den ursprünglichen Mousecursor aus. Die zweite Anweisung stellt sicher, dass der neue Cursor auch der Mouse folgt. Im Folgenden initialisieren wir einige Variablen. Die Ausmaße eines Objektes sollen später von den vier Variablen „left“, „top“, „right“ und „bottom“ festgelegt werden. Zum Zeichnen von Objekten müssen wir auf das Drücken und das Loslassen der linken Maustaste reagieren. Ob die linke Maustaste aktuell gedrückt wird, halten wir in der Variable „pressed“ fest. Durch das Betätigen der linken Maustaste wollen wir den linken oberen Punkt des Objektes definieren. Hierfür benötigen wir das folgende ActionScript:


Beim Betätigen der linken Maustaste belegen wir die zuvor initialisierten Variablen „left“ und „top” mit den Koordinaten des Cursors. Zusätzlich erhält die Variable „pressed“ den Wert „true“. Somit signalisieren wir, dass die Maustaste aktuell gedrückt gehalten wird. Den rechten unteren Punkt des Objektes legen wir beim Loslassen der Maustaste fest. Damit die Ausmaße des Objektes bis zu diesem Zeitpunkt sichtbar sind, aktualisieren wir stets das Objekt. Dabei nehmen wir für die rechte untere Position die aktuelle Position des Cursors an:


Mit Hilfe des Ereignisses “onClipEvent(enterFrame)” führen wir die nachfolgenden Anweisungen in jedem Bildereignis aus. Solange die Maustaste gedrückt wird, aktualisieren wir die rechte untere Position des Objektes, indem wir den Variablen „right“ und „bottom“ die aktuelle Position des Cursors zuweisen. Schließlich rufen wir eine Funktion zum Einzeichnen des Objektes auf. Dabei übergeben wir die vier Variablen „left“, „top“, „right“ und „bottom“ zur Übermittlung der Ausmaße. In diesem Fall handelt es sich um das Einzeichnen eines Rechtecks, wie man an Hand des Funktionsnamens auch vermuten kann.

Schließlich müssen wir noch dafür sorgen, dass beim Loslassen der Maustaste die Variable “pressed” wieder auf “false” gesetzt wird:


Sobald dieses Ereignis eintritt, bestimmen wir auch die endgültigen Ausmaße des Objektes. Das Einzeichnen des Rechtecks mittels der Funktion „drawRectangle“ erfolgt in wenigen Zeilen. Erstellen Sie hierfür zunächst eine zweite Ebene „action“ und rufen Sie im ersten Bild der Zeitleiste erneut das Aktionen-Fenster auf. Platzieren Sie hier die folgenden Anweisungen:


Die Funktion „drawRectangle” erzeugt zunächst ein leeres MovieClip-Symbol mit dem Instanznamen “rectangle”. Der zweite Parameter bestimmt die Tiefe der Instanz in der Ebene. Ein Rechteck besteht im Wesentlichen aus vier Linien. Bevor wir die Koordinaten der Linien angeben können, müssen Sie die Beschaffenheit der Linien definieren. Mit „rectangle.lineStyle(1, 0x000000, 100);” weisen Sie der soeben erzeugten Instanz „rectangle” eine ein Pixel starke Linie in der Farbe schwarz mit einer Deckkraft von 100 Prozent zu. Natürlich soll unser Rechteck auch eine Füllfarbe erhalten. Hierfür benötigen wir die Anweisung „beginFill(0xcccc, 50)“. Der erste Parameter bestimmt die Füllfarbe, während der zweite Parameter erneut die Deckkraft in Prozent definiert. Bevor wir endlich mit dem Einzeichnen der Linien beginnen können, verschieben wir den Startpunkt der leeren Instanz mittels „moveTo(left, top)“ an die linke obere Position. Ausgehend vom Startpunkt können wir nun mit lineTo() die vier Linien einzeichnen. Die Funktion erwartet dabei stets die Koordinate des Zielpunktes.

Wenn Sie eine Ellipse zeichnen wollen, müssen Sie den Aufruf von „drawRectangle“ innerhalb des ActionScripts für unseren Cursor durch folgende Zeile ersetzen:


Die Funktion “drawCircle” definieren Sie, wie zuvor die Funktion “drawRectangle”, im ersten Bild der Ebene “action”:


Diese Funktion geht ähnlich vor, wie die Funktion „drawRectangle“. Statt Linien wollen wir nun natürlich Kurven einzeichnen. Hierfür verwenden wir die Anweisung „curveTo()“. Die Anweisung erwartet vier Parameter. Die ersten beiden Werte geben die X- und Y-Koordinate des Kontrollpunktes an, während die letzten beiden Werte die Koordinate des Ankerpunktes definieren.

Beispieldatei: Rechteck [Dynamisches_Zeichnen_in_Flash_MX1.zip]
Beispieldatei: Ellipse [Dynamisches_Zeichnen_in_Flash_MX2.zip]