Zeichenobjekte / Graphics / drawRect / drawCircle / lineTo / Formen und Linien per AS3

Shape.graphics
Gradientfill Verlaufsfüllung
lineTo einfache Linien
curveTo Bezier Kurven
Bezier Segment kubische/ quadratische Bezier Kurven
Praxis gerade Linien zeichnen, Formen zeichnen
Form mit verschiebbaren Ecken
Praxis mit Maus zeichnen
Praxis Zeichnung speichen
Grundformen mit eigenen Klassen
Spirograph

Jedes Shape-, Sprite- und MovieClip-Objekt enthält eine graphics-Eigenschaft, bei der es sich um eine Instanz der Graphics-Klasse handelt. Die Graphics-Klasse enthält Eigenschaften und Methoden zum Zeichnen von Linien, Füllungen und Formen. Wenn Sie ein Anzeigeobjekt lediglich als Leinwand zum Zeichnen von Inhalten verwenden möchten, können Sie dazu eine Shape-Instanz einsetzen. Eine Shape-Instanz eignet sich besser als andere Anzeigeobjekte zum Zeichnen, da sie nicht über die zusätzlichen Funktionen der Sprite-Klasse oder der MovieClip-Klasse verfügt.

var cont:Shape = new Shape();
cont.graphics.beginFill(0x5500ff);
cont.graphics.drawCircle(100,100, 100);
addChild(cont);

Referenzen Adobe:
Graphics | Grundlagen Zeichnungs API | Draw Rect Adobe

Hier geht es um drawCircle(), drawRect() und weitere Zeichenmethoden.

Siehe hierzu auch die Tipps in AS2, denn die Methoden unterscheiden sich kaum von AS3.

Beachte dass die Methoden lineTo(), drawRect(), drawCircle() etc. Methoden der Graphics Klasse sind und daher die Schreibweise so aussieht:
this.graphics.lineTo(10,100);

this.graphics.lineStyle(2, 0x000000, 0.5);//Stärke, Farbe/ Alpha
this.graphics.beginFill(0x5500ff);
this.graphics.drawRect(100,100, 100, 100);//xpos, ypos, Breite , Höhe

this.graphics.beginFill(0x5500ff);
this.graphics.drawCircle(100,100, 100);//xpos, ypos, Radius

this.graphics.beginFill(0x5500ff);
this.graphics.drawEllipse(100,100, 100,50);//xpos, ypos, Breite, Höhe

Gradient Fill

Verlaufsfüllungen erzeugt man mit gradientFill Siehe auch die Refrenzen bei Adobe und das Matrix Tutorial bei senocular

Die Methode matr.rotate(); erwartet einen Winkel im Bogenmaß.
Der Kreisumfang des Einheitskreises ist:
U=2*Math.PI

Bogenmaß Grad
2*Math.PI 360°
Math.PI 180°
Math.PI/2 90°
Math.PI/4 45°


Mit folgender Formel rechnet man Bogenmaß in Grad um:
grad=(bogenmaß / Math.PI) * 180
Hiermit rechnet man Grad in Bogenmaß um:
bogenmass = (grad/180) * Math.PI

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

 

Flash AS3 lineTo

Zeichnen mit Actionscript 3

zurück zur Hauptseite Flash Actionscript 3

Die Zeichenmethoden in AS3 sind denen in AS2 sehr ähnlich. Ich habe hier einige Beispiele, die ich in AS2 gemacht habe, in AS3 nachgebaut.

Linie mit Actionscript zeichnen

Beispiel linie.swf

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

var myShape:Shape= new Shape(); 

this.addChild(myShape);

myShape.graphics.lineStyle(2, 0x990000, .75); 

myShape.graphics.moveTo(20,100); 

myShape.graphics.lineTo(250,130); 

Wie man hier sieht unterscheidet sich der Code kaum vom AS2 Code. In AS2 waren Grafiken immer MovieClips, das ist zwar heute auch möglich, sollte aber nur dann gemacht werden, wenn der Klasse noch Methoden hinzugefügt werden sollen, die mit der Shape Klasse nicht möglich sind. Beachte dass hier die Methode graphics eingefügt werden muss. Beachte, dass die Alpha Werte in AS3 nicht in Prozent angegeben werden, sondern von 0 bis 1.

Einfache Grafik dynamisch erstellen

Beispiel form.swf

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

var myShape:Shape= new Shape();
this.addChild(myShape);
myShape.x=20;
myShape.y=20;
myShape.graphics.lineStyle(1, 0x000000, 1);
myShape.graphics.beginFill(0xff00ff,0.5);
myShape.graphics.lineTo(0,100);
myShape.graphics.lineTo(100,100);
myShape.graphics.lineTo(20,10);
myShape.graphics.endFill();

