Zeichnen mit Actionscript

von Moritz Kern | 0 | 16485 Aufrufe

Anzeige Hier werben

Beispiel 1: Quadrat

Um die einzelnen Zeichnungen später direkt ansprechen zu können, sollte man immer in einem Movieclip (mc) zeichnen. Dazu erstellen wir zu erst einen leeren mc:

 
ActionScript
1
2
//erstellt einen leeren Movieclip mit dem Instanznamen linie_1
this.createEmptyMovieClip("linie_1", 1);

Dann weisen wir der Linie die wir Zeichnen wollen einen Style zu

 
ActionScript
1
2
//Linienstärke 1, Farbe rot, Alpha 100
linie_1.lineStyle(1, 0xFF0000, 100);

Jetzt geben wir die Anfangskoordinaten der Linie (innerhalb unseres mc) an

 
ActionScript
1
2
//x=100px, y=50px
linie_1.moveTo(100, 50);

und als letzten Schritt noch die Zielkoordinaten

 
ActionScript
1
2
//x=300px, y=50px
linie_1.lineTo(300, 50);

d.h. die linie ist jetzt waagrecht und 200px lang
den mc kann man separat ansprechen und zum Beispiel verschieben

 
ActionScript
1
2
linie_1._x = 200;
linie_1._y = 100;

um ein Quadrat zu Zeichnen und mit einer Farbe zu füllen, muss das As folgenderweise erweitert werden

// Quadrat zeichnen Bsp.2  
ActionScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
this.createEmptyMovieClip("linie_1", 1);
//um nicht jedes mal linie_1. schreiben zu müssen...
with(linie_1) {
    lineStyle(1, 0xFF0000, 100);
    //beginnt die Fläche zwischen den Punkten zu füllen
    beginFill(0xFF0000);
    moveTo(100, 50);
    lineTo(300, 50);
    lineTo(300, 250);
    lineTo(100, 250);
    lineTo(100, 50);
    //beendet die Füllung
    endFill();
}

um die x- / y-Koordinaten nicht bei jedem Punkt angeben zu müssen, kann man für wiederkehrende Elemente eine Funktion schreiben:

// Quadrat Zeichnen Bsp.2  
ActionScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
this.createEmptyMovieClip("linie_1", 1);
//Quadrat (mc, x, y, width, height)
//Funktionsaufruf
quadrat (linie_1, 100, 50, 200, 200);
//Quadratfunktion
function quadrat (ziel_mc, q_x, q_y, q_width, q_height){
    with(ziel_mc) {
        lineStyle(1, 0xFF0000, 100);
        //beginnt die Fläche zwischen den Punkten zu füllen
        beginFill(0xFF0000);
        //Berechnung der Werte
        moveTo(q_x, q_y);
        lineTo(q_x + q_width, q_y);
        lineTo(q_x + q_width, q_y + q_height);
        lineTo(q_x, q_y + q_height);
        lineTo(q_x, q_y);
        //beendet die Füllung
        endFill();
    }
}

Ergebnis von Bsp.1 und Bsp.2:

Bild zu Zeichnen mit Actionscript
rotes Quadrat

Beispiel 2: Kurve

Um Kurven zu erzeugen braucht man die Funktion curveTo()
curveTo() besitzt zusätzlich zu den Zielkoordinaten zwei Steuerkoordinaten curveTo(s_x, s_Y, ziel_x, ziel_y); mit denen die Ausrichtung der Kurve angegeben wird.

Bild zu Zeichnen mit Actionscript

Die Kurve spannt sich zwischen Start- /und Zielpunkt und neigt sich zum Steuerpunkt hin.

// curveTo()  
ActionScript
1
2
3
4
5
6
this.createEmptyMovieClip("circle_mc", 1);
with (circle_mc) {
    lineStyle(0, 0x000000, 100);
    moveTo(100, 200);
    curveTo(200,100,300,200);
}

Beispiel 3: Von der Kurve zum Kreis

Der erste Schritt zum Kreis ist den Kreis in ein Quadrat zu Zeichnen, also mit 8 Koordinaten:

