Anzeige
Tutorialbeschreibung

Zeichnen per Actionscript (Zeichnungsmethoden I)

Zeichnen per Actionscript (Zeichnungsmethoden I)

Mit Actionscript ist es möglich, unabhängig von den Zeichnenwerkzeugen dynamisch Grafiken zu erzeugen.


Version: ab Flash MX

Niveau: fortgeschrittene AS-Einsteiger (ein hybrides Wesen!)

Vorkenntnisse: MovieClips, Koordinatensysteme, Grundlagen AS 1.0

Lernziele: Zeichnungsmethoden kennen lernen

Einführung

Flash verfügt mit den Zeichnungsmethoden der MovieClip-Klasse über ein hervorragendes Werkzeug, um per AS dynamische Grafiken zu erstellen. Leider wird ihr Potential selten wirklich ausgeschöpft, obwohl sie eine Reihe von Vorteilen bieten:

  • Dateien mit geskripteten Grafiken sind kleiner als Dateien, die vorgefertigte Grafiken enthalten. Das ist insbesondere für mobile devices (gemeint sind natürlich mobile Endgeräte, aber wer nimmt schon so einen steifen, unprofessionell klingenden Ausdruck in den Mund?) interessant.
  • Geskriptete Grafiken werden, natürlich abhängig von ihrer Komplexität, schneller dargestellt, was etwa bei Partikeleffekten einen Geschwindigkeitsvorteil ergibt.
  • Eine programmiertechnisch erzeugte Grafik läßt sich zur Laufzeit interaktiv ändern.
  • Spezifische Effekte können nur per Skripting erzeugt werden.

Um Mißverständnissen vorzubeugen: es geht nicht darum, auf Teufel komm raus nun alles zu skripten. Wenn man einen Kreis benötigt, wird man ihn i.d.R. händisch zeichnen. Es gibt jedoch Situationen, in denen sich eine geskriptete Lösung als flexibler erweist (s.a. am Ende die Erwähnung einiger konkreter Beispiele).

In einer kleinen Serie von Tutorials werden die Zeichnungsmethoden vorgestellt und einige beispielhafte Einsatzmöglichkeiten erklärt. Dieses erste Tutorial ist Voraussetzung für das Verständnis der folgenden Tutorials und sollte daher auch logischerweise zuerst durchgearbeitet werden (haha, geht jetzt auch nicht anders, da die übrigen Tuts noch gar nicht vorliegen).

Zeichnungsmethoden

  1. Um einen ersten Überblick zu erhalten, öffnen Sie die Actionscript-Hilfe in Flash und rufen die entsprechende Seite zur MovieClip-Klase auf. Dort finden Sie unter der Kategorie Methoden - Zeichnungsmethoden alle Methoden, mit denen Sie in einem MovieClip Zeichnungen erstellen, verändern und löschen können (hier: Flash MX 2004, MX ähnlich).

Im Einzelnen handelt es sich um folgende Methoden:

  • mc.moveTo(x-Position, y-Position): setzt den virtuellen Zeichenstift auf seine Anfangsposition
  • mc.lineStyle(Stärke, Farbe, Alpha): legt Linieneigenschaften fest
  • mc.beginFill(Füllfarbe, Alpha): definiert eine Füllfarbe
  • mc.beginGradienFill(augenscheinlich 100 verschiedene Parameter): definiert einen Farbverlauf
  • mc.endFill(): was einen Anfang hat, besitzt auch ein Ende (meistens jedenfalls)
  • mc.lineTo(x-Position, y-Position): zeichnet zur angegebenen Position eine Linie
  • mc.curveTo(Kontrollpunkt x, Kontrollpunkt y, x-Position, y-Position): zeichnet zur angegebenen Position eine Kurve
  • mc.clear(): verbannt den entstandenen Picasso ins digitale Nirvana

Als Behälter für die Zeichnung wird in jedem Fall ein MovieClip verwendet; daher bietet AS die Zeichenfunktionen als MovieClip-Methode und nicht als eigenes Objekt (Klasse) an. Die programmierte Zeichnung läßt sich wie die Instanz eines händisch erstellten Symbols einsetzen, d.h., man kann ihr Ereignisse, Methoden und Variablen zuweisen und mit ihr beliebig interagieren. Während des Zeichenvorgangs kann selbstverständlich mit verschiedenen Linien gearbeitet werden, so daß ein Objekt nicht zwangsläufig aus einheitlichen Elementen bestehen muß. Nach Fertigstellung jedoch sind einzelne Änderungen nicht mehr möglich - auch darin gleicht die programmierte Zeichnung der Instanz eines händisch erstellten MovieClips. Muß dennoch beispielsweise eine andere Füllung her, bleibt nur das Neuzeichnen. Lediglich der MovieClip-Behälter läßt sich nachträglich ändern, etwa bezüglich seines Alphawerts.

