Share
In diesem Lernprogramm erfahren Sie, wie Sie einen Effekt erzeugen, der Ihnen (z. B. in Dateien wie diesem) sicherlich vor Augen geführt hat, die Pixelexplosion. Während der Erstellung erfahren Sie, wie Sie BitmapData aus einem MovieClip extrahieren, ein Tweeningmodul verwenden und Ereignis-Listener verwenden.
Dann fangen wir an!
Als erstes erstellen wir eine AS3-Flash-Datei. Dann richten wir unsere Bühne auf 400px x 400px und 30 fps ein. Wir werden auf der Timeline programmieren, um die Dinge einfacher zu machen, aber diejenigen, die wissen, wie man in OOP programmiert, können diesen Code gerne in Klassen schreiben. Sie benötigen Grundkenntnisse in AS3, um alle Prozesse dieses Tutorials zu verstehen. Ich werde jedoch versuchen, es sehr einfach zu halten. Sie müssen die blauen, mit dem Mauszeiger versehenen Tasten in Ihrer IDE drücken. Es mag auf den ersten Blick viel Arbeit erscheinen, aber es ist wirklich sehr einfach…
Wir zeichnen jetzt ein Vektorbild dessen, was wir brauchen. Sie können wirklich jedes Bild mit diesem Effekt einrichten (.jpg, .png), aber Vektoren sind kühler. Wie Sie feststellen werden, bin ich kein großer Designer. Alles, was Sie tun müssen, ist Ihr Bild zu zeichnen (oder ein JPG von Ihrem Computer zu importieren), es auszuwählen und in einen MovieClip umzuwandeln (drücken Sie F8 unter Windows)..
Nachdem Sie Ihr Bild in einen Movieclip umgewandelt haben, können Sie es für den Code vorbereiten, der als Ziel verwendet wird. Wir erstellen eine neue Ebene für die Aktionen (1.) und geben ihr dann den Instanznamen mcLogo (2.). Dann importieren wir die Klassen zur Verwendung in unserer Aktionsebene. Für diesen Effekt benötigen wir eine gute Tweening-Engine. Das Beste, was ich für Geschwindigkeit und Stabilität herausfindet, ist TweenMax. Sie können es von http://blog.greensock.com/tweenmaxas3/ herunterladen (spenden Sie, wenn es Ihnen gefällt). Denken Sie daran, das Klassenverzeichnis in das gleiche Verzeichnis wie Ihre .fla zu kopieren (wie Sie im blauen Feld sehen können). Importieren Sie schließlich die TweenMax-Klasse in Ihre Timeline (3.).
Wir werden jetzt die Bühne und unsere Hauptvariablen einrichten. Wir richten die Bühne an der TOP_LEFT-Ecke aus und richten sie so ein, dass der Inhalt nicht skaliert wird. Auf der Variablenseite erstellen wir einen Container, der alle Pixel enthält, die explodieren. Wir werden auch einen GlowFilter erstellen, dies ist natürlich optional, aber es erhöht den Effekt des Effekts. "Animieren" ist ein Schalter, der aktiviert wird, wenn der Effekt stattfindet und "pixelBMP" die Bitmap-Daten Ihres Bildes ist.
stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; var pixelContainer: MovieClip = neuer MovieClip (); var glow: GlowFilter = neuer GlowFilter (0xFFFF00, 1, 10, 10,5,2); var animieren: Boolean = false; var pixelBMP: BitmapData;
Als Nächstes erstellen wir Wiederholungsvariablen und weisen der Position des Pixelcontainers dieselbe Position zu wie Ihr Bild.
var i: int = 0; var j: int = 0;
Wir extrahieren nun die Bitmap-Daten (Pixelfarben) aus dem von Ihnen eingerichteten Bild (1.). Erinnern Sie sich an diese beiden Zeilen, die Ihnen auch in anderen Projekten helfen werden. Wir erstellen ein neues Symbol aus der Bibliothek (2.) und klicken auf die Schaltfläche Erweitert. Wählen Sie nach dem Klicken Export for Actionscript (3.) aus. Suchen Sie nach dem Textfeld "Klasse" und geben Sie "myPixel" ein..
Jetzt richten wir den Pixelcontainer ein. Wir geben unseren neu erstellten Pixeleffekt ein und erstellen eine Ebene mit dem Namen "Aktion"..
Auf der Aktionsebene richten wir die Bitmap ein. Dieser kleine Code hilft Ihnen jedes Mal, wenn Sie die BitmapData eines Objekts bearbeiten möchten (z. B. mit anderen nützlichen Effekten wie Entsättigung und Unschärfe)..
pixelBMP = neue BitmapData (mcLogo.width, mcLogo.height, true, 0x000000) pixelBMP.draw (mcLogo)
Ich habe einen Kreis erstellt, der die Farbe jedes Pixels enthält, aber Sie können ihn an Ihre Wünsche anpassen. Quadrat, Dreieck oder sogar ein einfaches Pixel. Wir fügen den Pixelglühen-Effekt aus dem Funktionsparameter hinzu:
var orgX: int = 0; var orgY: int = 0; var bmpImg: Bitmap; Funktion setUpPixel (bdData: BitmapData, Glow: GlowFilter) var mc: MovieClip = new MovieClip (); mc.graphics.beginFill (bdData.getPixel (0,0)); mc.graphics.drawCircle (0,0,2) mc.graphics.endFill (); mc.filters = [Glühen]; addChild (mc);
Wir erstellen zwei "for" -Anweisungen, um alle Pixel unseres Bildes abzudecken. Das erste für (i) steht für vertikal und das zweite (j) für horizontal. Die getPixel-Methode gibt eine Einheit zurück, die die Farbe des Pixels an dieser Position darstellt. Wenn es nicht null ist, werden die in Schritt 9 dargestellten Vorgänge gestartet. Aufgrund der Speicherverwaltung werden die Pixel zwei nach zwei gekreuzt.
für (i = 0; i < mcLogo.height; i+=2) for(j = 0; j < mcLogo.width; j+=2)
Wir beginnen damit, dem Glühfilter die Pixelfarbe zuzuweisen. Dann erstellen wir ein neues myPixel, das wir "pixel_mc" nennen. Wir nennen die Funktion "setUpPixel", die wir in Schritt 7 definiert haben. Dadurch werden bitmapData übergeben - 2 Pixel breit, 2 Pixel hoch, Farbe des aktuellen Pixels, originalX, originalY und der Glow-Filter. Schließlich fügen wir dieses Pixel dem Pixelcontainer hinzu (Zeile 12).
für (i = 0; i < mcLogo.height; i+=2) for(j = 0; j < mcLogo.width; j+=2) if(pixelBMP.getPixel(j, i)>0) glow.color = pixelBMP.getPixel (j, i); var pixel_mc: myPixel = new myPixel () pixel_mc.setUpPixel (neue BitmapData (2, 2, false, pixelBMP.getPixel (j, i)), glow) pixel_mc.y = i; pixel_mc.x = j; pixelContainer.addChild (pixel_mc); pixelContainer.visible = false;
Bei der Programmierung sind kleine Fehler sehr häufig, deshalb müssen wir unseren Movieclip von Zeit zu Zeit testen. Dies gibt uns unser Image, aber auch etwas Unschärfe. Die Unschärfe liegt am Glimmfilter, also keine Sorgen da. Wie Sie vielleicht bereits wissen, müssen diese Pixel nicht sichtbar sein, es sei denn, der Effekt wird angewendet. Bis dahin haben wir unser schönes Bild. In diesem Schritt müssen Sie also nur die Kommentarzeile 13 eingeben - pixelContainer.visible = false; und du bekommst dein ursprüngliches Bild zurück.
Wir haben die Pixel an Ort und Stelle, jetzt müssen wir sie nur noch animieren. Das ist, wo TweenMax die Szene betritt. Wir starten die Funktion, indem wir das Originalbild unsichtbar machen und die Pixel sichtbar machen. Als Nächstes setzen wir das Originalbild und die Schaltfläche, die wir später erstellen werden (um die Funktion zu aktivieren) an der obersten Indexposition. Denken Sie an diese Funktion - setChildIndex (yourmc, numChildren-1) es wird ihnen in anderen projekten helfen.
Funktion explode () pixelContainer.alpha = 1; mcLogo.visible = false; setChildIndex (mcLogo, numChildren - 1) setChildIndex (btn_mc, numChildren-1) pixelContainer.visible = true;
Hier werden die Pixel lebendig. Das "for" kreuzt jedes Kind des pixelContainer. Das Pixel wird durch das Symbol extrahiert getChildAt (i) Methode. Xdest und ydest sind einige zufällige Ziele, zu denen unsere Pixel fliegen werden (da Math.random () eine Zahl zwischen 0 und 1 zurückgibt, ist es notwendig, diese zu multiplizieren). Schließlich fügen wir den Übergangs- und einen Leichtigkeitstyp über TweenMax hinzu.
Accentsconagua
