Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Games

Erstellen Sie eine grundlegende Zeichen-App in Flash

by
Read Time:12 minsLanguages:

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Zweimal im Monat besuchen wir einige der Lieblingsbeiträge unserer Leser aus der gesamten Geschichte von Activetuts+. Dieses Tutorial wurde erstmals im August 2009 veröffentlicht.

In diesem Tutorial erstellen wir eine Zeichenanwendung mit Grundfunktionen und einer benutzerfreundlichen Oberfläche. Fühlen Sie sich künstlerisch? Dann lass uns gehen..


Schritt 1: Übersicht

Diese Anwendung bietet eine Reihe von Werkzeugen wie Bleistift, Radiergummi, Textwerkzeug sowie die Möglichkeit, Ihre Zeichnung mit dem PNG-Encoder von Adobe im PNG-Format zu speichern.


Schritt 2: Einrichten

Öffnen Sie Flash und erstellen Sie eine neue Flash-Datei (ActionScript 3).

Stellen Sie die Bühnengröße auf 600x350px und die Bildrate auf 25fps ein.

””””””

Schritt 3: Board

Zeichnen Sie ein weißes Rechteck mit 600 x 290 Pixel und konvertieren Sie es in MovieClip. Setzen Sie den Instanznamen auf "board" und richten Sie ihn oben links auf der Bühne aus.

Dies ist der Bereich, auf den wir zeichnen können.


Schritt 4: Werkzeugfenster

