Share
In diesem Lernprogramm erfahren Sie, wie Sie mit der FLiNT-Particle Engine und Flash einen dynamischen, blubbernden Foto-Displayer erstellen.
Diese Anwendung wählt zufällig Bilder aus einem Array aus und platziert sie in Floating Bubbles. Wir werden dem Bild auch einen interaktiven Hintergrund mit FLiNT-Teilchenphysik hinzufügen.
Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten:
Los geht's. Öffnen Sie Ihre Lieblingsversion von Adobe Flash (muss mit AS3 funktionieren). Ich werde Flash CS5 in diesem Lernprogramm verwenden, aber Sie müssen es nicht. Erstellen Sie ein neues AS3-Dokument und stellen Sie sicher, dass die Einstellungen wie folgt sind:
Lassen Sie uns nun die FLiNT-Engine einrichten. Wenn Sie dies noch nicht getan haben, laden Sie es von github.com herunter. Dann entpacken Sie den Inhalt in das Stammverzeichnis Ihres Projekts.
Wenn Sie sich mit der Verwendung von FLiNT vertraut machen möchten, sollten Sie das Kontrollkästchen Erstellen eines Sparkling Bomb-Mauscursors mit FLiNT-Partikeln aktivieren. Es ist großartig für Leute, die gerade mit dem Motor beginnen.
Gehen Sie nun in das Eigenschaftenfenster von Flash. Stellen Sie Document Class auf "Main". Öffnen Sie Ihren bevorzugten ActionScript-Editor. Erstellen Sie eine neue Klassendatei in dem Verzeichnis, in dem sich Ihre FLA befindet. Setzen Sie ihren Namen auf "Main". Hier ist alles, was Sie im Moment haben sollten:
Paket öffentliche Klasse Main öffentliche Funktion Main ()
Fügen Sie Ihrem Code die folgenden Importanweisungen unter dem hinzu Paket Dadurch werden die erforderlichen .as-Dateien in Ihr Programm zur Verwendung importiert.
import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import flash.geom.Point; import org.flintparticles.common.actions.Age; import org.flintparticles.common.actions.ScaleImage; import org.flintparticles.common.counters.Blast; import org.flintparticles.common.counters.Steady; import org.flintparticles.common.displayObjects.RadialDot; import org.flintparticles.common.emitters.Emitter; import org.flintparticles.common.initializers.ImageClass; import org.flintparticles.common.initializers.Initializer; import org.flintparticles.common.initializers.ScaleImageInit; import org.flintparticles.common.particles.Particle; import org.flintparticles.threeD.initializers.RotateVelocity; import org.flintparticles.twoD.actions.DeathZone; import org.flintparticles.twoD.actions.Explosion; import org.flintparticles.twoD.actions.MouseAntiGravity; import org.flintparticles.twoD.actions.Move; import org.flintparticles.twoD.actions.RotateToDirection; import org.flintparticles.twoD.emitters.Emitter2D; import org.flintparticles.zweiD.initialisierer.Position; import org.flintparticles.zweiD.initialisierer.Geschwindigkeit; import org.flintparticles.twoD.renderers.DisplayObjectRenderer; import org.flintparticles.twoD.zones.DiscSectorZone; import org.flintparticles.twoD.zones.DiscZone; import org.flintparticles.twoD.zones.LineZone; import org.flintparticles.twoD.zones.PointZone; import org.flintparticles.twoD.zones.RectangleZone;
Wütend! Ich weiß, dass das eine Menge Dateien ist, wir können uns bei FLiNT für die wundervolle Organisation in diesem Fall bedanken :)
Nun öffnen wir die Flash-IDE. Es liegt an Ihnen, eine 800x600-Verlaufsbox als Hintergrund zu erstellen. Der Hauptzweck dieses Tutorials besteht nicht darin, neue Flash-Zeichnungsfähigkeiten zu erlernen, aber ich kann Ihnen zeigen, was ich in meiner eigenen Anwendung gezeichnet habe. Dieser Hintergrund ist auch in der Quelle des Tutorials enthalten.
Jetzt können wir die Bilder auswählen, die unsere Anwendung anzeigen soll. Das Gute am Design der Anwendung ist, dass sie mit so vielen Bildern arbeiten kann, wie Sie möchten, solange Sie sie im Array der Anwendung erwähnen. Aber dazu können wir später kommen.
Lassen Sie uns zunächst vier Bilder aus dem Internet auswählen. Hier sind die vier Bilder, die ich ausgewählt habe:
Ziehen Sie nun jeden auf die Bühne. drücken F8 einen MovieClip erstellen. Hier sind die Einstellungen, die Sie für jeden MovieClip auswählen sollten. Ersetzen Sie nun einfach die "1" durch die Nummer des Bildes.
Wenn Sie eine Anzahl von Bildern ausgewählt haben, die Sie zufrieden stellt, fahren Sie mit dem nächsten Schritt fort :)
Lassen Sie uns nun eine Liste aller Bilder in unserem erstellen Main Klasse. Fügen Sie der Klasse die hervorgehobene Codezeile hinzu
package import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import flash.geom.Point; import org.flintparticles.common.actions.Age; import org.flintparticles.common.actions.ScaleImage; import org.flintparticles.common.counters.Blast; import org.flintparticles.common.counters.Steady; import org.flintparticles.common.displayObjects.RadialDot; import org.flintparticles.common.emitters.Emitter; import org.flintparticles.common.initializers.ImageClass; import org.flintparticles.common.initializers.Initializer; import org.flintparticles.common.initializers.ScaleImageInit; import org.flintparticles.common.particles.Particle; import org.flintparticles.threeD.initializers.RotateVelocity; import org.flintparticles.twoD.actions.DeathZone; import org.flintparticles.twoD.actions.Explosion; import org.flintparticles.twoD.actions.MouseAntiGravity; import org.flintparticles.twoD.actions.Move; import org.flintparticles.twoD.actions.RotateToDirection; import org.flintparticles.twoD.emitters.Emitter2D; import org.flintparticles.zweiD.initialisierer.Position; import org.flintparticles.zweiD.initialisierer.Geschwindigkeit; import org.flintparticles.twoD.renderers.DisplayObjectRenderer; import org.flintparticles.twoD.zones.DiscSectorZone; import org.flintparticles.twoD.zones.DiscZone; import org.flintparticles.twoD.zones.LineZone; import org.flintparticles.twoD.zones.PointZone; import org.flintparticles.twoD.zones.RectangleZone; öffentliche Klasse Main private var imageList: Array = [Image1, Image2, Image3, Image4] öffentliche Funktion Main ()
Lassen Sie uns ein Objekt erstellen, das das von unserem Programm ausgewählte Bild maskiert. Dies ist nur ein schwarzer Kreis, der die Form haben soll, die unsere Bilder annehmen sollen. Wenn du willst, kannst du etwas kreativer machen wie ein Star? Es funktioniert alles.
Zeichne den Kreis, wähle ihn aus und drücke F8 einen neuen MovieClip erstellen. Stellen Sie sicher, dass sich der Registrierungspunkt in der rechten oberen Ecke befindet. Legen Sie auch den Klassennamen auf MaskMC fest. Nun lösche das Objekt von der Bühne. Hier ist ein Screenshot, wie das Objekt aussehen kann:
Platzieren Sie diese Variable über dem Konstruktor. Diese Variable wird als Countdown-Timer verwendet, um zu prüfen, wann eine neue Blase erstellt werden soll:
private var countDown: int = 30
Nun fügen wir ein ENTER_FRAME Ereignis-Listener und eine Funktion zum Aufrufen. Fügen Sie Ihrem Konstruktor den folgenden Code hinzu.
addEventListener (Event.ENTER_FRAME, enterFrame)
Jetzt können wir diese Funktion für unseren Ereignis-Listener erstellen, um eine Verknüpfung herzustellen:
private Funktion enterFrame (e: Event): void // Blasen erzeugen
Nachdem wir unseren Ereignis-Listener eingerichtet haben, können wir unsere Funktion so anpassen, dass er jedes Mal etwas tun muss, wenn der Zähler null erreicht. Ändern Sie Ihre Funktion wie folgt:
// 30 Mal in einer Sekunde: private Funktion enterFrame (e: Event): void // Subtrahiere eins von countDown countDown-- // Wenn der Countdown auf 0 steht, wenn (countDown == 0) // Ein neues erstellen bubble // Neustart des Countdowns um 30 countDown = 30
Jetzt können wir einfach den richtigen Bubble-Making-Code in die Funktion einfügen und sind fertig!
Lassen Sie uns den nächsten Teil unserer enterFrame () - Funktion ausführen. In diesem Schritt erstellen wir die Blase Filmausschnitt. Fügen Sie Ihrer Funktion Folgendes hinzu:
// Erstellt einen neuen MovieClip, der unsere Blase sein wird. Var myNewBubble: MovieClip = new MovieClip () // Fügt die Maske der Blase myNewBubble.addChild (new MaskMC ()) hinzu. // Wählt einen zufälligen MovieClip aus dem Array von Bildern aus. // [Math.floor (Math.random () * imageList.length)] wählt nur die Anzahl der // Bilder aus, basierend auf der Anzahl der Elemente in der Liste. Var myImageInBubble: MovieClip = new imageList [Math.floor ( Math.random () * imageList.length)] () // Fügt das Bild der Blase hinzu. MyNewBubble.addChild (myImageInBubble) // Maskiert das Bild in der Maske .getChildAt (0) ist das erste // Objekt, das einem MovieClip hinzugefügt wird myImageInBubble.mask = myNewBubble.getChildAt (0)
So sollte Ihre Funktion jetzt aussehen:
private Funktion enterFrame (e: Event): void countDown-- if (countDown.) <= 0) var myNewBubble:MovieClip = new MovieClip() myNewBubble.addChild(new MaskMC()) var myImageInBubble:MovieClip = new imageList[Math.floor(Math.random() * imageList.length)]() myNewBubble.addChild(myImageInBubble) myImageInBubble.mask = myNewBubble.getChildAt(0)
Jetzt können wir unserer enterFrame () - Funktion den letzten Schliff geben. Hier sind die Dinge unter dem, was wir zuvor gemacht haben:
// Platziert die Blase am unteren Rand des Bildschirms myNewBubble.y = 800 // Verschiebt die Blase zufällig auf der X-Achse myNewBubble.x = Math.random () * stage.width // Fügt der Blase myNewBubble einen Ereignis-Listener hinzu. addEventListener (Event.ENTER_FRAME, bubbleFrameEnter) addChild (myNewBubble)
Hier ist eine Momentaufnahme, wie Ihre Enterframe-Funktion aussehen sollte:
private Funktion enterFrame (e: Event): void countDown-- if (countDown.) <= 0) var myNewBubble:MovieClip = new MovieClip() myNewBubble.addChild(new MaskMC()) var myImageInBubble:MovieClip = new imageList[Math.floor(Math.random() * imageList.length)]() myNewBubble.addChild(myImageInBubble) myImageInBubble.mask = myNewBubble.getChildAt(0) myNewBubble.y = 800 myNewBubble.x = Math.random() * stage.width myNewBubble.addEventListener(Event.ENTER_FRAME, bubbleFrameEnter) addChild(myNewBubble) countDown = 30
Wenn Sie sich an unseren letzten Schritt erinnern, haben wir unserer neuen Blase einen weiteren Enterframe-Ereignislistener hinzugefügt. Fügen Sie diese Funktion Ihrer Hauptklasse hinzu, damit sich die Blasen bewegen:
private function bubbleFrameEnter (e: Event): void // Bewege das Ziel unserer Funktion langsam nach oben e.target.y - = 7 // Wenn das Y der Blase niedriger als null ist, wenn (e.target.y < 0) //Pop and remove bubble
Möglicherweise verringert dies die Leistung Ihrer SWF. Wenn dies der Fall ist, fügen Sie jede Blase zu einem Array hinzu, wenn sie erstellt wird, und verschieben Sie jede Blase im Array in der Funktion enterFrame () um 7 Pixel nach oben.
Wir müssen unsere Blasen noch mit der FLiNT-Engine zum Platzen bringen, aber wir können sie zumindest entfernen und etwas Speicherplatz sparen. Folgendes können wir dem ENTER_FRAME-Handler unserer Blase hinzufügen, um unsere Objekte von der Bühne zu löschen und den mit ihnen verbundenen Ereignis-Listener zu entfernen.
// Finden Sie das übergeordnete Element unserer Blase (Ziel) // und sagen Sie ihr, dass sie unser Ziel entfernen soll. E.target.parent.removeChild (e.target) // Entfernen Sie das Ereignis // Listener unseres Ziels (der Blase), damit es nicht funktioniert. t nichts mehr tun e.target.removeEventListener (Event.ENTER_FRAME, bubbleFrameEnter)
Hier ist was dein bubbleFrameEnter Funktion sollte so aussehen:
private Funktion bubbleFrameEnter (e: Event): void e.target.y - = 7 if (e.target.y.) < 0) //FLiNT explosion FX here //_______________________ e.target.parent.removeChild(e.target) e.target.removeEventListener(Event.ENTER_FRAME, bubbleFrameEnter)
Wenn Sie ein Array verwenden, müssen Sie hier die Blase aus dem Array entfernen.
Herzlichen Glückwunsch zum Abschluß Erster Teil unserer Bewerbung! Jetzt müssen wir unserem Programm einige FLiNT-Effekte hinzufügen, um das Betrachten realistischer und unterhaltsamer zu gestalten!
Jetzt fügen wir unserer Szene einige Hintergrundblaseneffekte hinzu. Dazu müssen wir einen MovieClip für FLiNT entwerfen. Stellen Sie sicher, dass die folgenden Einstellungen in Ihrem neuen MovieClip festgelegt sind:
Zeichnen Sie eine Blase, die Sie verwenden möchten. Beachten Sie, dass sich dies von den Fotoblasen unterscheidet, mit denen wir uns befasst haben. Ich habe das folgende Bild ausgewählt (8-fach vergrößert). Die Größe spielt keine Rolle, solange sie klein genug ist, um sich einige Male zu vermehren und trotzdem gut auszusehen.
Wir können jetzt mit der FLiNT-Engine loslegen. Zu Beginn müssen wir unseren Emitter und Renderer erstellen. Fügen Sie den folgenden Code über dem Konstruktor Ihrer Dokumentklasse hinzu.
// Erstellt einen neuen privaten DisplayObjectRenderer var myRenderer: DisplayObjectRenderer = new DisplayObjectRenderer (); // Erzeugt einen 2D-FLiNT-Emitter für standardmäßige 2D-Effekte private var myEmitter: Emitter2D = new Emitter2D ()
Vom Emitter aus können wir alle richtigen Eigenschaften an die Blasen anhängen, damit sie sich so verhalten, wie wir es wollen. Der Renderer zieht die Blasen auf die Bühne.
Nun, da wir unseren Emitter erstellt haben, können wir alle gewünschten Aktionen und Eigenschaften daran anhängen, damit er sich so verhält, wie wir es wollen. Fügen Sie dazu den folgenden Code an einer beliebigen Stelle in Ihrem Konstruktor ein.
// Weist den Emitter an, jede Sekunde 10 Blasen zu erzeugen myEmitter.counter = new Steady (10); // Weist den Emitter an, den bubble_mc MovieClip als Partikel zu verwenden myEmitter.addInitializer (new ImageClass (bubble_mc)); // Weist den Emitter an, innerhalb eines bestimmten // Zeilenabschnitts Blasen zu erzeugen. Blasenpositionen reichen von (0,700) bis (830,700), // von einer Seite am unteren Rand des Bildschirms zur anderen myEmitter.addInitializer (neue Position (neue LineZone (neuer Punkt (0,700), neuer Punkt (830,700))) ) // Setzt die Geschwindigkeit der Partikel auf X: 0, Y: -65, // wenn sie geradeaus nach oben gehen. myEmitter.addInitializer (neue Geschwindigkeit (neue Punktzone (neuer Punkt (0, -65)))); // Weist den Emitter an, Bilder zufällig von 0,75x auf 5x zu skalieren. MyEmitter.addInitializer (new ScaleImageInit (0.75, 5)); // Weist die Partikel an, sich zu bewegen myEmitter.addAction (new Move ()); // Zeichnet ein Rechteck von der oberen linken Ecke (-40, -40), // in die rechte untere Ecke (850,750). Dies ist die // sichere Zone für Blasen. Jegliche Blasen, die diese Grenzen verlassen, werden zerstört // myEmitter.addAction (neue DeathZone (neue Rechteckzone (-40, -40.850.750), true)); // Weist Blasen an, sich von der Maus zu entfernen, wobei // die Kraft der Bewegung (10), der mit dem Emitter verbundene Renderer (myRenderer) und die Episode der Schwerkraft (1) myEmitter.addAction (neue MouseAntiGravity) angegeben werden (10, myRenderer, 1)) // Bringt alle Dinge hoch, die wir gerade angegeben haben :) myEmitter.start ()
Gute Arbeit, um mit FLiNT fantastische Partikeleffekte zu erzeugen. Oh, Moment mal? Sie können sie nicht sehen? Sieht so aus, als ob wir das im nächsten Schritt behandeln müssen :)
Und jetzt ist * drumroll * das letzte Puzzleteil in diesem Puzzle. Ich meine das Tutorial. Jetzt müssen wir nur noch unsere Partikeleffekte mit unserem Emitter rendern. Fügen Sie dazu den folgenden Code am unteren Rand unseres Konstruktors hinzu:
// Verbinde den Partikelemitter mit dem Renderer myRenderer.addEmitter (myEmitter); // Füge den Renderer der Bühne hinzu. addChild (myRenderer);
Im Schritt 15 Wir haben in unserem Code eine leere Stelle für Explosionen gelassen, als unsere Imageblasen die Bühne verließen. Nun ist es an der Zeit, dem Mix einige FLiNT-Effekte hinzuzufügen, damit die Luftblasen so aussehen, als würden die Blasen wirklich platzen.
Beginnen wir mit dem Zeichnen unseres Explosionspartikels. Gehen Sie in die Flash-IDE und erstellen Sie eine neue, dunklere, kleinere Blase und (Auswählen + F8). Setzen Sie jetzt den Klassennamen auf "bubble_mc2"..
Ändern Sie Ihre bubbleFrameEnter () Funktion wie folgt aussehen. Schauen Sie sich die Kommentare an, um eine ausführliche Erklärung zu erhalten, was wir tun:
private function bubbleFrameEnter (e: Event): void // Altes Bewegungsmaterial e.target.y - = 7 // Überprüfen Sie, ob die Blase die Spitze erreicht, wenn (e.target.y < 0) //Create a new particle emitter for the explosion var newE:Emitter2D = new Emitter2D(); //Add the emitter to the renderer myRenderer.addEmitter(newE); //This time we want to use a "blast" //counter. Blast(20) tells the emitter to //create 20 pieces in the explosion newE.counter = new Blast(20); //Give the emitter our particle MovieClip newE.addInitializer(new ImageClass(bubble_mc2)); //Set the position of the created particles to be a //"DiscZone". This is basically a circular area //where particles can be created. //DiscZone(centerPoint:Pointer,innerRadius,outerRadius) //We are setting the center point to be approximately //the center of the bubble and both radius's shall be //set to "50" newE.addInitializer(new Position(new DiscZone(new Point(e.target.x + 75, e.target.y + 75),50,50))); //Creates a new explosion //(power:Number, x:Number, y:Number, expansionRate:Number, depth:Number, epsilon:Number) //The explosion has a power of 5, starts at the center of our DisZone, //has a expansionRate of 2000, depth of 20, and an epislon of 1 newE.addAction(new Explosion(5, e.target.x + 75 , e.target.y + 75, 2000,20, 1)); //Tells the emitter to start moving the particles newE.addAction(new Move()); //Sets the death zone of particles outside of the screen newE.addAction(new DeathZone(new RectangleZone(-30, -30, 820, 620), true)); //Starts the emitter newE.start(); e.target.parent.removeChild(e.target) e.target.removeEventListener(Event.ENTER_FRAME, bubbleFrameEnter)
Herzlichen Glückwunsch zur Verwendung von FLiNT, um ein dynamisches Bildanzeigegerät zu erstellen. Nachdem Sie dies erstellt haben, können Sie die in diesem Tutorial beschriebenen Techniken für Ihre eigenen persönlichen Projekte verwenden, um mit FLiNT etwas wirklich Einzigartiges zu schaffen.
Danke fürs Lesen und ich hoffe das Tutorial war für Sie nützlich :)
Accentsconagua