Schnelltipp Erstellen Sie mit ActionScript 3 eine minimalistische SandClock

Lesen Sie die einfachen Schritte in diesem Quick Tip, um eine minimalistische SandClock mit ActionScript zu erstellen.


Endergebnisvorschau

Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten:


Schritt 1: Kurzübersicht

Mit Arrays und einem vorgefertigten quadratischen MovieClip erstellen wir eine SandClock, die durch einen Timer animiert wird.


Schritt 2: Richten Sie Ihre Flash-Datei ein

Starten Sie Flash und erstellen Sie ein neues Flash-Dokument. Stellen Sie die Bühnengröße auf 400 x 250 Pixel und die Bildrate auf 24 Bilder / s ein.


Schritt 3: Schnittstelle

Dies ist die Schnittstelle, die wir verwenden werden. Die Quadrate im Bild sind eigentlich ein einzelnes blaues Quadrat, das MovieClip zur Verwendung mit ActionScript mit einem Verknüpfungsnamen von exportiert hat Quadrat. Eine einfache Schaltfläche mit dem Namen Start Knopf wird zum Erstellen und Starten der Uhr verwendet.


Schritt 4: ActionScript

Erstellen Sie eine neue ActionScript-Klasse (Cmd + N) und speichern Sie die Datei als Main.as und schreibe die folgenden Zeilen. Lesen Sie die Kommentare im Code durch, um das Verhalten der Klasse vollständig zu verstehen.

 package import flash.display.Sprite; import flash.utils.Timer; import flash.events.TimerEvent; import flash.events.MouseEvent; public class Main erweitert Sprite private var clockArray: Array = [15,13,11,9,7,3,1]; // Speichert die Anzahl der Quadrate pro Zeile private var top: Array = []; // enthält die Quadrate im oberen Teil des privaten var-Containers von Sandclock: Sprite = new Sprite (); // speichert alle privaten Movieclips-VarContainerCopy: Sprite = new Sprite (); // kopiert den oberen Teil, um den unteren privaten var-Timer zu erstellen: Timer = new Timer (1000); // ein Timer wird jeden zweiten privaten var-Zähler ausgeführt: int = 0; // zählt die Sekunden, die zum Stoppen der öffentlichen Timerfunktion verwendet werden startButton.removeEventListener (MouseEvent.MOUSE_UP, buildClock); // Deaktiviert die Schaltfläche startButton.enabled = false; var clockLength: int = clockArray.length; / * Dieses Double for durchsucht die Länge des Clock-Arrays UND den Wert jedes Array-Elements, wobei 7 Zeilen (Länge) mit 15, 13, 11 (Elementwert) usw. erstellt werden. * / for (var i: int = 0; ich < clockLength; i++)  for (var j:int = 0; j < clockArray[i]; j++)  var s:Square = new Square(); var sc:Square = new Square(); s.x = 70.5 + (s.width * j) + (1 * j) + (i * (s.width + 1)); s.y = 84.5 + (s.height + 1) * i; sc.x = s.x; sc.y = s.y; if (i >= 5) s.x = 70,5 + (s.breite * j) + (1 * j) + (i * ((s.breite) + 1)) + (s.breite * 2 - 4); sc.x = s.x;  container.addChild (s); containerCopy.addChild (sc); // erstellt eine Kopie für den unteren Teil top.push (s); sc α = 0,2; // macht den unteren Teil halb durchsichtig addChild (container); containerCopy.x = 225; // positioniert und dreht den unteren Teil containerCopy.y = 247; containerCopy.rotation = 180; addChild (containerCopy);  timer.addEventListener (TimerEvent.TIMER, startClock); // den Timer starten timer.start ();  / * Diese Funktion wird jede Sekunde ausgeführt. Sie ändert das Alpha des entsprechenden Quadrats, um den Sandeffekt zu erzeugen. Wenn die Zeit abgelaufen ist, stoppt der Timer und ruft eine Funktion auf * / private Funktion startClock (e: TimerEvent): void container.getChildAt (counter) .alpha = 0.2; containerCopy.getChildAt (Zähler) & agr; = 1; counter ++; // 60 Sekunden if (Zähler> = 59) timer.stop (); timer.removeEventListener (TimerEvent.TIMER, startClock); timeComplete ();  private Funktion timeComplete (): void // hier etwas tun

Sie können den Timer und das einstellen Zähler Wert, um die Dauer der Sanduhr zu erhöhen oder zu verkürzen.


Schritt 5: Dokumentenklasse

Vergessen Sie nicht, den Klassennamen dem hinzuzufügen Klasse Feld in der Veröffentlichen Abschnitt der Eigenschaften Panel.


Fazit

Verwenden Sie diesen SandClock, um Ihrer Anwendung oder Ihrem Spiel eine nette Note zu geben?

Ich hoffe, Ihnen hat dieses Tutorial gefallen, vielen Dank für das Lesen!