Wie beim klassischen Zeichnen mit einem althergebrachten Bleistift nimmt man bei Flash ein Zeichenblatt, symbolisiert durch einen leeren MovieClip, und setzt in diesem eine Anfangsposition für die Zeichnung, falls man nicht im Nullpunkt des MCs beginnen möchte. Wie bei jeder Verwendung dynamischer MovieClips muß man sich zuvor Gedanken machen über das Koordinatensystem, mit dem man arbeiten möchte. Wählt man aus Gründen der Einfachheit das Koordinatensystem von _root mit dem Koordinatenursprung in der linken oberen Ecke, dann sollten sich alle erstellten, leeren MovieClips an dieser Position befinden. Arbeitet man dagegen jeweils mit den lokalen Koordinatensystemen der MovieClips, so ist gegebenenfalls eine Umrechnung mit den Methoden localToGlobal()/globalToLocal() notwendig. Bei den nachfolgenden, einfachen Übungen können wir dieses Problem vernachlässigen, in den weiteren Tutorials spielt es dagegen eine wichtige Rolle.

Zum Einstieg wollen wir eine simple Linie zeichnen, die sich exakt vertikal mittig von links nach rechts über den Screen erstreckt.

  1. Erstellen Sie einen neuen Film mit folgenden Eigenschaften: 800x600, 18 bps, Hintergrund 0066ff (beliebige Farbe möglich, solange sie ausreichend zu unseren Objekten kontrastiert).
  2. Fügen Sie folgendes Bildskript in _root ein:

this.createEmptyMovieClip("z",this.getNextHighestDepth());
vSth = Stage.height/2;
z.moveTo(0,vSth);
z.lineStyle(2,0xffaa00,100);
z.lineTo(Stage.width,vSth)

  1. Testen Sie mit <strg><ENTER> und freuen sich über eine wundervolle Gerade, die vor Ihnen ihre ganze Pracht entfaltet. Nunja, Picasso hat auch mal klein angefangen.

Die erste Zeile erstellt einen leeren MovieClip als Behälter zur Aufnahme unserer Zeichnung. Er besitzt den bescheidenen Instanznamen "z" und wird auf der nächsten freien Tiefe eingefügt, die Flash ermittelt. Da hier die speziefische Tiefe keine Rolle spielt, können wir Flash automatisch einen Wert zuweisen lassen. Wenn wie in unserem Fall der eingefügte MovieClip keine x- und y-Position zugewiesen erhält, setzt ihn Flash standardmäßig auf 0. Damit stimmt sein lokales Koordinatensystem mit demjenigen von _root überein.

Da wir zwar am linken Rand, aber vertikal mittig auf dem Screen zeichnen wollen, setzen wir den Zeichenstift auf die gewünschte Position. Der erste der Methode moveTo() übergebene Parameter gibt die x-Position, der zweite die y-Position an. Der Startpunkt unserer Zeichnung liegt also bei einer Screenhöhe von 600 bei den Werten 0 (linker Rand) und 300 (vertikale Mitte). Da wir später noch öfter auf die vertikale Screenmitte zugreifen müssen, wurde der betreffende Wert in der Variablen vSth gespeichert.

Die zu zeichnende Linie verfügt laut der Methode lineStyle() über eine Stärke von 2 Pixel, eine orangene Farbe, übergeben als Hexcode, sowie einen Alphawert von 100 %. Beim Schreiben des Hexcodes sind die vorangestellten Zeichen 0x absolut notwendig, sonst kann Flash den Farbwert nicht korrekt wiedergeben.

In der letzten Zeile wird der Stift von seiner Ausgangsposition, also den Werten in moveTo(), auf die Zielposition in lineTo(), gezogen. Als Ziel definieren wir die gegenüberliegende Seite des Screens. Damit entsteht die gewünschte Linie. Anstelle der Screeneigenschaften Screen.width und Screen.height hätten wir zwar auch mit konkreten Zahlen arbeiten können, so läßt sich der Code aber unabhängig von der konkreten Filmgröße verwenden, ohne daß wir die Zahlenwerte anpassen müssen.

