Zeichenobjekte / Graphics / drawRect / drawCircle / lineTo

• 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
  

Spannband

Beispie-l spannband.swf

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

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

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);

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

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

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

//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.

Spirograph

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.

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

 
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);
}