Siehe AS2 Beispiel auf Seite 8

Beziere Kurve curveTo()

siehe auch hierzu die Adobe Referenzen

In flash gibt es die sogenannten quadratischen Bezierkurven. curveTo() erwartet 4 Parameter, welche die xy-Wert von 2 Punkten sind. Der erste Punkt ist ein Kontrollpunkt, zu dem sich die Kurve hinbiegt. In dem zweiten Punkt endet das curveTo-Liniensegement. Berühre die Punkte der Grafik oder die Punkte in der Formel im folgenden Beispiel.

Beispiel 1

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

var curveLine:Shape = new Shape();

function drawLine(){
curveLine.graphics.clear();
curveLine.graphics.lineStyle(1, 0x000000, 1);
curveLine.graphics.moveTo(400, 0);
curveLine.graphics.curveTo(p1_mc.x,p1_mc.y, 400, 100);
curveLine.graphics.curveTo( p2_mc.x,p2_mc.y, 400, 200);
this.addChild(curveLine);
}

p1_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragMe);
p2_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragMe);
p1_mc.addEventListener(MouseEvent.MOUSE_UP, dragStop);
p2_mc.addEventListener(MouseEvent.MOUSE_UP, dragStop);

function dragMe(evt:MouseEvent):void{
	evt.currentTarget.startDrag();
	this.addEventListener(Event.ENTER_FRAME, drawNew);
	}

function dragStop(evt:MouseEvent):void{
	evt.currentTarget.stopDrag();
	this.removeEventListener(Event.ENTER_FRAME, drawNew);
	}
	
function drawNew(evt:Event){
	drawLine();
}
drawLine();

Hier sieht man die Actions im Vergleich. Siehe dazu auch meinen Tipp Point.interpolate()
Beispiel 1 (voriges) Beispiel 2 (nächstes)

function drawLine(evt:Event){
curveLine.graphics.clear();
curveLine.graphics.lineStyle(1, 0x000000, 1);
curveLine.graphics.moveTo(400, 0);
curveLine.graphics.curveTo(p1_mc.x,p1_mc.y, 400, 100);
curveLine.graphics.curveTo( p2_mc.x,p2_mc.y, 400, 200);
this.addChild(curveLine);
}

function drawLine(evt:Event){
var P1:Point = new Point(p1_mc.x, p1_mc.y);
var P2:Point = new Point(p2_mc.x, p2_mc.y);
var P3:Point=Point.interpolate(P1, P2 ,0.5);
curveLine.graphics.clear();
curveLine.graphics.lineStyle(1, 0x000000, 1);
curveLine.graphics.moveTo(400, 0);
curveLine.graphics.curveTo(p1_mc.x,p1_mc.y, P3.x, P3.y);
curveLine.graphics.curveTo( p2_mc.x,p2_mc.y, 400, 200);
this.addChild(curveLine);
}

Beispiel 2

Siehe auch das effektvolle Beispiel Curtain

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

 
 var curveLine:Shape = new Shape();
 
function drawLine(){
var P1:Point = new Point(p1_mc.x, p1_mc.y);
var P2:Point = new Point(p2_mc.x, p2_mc.y);
var P3:Point=Point.interpolate(P1, P2 ,0.5);
curveLine.graphics.clear();
curveLine.graphics.lineStyle(1, 0x000000, 1);
curveLine.graphics.moveTo(400, 0);
curveLine.graphics.curveTo(p1_mc.x,p1_mc.y, P3.x, P3.y);
curveLine.graphics.curveTo( p2_mc.x,p2_mc.y, 400, 200);
this.addChild(curveLine);
}

p1_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragMe);
p2_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragMe);
p1_mc.addEventListener(MouseEvent.MOUSE_UP, dragStop);
p2_mc.addEventListener(MouseEvent.MOUSE_UP, dragStop);


function dragMe(evt:MouseEvent):void{
	evt.currentTarget.startDrag();
	this.addEventListener(Event.ENTER_FRAME, drawNew);
	}

function dragStop(evt:MouseEvent):void{
	evt.currentTarget.stopDrag();
	this.removeEventListener(Event.ENTER_FRAME, drawNew);
	}

function drawNew(evt:Event){
    drawLine();
}

drawLine();

BezierSegment oder kubische Bezierkurve mit Flash

In den Referenzen von Adobe erfährt man, dass Flash mit der quadratischen Bezierkurve arbeitet. Will man jedoch mit der kubischen Bezierkurve arbeiten, kann man auf die Klasse BezierSegment zurückgreifen. Mit dieser Klasse kann man sich Punkte auf einer kubischen Bezierkurve ausgeben lassen. Auf folgender Seite von eleqtriq wird beschrieben wie man sich anhand dieser Punkte eine Linie erzeugen kann. http://www.eleqtriq.com/2010/04/cubic-bezier-in-flash/ Das Verfahren ist nicht ganz einfach, aber mathematisch sehr interessant und man bekommt ausgezeichnete Ergebnisse.