Bilder

  1. Hätten wir auf das moveTo() verzichtet, dann wäre die Linie bereits von der linken oberen Ecke, nämlich der Position des leeren MovieClips aus, gezogen worden. Das können wir leicht testen. Kommentieren Sie die Zeile mit dem moveTo aus:

//z.moveTo(0,vSth);

Als Ergebnis entsteht eine von links oben zur rechten Screenmitte verlaufende Linie.

  1. Heben Sie den Kommentar wieder auf.

Um aus der Linie ein Rechteck zu erstellen, muß der Zeichenvorgang lediglich fortgeführt werden.

  1. Schreiben Sie daher ab Zeile 5:

z.lineTo(Stage.width,vSth+10);
z.lineTo(0,vSth+10);
z.lineTo(0,vSth);

Was nun geschieht, verdeutlicht folgende Grafik:

Bilder

Die Mitte ist nun durch ein sich horizontal über den ganzen Screen erstreckendes Rechteck gekennzeichnet.

Mit jedem lineTo() wird einfach eine weitere Linie hinzugefügt. Da ein anständiges Rechteck naturgemäß von vier Linien umschlossen wird, entsteht das gewünschte Objekt. Damit muß der Zeichenvorgang nicht zwangsläufig enden. Er läßt sich beliebig fortsetzen, z.B. durch Hinzufügen weiterer Linien. Diese können direkt eingefügt werden, oder es kann der Zeichenstift an eine andere Position verschoben werden, um dort fortzufahren. Wir wählen diesmal letzteren Weg.

  1. Ergänzen Sie das Skript wie folgt:

z.moveTo(100,vSth);
z.lineTo(100,vSth - 50);
z.lineTo(140,vSth - 50);
z.lineTo(140,vSth);
z.moveTo(100,vSth - 50);
z.lineTo(120,vSth-70);
z.lineTo(140,vSth-50);

Heraus kommt ein nahezu exaktes Abbild des Hauses, in dem der Autor dieser Zeilen wohnt (der verantwortliche Architekt wurde damals noch vor Fertigstellung gefeuert - was angesichts des Ergebnisses durchaus verständlich ist).

Wie Sie sehen, ist das Prinzip einfach: soll eine Linie vom aktuellen Punkt aus gezogen werden, verwendet man lineTo mit Angabe des Zielpunktes. Möchte man dagegen den Zeichenstift an eine andere Position bewegen, ohne dabei zu zeichnen, behilft man sich mit moveTo, dem ebenfalls die Zielposition mitgegeben wird.

So schön die eben gezeichnete Villa auch ist, so ließe sich ihr Charmefaktor noch erheblich steigern durch einen weltoffenen Charakter, sprich: es fehlen Tür und Fenster.

  1. Ergänzen Sie den Code wie folgt:

//Tür
z.moveTo(105,vSth);
z.lineStyle(1,0xffffff,100);
z.lineTo(105,vSth-30);
z.lineTo(115,vSth-30);
z.lineTo(115,vSth);
//Fenster
z.moveTo(120,vSth-15);
z.lineTo(120,vSth-30);
z.lineTo(135,vSth-30);
z.lineTo(135,vSth-15);
z.lineTo(120,vSth-15);

Ein Haus mit Grundstück für läppische 314 Byte - da kann keine Bausparkasse mehr mithalten!

Bilder

Wie Tür und Fenster zeigen, sind innerhalb des Zeichenvorgangs Änderungen von Linieneigenschaften wie beispielsweise Stärke und Farbe möglich.

Bisher verwendeten wir nur gerade Linien, aber natürlich sind auch Kurven möglich, die sich etwa hervorragend für Hügel eignen.

  1. Schreiben Sie nach dem bisherigen Code:

//Hügel
z.moveTo(180,vSth);
z.lineStyle(0,0x000000,100);
z.curveTo(280,vSth-100,380,vSth);
z.lineTo(180,vSth);

