Anzeige
Tutorialbeschreibung

Zeichnen mit Action Script

Zeichnen mit Action Script

Hier möchte ich in kurzen schritten erklären wie man mit Action Script ein Rechteck zeichnet.
Euer Schinki...


Zeichnen mit Action Script ( kurz AS )

Mit diesem Tutorial möchte ich euch zeigen wie einfach es ist mit AS etwas zu zeichnen,
ohne dabei die Zeichnenfunktionen in Flash selbst zu nutzen.
Die nachfolgenden Codes werden einfach in das erste Bild der Zeitleiste gelegt.


Folgende Anweisungen und Funktionen benötigen wir im laufe dieses Tutorial:

ActionScript
createEmptyMovieClip()
beginFill()
lineStyle()
moveTo()
lineTo()
endFill()


1. Schritt ( MovieClip )

Wer mit AS zeichnen möchte benötigt immer einen MovieClip.
Da wir aber anfangs sagten wir verzichten auf die Flash Zeichnenfunktionen,
müssen wir nun zunächst einen MovieClip per AS erstellen.
Dieses sieht dann wie folgt aus:

ActionScript
this.createEmptyMovieClip("body", 1);
body.
_x = 20;
body.
_y = 20;


Mit diesem Befehl erzeugen wir einen MovieClip auf der Ebene 1 in unserem Hauptfilm (
_root. )
Die Bezeichnung
this verwenden wir da es noch keinen Bezugspunkt in unserem Dokument gibt.
This sagt nichts anderes aus wie auf Deutsch dieses.
Mit der Bezeichnung "body" geben wir unserem neuen MovieClip den Instancenamen body.
Diesen benötigen wir um unseren MovieClip später anzusprechen.
Mit den
_x und _y Koordinaten verschiebe ich nun unseren MovieClip auf der Bühne um jeweils 20 Pixel.
Das mache ich nur um unseren MovieClip in der Vorschau besser sehen zu können.



2.Schritt ( Füllung und Linien Style )

Nun beginnen wir mit dem eigentlichen Zeichnen in unserem MovieClip "body"
Hierzu müssen wir Flash aber erst sagen wie denn unsere Füllung,
sowie die Linie die unser Objekt umgibt, aussehen soll.

Dieses sieht dann wie folgt aus:

ActionScript
body.beginFill(0xEEEEEE, 100);
body.
lineStyle(1, 0xAEAEAE, 100);


beginFill sagt nichts anderes wie beginne mit dem Füllen.
Ohne diese Anweisung könnten wir nichts sichtbares Zeichnen,
da wir hier unserem Objekt die spätere Farbe ( 0xEEEEEE ) sowie den Alphawert ( 100 ) zuweisen.

lineStyle bedeutet soviel wie Linienstil.
Hier sagen wir mit 1 wie dick unsere Aussenlinie sein soll.
Dann den Farbwert und zuletzt wieder den Alphawert.


3.Schritt ( Zeichnen )

Stellen wir uns folgende Situation vor:
Wir haben ein Blatt Papier und möchten ein Viereck darauf zeichnen.
Wir bewegen also den Stift und setzen dort auf wo wir beginnen möchten.
Im AS sieht das dann so aus:

ActionScript
body.moveTo(0, 0);


Hier sagen wir das unser Zeichenstift im MovieClip body zur Position x = 0 und y = 0 gehen soll.
Um jetzt ab diesem Punkt eine Linie zu zeichnen schreiben wir folgendes:

ActionScript
body.lineTo(200, 0);

Unser imaginärer Zeichenstift wandert nun von x 0 zu x 200.
Somit hätten wir unsere erste Linie in Flash gezeichnet.

Nun geht es aber weiter. Denn wir wollen ja ein Viereck zeichnen.

ActionScript
body.lineTo(200, 100);
body.
lineTo(0, 100);
body.
lineTo(0, 0);


Die Füllung unseres Objektes ergibt sich automatisch
sobald der Zeichenstift wieder bei x 0 und y 0 angekommen ist.
Wenn wir unser Objekt fertig gezeichnet haben schreiben
wir
am Ende folgendes.

ActionScript
body.endFill();

Somit haben wir unsere Zeichenfunktion beendet.


Hier nun der fertige Script:

ActionScript
this.createEmptyMovieClip("body", 1);
body.
_x = 20;
body.
_y = 20;
body.beginFill(0xEEEEEE, 100);
body.
lineStyle(1, 0xAEAEAE, 100);
body.moveTo(0, 0);
body.
lineTo(200, 0);
body.
lineTo(200, 100);
body.
lineTo(0, 100);
body.
lineTo(0, 0);
body.endFill();


Was dringend beachtet werden muss ist der Befehl moveTo.
Sollte man diesen zwischen den lineTo befehlen erneut
verwenden so setzen wir damit unseren Stift ab und zeichnen
eine neue Linie. Es kommt somit keine Füllung zustande.


Ich hoffe das Ihr diese Zeilen versteht
und wünsche Euch nun viel Spaß beim Zeichnen.


Euer Schinki


Bilder
 


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von i-borg
  • 08.09.2007 - 17:02

In der Tat geht das sehr schnell. Ein paar Bilder wären aber nicht schlecht gewesen.

Portrait von Eldewy
  • 01.02.2007 - 21:04

Danke sehr toll!
kann ich einiges damit anfangen!
Danke
Dewy

Portrait von pinsel77
  • 13.01.2007 - 17:23

Super einfaches Tut... nice nice... THX´s

x
×
×