Linie in Flash bringen! [Step 1 von 2]
[Step 1] Linien ziehen
Wie können in Flash dynamisch Linien gezogen werden? Im Gegensatz zu anderen Programmiersprachen gibt in "ActionScript" kein Befehl zum Linien zeichnen à la
Line(x1, y1, x2, y2). Man behilft sich stattdessen mit einem Trick. Man bastelt bereits vorher eine Linie und legt diese als MovieClip ab. Wenn nun auf "Kommando" eine Linie von a nach b gezogen werden soll, wird dieses MovieClip kopiert, an Punkt a gesetzt und so skaliert das die Linie bei b aufhört.Die Krux an der Geschichte ist, daß man sich mit einem clever gebauten Linien-MovieClip sich eine Menge Scherereien ersparen kann. Kein Rotieren, kein großes Berechnen notwendig.
Unser Linien-MovieClip
Dazu zeichnen wir zuerst eine Linie, diagonal im 45 Grad Winkel, von oben links nach unten rechts (
[SHIFT]-Taste drücken hilft beim Einrasten auf 45 Grad). Die Linie muß die Dicke "Haarlinie" haben. Bei anderen Srickstärken würde die Linienstärke später mitskaliert werden!
Die Linie muß 100 Pixel breit und 100 Pixel hoch sein (notfalls in der Info-Palette per Hand eingeben). Dies erspart uns später Berechnungen bzgl. der Skalierung anzustellen.
Die Linie muß außerdem verschoben werden, so daß die obere linke Ecke auf dem Mittelpunkt des MovieClips liegt, erkennbar am dunklen Kreuz. Damit kann das Linien-MovieClip auf eine Koordinate positioniert werden, die identisch mit dem Startunkt
a der gewünschten Linie ist.Man sollte nun meinen, das man die Linie um irgendeinen Winkel rotieren müßte, damit die Linie zum Punkt
b hinzeigt. Nee, muß man nicht. Man nehme mal das Linien-MovieClip und skaliere es mal spaßeshalber per Hand. Und man sieht das sich beim skalieren aufgrund der 45 Grad-Neigung der Linien jedesmal nicht nur die Größe sondern auch der Winkel ändert! Wenn wir also richtig skalieren, brauchen wir keine Drehung der Linie!Um diese Linie nun dynamisch in Flash einzusetzen, schreiben wir eine Funktion. Die Funktion braucht, natürlich, zwei Daten als Parameter: Den Startpunkt, und den Endpunkt. Zuerst wird das MovieClip auf den Startpunkt positioniert. Anschließend passend skaliert: Die Skalierung entspricht der benötigten Linienlänge. Also xscale = x2-x1, ymouse = y2-y1.
Soweit die Vorbereitungen. Nun zur praktischen Anwendung. Wie weiter oben erwähnt: Jedesmal wenn wir eine Linie ziehen müssen, erzeugen wir per ActionScript ein Duplikat des Linien-MovieClips: Mit
duplicateMovieClip wird unser LinienClip "geklont", bekommt einen neuen, dynamisch erzeugten Namen verpasst. Die Eigenschaften des geklonten Clips werden dann entsprechend der oben erwähnten Berechnungen ausgeführt: Klon positionieren, und dann skalieren.Das ganze wird praktischerweise zur Wiederverwendung in einer Funktion geschrieben:
Code
// CREATELINE (x1, y1, x2, y2)
function createLine(x1, y1, x2, y2) {
_root.linecounter = _root.linecounter + 1;
duplicateMovieClip(_root.mc_line, "mc_line" + _root.linecounter, _root.linecounter);
setProperty ("_root.mc_line"+_root.linecounter, _x, x1);
setProperty ("_root.mc_line"+_root.linecounter, _y, y1);
setProperty ("_root.mc_line"+_root.linecounter, _xscale, x2-x1);
setProperty ("_root.mc_line"+_root.linecounter, _yscale, y2-y1);
}Gehen wir mal den Code durch: Es handelt sich um eine Funktion namens
createLine die vier Parameter bekommt, nämlich die x- und y-Koordinaten des Startpunktes (x1, y1) und des Endpunktes (x2, y2).Eine globale Variable namens
linecounter wird um eins erhöht (1, 2, 3...). Diese Variable dient dazu die dynamisch generierten MovieClips mit einem "einzigartigen" Namen und einer entsprechenden depth zu versorgen.Die nächste Zeile klont unser Linien-MovieClip (hier
mc_line genannt), und gibt ihm einen neuen Namen. Dazu wird einfach die Variable linecounter genommen, und hinter dem "Namensstamm" mc_line angehängt: mc_line1, mc_line2, mc_line3 usw usf... Dritte Komponente des duplicateMovieClip-Befehls ist die depth, eine Art "z-Order" um die Linien "pseudomäßig" im Raum anzuordnen (Stapel-Reihenfolge welche Linie verdeckt welche Linien).Darunter werden die Eigenschaften unseres Klons gesetzt. Wie oben bereits erwähnt: Setzen des MovieClips auf den Startpunkt x1/y1. Und dann skalieren entsprechend der Länge der Linie.
ActionScript von Flash ist eng an JavaScript angelehnt. Das ist einerseits praktisch. Aber das ist auch tückisch da JavaScript viele Fehler mit einfachem Schweigen quittiert. Kritisch am oberen Beispiel sind die korrekte Schreibweise beim Erzeugen der Namen für die dynamischen Linien-Klons, sowie das korrekt Ansprechen der diversen Variablen und Properties, weswegen ich einen Gutteil der Variablen derzeit in der
_root-Ebene ablege. das ist wahrscheinlich nicht ideal, aber derzeit der beste Weg ehe sich bei mir eine praktischere Systematik durchgesetzt hat...So, nun haben wird das Basis-Rüstzeug. Auf der folgenden Seite wollen das Gelernte in die Praxis umsetzen. [weiter]
Ein einfaches Beispiel: Das Zeichnen von Linienzügen. Hier gibt es die Source-Datei, und im Fenster drunter gibt es den fertig kompilierten Flash-Film [Flash 5 vonnöten].