Erneut setzen wir den Zeichenstift an eine neue Position, nämlich rechts einige Pixel vom Haus entfernt. Der Hügel bekommt eine schwarze Farbe und wird mit einer Haarlinie (daher Stärke 0) gezeichnet. Die Methode curveTo sorgt für die gekrümmte Linie und benötigt vier Parameter. Die beiden letzten entsprechen der Endposition der Kurve. Die beiden Parameter davor definieren, salopp gesprochen, die Position eines unsichtbaren Magneten, in dessen Richtung sich die Kurve krümmt. Dieser Magnet ist nichts anderes als der Anfasser, den wir erhalten, wenn wir in Flash mit Hilfe des Unterauswahlwerkzeugs einen Vektorpunkt auswählen.

Bilder

Die letzte Zeile, das lineTo, führt die Linie wieder zum Ausgangspunkt und schließt unseren Hügel ab.

  1. Da unser Hügel grasbewachsen ist, wollen wir ihm das notwendige Grün nicht vorenthalten. Fügen Sie in den bisherigen Code für den Hügel folgende Zeilen ein (Fettdruck):

//Hügel
z.moveTo(180,vSth);
z.beginFill(0x00cc00,100);
z.lineStyle(0,0x000000,100);
z.curveTo(280,vSth-100,380,vSth);
z.lineTo(180,vSth);
z.endFill();

Die Methode beginFill muß diejenigen Zeichnenvorgänge umschließen, die eine Füllfarbe erhalten sollen. Dazu gehören in unserem Beispiel die veränderte Liniendefinition, die Kurve sowie die Grundlinie. Naheliegenderweise muß die entstehende Figur zudem geschlossen sein. Ist das nicht der Fall, dann fügt Flash automatisch eine abschließende Linie ein, die aber nicht immer unseren Wünschen entspricht. Deshalb sollte man sie direkt im Code definieren. Die Füllmethode erwartet als Parameter lediglich den gewünschten Farbwert, der wie bei der Linie als Hexcode übergeben wird, sowie den Alphawert. Den Abschluß markiert die endFill()-Methode.

Damit ist Ihr neues Haus bezugsfertig!

Zum Schluß bleibt noch der Farbverlauf, der aufgrund der zahlreichen Parameter erheblich komplexer als die bisher vorgestellten Methoden ist. Actionscript bietet zwei verschiedene Varianten an. Wir wollen uns mit der einfacheren begnügen, da sie für unsere Zwecke ausreichende Möglichkeiten bietet.

  1. Da wir ihn jetzt nicht mehr benötigen, kommentieren Sie den bisher geschriebenen Code aus oder löschen ihn oder erstellen eine neue Datei mit den gleichen Eigenschaften wie die bisherige Datei. Einen mehrzeiligen Kommentar erzeugen Sie, indem Sie vor die erste auszukommentierende Zeile /* und am Ende der letzten auszukommentierenden Zeile */ einfügen.
  2. Schreiben Sie folgendes Bildskript:

this.createEmptyMovieClip("z", 1);
var colors = [0xFF0000, 0xffaa00];
var alphas = [100, 100];
var ratios = [0, 255];
var matrix = {matrixType:"box", x:0, y:0, w:200, h:200, r:0};
z.beginGradientFill("linear", colors, alphas, ratios, matrix);
z.lineTo(200, 0);
z.lineTo(200, 200);
z.lineTo(0, 200);
z.lineTo(0, 0);
z.endFill();
z._x = z._y = 100;

Wenn Sie testen, dürfen Sie sich über ein hübsches Rechteck mit einigen Lieblingsfarben des Autors freuen:

Bilder

Wie zuvor beginnen wir auch hier mit einem leeren MovieClip als Behälter für unsere Zeichnung. Danach erwartet Actionscript vier Definitionen für die Füllung, bei denen es sich um folgende handelt:

  • var colors: ein Array mit allen im Verlauf vorkommenden Farben, übergeben als Hexcode. Die erste Farbe definiert den Beginn bzw. den Mittelpunkt des Farbverlaufs, je nach Art, die beim Aufruf von beginGradientFill verwendet wird.
  • var alphas: ein Array mit den Alphawerten der zuvor erwähnten Farben.
  • var ratios: ein Array mit den Anteilen der Farbwerte am gesamten Farbverlauf. Werte zwischen 0 und 255 sind gültig. Die Anzahl der Elemente muß logischerweise in allen drei Arrays miteinander übereinstimmen. Ist das irgendwo nicht der Fall, schweigt sich Flash vornehm aus anstatt mit einer Fehlermeldung zu protestieren, und es wird auch nichts angezeigt. Gleiches gilt für einen ungültigen Wert in einem der Arrays. Da macht Fehlersuche insbesondere in komplexen Skripten wieder richtig Spaß. Dazu unten gleich mehr.
  • var matrix: ein Objekt, das, einfach gesprochen, Position, Größe und Drehung des Verlaufs festlegt. Als Matrixtype beharrt Flash in jedem Fall auf einer "box". Die x- und y-Werte beziehen sich auf die linke obere Ecke des Verlaufs. Diese Werte müssen nicht zwangsläufig mit der ersten Zeichnungsposition übereinstimmen. Die beiden folgenden Werte legen Breite und Höhe fest, während zum Schluß die Drehung in Grad definiert wird.