bezier

Michael Morawitz von Bitmagie brachte mich auf eine pragmatischere Lösung, indem man sehr viele Zwischenpunkte erzeugt und diese jeweils mit einer geraden Linie verbindet. Das Ergebnis ist zwar mathematisch nicht so genau, aber das Auge sieht den Unterschied nicht.

import fl.motion.BezierSegment;
bs = new BezierSegment(a,b,c,d);
bs.getValue(t);

t ist ein Wert zwischen 0 und 1 der einen Abstand auf der Kurve definiert. Da es sich hierbei um einen "Zeitwert" oder "Geschwindigkeit" handelt, bekommt man bei gleichmäßiger Aufteilung der 1 nicht unbedingt auch gleiche Längenabstände auf der Kurve. Siehe elegriq

Nachdem man eine BezierSegment Instanz erzeugt hat, kann man eine "gebogene" Linie erzeugen, indem die 100 Segmente mit geraden Linien verbunden werden:


moveTo (a.x,a.y);
for (var i:uint=0; i < 100; i++)
{
vCurvePoint[i] = bs.getValue(i / 100);
lineStyle (0.1,0xff0000);
lineTo (vCurvePoint[i].x, vCurvePoint[i].y);
}

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

 

import fl.motion.BezierSegment;
import flash.geom.Point;
import flash.events.MouseEvent;
//-----------------------------------------------------------
var bs:BezierSegment;

const a:uint = 0;
const b:uint = 1;
const c:uint = 2;
const d:uint = 3;

var size:uint = 4;
var vBezierSegmentPoint:Vector.< Point >  = new Vector.< Point > (size);

vBezierSegmentPoint[a] = new Point(stage.stageWidth / 2 - 50,stage.stageHeight / 2 + 50);
vBezierSegmentPoint[b] = new Point(stage.stageWidth / 2 - 100,stage.stageHeight / 2 - 50);
vBezierSegmentPoint[c] = new Point(stage.stageWidth / 2 + 100,stage.stageHeight / 2 - 50);
vBezierSegmentPoint[d] = new Point(stage.stageWidth / 2 + 50,stage.stageHeight / 2 + 50);

//-----------------------------------------------------------
var anfasser:Vector.< MovieClip >  = new Vector.< MovieClip > (size);

for (var f:uint; f < size; f++)
{
	var anfs:MovieClip= new MovieClip();
	anfasser[f]= new MovieClip();
	with (anfasser[f].graphics)
	{
		beginFill (0x996600);
		drawCircle (0,0,5);
		endFill ();
	}
	anfasser[f].x = vBezierSegmentPoint[f].x;
	anfasser[f].y = vBezierSegmentPoint[f].y;
	addChild (anfasser[f]);
	anfasser[f].addEventListener (MouseEvent.MOUSE_DOWN, mausDown);
}


//-----------------------------------------------------------;

var countCurvePoints:uint = 100;
var vCurvePoint:Vector.< Point >  = new Vector.< Point > (countCurvePoints);

zeichneKurve (vBezierSegmentPoint[a],vBezierSegmentPoint[b],vBezierSegmentPoint[c],vBezierSegmentPoint[d]);

//-----------------------------------------------------------

function zeichneKurve (a:Point,b:Point,c:Point,d:Point):void
{
	bs = new BezierSegment(a,b,c,d);
	//var n:uint = 100;//Point.distance(bs.a,bs.d);
	with (graphics)
	{
		clear ();
		//gerade Linien zwischen den Anfassern
		lineStyle (0.1,0xdddddd);
		moveTo (a.x,a.y);
		lineTo (b.x, b.y);
		moveTo (d.x,d.y);
		lineTo (c.x, c.y);
		//zeichnen der Kurve mit vielen gerade Linien
		moveTo (a.x,a.y);
		for (var i:uint=0; i < countCurvePoints; i++)
		{
			vCurvePoint[i] = bs.getValue(i / countCurvePoints);
			lineStyle (0.1,0xff0000);
			lineTo (vCurvePoint[i].x, vCurvePoint[i].y);
		}
	}

}

//-----------------------------------------------------------

function newPos (evt:Event):void
{
	for (var i:uint; i < size; i++)
	{
		vBezierSegmentPoint[i].x = anfasser[i].x;
		vBezierSegmentPoint[i].y = anfasser[i].y;
	}

	zeichneKurve (vBezierSegmentPoint[a],vBezierSegmentPoint[b],vBezierSegmentPoint[c],vBezierSegmentPoint[d]);
}

//-----------------------------------------------------------