Erstellen Sie ein 600 Pixel breites 60 Pixel großes graues Rechteck (#DFDFDF) und richten Sie es am unteren Rand der Bühne aus. Das ist unser Hintergrund für das Tools Panel.


Schritt 5: Werkzeugsymbole

Ich werde nicht auf die Erstellung der Werkzeugsymbole eingehen, da dies nicht die Absicht des Turorial ist. Sie können jedoch sehen, wie sie in der in der Quelle enthaltenen Fla-Datei erstellt werden.

Wie Sie auf dem Bild sehen können, werden zwei Symbole verwendet, eines in Grauton und das andere in Farbe.

Konvertieren Sie das graue Stiftsymbol in eine Schaltfläche (F8) und nennen Sie es "PencilTool". Doppelklicken Sie, um es zu bearbeiten, und fügen Sie einen KeyFrame (F6) im Status "Over" hinzu. Hier platzieren wir die Farbversion des Symbols.

Fügen Sie zum Schluss einen weiteren KeyFrame im Status "hit" hinzu und zeichnen Sie ein Quadrat von 30 x 30 Pixel, das als Trefferbereich der Schaltfläche fungiert.

Wiederholen Sie diesen Vorgang mit all Ihren Werkzeugsymbolen. Vergessen Sie nicht, ihnen die richtigen Instanznamen (Radiergummi-Werkzeug,Text-Werkzeug,Ыpeichern-Button, Сlear-Tool) zu geben.

Um das aktive Werkzeugsymbol anzuzeigen, verwenden wir die Farbversion des Symbols und platzieren es an derselben Position wie die zuvor erstellte Schaltfläche. Die Instanznamen sind "pencil", "eraser" und "text".

Wir werden diese Symbole später mit ActionScript ausblenden.


Schritt 6: Dialogfeld "Speichern"

Wenn wir die Speicheroption verwenden, wird die Meldung "Speichern erfolgreich" angezeigt.

Erstellen Sie ein schwarzes Rechteck mit 600 x 350 Pixel und 50% Alpha als Hintergrund.

Fügen Sie in der Mitte ein schwarzes, abgerundetes Rechteck mit dem Symbol für die Schaltfläche Speichern und Text hinzu, der angibt, dass das Speichern abgeschlossen wurde.

Erstellen Sie eine Schaltfläche zum Schließen und richten Sie sie oben links im abgerundeten Rechteck aus. Nennen Sie sie "closeBtn". Wie Sie sich vorstellen können, schließt diese Schaltfläche den Dialog Speichern.

Konvertieren Sie alle Elemente in einen einzelnen MovieClip und aktivieren Sie das Kontrollkästchen "Für ActionScript exportieren". Setzen Sie das Klassentextfeld auf "SaveDialog".

Wir werden diese Klasse instanziieren, wenn der Benutzer den SaveButton drückt und der Speichervorgang abgeschlossen ist.


Schritt 7: Größenbedienfeld

Das Größenbedienfeld ist der Bereich, in dem Sie die Größe von Stift, Radiergummi und Textwerkzeug ändern können. Sie können dies tun, indem Sie in den Bedienfeldbereich oder das Oval darin klicken.

Wählen Sie das Rechteck-Grundwerkzeug aus, setzen Sie den Eckenradius auf 4 und erstellen Sie ein Rechteck #EFEFEF 80x50px. Konvertieren Sie es in einen MovieClip und nennen Sie es "sizePanel".

Öffnen Sie das Filterbedienfeld und fügen Sie einen Schlagschatten mit den folgenden Werten hinzu:

Verwenden Sie nun das ovale Werkzeug, um einen schwarzen Kreis mit 5x5 Pixel zu erstellen und im Größenfenster zu zentrieren, ihn in MovieClip zu konvertieren und seinen Instanznamen auf "shapeSize" zu setzen.


Schritt 8: Standardfarben

Wir erstellen eine Standardfarbpalette, anstatt die Farbauswahlkomponente zu verwenden.

Erstellen Sie mit dem Oval Tool einen 22x22px-Kreis, setzen Sie seine Farbe auf #EEEEEE und konvertieren Sie ihn in MovieClip. Fügen Sie denselben Schlagschattenfilter hinzu, den wir im Größenbedienfeld verwendet haben.

Zeichnen Sie einen zweiten Kreis von 16x16 Pixel und verwenden Sie diesmal Schwarz für die Farbe. Zentrieren Sie die Kreise und wiederholen Sie diesen Vorgang, indem Sie die letzte Kreisfarbe wie folgt ändern:

Richten Sie sie so aus, dass sie so etwas ergeben:

Konvertieren Sie alle Farben in einen einzelnen MovieClip, nennen Sie ihn "colors" und stellen Sie sicher, dass der Registrierungspunkt oben links festgelegt ist, da die Pixeldaten mithilfe der Bitmap-Klasse abgerufen werden.


Schritt 9: Adobe PNG Encoder

Um die Speicherfunktion zu nutzen, benötigen wir den Adobe PNG Encoder, der Teil der as3corelib ist, die Sie in Google Code finden.

Um diese Klasse außerhalb des Pakets zu verwenden, mit dem sie standardmäßig geliefert wird, müssen wir eine Zeile ändern. Öffnen Sie die Datei PNGEncoder.as und ändern Sie die Zeile "package com.adobe..." in "package". Dadurch können wir die Klasse in dem Verzeichnis aufrufen, in dem sich die Fla-Datei befindet.


Schritt 10: Hauptklasse

Eine einzelne Klasse wird diese Anwendung bearbeiten. Öffnen Sie das Eigenschaftenfenster in der Fla-Datei und legen Sie die Dokumentklasse als "Main" fest.

Erstellen Sie ein neues ActionScript-Dokument und speichern Sie es als "Main.as" in demselben Verzeichnis, in dem sich die Fla-Datei befindet.


Schritt 11: Erforderliche Klassen importieren

Dies sind die Klassen, die wir in dieser App benötigen werden. Denken Sie daran, die Flash-Hilfe (F1) zu überprüfen, wenn Sie sich über eine bestimmte Klasse nicht sicher sind.


Schritt 12: Erweitern der Klasse

Wir erweitern die MovieClip-Klasse, da wir die spezifischen Eigenschaften und Methoden dieser Klasse verwenden.


Schritt 13: Variablen

Dies sind die Variablen, die wir verwenden werden. Sie werden in den Codekommentaren erklärt.


Schritt 14: Hauptfunktion

Die Hauptfunktion kümmert sich um das Einstellen des Textformats des Textwerkzeugs, das Konvertieren des Colors MovieClip in Bitmap-Daten, damit wir den Pixel-RGB-Wert extrahieren, die Listener hinzufügen und die aktiven Symbole ausblenden können.


Schritt 15: Werkzeuge Aktionen

Die Werkzeugaktionen sind in vier Funktionen unterteilt.

Der erste versetzt das Werkzeug in den aktiven Zustand, der zweite und dritte behandeln die Mausereignisse (wie Zeichnen oder Löschen) und der vierte stoppt diese Ereignisse.


Schritt 16: Bleistiftwerkzeug

Diese Funktionen handhaben das Bleistift-Werkzeug. Lesen Sie zum besseren Verständnis die Kommentare im Code.

Die auf aktive Funktion eingestellte Funktion:

Die Startfunktion; diese Funktion wird aufgerufen, wenn der Board MovieClip gedrückt wird.

Die Draw-Funktion wird aufgerufen, wenn der Benutzer den Board MovieClip drückt und die Maus bewegt.

Stoppfunktion, die ausgeführt wird, wenn der Benutzer die Maus loslässt.


Schritt 17: Radiergummi

Das Radiergummi-Werkzeug ist so ziemlich das gleiche wie das Bleistift-Werkzeug, außer dass wir keine andere Farbe als Weiß verwenden.

Wie Sie sehen können, ist der Code bis auf die Farbänderungen in Weiß identisch.


Schritt 18: Textwerkzeug

Das Textwerkzeug hat nur zwei Funktionen. Einer ist dafür verantwortlich, es auf aktiv zu setzen, und der andere für die Handhabung des Textschreibens. Lass uns mal sehen:

Das war einfach, denken Sie daran, dass Sie die Größe und Farbe mit den ShapeSize und den Colors MovieClips ändern können.


Schritt 19: Option speichern

Die vom saveButton behandelte Speicheroption verwendet die PNGEnconder-Klasse von Adobe, um das Bildmaterial als PNG-Datei zu speichern.


Schritt 20: Werkzeug löschen

Das Löschwerkzeug fügt vor allen Elementen einen weißen Bildschirm hinzu, damit die Tafel wieder zum Zeichnen bereit ist.


Schritt 21: Farbwert abrufen

Um den Wert der Farben zu ermitteln, die wir im Colours Movie Clip verwenden, konvertieren wir ihn in ein Bitmap-Datenobjekt und verwenden die getPixel-Methode, um den RGB-Wert des angeklickten Pixels zu ermitteln.

Wir werden den listenColor-Listener später im Code in der Funktion addListeners hinzufügen.


Schritt 22: Aktives Werkzeug

Zuvor haben wir eine Variable deklariert, um das aktive oder aktuell verwendete Tool festzulegen, und wir rufen diese Funktion auf, um die entsprechenden Listener zu entfernen, um nur ein aktives Tool zu haben.

Grundsätzlich prüft die Funktion die "aktive" Variable in einer Schaltschleife und entfernt dann abhängig von ihrem Wert die Listener, die sie hat.

Wir müssen auch das aktive Werkzeug hervorheben und die anderen ausblenden:


Schritt 23: Formgröße

Wir klicken auf das Größenbedienfeld oder den ShapeSize MovieClip, um die Größe des Bleistift-, Radiergummi- und Textwerkzeugs zu ändern. Die Größe wird in Intervallen von 5 geändert und zurückgesetzt, wenn die Größe größer oder gleich 50 ist. Sehen Sie sich den Code an:


Schritt 24: Listener hinzufügen

Eine Funktion zum Hinzufügen aller Listener.


Schritt 25: Testen

Testen Sie Ihre App, indem Sie cmd + return drücken und prüfen, ob alles wie erwartet funktioniert.

Verwenden Sie alle Werkzeuge, Farben und Funktionen und beginnen Sie mit dem Zeichnen Ihrer Szene!


Abschluss

Dieser Flash-Film kann leicht als Zeichenanwendung für Kinder angepasst werden. Er verfügt über eine benutzerfreundliche Oberfläche und grundlegende Tools, mit denen Sie lernen können, wie die Maus funktioniert, und dabei viel Spaß haben.

Sie können auch den Rest der as3corelib erkunden und deren Dokumentation lesen, um einige neue ActionScript-Funktionen kennenzulernen.

Danke fürs Lesen!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.