Natürlich sind die Namen der Arrays und Objekte beliebig. Die Methode beginGradientFill übergibt den Füllungstyp, der entweder einem linearen oder einem radialen Farbverlauf entspricht, sowie die zuvor definierten Arrays bzw. Objekte. Erst danach beginnt der eigentliche Zeichenvorgang, indem die Form durch vier lineTo festgelegt wird. Das entspricht dem Zeichenvorgang, den wir bereits beim Häuslebauen in der vorhergehenden Übung kennen gelernt haben. Abgeschlossen wird mit einem endFill.

Auf den ersten Blick verwirrend dürfte die Angabe der ratios sein. Gehen wir der Einfachheit halber von einem radialen Farbverlauf mit einer Drehung von 0 Grad aus, wie er oben gezeichnet wurde. Dann läßt sich der Verlauf horizontal in insgesamt 256 verschiedene Stufen (von 0 bis 255) unterteilen, an denen eine beliebige Farbe ungemischt in vollem Glanz erstrahlen kann. Was das bedeutet, zeigt folgende Abbildung:

Bilder

Wir haben also an der frühestmöglichen Position, nämlich direkt am Anfang des Verlaufs, ein ungemischtes Rot, und an der letztmöglichen Position, am Ende des Verlaufs, ein reinrassiges Orange. Alle Farbtöne dazwischen stellen eine Mischung zwischen Rot und Orange und damit einen Verlauf von Rot zu Orange dar.

Die 256 Abstufungen dürfen nicht mit Pixeln verwechselt werden. Es spielt prinzipiell keine Rolle, ob wir unserem Verlauf eine Breite von 100 Pixeln oder gleich bildschirmfüllende 800 gönnen: in jedem Fall steht die gleiche Anzahl an Stufen zur Verfügung. Ihre Wirkungsweise läßt sich noch besser verstehen, wenn wir in unserem Beispiel einfach mit verschiedenen Werten experimentieren.

  1. Ändern Sie die Definition der Farbverteilung wie folgt:

var ratios = [127, 255];

Nun verschiebt sich der gesamte Farbverlauf nach rechts. Auf den Positionen 0 bis 127 erscheint Rot in vollstem Glanze, und erst ab dieser Stelle beginnt der eigentliche Verlauf d.h. die Mischung Richtung Orange. Und wenn Sie als unverbesserlicher Spaßvogel in beiden Fällen 255 eintragen, ist nur noch Rot zu erkennen (dies ist eine versteckte Auffoderung zum testen, also los!).

Die Reihenfolge und Größe der Zahlen, die in ratios definiert werden, spielen eine wichtige Rolle. Um einen Verlauf erzeugen zu können, muß jede nachfolgende Zahl größer sein als die vorhergehende. Was passiert, wenn das nicht der Fall ist, können Sie bei entsprechender Codeänderung testen.

  1. Ändern Sie die Definition der Farbverteilung wie folgt:

var ratios = [200,100];

Es ergibt sich keine Farbmischung, sondern einfach eine aus zwei Farbblöcken bestehende Füllung:

Bilder

(Sorry, das war vom Autor wirklich böse: eine rote Füllung auf blauem Hintergrund!)

Der radiale Farbverlauf beginnt ja bekanntlich links und erst an der Position 200 ist der letzte Punkt erreicht, an dem wir ein ungemischtes Rot erhalten. Unser reinrassiges Orange dagegen beginnt schon vor dieser Stelle, nämlich an Position 100. Daher kann es keinen Farbverlauf zwischen beiden mehr geben. Anders sieht es aus, wenn wir den zweiten Wert erhöhen, z.B. auf 220. Dann gibt es einen recht kleinen Bereich, in dem ein Verlauf von Rot zu Orange dargestellt wird.