function mausReleased (evt:MouseEvent):void
{
	stopDrag ();
	stage.removeEventListener (Event.ENTER_FRAME, newPos);
}

//-----------------------------------------------------------

function mausDown (evt:MouseEvent):void
{
	//anfasser nach vorn auf die Bühne bringen
	evt.currentTarget.parent.addChild (evt.currentTarget);
	
	evt.currentTarget.startDrag ();
	stage.addEventListener (MouseEvent.MOUSE_UP, mausReleased);
	stage.addEventListener (Event.ENTER_FRAME, newPos);

}




Beachte auch, dass ich hier die Klasse Vector anstatt eines Arrays benutze, siehe dazu meinen Tipp Array AS2

curveTo()

Im folgenden Beispiel werden 4 Buttons benötigt

left_btn
down_btn
right_btn
top_btn.

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen



var pSize:int=100;


var curvedObject:Shape = new Shape();
curvedObject.x=125;
curvedObject.y=25;
curvedObject.graphics.beginFill(0x00FF00);
this.addChild(curvedObject);


function curveRight(evt:MouseEvent):void
{
	curvedObject.graphics.clear();
	curvedObject.graphics.beginFill(0x00FF00);
	curvedObject.graphics.moveTo(0, 0);
	curvedObject.graphics.lineTo(pSize, 0);
	curvedObject.graphics.curveTo(pSize*0.5, pSize*0.5, pSize, pSize*0.5);
	curvedObject.graphics.curveTo(pSize*1.5, pSize*0.5, pSize, pSize);
	curvedObject.graphics.lineTo(0, pSize);
	curvedObject.graphics.lineTo(0, 0);
	curvedObject.graphics.endFill();
	this.addChild(curvedObject);

}



function curveDown(evt:MouseEvent):void
{
	curvedObject.graphics.clear();
	curvedObject.graphics.beginFill(0x00FF00);
	curvedObject.graphics.moveTo(0, 0);
	curvedObject.graphics.lineTo(pSize, 0);
	curvedObject.graphics.lineTo(pSize, pSize);
	curvedObject.graphics.curveTo(pSize*0.5, pSize*0.5, pSize*0.5, pSize);
	curvedObject.graphics.curveTo(pSize*0.5, pSize*1.5, 0, pSize);
	curvedObject.graphics.lineTo(0, pSize);
	curvedObject.graphics.lineTo(0, 0);
	curvedObject.graphics.endFill();
	this.addChild(curvedObject);
}


function curveLeft(evt:MouseEvent):void
{
	curvedObject.graphics.clear();
	curvedObject.graphics.beginFill(0x00FF00);
	curvedObject.graphics.moveTo(0, 0);
	curvedObject.graphics.lineTo(pSize, 0);
	curvedObject.graphics.lineTo(pSize, pSize);
	curvedObject.graphics.lineTo(0, pSize);	
	curvedObject.graphics.curveTo(pSize*0.5, pSize*0.5, 0, pSize*0.5);
	curvedObject.graphics.curveTo(pSize*-0.5, pSize*0.5, 0, 0);
	curvedObject.graphics.endFill();
	this.addChild(curvedObject);

}


function curveTop(evt:MouseEvent):void
{
	curvedObject.graphics.clear();
	curvedObject.graphics.beginFill(0x00FF00);
	curvedObject.graphics.moveTo(0, 0);
	curvedObject.graphics.curveTo(pSize*0.5, pSize*-0.5, pSize*0.5, pSize*0);
	curvedObject.graphics.curveTo(pSize*.5, pSize*0.5 ,pSize, pSize*0);	
	curvedObject.graphics.lineTo(pSize, pSize);
	curvedObject.graphics.lineTo(0, pSize);	
	curvedObject.graphics.lineTo(0, 0);
	curvedObject.graphics.endFill();
	this.addChild(curvedObject);

}

left_btn.addEventListener(MouseEvent.CLICK, curveLeft);
down_btn.addEventListener(MouseEvent.CLICK, curveDown);
right_btn.addEventListener(MouseEvent.CLICK, curveRight);
top_btn.addEventListener(MouseEvent.CLICK, curveTop);


Gerade Linien mit Mausklick zeichnen

Beispiel linienMaus.swf

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen


var myShape:Shape= new Shape();
this.addChild(myShape);
myShape.graphics.moveTo(100,300);

function zeichneLinie(evt:MouseEvent):void
{
	myShape.graphics.lineStyle(2, 0x990000, .75);
	myShape.graphics.lineTo(evt.stageX,evt.stageY);
}
function loescheZeichnung(evt:MouseEvent):void
{
	myShape.graphics.clear();
	myShape.graphics.moveTo(100,300);
}
stage.addEventListener(MouseEvent.MOUSE_UP, zeichneLinie);
loesch_btn.addEventListener(MouseEvent.CLICK, loescheZeichnung);


