Flash CS3-Zeichnungs-API, ActionScript 3, Formklasse

• Kann 16, 2024

Eine meiner Lieblingsbeschäftigungen in Flash ist es, auf die Bühne zu zeichnen. Ich spreche jedoch nicht über das Zeichnen mit den Flash-Zeichenwerkzeugen wie dem Rechteck- oder dem Oval-Werkzeug. In diesem Tutorial lernen wir die Grundlagen zum Zeichnen mit ActionScript 3 und der Zeichnungs-API.

Ich zögere, in den Tutorials meiner Anfänger zu viel über OOP-Programmierung und -Klassen zu sprechen, weil dies die Dinge nur komplizierter macht. Dieses Tutorial ist jedoch eine Ausnahme. Es ist perfekt für die Einführung in das Grundkonzept von OOP-Klassen. Eine OOP-Klasse in ActionScript ist nur eine vorgefertigte Sammlung von Informationen, die als Eigenschaften und Methoden bezeichnet werden. Diese vorgefertigten Informationen sparen dem Programmierer viel Zeit beim Codieren von ActionScript, da diese Informationen nicht in jedem Programm neu geschrieben werden müssen, das die Verwendung einer bestimmten Klasse erfordert.

In diesem Tutorial verwenden wir die Shape-Klasse, ihre vordefinierte Graphics-Eigenschaft und einige ihrer Methoden, um einen einfachen Kreis auf der Bühne zu zeichnen.

Grafikeigenschaft
lineStyle-Methode
beginFill-Methode
drawCircle-Methode
endFill () -Methode

Unser erster Schritt besteht darin, eine Aktionsebene auf der Zeitachse zu erstellen, auf Bild 1 zu klicken und das Bedienfeld Aktionen (Fenster - Aktionen) zu öffnen. Unsere erste Codezeile erstellt eine neue Variable, die den Kreis enthält.

var myCircle: Shape = neue Form ();

Im obigen Code erstellen wir eine neue Variable und nennen sie "myCircle". Wir setzen den Datentyp für diese neue Variable auf Gestalten. Auf der anderen Seite verwenden wir die Neu Schlüsselwort zum Erstellen einer neuen Instanz der Shape-Klasse.

Wenn Sie die Flash-Zeichenwerkzeuge verwendet haben, wissen Sie, dass eine Form sowohl einen Strich als auch eine Füllung enthält. Wenn Sie die Shape-Klasse zum Zeichnen verwenden, haben Sie auch einen Strich und eine Füllung. In den nächsten Codezeilen definieren wir den Strich und die Füllung für unseren myCircle.

myCircle.graphics.lineStyle (2, 0x000000);

Im obigen Code legen wir die Strichwerte mit der lineStyle-Methode der Graphics-Eigenschaft fest. Wir setzen den Wert der Breite des Strichs in Pixel und die Farbe des Strichs mit einem hexadezimalen Wert. Oben haben wir den Strich für unseren Kreis auf eine Breite von 2 Pixel und eine schwarze Farbe eingestellt.

Als nächstes füllen wir den Kreis. Wieder werden wir die Graphics-Eigenschaft und ihre beginFill-Methode verwenden. Die beiden Werte, die wir für die Füllung des Kreises steuern können, sind Farbe und Alpha. Es ist erforderlich, dass Sie einen Wert für die Farbe festlegen. Andernfalls wird Flash sehr verärgert. Das Einstellen des Alpha-Werts ist jedoch optional. Stellen wir die Füllung für unseren Kreis auf Rot. Wieder verwenden wir das Hexadezimal.

myCircle.graphics.beginFill (0xff0000);

OK, jetzt müssen wir Flash mitteilen, wo der Kreis auf der Bühne gezeichnet werden soll. Wie zu erwarten, müssen Sie einen Wert für die X- und Y-Achse und den Radius des Kreises festlegen. Wir werden dies mit der drawCircle-Methode tun, die Teil der Graphics-Eigenschaft ist.

myCircle.graphics.drawCircle (100, 200, 50);

In dieser Codezeile weisen wir Flash an, unseren Kreis 100 Pixel von der oberen linken Ecke der Bühne entlang der X-Achse und 200 Pixel entlang der Y-Achse zu zeichnen. Unser Kreis hat einen Radius von 50. Wenn Sie diese Werte festlegen, achten Sie auf die Reihenfolge, in der Sie sie im Code auflisten. Ihr erster Wert gilt für die X-Achse und der zweite Wert für die Y-Achse. Der dritte ist für den Radius. Wenn Sie Flash diese Werte nicht in der richtigen Reihenfolge geben, erhalten Sie einige unerwartete Ergebnisse.

Schließlich müssen wir unseren Kreis als untergeordnetes Anzeigeobjekt zur Anzeigeliste hinzufügen.

addChild (myCircle);

Oh, ich habe unsere eine Codezeile verlassen! Obwohl unser Code so funktioniert, wie er ist, haben wir die endFill () -Methode weggelassen, die den Zeichenprozess "schließt". Dies ist nicht unbedingt erforderlich, da endFill () automatisch aufgerufen wird. Es wird jedoch empfohlen, es kurz vor dem addChild () zu Ihrem Code hinzuzufügen.

myCircle.graphics.endFill ();

Hier ist der vollständige Code.

Copyright 2018 Adobe Systems Incorporated. Alle Rechte vorbehalten. Screenshots von Adobe-Produkten mit Genehmigung von Adobe Systems Incorporated. Adobe, Photoshop, Photoshop-Album, Photoshop-Elemente, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere-Elemente, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst und Flash Paper ist / sind entweder [eine] eingetragene Marke (n) oder eine Marke (n) von Adobe Systems Incorporated in den USA und / oder anderen Ländern.

Video-Anleitungen: The Flash Season 6 Episode 14 Trailer - Wally West Flash Returns Scene Breakdown and Easter Eggs (Kann 2024).