Ein Verlauf muß natürlich nicht zwangsläufig aus bescheidenen zwei Farben bestehen, so schön diese auch sein mögen. Wie beim Farbmischer dürfen Sie ruhig klotzen und gerne auch eine Handvoll Farben definieren. Entscheidend ist nur, daß für jede Farbe ein Alphawert, ein Hexwert und ein Anteil (bzw. eine Position) angegeben werden.

  1. Wer keine Angst vor Augenkrebs hat, darf gerne beispielsweise folgende Kombination ausprobieren:

var colors = [0xFF0000, 0xffaa00, 0xff66aa, 0x00ff00];
var alphas = [100, 100, 100,100];
var ratios = [0,120,190,255];

Vergleichbar dem Transformationswerkzeug, mit dem man einen Farbverlauf drehen kann, läßt sich auch per AS eine Drehung definieren. Dazu muß lediglich in unserem matrix-Objekt an letzter Stelle ein entsprechender Wert mit gegeben werden. Da Flash mit Grad arbeitet, beginGradientFill aber mathematisch korrekt auf Bogenmaß beharrt, wenn wir einen Winkel angeben, muß unser Wert noch dementsprechend umgerechnet werden. Ohne hier auf den mathematischen Hintergrund näher eingehen zu wollen, lautet die Umrechnungsformel: Bogenmaß = Grad/180 * PI.

  1. Setzen Sie die Werte wieder zurück auf den ursprünglichen zweifarbigen Verlauf.
  2. Um einen Farbverlauf zu erhalten, der sich von links oben nach rechts unten erstreckt, ändern Sie den bisherigen Code wie folgt (Fettdruck):

this.createEmptyMovieClip("z", 1);
var colors = [0xFF0000, 0xffaa00];
var alphas = [100, 100];
var ratios = [0, 255];
var matrix = {matrixType:"box", x:0, y:0, w:200, h:200, r:(45/180)*Math.PI};
z.beginGradientFill("linear", colors, alphas, ratios, matrix);
z.lineTo(200, 0);
z.lineTo(200, 200);
z.lineTo(0, 200);
z.lineTo(0, 0);
z.endFill();
z._x = z._y = 100;

Ähnlich funktioniert der Verlauf bei einem Kreis. Allerdings werden unsere 256 verschiedenen Stufen vom Verlaufsmittelpunkt aus berechnet. Wenn man der ersten Farbe 0 zuweist, bedeutet dies, daß sie nur im Kreismittelpunkt zu 100% dargestellt, an jeder anderen Stelle aber mit der zweiten Farbe gemischt wird.

  1. Ersetzen Sie den unter Schweiß und Tränen mühsam erstellten, bisherigen Code durch diese Zeilen:

this.createEmptyMovieClip("z", 1);
var colors = [0xFF0000, 0xffaa00];
var alphas = [100, 100];
var ratios = [0, 255];
var matrix = {matrixType:"box", x:0, y:0, w:200, h:200, r:0};
z.beginGradientFill("radial", colors, alphas, ratios, matrix);
z.lineTo(200, 0);
z.lineTo(200, 200);
z.lineTo(0, 200);
z.lineTo(0, 0);
z.endFill();
z._x = z._y = 100;

Wie schon zuvor erstellen wir einen leeren Behälter, in den wir zeichnen. Lediglich matrix erhält an letzter Stelle einen anderen Wert, nämlich 0 (da der Mittelpunkt unseres Kreises nicht verschoben wurde, wäre eine Drehung sicher etwas schwer zu erkennen), und den Typ ändern wir von "linear" auf "radial". Schon entsteht ein kreisförmiger Verlauf.

Vornehm verschwiegen wird hier die Tatsache, daß es noch eine andere Möglichkeit gibt, einen Farbverlauf zu erzeugen: eine Transformationsmatrix, die jedoch nur in ganz bestimmten Fällen einen Vorteil gegenüber der oben verwendeten Methode bietet, dafür aber vom Verständnis her noch komplizierter ist.

Bei den bisherigen Übungen haben wir der Einfachheit halber darauf geachtet, daß gezeichnetes Rechteck und Füllung deckungsgleich sind. Das muß jedoch nicht zwangsläufig so sein. Das Rechteck, das mit lineTo definiert wird, stellt nämlich nichts anderes dar als eine Art Maske, durch die man auf den darunter liegenden Verlauf blickt. Dessen Koordinaten dürfen sich also von denjenigen des Rechtecks unterscheiden. Dazu abschließend eine kleine Übung:

  1. Der ganze Kreis läßt sich beispielsweise nach rechts verschieben, wenn man in matrix eine Positionsangabe ändert (Fettdruck):