Eckige Form mit Mausklick zeichnen

Beispiel eckigeFormZeichnen.swf

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen


var eckForm:Shape= new Shape();
this.addChild(eckForm);
eckForm.graphics.moveTo(100,300);
eckForm.graphics.lineStyle(2, 0x990000, .75);
eckForm.graphics.beginFill(0xFFF000);
function zeichneEckForm(evt:MouseEvent):void
{
	eckForm.graphics.lineTo(evt.stageX,evt.stageY);
}
function loeschEckForm(evt:MouseEvent):void
{
	eckForm.graphics.clear();
	eckForm.graphics.lineStyle(2, 0x990000, .75);
	eckForm.graphics.beginFill(0xFFF000);
	eckForm.graphics.moveTo(100,300);
}
stage.addEventListener(MouseEvent.MOUSE_UP, zeichneEckForm);
loesch_btn.addEventListener(MouseEvent.CLICK, loeschEckForm);

 

Spannband

Beispie-l spannband.swf

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen


var spannBand:Shape = new Shape();
addChild(spannBand);
function spannen(evt:MouseEvent):void
{
	spannBand.graphics.clear();
	spannBand.graphics.lineStyle(1, 0x000000, 1);
	spannBand.graphics.moveTo(0,0);
	spannBand.graphics.lineTo(evt.stageX, evt.stageY);
}
stage.addEventListener(MouseEvent.MOUSE_MOVE, spannen);


Dieses Beispiel gibt es in meinem AS2 Tipp auf Seite 5.
ACHTUNG ! Die Methode clear() löscht in AS3 auch die Füllmethode und den Linienstil. Deswegen wird hier nach clear() der Linienstil erneut definiert.
Hier kann man mit Flash AS3 eine Linie erzeugen, die die Richtung der Maus, auf einen bestimmten Punkt hin, anzeigt.

Linie aus einem Punkt ziehen

 

Beispiel spannband2.swf

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen



var spannBand:Shape = new Shape();
addChild(spannBand);
function spannen(evt:MouseEvent):void
{
	spannBand.graphics.clear();
	spannBand.graphics.moveTo(point_btn.x,point_btn.y);
	spannBand.graphics.lineStyle(1, 0x000000, 1);
	spannBand.graphics.lineTo(evt.stageX, evt.stageY);
}
function startSpannen(evt:MouseEvent):void
{
	stage.addEventListener(MouseEvent.MOUSE_MOVE, spannen);
}
function stopSpannen(evt:MouseEvent):void
{
	spannBand.graphics.clear();
	stage.removeEventListener(MouseEvent.MOUSE_MOVE, spannen);
}
point_btn.addEventListener(MouseEvent.MOUSE_DOWN, startSpannen);
stage.addEventListener(MouseEvent.MOUSE_UP, stopSpannen);


Hier klickt man auf einen Button und zieht eine Linie aus dem Mittelpunkt des Buttons heraus. Diese Funktion kann man beispielsweise in Spielen verwenden, wo man ein bestimmtes Ziel anvisiert. Auch dieses AS3 Beispiel gibt es in der AS2 Version auf Seite 6.

 

Form mit verschiebbaren Ecken

Beispiel eckenVerschieben.swf

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

var form:MovieClip = new MovieClip();
addChild(form);
setChildIndex(form,0);
function zeichneDich(evt:Event):void {
evt.currentTarget.graphics.clear();
evt.currentTarget.graphics.moveTo(p1_mc.x, p1_mc.y);
evt.currentTarget.graphics.beginFill(0xffcc00,30);
evt.currentTarget.graphics.lineTo(p2_mc.x, p2_mc.y);
evt.currentTarget.graphics.lineTo(p3_mc.x, p3_mc.y);
evt.currentTarget.graphics.lineTo(p4_mc.x, p4_mc.y);
evt.currentTarget.graphics.endFill();
}

form.addEventListener(Event.ENTER_FRAME, zeichneDich);

Klassendatei punkt_mc

package 
{
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	public class punkt_mc extends MovieClip
	{
		public function punkt_mc()
		{
			this.addEventListener(MouseEvent.MOUSE_DOWN, startschieben);
			this.addEventListener(MouseEvent.MOUSE_UP, stopschieben);
		}
		private function startschieben(evt:MouseEvent):void
		{
			this.startDrag();
		}
		private function stopschieben(evt:MouseEvent):void
		{
			this.stopDrag();
		}
	}
}

 

