Zeichnen mit Flash
In diesem Tutorial von Matthias Kannengiesser, Autor des »ActionScript-Praxisbuches«, geht es um den Einsatz der neuen Zeichnen API von Flash MX. Flash-Beispieldateien stehen zum Download bereit.
Einführung
Noch in Flash 5 war es recht kompliziert, das Zeichnen von Objekten zu programmieren. Selbst simple Linien waren lediglich mit vorgezeichneten Movieclips umzusetzen. Bei komplexeren Formen stieß man schnell an die Grenzen des Machbaren, so dass sich nur erfahrene ActionScript-Entwickler überhaupt an die Aufgabe wagen konnten – und selbst sie erzielten meist nur mittelmäßige Ergebnisse.
Mit Flash MX hat sich die Situation geändert. Durch die neue Zeichnen API wird das Zeichnen von Objekten mit Hilfe von ActionScript zum Kinderspiel und die Ergebnisse können sich sehen lassen.
In diesem Tutorial geht es um den Einsatz dieser neuen Zeichnen API. Wir versuchen mit der Hilfe der Zeichnen-Methoden einfache Zeichnungen anzufertigen. An dieser Stelle sei noch erwähnt, dass die Skripte ins erste Frame der Hauptzeitleiste eines Flash Filmes gehören!
Erste Schritte – einfache Formen
Wir sollten uns zu beginn mit einfachen Formen beschäftigen, um die neuen Zeichnen-Methoden kennenzulernen. Die einfachste Form stellt wohl eine Linie dar. Diese soll mit Hilfe der Zeichnen-Methoden dynamisch erzeugt werden, sprich ohne statische Vorlagen.
Die Methoden lineStyle(), lineto() und moveTo() sind hierfür genau richtig. Beide Methoden ermöglichen es dem Entwickler, einfache und komplexere Formen zu erzeugen. Hier die benötigten Codezeilen, um eine gerade Linie zu zeichnen:
_root.createEmptyMovieClip( „linie“, 1 );
with (_root.linie){
lineStyle (2, 0x000000, 100);
moveTo (50, 50);
lineTo (150, 50);
}
Mit der Methode lineStyle legt man die Linieneigenschaften fest, wie Dicke, Farbe und Deckkraft. Die Methoden lineTo() und moveTo() dienen der Positionierung und der Länge der Linie. Die Methode createEmptyMovieClip dient uns als Behälter für die dynmisch erzeugte Linie und enthält den Instanznamen und die Tiefe des erzeugten Movieclips.
Formen – geschlossene Körper
Kommen wir nun zu einer weiteren Form: den geschlossenen Körpern. Zu diesen gehören Quadrate und Dreiecke. Auch hierfür lassen sich die Zeichnen-Methoden verwenden.
_root.createEmptyMovieClip( „dreieck“, 2 );
with (_root.dreieck){
lineStyle (5, 0x888888, 100);
moveTo (150, 150);
lineTo (200, 200);
lineTo (100, 200);
lineTo (150, 150);
}
Sollten wir diesem Dreieck noch eine Füllung zuweisen wollen, steht uns die Methode beginFill() zur Verfügung. In dieser lässt sich die Farbe und die Deckkraft festlegen. Zur Methode beginFill() gehört noch die Methode endFill(). Hiermit lässt sich bestimmen, wo die Füllung beendet wird.
_root.createEmptyMovieClip( „dreieck“, 2 );
with (_root.dreieck){
beginFill (0xCCCCCC, 50);
lineStyle (5, 0x888888, 100);
moveTo (150, 150);
lineTo (200, 200);
lineTo (100, 200);
lineTo (150, 150);
endFill();
}
Ein Quadrat lässt sich auf die gleiche Weise erzeugen. Wir müssen lediglich auf die Koordinatenpunkte achten, die mit Hilfe von moveTo() und lineTo() festgelegt werden.
_root.createEmptyMovieClip( „quadrat“, 3 );
with (_root.quadrat){
beginFill (0xCCCCCC, 50);
lineStyle (5, 0x888888, 100);
moveTo (150, 150);
lineTo (200, 150);
lineTo (200, 200);
lineTo (150, 200);
lineTo (150, 150);
endFill();
}
Die Koordinaten werden im Uhrzeigersinn vergeben, hierfür dient auch der Pfeil in der Mitte des Qudrats um dies deutlich zu machen. Ihr solltet Euch daher davon nicht irritieren lassen!
Komplexere Formen
Kommen wir nun noch zu den komplexeren Formen. Wie wird beispielsweise ein Stern oder ein Mauszeiger erzeugt? Auch dies lässt sich mit Hilfe der Zeichnen-Methoden umsetzen. Die Koordinatenpunkte müssen lediglich genau festgelegt werden, eine Skizze bzw. Vorlage eignet sich hierbei hervorragend.
Wir wenden uns dem Mauszeiger zu. Hier die Codezeilen, die benötigt werden.
_root.createEmptyMovieClip(„mc_Zeiger“, 1);
// Filmsequenz der Mauszeiger-Form
mc_Zeiger.createEmptyMovieClip(„original“, 2);
mc_Zeiger.original.lineStyle(1, 0x000000, 100);
mc_Zeiger.original.beginFill(0xFFFFFF, 100);
// Mauszeiger (Koordinaten festlegen)
punkte = [[0,0], [7, 16], [1, 14], [1, 23], [-1, 23], [-1, 14], [-7, 16]];
// Mauszeiger (Koordinaten setzen)
for (j in punkte) {
mc_Zeiger.original.lineTo(punkte[j][0], punkte[j][1]);
}
// Schatten des Mauszeiger + Ausrichtung
mc_Zeiger.original._rotation = -24;
// Init-Objekt für den Schatten
objSchatten = {_x:original._x + 3, _y:original._y + 1}
// Schatten Filmsequenz erzeugen (mit Hilfe des Init-Objekt)
mc_Zeiger.original.duplicateMovieClip(„schatten“, 0, objSchatten);
// Schattenfarbe (neue Farbe zuweisen)
schattenFarbe = new Color(mc_Zeiger.schatten);
schattenFarbe.setRGB(0xcccccc);
// Original Maus (verstecken)
Mouse.hide();
// Mauszeiger an die Orignal-Mausposition setzen
this.onMouseMove = function() {
mc_Zeiger._x = _root._xmouse;
mc_Zeiger._y = _root._ymouse;
updateAfterEvent();
}
Wie man sieht, können die Zeichnen-Methoden ohne weiteres mit sonstigen ActionScript Methoden kombiniert werden. Sicherlich ist einigen folgende Zeile aufgefallen:
Hierbei handelt es sich um ein mehrdimensionales Array, mit dessen Hilfe die x/y-Koordinaten festgelegt werden. Diese beschreiben die Form unseres Mauszeigers. Und mit dem Init-Objekt:
wird die Position unseres Mauszeiger-Schattens festgelegt. Dieser ist um 3 Pixel nach rechts und einem Pixel nach unten versetzt.
Formen zeichnen mit Maus
Nun kommen wir noch zum letzten Beispiel dieses Tutorials, es handelt sich um ein simples Zeichenwerkzeug, welches jeder von uns in dem einen oder anderen Malprogramm bereits verwendet hat, nämlich dem Stift.
this.onMouseMove = function() {
if (draw) {
_root.lineStyle(1, 0x000000, 100);
_root.lineTo(_root._xmouse, _root._ymouse);
}
};
this.onMouseDown = function() {
draw = true;
_root.moveTo(_root._xmouse, _root._ymouse);
};
this.onMouseUp = function() {
draw = false;
};
Wie man sieht, kommen auch hier die drei Methoden moveTo(), lineTo() und lineStyle() zum Einsatz. Die Besonderheit liegt jedoch in der Zuweisung der Koordinatenpunkte, hierfür wird nämlich die aktuelle Mauszeiger-Position herangezogen. Die Signalvariable draw überprüft, ob der Nutzer den Mausschalter gedrückt hält, sprich zeichnet (true) oder nicht zeichnet (false).
Um die gezeichneten Formen von der Bühne zu entfernen, sollten wir uns noch eine Schaltfläche mit dem Instanznamen clear_btn erstellen. Dieser Schaltfläche weisen wir mit Hilfe des folgenden Hauptzeitleisten Skripts eine Funktion zu.
_root.clear();
}
Die Methode clear() sorgt dafür, dass die gezeichneten Formen der Hauptzeitleiste wieder entfernt werden.
Übrigens lässt sich die Schaltfläche auch dynamisch mit Hilfe der Zeichnen API erzeugen. Wie wäre es mit einem Rechteck, welches den Instanznamen clear_btn erhält.
_root.createEmptyMovieClip( „clear_btn“, 1 );
with (_root.clear_btn){
beginFill (0xCCCCCC, 50);
lineStyle (2, 0x888888, 100);
moveTo (25, 25);
lineTo (75, 25);
lineTo (75, 50);
lineTo (25, 50);
lineTo (25, 25);
endFill();
}
Wie wir sehen, lassen sich auch Interaktive Komponenten dynamisch erzeugen und dies auf recht einfache Art und Weise.
Hinweis
Wir haben in diesem Tutorial die wichtigsten Zeichnen-Methoden vorgestellt, jedoch sind das bei weitem noch nicht alle. Flash MX bietet uns zusätzlich folgende Methoden an:
MovieClip.curveTo()
Diese werden wir Euch in einem zukünftigen Tutorial vorstellen.
Fazit
Wie wir sehen, ist der Umgang mit den neuen Zeichnen-Methoden gar nicht so schwer. Man muss sich diesen neuen Möglichkeiten lediglich stellen und schon können die komplexesten Formen erzeugt werden!