var matrix = {matrixType:"box", x:100, y:0, w:200, h:200, r:0};

Relativ zum linken Rand des gezeichneten Rechtecks wird der Kreis nach rechts verschoben. Übrig bleibt ein roter Halbkreis, wie die Abbildung zeigt:

Bilder

Wird er dagegen um 200 Pixel verschoben, bleibt nichts mehr vom Kreis übrig, denn das gezeichnete Rechteck ist ja auch nur 200 Pixel breit. Der Kreisrand liegt also exakt rechts außerhalb des Rechtecks.

Puh, schwitz, genug gezeichnet. Bliebe noch die Frage, wieweit solche Objekte identisch sind mit den händisch erstellten Pendants. Glücklicherweise kann man ihnen genau so Skripte zuweisen.

  1. Der kreisförmige Verlauf lässt sich zu einem geräuschlosen Abgang überreden, wenn wir ihm ein entsprechendes Mausereignis zuweisen. Erweitern Sie daher das bestehende Skript um folgende Zeilen:

z.onPress = function(){
this.removeMovieClip()
}

Bei Klick auf das gezeichnete Objekt wird es gelöscht. Natürlich lassen sich auch alle anderen Ereignisse, über die ein MovieClip verfügt, zuweisen. Dadurch lassen sich interessante Effekte realisieren.

Damit wären schon mal einige Grundlagen der Zeichnungsmethoden bekannt. Was kann man nun damit anfangen? Stellen Sie sich beispielsweise eine Anwendung vor, die externe Daten einliest, um sie in Diagrammen zu visualisieren. Die Diagramme lasen sich dann per Skripting erzeugen. Natürlich könnte man vorher MovieClips erstellen und damit etwa Balkendiagramme aufbauen (attachMovie, _xscale/_yscale). Aber die Darstellung von Kreisdiagrammen würde zur aufwändigen Fummelarbeit. Ein Kreissegment läßt sich nicht mehr wie ein Balken durch simples Skalieren abbilden, programmiertechnisch kann es aber sehr wohl erstellt werden.

Zahlreiche Effekte können nur dynamisch gezeichnet werden, etwa geometrische Figuren, die ihre Form und Position abhängig von User-Aktionen ändern. Stellen Sie sich Linien vor, die über den Screen, ausgehend von der Maus, gezeichnet werden. Sie weisen eine Krümmung abhängig von der Mausposition innerhalb der unteren oder oberen Screenhälfte auf. Schon die Krümmung wäre mit einem vorgefertigten MovieClip nicht mehr realisierbar, wenn sich die Kurve dynamisch anpassen soll.

Wir haben einen simplen Mausverfolger kennen gelernt (was heißt hier "Ham wa nich"? Dann aber flugs zu dem entsprechenden Tutorial!), der mit der attachMovie()-Methode arbeitet. Das läßt sich durchaus resourcensparender mit den Zeichnungsmethoden umsetzen und erweitern.

Ein beliebter Effekt ist das Nachzeichnen des Umrisses eines Objekts. Dazu verwendet man üblicherweise eine Maske, die den Umriss freilegt. Dieses Vorgehen ist nicht nur recht unflexibel, da kleine Änderungen schon mal zum vollständigen Neuaufbau des Maskentweens zwingen können, sondern auch noch ziemlich zeitaufwändig. Erheblich einfacher läßt sich derselbe Effekt mit einer geskripteten Zeichnung realisieren.

Wie wäre es mit einer Wegbeschreibung, bei der auf einer Karte sukzessive Punkte eingeblendet werden? Man kann die Punkte zwar manuell setzen, aber mit einer ähnlichen Methode wie im Falle des eben erwähnten Maskentweens erfolgt die Realisierung schneller und flexibler.

Und wenn wir schon bei Masken sind: Da sich Masken skripten lassen, ermöglichen die Zeichnungsmethoden Effekte, die anders gar nicht oder nur mit einem enormen Mehraufwand erzielt werden können.

In den folgenden Tutorials (d.h.: falls Interesse besteht) wollen wir uns mit einigen der hier angesprochenen Beispiele näher befassen.