Hier haben wir im ersten Teil den Code der fla, der mal wieder der AS2 Lösung sehr ähnlich ist. Auf der Bühne befinden sich 4 MC Instanzen der Klasse punkt_mc, zu denen die Klassendatei angelegt wurde. Siehe dazu meinen Tipp Klassen und MovieClip/addChild. Unten habe ich noch eine Lösung ohne Klassendatei als abschreckendes Beispiel hinzugefügt. Denn hier wird sofort deutlich dass die Definition einer Klasse, welche das Verschieben gleich integriert, wesentlich sinnvoller ist, als für jede Instanz 2 EventListener zu registrieren.

 

//--------------------------------TEIL 2 ---------------------------------------
//-------------------unschöne Alternative ohne Klassendatei---------------------

function startschieben(evt:MouseEvent):void
{
	evt.currentTarget.startDrag();
}
function stopschieben(evt:MouseEvent):void
{
	evt.currentTarget.stopDrag();
}
p1_mc.addEventListener(MouseEvent.MOUSE_DOWN, startschieben);
p1_mc.addEventListener(MouseEvent.MOUSE_UP, stopschieben);
p2_mc.addEventListener(MouseEvent.MOUSE_DOWN, startschieben);
p2_mc.addEventListener(MouseEvent.MOUSE_UP, stopschieben);
p3_mc.addEventListener(MouseEvent.MOUSE_DOWN, startschieben);
p3_mc.addEventListener(MouseEvent.MOUSE_UP, stopschieben);
p4_mc.addEventListener(MouseEvent.MOUSE_DOWN, startschieben);
p4_mc.addEventListener(MouseEvent.MOUSE_UP, stopschieben);

Zeichnen mit Maus 1

Beispiel zeichnen1.swf

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen


var myShape:Shape= new Shape();
this.addChild(myShape);
myShape.graphics.moveTo(0,0);


function zeichnenStart(evt:MouseEvent):void
{
	myShape.graphics.clear();
	myShape.graphics.lineStyle(2, 0x990000, .75);
	myShape.graphics.moveTo(evt.stageX,evt.stageY);
}

function zeichnen(evt:MouseEvent):void
{
	myShape.graphics.lineTo(evt.stageX,evt.stageY);
}

stage.addEventListener(MouseEvent.MOUSE_DOWN, zeichnenStart);
stage.addEventListener(MouseEvent.MOUSE_MOVE, zeichnen);

In meinen AS2 Tipps befindet sich dieses Beispiel auf Seite 4. Auch an diesem Beispiel sieht man, dass der Code in AS3 dem AS2 Code sehr ähnlich ist, jedoch unterscheidet sich die Mehtode clear() insofern, dass in AS3 auch Linienstil und Füllung gelöscht werden. Deswegen wird in diesem Beispiel der Liniestil nach clear() neu defniert.

Zeichnen mit Maus 2

Beispiel zeichnen2.swf

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen



var myLine:Shape= new Shape();
this.addChild(myLine);

function zeichneStart(evt:MouseEvent):void
{
	myLine.graphics.lineStyle(2, 0x990000, .75);
	myLine.graphics.moveTo(evt.stageX,evt.stageY);
	stage.addEventListener(MouseEvent.MOUSE_MOVE, zeichne);
}

function zeichne(evt:MouseEvent):void
{
	myLine.graphics.lineTo(evt.stageX,evt.stageY);
}

function zeichneStop(evt:Event):void
{
	stage.removeEventListener(MouseEvent.MOUSE_MOVE, zeichne);
}


stage.addEventListener(MouseEvent.MOUSE_DOWN, zeichneStart);
stage.addEventListener(MouseEvent.MOUSE_UP, zeichneStop);

function loescheLinie(evt:MouseEvent):void
{
	myLine.graphics.clear();
}
loesch_btn.addEventListener(MouseEvent.CLICK, loescheLinie);
stage.addEventListener(MouseEvent.MOUSE_DOWN, zeichneStart);
stage.addEventListener(MouseEvent.MOUSE_UP, zeichneStop);


Hier haben wir eine eine Zeichenfunktion, wie man es gewohnt ist. Man zeichnet mit gedrückter Maustaste. Durch die EventListener ist das hier wesentlich einfacher, als in meinem AS2 Tipp.

Zeichnung speichern

Beispiel zeichnungSpeichern.swf

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

//2 Variablen für for-Schleifen
var i:int;
var e:int;
//pointsX pointsY sind die aktuellen Positionen beim Zeichnen eines Liniensegments
var pointsX:String;
var pointsY:String;
//die aktuellen Positionen wenn ein Liniensegement als Kopie erzeugt wird
var xPos:String;
var yPos:String;
//ein Array aus xPos und yPos, für die Kopie
var dataX:Array;
var dataY:Array;
//ein Array, welches alle Liniensegmente aufnimmt
var lineSeg:Array = new Array();


var myLine:Shape= new Shape();
this.addChild(myLine);




