Share
Eine der einfachsten Spielmechanismen besteht darin, den Spieler ein verstecktes Objekt finden zu lassen. Spiele, die darauf basieren, haben viele Formen: Wo ist Waldo, Peek-A-Boo, Finde den Unterschied, Verstecken und Suchen und natürlich Wimmelbild. In diesem Premium-Tutorial zeige ich Ihnen zwei Methoden, um eine Szene zu verdecken, damit der Spieler sie später wiederfinden kann.
Klicken Sie in der ersten SWF-Datei wie verrückt, um alle Ballons zu platzieren. Okay, es gibt nicht viele Herausforderungen, aber stellen Sie sich vor, es gegen die Uhr zu machen oder ständig mehr Ballons aufzutauchen.
Wischen Sie in der zweiten SWF-Datei den Schmutz ab, indem Sie mit der Maus über das Bild fahren. Dieser Mechaniker wurde in Window Washy eingesetzt, einem der ersten Spiele für den PS2 EyeToy - ganz zu schweigen von unzähligen Rubbelkarten!
Wir müssen die Ballons erstellen, bevor wir sie platzen können. Ich verwende dazu Flash Pro CS3. Wenn Sie nicht über Flash Pro verfügen, können Sie entweder mit der von Ihnen üblichen Methode eigene zeichnen oder die SWC-Datei aus dem Download-Paket verwenden und alle Schritte in diesem Lernprogramm übergehen, in denen das Zeichnen erläutert wird. Ich füge gegebenenfalls Anweisungen für Benutzer anderer Redakteure hinzu.
Öffnen Sie Flash Pro und erstellen Sie eine neue Flash-Datei (ActionScript 3.0). Ich werde das Design meiner Ballons auf dieses Illustrator-Tutorial von Vectortuts + stützen - aber natürlich mit Flashs Werkzeugen.
Wählen Sie das Stift-Werkzeug aus und setzen Sie es in den Smooth-Modus mit einem schwarzen Strich von 1 Pixel. Ich habe den Standard-Glättungswert von 50 verwendet.
Zeichne jetzt eine grobe Ballonform. Mach dir keine Sorgen, es perfekt zu machen; Wir werden es in einer Sekunde anpassen. Hier ist meins:
Hmm. Sehen Sie diese scharfen Ecken? Glätten Sie sie aus. Verwenden Sie das Auswahlwerkzeug, um diesen Abschnitt der Linie auszuwählen, und klicken Sie dann mehrmals auf die Schaltfläche Glätten.
Ich bin sicher, es gibt einen besseren Weg, den Profis nutzen, aber das ist für mich normalerweise der Trick. Passen Sie die Form des Ballons an, wie Sie möchten. Denken Sie daran, Sie können jeden Punkt auf der Linie anklicken und ziehen, um ihn zu strecken.
Hier ist was ich endete mit:
Nun füge den Knoten hinzu. Wie Jesse in dem bereits erwähnten Vectortuts + -Tutorial sagt, "ist es nur ein einfacher Kreis mit einer runden, dreieckigen Form unten."
Okay, jetzt fülle den Ballon mit einer angenehmen Pastellfarbe (ich habe # dae8b3 gewählt, was wieder aus dem Vectortuts + Tutorial stammt) und lösche alle Zeilen.
Nicht schlecht! Wenn Sie einen Glanz hinzufügen möchten, verwenden Sie das Linienwerkzeug mit einer dickeren Strichbreite (ich habe 3px verwendet) und einer weißen Farbe, um eine gerade Linie über eine "Ecke" zu zeichnen, und verwenden Sie dann das Auswahlwerkzeug, um es zu krümmen.
Wählen Sie diese Glanzlinie aus und klicken Sie dann auf Ändern | Form | Zeilen in Füllungen umwandeln -- Auf diese Weise bleibt der Glanz der Größe des Ballons proportional zum Rest des Ballons.
Um mit einer Sprechblase mithilfe von ActionScript interagieren zu können, müssen Sie diese in ein Symbol konvertieren. Wählen Sie Ihre Kunst aus und klicken Sie dann auf Ändern | In Symbol konvertieren. Machen Sie daraus ein Movieclip-Symbol Ballon, und exportieren Sie es mit demselben Klassennamen für ActionScript.
Ignorieren Sie die Warnung, dass es sich nicht um eine Klasse mit demselben Namen handelt, wenn diese nach dem Klicken auf OK angezeigt wird.
Eine FLA und SWC der bisher verwendeten Assets finden Sie im Ordner BalloonsStep2 des Quelldownloads.
Wählen Sie eine Kulisse, vor der Sie schweben können. Ich habe dieses Wallpaper (Kredit LGLab und Envato) ausgewählt und etwas zugeschnitten:
Wenn Sie Flash Professional verwenden, fügen Sie der Bühne eine neue Ebene hinzu und importieren Sie Ihr Bild. Andernfalls können Sie die Grafik einbetten und mit der von Ihnen bevorzugten Methode am unteren Rand der Anzeigeliste hinzufügen. Möglicherweise möchten Sie die Größe Ihrer Bühne ändern, um sie an das Bild anzupassen.
Als Nächstes werden wir diesen einzelnen Ballon verschwinden lassen, wenn er angeklickt wird.
Zeit für etwas Code!
Erstellen Sie eine Klasse namens Main.as im selben Verzeichnis wie Ihre FLA und verknüpfen Sie sie als Dokumentklasse mit der FLA. Weitere Informationen finden Sie hier. (Wenn Sie Flash Pro nicht verwenden, kann ich davon ausgehen, dass Sie das Äquivalent in Ihrem Editor kennen. Sie müssen bereits eine Hauptklasse erstellt haben, um den Hintergrund auf die Bühne zu bringen.)
package import flash.display.MovieClip; public class Main erweitert MovieClip öffentliche Funktion Main ()
Wir müssen über die Dokumentenklasse auf die Sprechblase zugreifen und müssen ihr einen Klassennamen geben.
Wenn Sie Flash Professional verwenden, wählen Sie die Sprechblase auf der Bühne aus und geben Sie den Text ein der Ballon in die im Eigenschaftenfenster. Dann klick Datei | Einstellungen veröffentlichen, öffne das Blitz Klicken Sie auf die Registerkarte die Einstellungen? Klicken Sie neben dem Dropdown-Feld ActionScript-Version auf die Option "Bühneninstanzen automatisch deklarieren". (Dies ist nicht unbedingt erforderlich, ermöglicht jedoch den gleichen Code, unabhängig davon, ob Sie Flash Pro oder einen anderen Editor verwenden.)
Ändern Sie dann Ihre Dokumentenklasse wie folgt:
package import flash.display.MovieClip; public class Main erweitert MovieClip public var theBalloon: Balloon; öffentliche Funktion Main ()
Wenn Sie einen anderen Editor verwenden, fügen Sie der Anzeigeliste eine Instanz der Balloon-Klasse an beliebigen Koordinaten hinzu (sofern sich diese vor dem Hintergrund befindet), und geben Sie ihr einen Instanznamen der Ballon.
Wir verwenden einen MouseEvent-Listener, um zu erkennen, wann die Sprechblase angeklickt wird, und eine Handler-Funktion, um sie zu entfernen:
package import flash.display.MovieClip; import flash.events.MouseEvent; public class Main erweitert MovieClip public var theBalloon: Balloon; public function Main () theBalloon.addEventListener (MouseEvent.CLICK, onClickBalloon); private Funktion onClickBalloon (a_event: MouseEvent): void this.removeChild (theBalloon); theBalloon.removeEventListener (MouseEvent.CLICK, onClickBalloon);
Einfaches Zeug. Testen Sie es aus:
Nichts umwerfend, aber zumindest funktioniert es.
Keine große Herausforderung, oder? Ziehe noch ein paar Ballons auf die Bühne, auf derselben Ebene wie das Original:
Wie werden wir darauf im Code zugreifen? Ich denke, wir könnten ihnen alle Instanznamen nennen greenBalloon1, greenBalloon2, und so weiter, und fügen Sie jedem einen MouseEvent-Listener hinzu? Pfui. Wir codieren, wir können das automatisieren.
Die Dokumentenklasse ist a Filmausschnitt, was bedeutet, es ist ein DisplayObjectContainer (Hurra für Vererbung), was bedeutet, dass es eine getChildAt () - Funktion und eine numChildren -Eigenschaft hat, was bedeutet, dass wir eine verwenden können zum Schleife zum Durchlaufen aller Objekte auf der Bühne. Ich werde es beweisen. Ändern Sie Ihre Main () -Contsructor-Funktion wie folgt:
public function Main () für (var i: int = 0; i < this.numChildren; i++) trace(getChildAt(i)); theBalloon.addEventListener(MouseEvent.CLICK, onClickBalloon);
(Sie können den Code zum Entfernen der Original-Sprechblase beibehalten.) Führen Sie die SWF-Datei aus und überprüfen Sie das Ausgabefenster:
[Objekt Shape] [Objekt Ballon] [Objekt Ballon] [Objekt Ballon] [Objekt Ballon] [Objekt Ballon] [Objekt Ballon] [Objekt Ballon] [Objekt Ballon] [Objekt Ballon] [Objekt Ballon]
Der Code gibt den Typ jedes untergeordneten Elements von Main zurück, d. H. Jedes Objekt in der Anzeigeliste, von unten (getChildAt (0)) nach oben (getChildAt (10)). Da ich das Hintergrundbild nicht für ActionScript exportiert habe, weiß Flash nur, dass es eine Art ist Gestalten.
Wir müssen das hinzufügen onClickBalloon () Zuhörer zu jedem der Sprechblasen, aber nicht zum Hintergrund. Glücklicherweise gibt es ein Schlüsselwort, mit dem wir die Klasse eines Objekts überprüfen können: ist. Wir können es wie folgt verwenden:
public function Main () für (var i: int = 0; i < this.numChildren; i++) if (getChildAt(i) is Balloon) getChildAt(i).addEventListener(MouseEvent.CLICK, onClickBalloon);
(Beachten Sie, dass ich die Zeile entfernt habe, in der der Ereignis-Listener speziell zum hinzugefügt wird der Ballon Beispiel.)
Testen Sie die SWF:
Hmm. Nicht ganz richtig, oder??
Egal auf welchen Ballon Sie klicken, der ursprüngliche Ballon wird entfernt. Die Ursache dafür ist leicht zu erkennen:
public function Main () für (var i: int = 0; i < this.numChildren; i++) if (getChildAt(i) is Balloon) getChildAt(i).addEventListener(MouseEvent.CLICK, onClickBalloon); private function onClickBalloon(a_event:MouseEvent):void this.removeChild(theBalloon); theBalloon.removeEventListener(MouseEvent.CLICK, onClickBalloon);
In Zeile 16 fügen wir jedem Ballon den Ereignis-Listener hinzu. In den Zeilen 23 und 24 entfernen wir jedoch ausdrücklich die der Ballon Beispiel. In der Ereignisbehandlungsfunktion müssen wir stattdessen den angeklickten Ballon entfernen. Dies nennt man das Ereignisziel, und ist über das erreichbar a_event.target Eigentum. Sie erwarten also, dass dies funktioniert:
private Funktion onClickBalloon (a_event: MouseEvent): void this.removeChild (a_event.target); a_event.target.removeEventListener (MouseEvent.CLICK, onClickBalloon);
? aber es tut nicht; wir bekommen einen fehler:
1118: Implizite Umwandlung eines Werts mit statischem Typ Object in einen möglicherweise nicht verwandten Typ flash.display: DisplayObject.
Flash weiß nicht, welche Objektklasse das Ereignisziel ist. Daher weiß es nicht genau, ob dies möglich ist removeChild ()-ed oder dass Event-Listener angeschlossen werden können. Wir müssen Flash mitteilen, um das Ereignisziel zu behandeln wie eine Instanz der Ballonklasse, wie folgt:
private Funktion onClickBalloon (a_event: MouseEvent): void this.removeChild ((a_event.target als Balloon)); (a_event.target als Balloon) .removeEventListener (MouseEvent.CLICK, onClickBalloon);
Probieren Sie es jetzt aus:
Großartig! Das ist ein anständiger Meilenstein. Sie finden alle bisher erstellten Dateien im BalloonsStep8 Ordner im Quelldownload.
Herausforderung: Versuchen Sie zu zählen, wie viele Ballons vorhanden sind, wenn die SWF-Datei zum ersten Mal geladen wird. Sie werden gezählt, wie viele beim Klicken entfernt werden, und es wird ein Glückwunschtext angezeigt oder wenn Sie alle Ballons verschwinden lassen.
Als Nächstes lassen Sie die Ballons mit einer kleinen Animation zum Platzen bringen, wenn Sie darauf klicken.
Ich war mir nicht sicher, wie ich das animieren sollte, also schaute ich mir ein langsames Video von einem echten Ballon an:
Leider sieht das nur unecht aus (ich weiß), also habe ich etwas anderes ausprobiert.
Bearbeiten Sie Ihre Sprechblase und fügen Sie der Zeitleiste einen neuen Rahmen hinzu. In diesem Rahmen zeichnen Sie mit dem Stiftwerkzeug ein großes, stacheliges Durcheinander:
Löschen Sie die Glanzlinie (füllen Sie sie mit der Ballonfarbe) und zeichnen Sie einige Linien aus dem stacheligen Durcheinander bis zum Rand des Ballons:
Klicken Sie auf jeden Abschnitt, wandeln Sie ihn in eine Gruppe (STRG-G), trennen Sie ihn leicht von den anderen und löschen Sie die Zeilen:
Erstellen Sie ein neues Keyframe, und optimieren Sie die einzelnen Bits, indem Sie das Free Transform-Tool verwenden und einige Kanten der Füllungen strecken. Ich habe Onion Skinning hier aktiviert, damit Sie sehen können, wie meine Abschnitte mit ihren Positionen im Frame verglichen werden:
Ich habe festgestellt, dass es hilfreich ist, die Teile des Ballons innerhalb des Bereichs zu halten, den der Ballon zuvor besetzt hat, aber Sie können damit experimentieren. Als Nächstes erstellen Sie ein weiteres Keyframe und verkleinern alle Segmente:
Ich habe die Segmente hier wie durch die Schwerkraft etwas fallen gelassen. Fügen Sie nun einen neuen, völlig leeren Keyframe hinzu. Testen Sie Ihre Animation (möglicherweise möchten Sie die Bildrate Ihres Films anpassen; ich habe 24 Bilder pro Sekunde erhalten).
Genial. Wenn Sie jetzt Ihre SWF-Datei ausführen, werden alle Ballons natürlich immer wieder auftauchen:
? Öffnen Sie also das Bedienfeld Aktionen im ersten Frame der Zeitleiste des Ballons und fügen Sie diesen Code hinzu:
halt();
Die Animation der Sprechblase ist in SWC und FLA im Ordner BalloonsStep9 des Quelldownloads enthalten.
Um einen Ballon nur dann zu platzieren, wenn er angeklickt wird, müssen wir nur die Animation erstellen abspielen():
private Funktion onClickBalloon (a_event: MouseEvent): void (a_event.target as Balloon) .play (); this.removeChild ((a_event.target als Balloon)); (a_event.target als Balloon) .removeEventListener (MouseEvent.CLICK, onClickBalloon);
? äh, aber das funktioniert nicht, weil die Sprechblase sofort aus der Anzeigeliste entfernt wird, oder? Kommentieren Sie einfach das aus removeChild () Line für jetzt und stellen Sie sicher, dass die SWF funktioniert:
Oh, richtig, wir müssen es tun halt() Sobald die Animation fertig ist. Öffnen Sie das leere Schlüsselbild in der Zeitleiste der Sprechblase und fügen Sie Folgendes hinzu:
halt();
Während wir hier sind, könnten wir unser Problem lösen removeChild () Problem. Wenn wir den Ballonversand machen, a KOMPLETT Wenn die Animation zu Ende ist, könnten wir dieses Ereignis in hören Main.as, und entfernen Sie die Sprechblase aus der Anzeigeliste, sobald wir sie hören. Fügen Sie diese Zeile zu den Aktionen des leeren Keyframes hinzu:
halt(); dispatchEvent (neues Ereignis (Event.COMPLETE));
(Dies ist alles in BalloonsStep10 SWC und FLA, keine Sorge.) Nun, in Main.as, ändern Sie Ihre onClickBalloon () Handler-Funktion:
private Funktion onClickBalloon (a_event: MouseEvent): void (a_event.target as Balloon) .play (); //this.removeChild((a_event.target als Balloon))); (a_event.target als Balloon) .removeEventListener (MouseEvent.CLICK, onClickBalloon); (a_event.target als Balloon) .addEventListener (Event.COMPLETE, onBalloonBurst);
? Erstelle ein onBalloonBurst () Handler-Funktion, die ausgeführt wird, sobald die Animation abgeschlossen ist:
private Funktion onBalloonBurst (a_event: Event): void this.removeChild (a_event.target als Balloon);
? und importiere die Event-Klasse:
package import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent;
Testen Sie es aus:
Sieht soweit gut aus.
Herausforderung: Wie wäre es, wenn Sie die Ballons so animieren, dass sie sich ein wenig bewegen, bevor Sie darauf klicken?
Auf AudioJungle: Balloon Pop habe ich dafür einen perfekten Soundeffekt gefunden. Ich kann es nicht in den Quelldownload aufnehmen, aber Sie können es für nur einen Dollar kaufen.
Wenn Sie möchten, kaufen Sie diesen Effekt oder suchen Sie einen anderen online und lassen Sie ihn spielen, wenn ein Ballon platzt. Fügen Sie dazu zunächst Ihre Bibliothek hinzu und exportieren Sie sie für ActionScript (oder integrieren Sie sie in Ihr Projekt (für Nicht-Flash Pro-Benutzer)) mit dem Klassennamen PopSWF.
Dann in Main.as, Erstellen Sie eine private Instanz des Sounds:
public class Main erweitert MovieClip public var theBalloon: Balloon; private var popSfx: PopSFX = new PopSFX ();
? und spiele es wenn nötig:
private Funktion onClickBalloon (a_event: MouseEvent): void popSfx.play (); (a_event.target als Ballon) .play (); //this.removeChild((a_event.target als Balloon))); (a_event.target als Balloon) .removeEventListener (MouseEvent.CLICK, onClickBalloon); (a_event.target als Balloon) .addEventListener (Event.COMPLETE, onBalloonBurst);
Versuch es:
Lassen Sie uns den Bildschirm mit mehreren Farben von Ballons füllen. Dupliziere das Ballonsymbol in der Bibliothek und nenne es BlueBalloon, mit einer Klasse von BlueBalloon. Behalte es mit dem ursprünglichen Ballon identisch, aber mit einer blauen Füllung (ich habe # c1e6ee verwendet, wieder von diesem Vectortuts + Tutorial).
Ziehen Sie einige Instanzen auf die Bühne. Denken Sie daran, dass Sie einige der grünen Ballons entfernen können. Sie können auch die Größe der Ballons ändern, wenn Sie möchten:
Wenn Sie die SWF-Datei testen, machen die blauen Ballons noch nichts:
Die blauen Luftballons tun nichts, weil unser ganzer Code so geschrieben ist, dass er sich mit dem beschäftigt Ballon Klasse und nicht die BlueBalloon Klasse. Wir könnten unseren gesamten Code kopieren, um mit den verschiedenen Ballonfarben umzugehen, aber das ist chaotisch und würde sich später ändern, wenn wir wollten.
Lassen Sie uns stattdessen dafür sorgen, dass der blaue Ballon und der grüne Ballon dieselbe Klasse verwenden und die Kraft der Vererbung verwenden. Wählen Sie Ihr ursprüngliches Ballonsymbol in der Bibliothek aus und benennen Sie es in um GreenBalloon; Ändern Sie die Klasse in GreenBalloon auch.
Unser Ziel ist es, beiden Ballons eine Basisklasse von zu geben Ballon; Dies bedeutet, dass jeder grüne Ballon als Instanz von angesehen wird Ballon sowie von GreenBalloon, und jeder blaue Ballon wird als Beispiel von gesehen Ballon ebenso gut wie BlueBalloon -- Unser Code, der im Hinblick auf die Balloon-Klasse geschrieben wurde, funktioniert gut.
Obwohl wir die Klasse eines Symbols auf den Namen einer Klasse setzen können, die nicht existiert, können wir dies leider nicht mit der Basisklasse tun. Wir müssen eine Klassendatei erstellen, die die beiden Sprechblasen erben können.
Erstellen Sie eine neue Klassendatei, Balloon.as, im selben Verzeichnis wie Ihre FLA und geben Sie diesen Code ein:
package import flash.display.MovieClip; public class Balloon erweitert MovieClip öffentliche Funktion Balloon ()
Das ist alles was du brauchst. Es muss sich verlängern Filmausschnitt weil beide Ballons Animationen verwenden; Wenn wir verlängern, sagen wir, Sprite stattdessen könnten die beiden Ballonsymbole keine Zeitleiste verwenden und wären statische Bilder.
Legen Sie die Basisklasse für jedes der Ballonsymbole in der Bibliothek auf fest Ballon, und führen Sie die SWF aus:
Großartig! Es ist jetzt einfach, eine beliebige andere Farbe des Ballons hinzuzufügen. Um es zu beweisen, fügen wir rote und gelbe hinzu.
Dies ist ein einfacher Schritt. Duplizieren Sie das grüne Ballonsymbol noch zweimal und färben Sie ein rotes Pastell (# f2daea) mit einem Namen und einer Klasse von neu ein Roter Ballon, und das andere Pastellgelb (# f6f5b4) mit einem Namen und einer Klasse von YellowBalloon. Setzen Sie in jedem Fall die Basisklasse auf Ballon. Fügen Sie jede Menge auf die Bühne.
Führen Sie die SWF-Datei aus. Die neuen Ballons sollten problemlos funktionieren.
Wenn eine Farbe nicht aufspringt, stellen Sie sicher, dass die Basisklasse des Symbols auf festgelegt ist Ballon.
Wir gehen davon aus, dass Flash-Objekte nur dann anklickbar sind, wenn der Mauszeiger sich in eine Hand verwandelt, wenn wir mit der Maus darüber fahren. Damit diese Hand angezeigt wird, müssen wir nur die Ballons einstellen buttonMode Eigentum an wahr.
Am einfachsten ist dies in der zum Schleife, wo wir die hinzufügen KLICKEN Ereignis-Listener für jeden Ballon. Flash weiß zu diesem Zeitpunkt jedoch nur, dass es sich um Ballons handelt DisplayObject, da ist das was getChildAt () kehrt zurück - aber buttonMode ist eine Eigenschaft der Sprite-Klasse. Dies bedeutet, dass wir die verwenden müssen wie Stichwort erneut. Wir könnten schreiben:
public function Main () für (var i: int = 0; i < this.numChildren; i++) if (getChildAt(i) is Balloon) getChildAt(i).addEventListener(MouseEvent.CLICK, onClickBalloon); (getChildAt(i) as Sprite).buttonMode = true;
? und importiere dann die flash.display.Sprite Klasse, aber der Einfachheit halber werde ich die verwenden Ballon stattdessen Klasse:
public function Main () für (var i: int = 0; i < this.numChildren; i++) if (getChildAt(i) is Balloon) getChildAt(i).addEventListener(MouseEvent.CLICK, onClickBalloon); (getChildAt(i) as Balloon).buttonMode = true;
Führen Sie die SWF aus:
Herausforderung: Um mit dem Thema "Ballons knallen" fortzufahren, können Sie den Mauszeiger in eine Nadel oder eine Nadel ändern. Wenn Sie Hilfe benötigen, lesen Sie diesen Quick Tip, indem Sie einen Movieclip der Maus folgen lassen oder den nativen Cursor des Betriebssystems ändern.
Herzlichen Glückwunsch, Sie haben diesen Abschnitt des Tutorials abgeschlossen! Wenn Sie alle Herausforderungen bis jetzt verfolgt haben, sollten Sie sich auf dem Weg zu einem ordentlichen kleinen Minispiel befinden.
Lass uns durch das hetzen. Wenn Sie Flash Pro verwenden:
Wenn Sie einen anderen Editor verwenden, erstellen Sie einfach ein neues AS3-Projekt mit der Methode, die Sie normalerweise verwenden. Rufen Sie das Projekt auf Fenster putzen und die Hauptklasse Main.as, Dieses Tutorial soll leichter zu folgen sein.
In beiden Fällen sollte Ihre Hauptklasse so aussehen:
package import flash.display.MovieClip; public class Main erweitert MovieClip öffentliche Funktion Main ()
Einige Flash-Versionen und einige Editoren generieren möglicherweise etwas anderen Code für diese Klasse. Das ist in Ordnung, gehen Sie einfach mit den Standardeinstellungen. Wenn Ihr Editor keinen Code automatisch generiert, kopieren Sie meinen Code von oben.
Zu Beginn erstellen wir ein festes Rechteck aus Farbe und bereinigen dieses. Wir werden später zu komplizierteren Bildern übergehen.
Erstellen Sie in Ihrer Main-Klasse ein neues Sprite, das dieses "schmutzige" Rechteck enthält:
package import flash.display.MovieClip; import flash.display.Sprite; public class Main erweitert MovieClip public var dirt: Sprite = new Sprite (); öffentliche Funktion Main ()
Als nächstes verwenden Sie die Sprites Grafik Eigenschaft, um ein Rechteck mit Farbe der Bühnengröße zu erstellen. Wenn Sie möchten, können Sie die Werte hart codieren (mein FLA ist 500x400px) oder die Werte dynamisch einstellen, wie ich es hier getan habe:
package import flash.display.MovieClip; import flash.display.Sprite; public class Main erweitert MovieClip public var dirt: Sprite = new Sprite (); öffentliche Funktion Main () dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight);
Dies ist jedoch nur sichtbar, wenn wir eine Füllfarbe auswählen. Ich habe # 440000 gewählt, ein tiefes Rot.
öffentliche Funktion Main () dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight);
Oh, wir müssen das hinzufügen Schmutz Sprite zur Anzeigeliste:
öffentliche Funktion Main () dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); this.addChild (Schmutz);
Führen Sie Ihre SWF-Datei aus. Wenn Sie keine Volltonfarbe sehen, hängt Ihre FLA möglicherweise nicht korrekt mit Ihrer Dokumentenklasse zusammen.
In Carlos Yanez 'Tutorial "Erstellen einer einfachen Zeichenanwendung mit Flash" zeigte er uns, wie Sie das Erscheinungsbild erzeugen, dass Farben auf einer Leinwand vom Mauszeiger gelöscht wurden, indem Sie einfach eine dicke weiße Linie hinter der Maus zeichnen. Wir werden den gleichen Trick hier verwenden.
Zuerst müssen Sie einen MouseEvent-Listener erstellen, um die Maus bei ihrer Bewegung zu verfolgen, und eine Handler-Funktion, wenn dies der Fall ist:
package import flash.display.MovieClip; import flash.display.Sprite; import flash.events.MouseEvent; public class Main erweitert MovieClip public var dirt: Sprite = new Sprite (); öffentliche Funktion Main () dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); this.addChild (Schmutz); dirt.addEventListener (MouseEvent.MOUSE_MOVE, onMouseMoveOverDirt); private Funktion onMouseMoveOverDirt (a_event: MouseEvent): void
Als Nächstes müssen Sie eine Linie von der vorherigen Position der Maus an die aktuelle Position ziehen:
private Funktion onMouseMoveOverDirt (a_event: MouseEvent): void dirt.graphics.lineStyle (10, 0xffffff); dirt.graphics.lineTo (mouseX, mouseY);
Vergiss das nicht lineStyle () Anruf; Die erste Linie ist die Liniendicke (in Pixel). der zweite definiert seine Farbe (#ffffff ist weiß).
Versuch es:
Wow das ist? ein interessanter Effekt, aber nicht das, was wir wollten! Das Problem hier ist das lineTo () zieht eine Linie aus dem Schmutz Grafikobjekts aktuelle Zeichnungsposition bis zu dem Punkt, den Sie angeben (in diesem Fall die Koordinaten der Maus). Die aktuelle Zeichnungsposition wird jedoch nicht verschoben, also bleibt sie bei (0, 0), die linke obere Ecke der Bühne. Wir brauchen die Zeichenposition, um auch der Maus zu folgen. das können wir mit der ziehen nach() Methode:
private Funktion onMouseMoveOverDirt (a_event: MouseEvent): void dirt.graphics.lineStyle (10, 0xffffff); dirt.graphics.lineTo (mouseX, mouseY); dirt.graphics.moveTo (mouseX, mouseY);
Probieren Sie die SWF jetzt aus:
Ziemlich gut, außer dass der Anfangspunkt auf gesetzt ist (0, 0), Das bedeutet, dass die erste gezeichnete Linie immer von der oberen linken Ecke aus springt. Wenn Sie die Maus an einer Stelle aus der SWF-Datei und an einer anderen in die SWF-Datei bewegen, springt die Linie erneut.
Um beide Probleme zu lösen, sollten wir:
Hier ist der Code dafür. Wenn Sie der Logik nicht vollständig folgen, versuchen Sie, bestimmte Zeilen zu kommentieren oder eigene Zeilen hinzuzufügen, um zu sehen, wie sie den endgültigen Effekt verändern.
package import flash.display.MovieClip; import flash.display.Sprite; import flash.events.MouseEvent; public class Main erweitert MovieClip public var dirt: Sprite = new Sprite (); öffentliche Funktion Main () dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); dirt.graphics.moveTo (mouseX, mouseY); this.addChild (Schmutz); dirt.addEventListener (MouseEvent.MOUSE_OUT, onMouseLeaveDirt); dirt.addEventListener (MouseEvent.MOUSE_OVER, onMouseReturnToDirt); private Funktion onMouseLeaveDirt (a_event: MouseEvent): void dirt.removeEventListener (MouseEvent.MOUSE_MOVE, onMouseMoveOverDirt); private Funktion onMouseReturnToDirt (a_event: MouseEvent): void dirt.addEventListener (MouseEvent.MOUSE_MOVE, onMouseMoveOverDirt); dirt.graphics.moveTo (mouseX, mouseY); private Funktion onMouseMoveOverDirt (a_event: MouseEvent): void dirt.graphics.lineStyle (10, 0xffffff); dirt.graphics.lineTo (mouseX, mouseY); dirt.graphics.moveTo (mouseX, mouseY);
Führen Sie Ihre SWF-Datei aus:
Ziemlich gut! Es ist nicht perfekt, aber es zeigt, was wir gut genug machen wollen.
Unser letztes Ziel ist es, einen Vordergrund zu löschen, um einen Hintergrund sichtbar zu machen. Momentan scheinen wir einen roten Vordergrund zu löschen, um einen weißen Hintergrund zu zeigen. Lassen Sie uns jetzt einen interessanteren Hintergrund hinzufügen.
Ich habe dieses Bild der Eingangstür des Envato - Büros von Flickr ausgewählt (Kredit an envato), angepasst an meine FLA:
Accentsconagua