Bis dahin viel Spaß

(Die Tutorials zu den Zeichnungsmethoden stellen eine gekürzte und geänderte Fassung eines Kapitels dar, das in einem Studienbuch zu Actionscript erscheinen wird)


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von SchweiniX
  • 28.11.2010 - 00:02

Gutes TUT nur hab ich es als Anfänger nicht wirklich hinbekommen xD

Portrait von flashpit
  • 17.08.2010 - 15:05

...schön und unterhaltsam erklärt - Danke!

Portrait von Litti
  • 30.10.2009 - 19:42

tolle Möglichkeiten, Danke

Portrait von Priscilla23
  • 22.10.2009 - 11:48

Toll erklärt! Freue mich auf die anderen Tutorials.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 18.10.2009 - 15:45

Nachdem ich das hier gelesen habe, finde ich das Zeichnen per AS viel eifnacher als mit den z.B. wirklich schweren Verlaufsverkzeug. Wraum hat Adobe nicht einfach die Ebeneigenschaft von Photoshop übernommen? Da waren die Ebeneigenschaften viel einfacher.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 13.07.2009 - 14:53

sehr schön! ich bin begeister!

Portrait von _dp_
  • 02.06.2009 - 14:11

Danke hat mir sehr geholfen

Portrait von Schokolily
  • 06.05.2009 - 16:33

Danke. Super erklärt. weiß jetzt endlich wie man Objekte in AS zeichnet. Hab es vorher zwar schon gesehen in etlichen Tutorials, aber bisher noch nicht so super vermittelt bekommen wie hier.

Portrait von EagleZ
  • 06.04.2009 - 19:28

Danke für den hilfreichen Workshop, schau mir auch noch die anderen an ;)

Portrait von Azrasha
  • 14.11.2008 - 00:11

Danke für das sehr gute Tutorial. Gut verständlich und sauberes Deutsch. Dazu Anregungen zum Ausprobieren. Was will man mehr? Ich bin auf die anderen aus der Reihe gespannt.

5 Sterne von mir

Portrait von simmbass
  • 05.09.2008 - 16:28

schöner workshop, danke


toll erklärt

Portrait von dave84620
  • 03.04.2008 - 10:24

Super Workshop! Hat mir sehr weitergeholfen!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 25.10.2007 - 19:08

nicht schlecht wenn man es begriffen hat

Portrait von martinita
  • 04.02.2007 - 13:29

Sehr schöne Erklärung. Werde ich gleich ausprobieren

Portrait von pinsel77
  • 21.11.2006 - 18:01

Finde die Erklärung auch sehr Verständlich geschrieben, super, mehr davon!

Portrait von sono23
  • 20.11.2006 - 20:34

hey. super erklärt!! Nicht viele können Code so gut beschreiben! Repekt!! Und vielen dank!!

Portrait von Whykiki
  • 18.09.2006 - 16:14

Super!!

Toll geschrieben und astrein erklärt!

Wann und wo bekommt man dieses Studienbuch?
Bitte per Mail an: kiki@wwr-band.com

Portrait von skoller
  • 06.09.2006 - 10:54

Wunderbare Erklärung. Vielen Dank

Portrait von h_seldon
  • 24.08.2006 - 11:26

Hallo wolf,<br>
<br>
warum? Was ist daran "scheiß"?

Portrait von h_seldon
  • 06.09.2006 - 08:10

Hallo,<br>
<br>
stimmt, das kann man händisch schneller zeichnen. Aber wenn Du noch mal den Anfang und das Ende des Tutorials durchliest, dann <br>
<br>
siehst Du, warum man Zeichnungsmethoden verwenden soll:<br>
nicht, um simple Linien und Kreise zu zeichnen, sondern um beispielsweise bestimmte Mauseffekte zu realisieren, um dynamisch Daten <br>
<br>
zu visualisieren, um eine sehr geringe Dateigröße zu erhalten, etc. Manche Effekte lassen sich zudem nur mit den Zeichnungsmethoden <br>
<br>
darstellen. Da es im Tutorial aber zunächst um die Grundlagen ging, würde es keinen Sinn machen, mit solch komplexen Themen zu <br>
<br>
beginnen - daher simple Linien und Kurven, um die betreffenden AS- Methoden kennen zu lernen.<br>
<br>
Viel Spaß

x
×
×