//diese Funktion zeichnet ein Liniensegment, die Werte kommen aus dem Array lineSeg, es wird die Indexposition
// von lineSeg erwartet, aus den Strings xPos und yPos wird jeweils ein Array mit Daten gefüllt,
// dataX, dataY, die Linie beginnt mittels moveTo, bei dataX[0], dataY[0], alle weiteren Position werden mit
// lineTo verbunden, die Arrays dataX und dataY werden nach jedem Durchlauf gelöscht, siehe Funktion nochmal


function drawSeg(segNr:int):void
{
	xPos=String(lineSeg[segNr].xPos);
	yPos=String(lineSeg[segNr].yPos);
	dataX=xPos.split(",");
	dataY=yPos.split(",");
	myLine.graphics.moveTo(dataX[0],dataY[0]);
	for (i=1; i < dataX.length-1; i++) {
		myLine.graphics.lineStyle(1, 0x000000, 1);
		myLine.graphics.lineTo(dataX[i],dataY[i]);
	}
}


//Liniensegment wird dem Array lineSeg hinzugefügt, hier ein Beispiel:
//lineSeg.push({lineDicke:2, xPos:"2,4,5,23,53,23,123,34,34,234", yPos:"45,233,3,213,13,34,34,233,42,34"});


function addSeg(xWerte:String, yWerte:String)
{
	lineSeg.push({lineDicke:2, xPos:xWerte, yPos:yWerte});
}




function nochmal(evt:MouseEvent):void
{
	for (e=0; e < lineSeg.length; e++) {
		drawSeg(e);
	}
	lineSeg = new Array();
}


//-----------------------------------------------------


//die folgenden Funktionen findet man in ähnlicher Form im vorigen Beispiel, 

function zeichneStart(evt:MouseEvent):void
{
	pointsX="";
	pointsY="";
	myLine.graphics.lineStyle(2, 0x990000, .75);
	myLine.graphics.moveTo(evt.stageX,evt.stageY);
	pointsX+=String(evt.stageX)+",";
	pointsY+=String(evt.stageY)+",";
	stage.addEventListener(MouseEvent.MOUSE_MOVE, zeichne);
}

function zeichne(evt:MouseEvent):void
{
	pointsX+=String(evt.stageX)+",";
	pointsY+=String(evt.stageY)+",";
	myLine.graphics.lineTo(evt.stageX,evt.stageY);
}

function zeichneStop(evt:Event):void
{
	stage.removeEventListener(MouseEvent.MOUSE_MOVE, zeichne);
	trace("Xwerte: "+pointsX+" Ende");
	trace("Ywerte: "+pointsY);
	addSeg(pointsX,pointsY);
}



function loescheLinien(evt:MouseEvent):void
{
	myLine.graphics.clear();
}



stage.addEventListener(MouseEvent.MOUSE_DOWN, zeichneStart);
stage.addEventListener(MouseEvent.MOUSE_UP, zeichneStop);
loesch_btn.addEventListener(MouseEvent.CLICK, loescheLinien);
nochmal_btn.addEventListener(MouseEvent.CLICK, nochmal);

Hier wurde die Zeichenfunktion noch etwas erweitert und zwar werden die einzelnen Liniensegmente in einem mehrdimensionalen Array gespeichert. Nachdem man die Zeichnung gelöscht hat, kann man sie erneut aufrufen. Die neue Zeichnung holt sich die x-yPositionen der Linen aus dem mehrdimensionalen Array. Es ist ein Leichtes das Array lineSeg um Linienstärke, Farbe und Alphawert zu erweitern. Das Ganze macht so noch nicht viel Sinn, aber in Zusammenhang mit einer Speicherfunktion, kann man sich ein schönes Programm zusammenbasteln. Wer Schwierigkeiten mit dem Array hat, sollte sich diesen Link einmal anschauen.


Grundformen eigene Klassen

Im folgenden Beispiel habe ich mir ein paar Klassen erstellt, um das Erzeugen der Grundformen etwas zu vereinfachen. Ob das wirklich Sinn macht, weiß ich nicht.

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

Spirograph

 

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

zum Spirograph unter Menüpunkt "Flash"

 


Spirograph mit verschachtelten Sprites

Ich stelle hier 2 Lösungen vor. Dieses Beispiel arbeitet, mit verschachtelten Sprites, deren x-Positionen versetzt sind. Die xPosition eines Sprites definiert den Radius des Elternsprites. Die einzelnen Sprites drehen sich mit unterschiedlichen Geschwindigkeitn. Die Position des innersten Sprites zeichnet eine Linie. Durch Änderung der Positionen oder auch der Geschwindigkeiten kann man verschiedene Spiro-Grafiken erzeugen. Siehe auch die Kommentare im Code.

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

 

import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;

//ineinander verschachtelte Sprites mit versetzten Positionen
//con0 liegt in con1, con1 liegt in con2, con2 liegt in Mitte der Bühne