// Kreis Bsp.1  
ActionScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
this.createEmptyMovieClip("circle_mc", 1);
with (circle_mc) {
    lineStyle(0, 0x0000FF, 100);
    beginFill(0xFF0000);
    moveTo(100, 200);
    curveTo(100,300,200,300);
    curveTo(300,300,300,200);
    curveTo(300,100,200,100);
    curveTo(100,100,100,200);
    endFill();
}
Bild zu Zeichnen mit Actionscript
Kreis in Quadrat

Doch wie leicht zu Erkennen ist, ist der Kreis nicht ganz rund.
Einen runden Kreis mittels Actionscript zu Zeichen ist etwas aufwändiger.
Dazu verdoppeln wir die Anzahl der Koordinaten und lassen uns die Steuerpunkte berechnen

// Kreis Bsp.2  
ActionScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
this.createEmptyMovieClip("kreis_rund_mc", 3);
kreis_rund_mc.lineStyle(1, 0x000000);
//kreis(Movieclip, x, y, radius)
kreis(kreis_rund_mc, 200, 200, 100);
function kreis(mc, x, y, r) {
    mc.moveTo(x+r, y);
    mc.curveTo(r+x, Math.tan(Math.PI/8)*r+y, Math.sin(Math.PI/4)*r+x, Math.sin(Math.PI/4)*r+y);
    mc.curveTo(Math.tan(Math.PI/8)*r+x, r+y, x, r+y);
    mc.curveTo(-Math.tan(Math.PI/8)*r+x, r+y, -Math.sin(Math.PI/4)*r+x, Math.sin(Math.PI/4)*r+y);
    mc.curveTo(-r+x, Math.tan(Math.PI/8)*r+y, -r+x, y);
    mc.curveTo(-r+x, -Math.tan(Math.PI/8)*r+y, -Math.sin(Math.PI/4)*r+x, -Math.sin(Math.PI/4)*r+y);
    mc.curveTo(-Math.tan(Math.PI/8)*r+x, -r+y, x, -r+y);
    mc.curveTo(Math.tan(Math.PI/8)*r+x, -r+y, Math.sin(Math.PI/4)*r+x, -Math.sin(Math.PI/4)*r+y);
    mc.curveTo(r+x, -Math.tan(Math.PI/8)*r+y, r+x, y);
}
Bild zu Zeichnen mit Actionscript
runder Kreis

Wenn man nun beide Kreise übereinander legt ist der Unterschied deutlich zu sehen:

Bild zu Zeichnen mit Actionscript

Beispiel 4: Zeichnen mit der Maus

Auch das Zeichnen mit der Maus lässt sich relativ einfach realisieren:

// Stift Funktion  
ActionScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
//wenn die Maus bewegt wird
this.onMouseMove = function() {
    //und wenn gleichzeitig der Mauszeiger gedrückt ist
    // also draw = true ist
    if (draw) {
        //dann zeichne
        _root.lineStyle(1, 0x000000, 100);
        _root.lineTo(_root._xmouse, _root._ymouse);
    }
};
//wenn Maustaste gedrückt 
this.onMouseDown = function() {
    draw = true;
    _root.moveTo(_root._xmouse, _root._ymouse);
};
//wenn Maustaste losgelassen
this.onMouseUp = function() {
    draw = false;
};

um die Zeichnungen wieder löschen zu können, legen wir uns noch eine Schaltfläche an:

// Schaltfläche zeichnen  
ActionScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
_root.createEmptyMovieClip( "btn_clear", 1 );
with (_root.btn_clear){
    beginFill (0x000000, 50);
    moveTo (25, 25);
    lineTo (175, 25);
    lineTo (175, 50);
    lineTo (25, 50);
    lineTo (25, 25);
    endFill();
}
//Schaltflächen Funktion: Zeichnung löschen
_root.btn_clear.onRelease = function() {
    _root.clear();
}

Ergebnis:

Bild zu Zeichnen mit Actionscript

Der waagrechte Balken ist die Schaltfläche mit der Löschfunktion.