var con0:Sprite = new Sprite();
con0.x = 80.3;

var con1:Sprite = new Sprite();
con1.x = 52;

var con2:Sprite = new Sprite();
con2.x = stage.stageWidth / 2;
con2.y = stage.stageHeight / 2;

con1.addChild (con0);
con2.addChild (con1);
addChild (con2);

//die folgenden Aktionen werden gebraucht, um später
//eine Linie zu zeichnen.
var quellPunkt:Point = new Point(0,0);
var stagePoint:Point;
stagePoint = con0.localToGlobal(quellPunkt);
var myShape:Shape= new Shape();
this.addChild (myShape);
myShape.graphics.lineStyle (1, 0x990000, 1);
myShape.graphics.moveTo (stagePoint.x,stagePoint.y);


this.addEventListener (Event.ENTER_FRAME, onEnterFrameEvent);
var i:uint=0;
function onEnterFrameEvent (evt:Event):void
{
	//con1 dreht sich. In con1 liegt versetzt con0
	//con1 liegt versetzt in con2 und con2 dreht sich auch
	//aber mit einer anderen Geschwindigkeit
	con1.rotation +=  21.4;
	con2.rotation -=  12;
	//anhand der Positonen von con0 wird eine Linie gezeichnet
	stagePoint = con0.localToGlobal(quellPunkt);
	myShape.graphics.lineTo (stagePoint.x,stagePoint.y);
	i++;
	if(i>1840){
		trace(i);
		this.removeEventListener (Event.ENTER_FRAME, onEnterFrameEvent);
	}
}

Spirograph mit Point Klasse

Siehe hierzu auch meinen Tipp zum Thema Point Klasse Hier habe ich darauf verzichtet, Sprites zu erzeugen und diese zu drehen, sondern ich erzeuge Instanzen der Point Klasse. Mit Point.polar kann ich auf einfache Weise Berechnungen mit Radius und Winkel anstellen. Ich erzeuge 2 Punkte, die sich mit unterschiedlicher Geschwindigkeit um einen jeweils anderen Radius drehen. Diese beiden Punkte werden mit der Point.add Methode addiert und so erhalte ich Punkte die mit Linien verbunden werden und die Spirografik bilden.

Die numerischen Auswahlfelder heißen von oben nach unten, rad1, rad2, speed1, speed2

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

 
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;

const RAD:Number = 180 / Math.PI;
// bogenmass = w/RAD;
// grad = w*RAD;

//counter wird gebraucht um die Winkel der beiden Punkte zu erhöhen
var counter1:Number = 0;
var counter2:Number = 0;


var myShape:Shape= new Shape();
this.addChild (myShape);


stopBtn.addEventListener (MouseEvent.MOUSE_UP, onStopDraw);
goBtn.addEventListener (MouseEvent.MOUSE_UP, onStartDraw);

function onStopDraw (evt:MouseEvent):void
{
	this.removeEventListener (Event.ENTER_FRAME, onEnterFrameEvent);
}

function onStartDraw (evt:MouseEvent):void
{
	counter1 = 0;
	counter2 = 0;
	myShape.graphics.clear ();
	myShape.graphics.lineStyle (1, 0xffffff, 1);
	var P:Point = spiro(Number(rad1.value),Number(rad2.value),counter1,counter2);
	myShape.graphics.moveTo (P.x, P.y);
	this.addEventListener (Event.ENTER_FRAME, onEnterFrameEvent);
}


function spiro (_radius1:Number, _radius2:Number, winkel1:Number, winkel2:Number):Point
{
	//Mitte der Bühne
	var midP:Point = new Point(stage.stageWidth / 2 + 50,stage.stageHeight / 2);
	//2 Punkte werden erzeugt, die Position wird mittels 
	//Radius und Winkels in Bezug zum Registrierpunkt definiert
	var P1:Point = Point.polar(_radius1, winkel1 / RAD);
	var P2:Point = Point.polar(_radius2, winkel2 / RAD);
	//die beiden Punkte und der Mittelpunkt der Bühne werden addiert
	var P3:Point = (P1.add(P2)).add(midP);
	return P3;
}


function onEnterFrameEvent (evt:Event):void
{
	//Radius der beiden Punkte kommt aus Zahlenfeldern
	//der Winkel wird onEnterFrame um den Wert speed/10 erhöht
	//jeder Punkt bekommt einen anderen speed Wert aus den Zahlenfeldern
	var P:Point = spiro(Number(rad1.value),Number(rad2.value),counter1 +=  Number(speed1.value) / 10,counter2 +=  Number(speed2.value) / 10);
	//jeder Punkt wird mit einer Linie verbunden
	myShape.graphics.lineTo (P.x,P.y);
}

Startseite www.pastorpixel.de