7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. ActionScript

Countdown im Stil eines Flughafen-Terminal-Timers

Read Time: 17 mins

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

In diesem Tutorial erstellen wir einen wiederverwendbaren Countdown-Timer mit einem dynamischen Zieldatum, das über XML festgelegt werden kann. Wir werden die Zahlen animieren, die im Stil einer alten Statusanzeige eines Flughafens oder Bahnhofs nach unten klappen. Wir werden uns mit Code, Grafikerstellung und Animation befassen.

Neu veröffentlichtes Tutorial

Alle paar Wochen besuchen wir einige der Lieblingsbeiträge unserer Leser aus der gesamten Geschichte der Website. Dieses Tutorial wurde erstmals im Mai 2010 veröffentlicht.


Schritt 1: Richten Sie Ihre Flash-Datei ein

Erstellen Sie eine neue Flash-Datei (Actionscript 3) mit den folgenden Einstellungen: 500 x 300, schwarzer Hintergrund und 30 fps.

Flash file setupFlash file setupFlash file setup

Schritt 2: Erstellen Sie den MovieClip digit_bottom

Erstellen Sie einen neuen MovieClip mit dem Namen "digit_bottom" und zeichnen Sie ein abgerundetes Rechteck darin, das ungefähr 36 Pixel breit und 50 Pixel hoch ist. (Eine schnelle Möglichkeit, ein Rechteck mit genauen Abmessungen zu zeichnen, besteht darin, das Rechteck-Werkzeug auszuwählen und bei gedrückter Alt-Taste auf die Bühne zu klicken.)

Geben Sie dem Rechteck eine Verlaufsfüllung von # 111111(oben) bis # 333333(unten) und einen 2-Pixel-Umriss mit der Farbe # 333333.

Background image or animationBackground image or animationBackground image or animation

Schritt 3: Positionieren Sie das Rechteck

Positionieren Sie das Rechteck so, dass der Registrierungspunkt des MovieClips (das kleine '+') genau in der Mitte zwischen dem oberen und unteren Rand und dem linken Rand liegt. Wenn Sie Ihr Rechteck 50 Pixel groß gemacht haben, sollte der y-Wert -25 sein.

Rectangle PropertiesRectangle PropertiesRectangle Properties

Schritt 4: Fügen Sie die Nummer hinzu

Erstellen Sie eine neue Ebene und fügen Sie ein dynamisches Textfeld mit dem Namen 't_num' hinzu. Wählen Sie eine Schriftart, die sich wie ein Flughafen oder Bahnhof anfühlt (z. B. Helvetica, DIN oder Interstate). Ich benutze Helvetica Bold.

Stellen Sie das Absatzformat auf zentriert ein und denken Sie daran, die Schriftarten für die Zahlen 0–9 einzubetten.

Positionieren Sie das Textfeld so, dass es auf dem Hintergrundrechteck zentriert ist.

Number text fieldNumber text fieldNumber text field

Wir werden diesen MovieClip als Basis für eine andere Grafik verwenden. Nehmen Sie sich also einen Moment Zeit, um sicherzustellen, dass er gut aussieht.


Schritt 5: Fügen Sie eine Maske hinzu

Erstellen Sie eine neue Ebene auf der Timeline des MovieClips digit_bottom und nennen Sie sie "Maske". Kopieren Sie das abgerundete Rechteck und fügen Sie es an der mask-Ebene ein (Bearbeiten > An Ort und Stelle einfügen oder Befehl-Umschalt-V).

Wählen Sie die obere Hälfte des Maskenrechtecks aus und löschen Sie es.

Klicken Sie mit der rechten Maustaste auf die Maske-Ebene, wählen Sie Maske und stellen Sie sicher, dass alle darunter liegenden Ebenen maskiert werden.

Create the MaskCreate the MaskCreate the Mask

Schritt 6: Erstellen Sie den digit_top MovieClip

Gehen Sie in die Bibliothek, duplizieren Sie den digit_bottom MovieClip und nennen Sie die neue Kopie 'digit_top'.

Dieser MovieClip ist praktisch identisch mit dem digit_bottom-Clip, außer dass die Maske die obere Hälfte der Grafiken anstelle der unteren anzeigt.

Löschen Sie die Grafiken, die sich derzeit auf der Maske-Ebene befinden. Kopieren Sie das abgerundete Rechteck und fügen Sie es erneut in die Maske-Ebene ein. Wählen Sie diesmal die untere Hälfte aus und löschen Sie sie.

Die einzige andere Anpassung, die Sie hier vornehmen möchten, besteht darin, die Farbe des Texts und die Schattierung des abgerundeten Rechtecks im Hintergrund anzupassen. Ich habe die Grafiken in meinem digit_top-Clip etwas dunkler gemacht, um das von oben kommende Licht zu simulieren.

digit_top and digit_bottom clips

Schritt 7: Erstellen Sie den Digit MovieClip

Erstellen Sie einen neuen MovieClip mit dem Namen "Digit". Ziehen Sie die MovieClips digit_top und digit_bottom und positionieren Sie beide bei 0,0. Geben Sie ihnen die Instanznamen 'top1' und 'bottom1'.

Kopieren Sie nun beide MovieClips (digit_top und digit_bottom), erstellen Sie eine neue Ebene und fügen Sie jeweils eine Kopie ein. Nennen Sie die neuen Kopien 'top2' und 'bottom2'.

Sie sollten jetzt 4 MovieClips in Ihrem Digit MovieClip haben:2 Kopien von digit_top und 2 Kopien von digit_bottom. Ich werde im nächsten Schritt erklären, warum wir es so einrichten.


Schritt 8: Animationsstrategie

Wir müssen ein bisschen Animationstrick machen, um den gewünschten Effekt für das Umdrehen von Zahlen zu erzielen. Schauen Sie sich das folgende Diagramm unseres Digit MovieClip an (ich rendere es in 3D, damit Sie die Überlagerung leichter sehen können):

Digit Animation DiagramDigit Animation DiagramDigit Animation Diagram

Animation Schritt 1:

Wir beginnen mit dem Bottom2-Clip, der auf den Kopf gestellt wird (mithilfe der Eigenschaft scaleY) und hinter dem Top2-Clip platziert wird. Zu diesem Zeitpunkt sind die 2 sichtbaren Clips top2 und bottom1. Die Zahlen auf diesen beiden Clips entsprechen einander, sodass sie eine vollständige Ziffer bilden.

Animation Schritt 2:

Jetzt klappen wir den top2-Clip in die Mitte der Ziffer. Zu diesem Zeitpunkt ist scaleY Null, sodass der Clip nicht sichtbar ist. Gleichzeitig klappen wir auch den bottom2-Clip nach unten, aber diesen klappen wir ganz nach unten. Da es sich hinter top2 befindet, wird es erst angezeigt, wenn es den halben Punkt überschritten hat. Jetzt sind die 2 sichtbaren Clips top1 und bottom1. Die Zahlen auf diesen beiden Clips stimmen nicht überein, aber das ist in Ordnung, da dieser Schritt nur einen kurzen Moment dauert.

Animation Schritt 3:

Der top2-Clip bleibt in der Mitte, während bottom2 weiter nach unten fällt. Sobald es angebracht ist, stimmen die Zahlen auf den sichtbaren Clips (top1 und bottom2) wieder überein und bilden eine vollständige Ziffer.

Animation Schritt 4:

An diesem Punkt werden wir die Positionen der 2 versteckten Clips erneut verschieben und zurücksetzen, um uns auf den nächsten Flip vorzubereiten. Beachten Sie, dass sich die Clips an denselben Positionen wie in Schritt 1 befinden und nur umgekehrt sind.


Schritt 9: Erstellen Sie den Clock MovieClip

Nachdem wir den einzelnen Digit MovieClip eingerichtet haben, bauen wir die Uhr.

Erstellen Sie auf der Bühne einen neuen MovieClip mit dem Namen 'Clock' mit dem Instanznamen 'clock'. Platzieren Sie im neuen MovieClip 9 Kopien Ihres Digit MovieClip; 2 für Sekunden, 2 für Minuten, 2 für Stunden und 3 für Tage. Geben Sie jeder Ziffer einen Instanznamen. Nennen Sie sie von links nach rechts "digit0", "digit1", "digit2" usw.

Fügen Sie einige Doppelpunkte hinzu, um die MovieClips und Beschriftungen für jeden Abschnitt zu trennen. Das Design liegt bei Ihnen. Ich habe ein dunkles, abgerundetes Rechteck als Hintergrund für meine Uhr hinzugefügt.

Zuletzt fügen Sie ein dynamisches Textfeld mit dem Namen 't_date' hinzu. Hier zeigen wir das Zieldatum an, bis zu dem die Uhr herunterzählt. Denken Sie daran, die Schriftart für dieses Textfeld einzubetten, wenn Sie keine Systemschriftart verwenden.

Clock MovieClipClock MovieClipClock MovieClip

Schritt 10: Erstellen Sie die Ziffernklasse

Erstellen Sie eine neue Actionscript-Datei mit dem Namen 'Digit.as' und fügen Sie diesen Code hinzu, um die leere Shell für die Klasse zu erstellen:

Das macht noch nicht viel. Wir haben ein paar Arrays für die 2 Sätze von digit_top und digit_bottom MovieClips. Ich habe zwei Konstanten eingerichtet, TOP und BOTTOM, um den Überblick über die oberen und unteren Clips in diesen Arrays zu behalten. Die Variable _number enthält die Ziffer, die zu einem bestimmten Zeitpunkt angezeigt wird.

(Hinweis: Ich verwende den Unterstrich in meinen Variablennamen, um private Variablen anzugeben.)

Suchen Sie Ihren Digit MovieClip in der Bibliothek und weisen Sie ihm diese Klasse in den Verknüpfungseinstellungen zu.

Digit Class Linkage SettingsDigit Class Linkage SettingsDigit Class Linkage Settings

Schritt 11: Importieren Sie die TweenLite-Bibliothek

Wir werden die TweenLite-Bibliothek verwenden, um unseren Digit MovieClip zu animieren.

Laden Sie hier die AS3-Version der TweenLite-Bibliothek herunter.

Platzieren Sie den Ordner 'com' im selben Verzeichnis wie Ihre Haupt-Flash-Datei (oder in Ihrem Quellpfad, wenn Sie einen anderen Klassenpfad eingerichtet haben).

Fügen Sie diese beiden Zeilen oben in Ihrer Digit-Klasse direkt unter dem MovieClip-Import hinzu:

In diesem Tutorial werden wir kaum die Oberfläche dessen kratzen, was TweenLite kann. Weitere Informationen finden Sie in der TweenLite-Dokumentation.


Schritt 12: Programmieren Sie die flipTo Animation

Fügen Sie diese Funktion Ihrer Digit-Klasse hinzu:

Hier ist, was passiert, Zeile für Zeile:

  • Diese Funktion akzeptiert einen String, der die Ziffer enthält, zu der wir wechseln. In der ersten Zeile wird nur unsere Variable _number so eingestellt, dass sie diese Ziffer enthält.
  • Als nächstes setzen wir die Textfelder in den Filmclips TOP und BOTTOM in unserem Array _nextDigit so, dass dieselbe Ziffer angezeigt wird.
  • Dann verwenden wir TweenLite, um die scaleY-Eigenschaft des TOP MovieClip von _currentDigit auf 0 zu setzen. Dies ergibt den Effekt, dass sie in Richtung der Mitte der Ziffer "fällt".
  • Die letzte Zeile ist ein weiteres Tween, diesmal wird der UNTERE Clip des _nextDigit vom oberen Rand der Ziffer bis zum unteren Rand animiert. Wieder verwenden wir die Eigenschaft scaleY, um diesen Effekt zu simulieren, diesmal jedoch von -1 bis 1. Da das Tweening doppelt so weit reicht wie der TOP-Clip, geben wir ihm die doppelte Zeit (0,3 Sekunden anstelle von 0,15). Wenn dieses Tween beendet ist, wird eine Funktion namens 'flipComplete' aufgerufen. Wir werden diese Funktion im nächsten Schritt schreiben.

Schauen Sie sich das Diagramm in Schritt 8 noch einmal an, wenn Sie über die Animation hier verwirrt sind.


Schritt 13: Fügen Sie die Funktion flipComplete() hinzu

Fügen Sie diese Funktion der Digit-Klasse direkt unter der flipTo-Funktion hinzu:

Sobald die Flip-Animation abgeschlossen ist, führen wir diese Funktion aus. Es vertauscht die Arrays _currentDigit und _nextDigit. Danach ruft es eine Funktion namens 'reset' auf, um die Clip-Ebene und die Positionen für den nächsten Flip zurückzusetzen. Schreiben wir diese Funktion jetzt.


Schritt 14: Fügen Sie die Funktion reset() hinzu

Fügen Sie diese Funktion der Digit-Klasse hinzu:

In den ersten beiden Zeilen dieser Funktion wird das _nextDigit BOTTOM und dann das _currentDigit TOP an die Spitze der Anzeigeliste gesetzt. Normalerweise verwende ich dazu nur addChild(), da weniger Eingaben erforderlich sind als bei setChildIndex().

Nachdem die Clips neu geschichtet wurden, legen wir die scaleY-Eigenschaften fest, damit sie für den nächsten Flip bereit sind. Dies bedeutet, dass _nextDigit [BOTTOM] von 1 auf -1 und _nextDigit [TOP] von 0 auf 1 geändert wird.

Überprüfen Sie erneut das Diagramm in Schritt 8, wenn Sie sich verlaufen.


Schritt 15: Zum Konstruktor hinzufügen

Eine Sache, die wir vergessen haben, ist, die Clips für die erste Flip-Animation richtig zu positionieren. Wir können dies einfach tun, indem wir der Reset-Funktion direkt im Digit-Klassenkonstruktor einen Aufruf hinzufügen:


Schritt 16: Fügen Sie die Funktion number() hinzu

Eine letzte Sache, die wir in unserer Digit-Klasse benötigen, ist eine Möglichkeit, von außerhalb der Klasse auf die private Variable _number zuzugreifen. Wir werden eine einfache Accessor-Funktion hinzufügen:


Schritt 17: Erstellen Sie die Clock-Klasse

Erstellen Sie eine neue ActionScript-Datei mit dem Namen 'Clock.as'. Fügen Sie diesen Code ein:

Noch nicht viel hier. Importieren Sie einfach einige der Klassen, die wir benötigen. Ich habe auch ein paar private Variablen. _clockTimer zählt die Sekunden für uns herunter und _targetDate enthält das Datum, bis zu dem wir herunterzählen.


Schritt 18: Fügen Sie die Funktion set() hinzu

Fügen Sie diese Funktion der Clock-Klasse direkt unter dem Konstruktor hinzu:

Mit dieser Funktion legen wir das Zieldatum für die Uhr fest. Es akzeptiert(natürlich) ein Datum und weist dieses der Variablen _targetDate zu. Es instanziiert dann unseren _clockTimer. Der _clockTimer ruft die update-Funktion einmal pro Sekunde auf, um die Ziffern zu aktualisieren.

Nach dem Starten des Timers setzt die Funktion den Text t_date mit dem Zieldatum. Die Funktion toLocaleString() stellt sicher, dass das Datum in der lokalen Zeitzone des Benutzers angezeigt wird.

In der letzten Zeile dieser Funktion wird update einmal aufgerufen, um die Uhr auf die richtige Zeit einzustellen. Andernfalls wird "000 00:00:00" für eine Sekunde bis zum ersten Timer-Ereignis angezeigt.


Schritt 19: Fügen Sie die Funktion update() hinzu

Diese Funktion ist etwas lang, da hier der größte Teil der Arbeit erledigt wird. Fügen Sie es Ihrer Clock-Klasse hinzu:

Diese Funktion akzeptiert ein TimerEvent als Parameter. Der Standardwert für diesen Parameter ist null. Dies ermöglicht es uns, die Funktion aufzurufen, ohne einen Parameter zu senden, wie wir es in der Set-Funktion tun.

In der ersten Zeile dieser Funktion werden das aktuelle Datum und die aktuelle Uhrzeit als Datumsobjekt abgerufen. Als nächstes finden wir die Differenz zwischen dem aktuellen Datum und dem Zieldatum (Zeile 37). Wenn die Differenz 0 oder weniger beträgt, ist das Zieldatum überschritten, sodass wir den _clockTimer stoppen (Zeilen 38-44).

Da die Zeitdifferenz zwischen jetzt und dem Ziel in Millisekunden berechnet wird, müssen wir diese in eine gut lesbare Anzeige von Tagen, Stunden, Minuten und Sekunden umwandeln (Zeilen 46-62). Die Mathematik hier ist ziemlich einfach, solange Sie wissen, dass 1000 Millisekunden in einer Sekunde, 60 Sekunden in einer Minute, 60 Minuten in einer Stunde und 24 Stunden in einem Tag sind.

In Zeile 65 speichern wir alle diese Werte als Elemente in einem Array. Ab Zeile 68 durchlaufen wir jedes Element und fügen es einer Zeichenfolge mit dem Namen 'diffString' hinzu. Dabei fügen wir bei Bedarf auch führende Nullen hinzu (Zeile 71). Wenn unsere Werte für die Uhr also 30 Tage, 5 Stunden, 56 Minuten und 6 Sekunden wären, würde der diffString folgendermaßen aussehen: "030055606".

Als letztes durchläuft diese Funktion die Zeichen im diffString (mit der charAt()-Methode). Für jedes Zeichen in der Zeichenfolge prüfen wir, ob es sich von der Zahl unterscheidet, die derzeit auf der entsprechenden Ziffer angezeigt wird. Dies ist einfach, da wir unsere Zifferninstanzen benannt haben. Wenn die Nummer nicht mit der aktuell angezeigten übereinstimmt, weisen wir diese Ziffer an, zur Nummer im diffString zu wechseln.


Schritt 20: Sound hinzufügen

Suchen (oder erstellen) Sie einen guten tickenden Sound, der jedes Mal abgespielt wird, wenn die Uhr aktualisiert wird. Importieren Sie es in die Bibliothek Ihrer Flash-Datei und setzen Sie den Klassennamen in den Verknüpfungseinstellungen auf 'TickSound'.

Tick Sound Linkage SettingsTick Sound Linkage SettingsTick Sound Linkage Settings

Fügen Sie die Variable _tickSound am oberen Rand Ihrer Clock-Klasse direkt unter den beiden anderen Variablen hinzu:

Und spielen Sie den Sound in der Update-Funktion ab:


Schritt 21: Fügen Sie die Hauptdokumentklasse hinzu

Unser Countdown-Timer ist abgelaufen. Wir brauchen nur eine Möglichkeit, das Zieldatum festzulegen. Erstellen Sie eine neue Actionscript-Datei mit dem Namen 'Main.as' mit folgendem Code:

Dazu wird lediglich das Zieldatum für die Clock-Instanz auf der Bühne festgelegt. Ich verwende setTime() und Date.UTC(), um das Datum in Universal Timecode zu konvertieren. Auf diese Weise ist das Datum korrekt, wenn es auf dem Computer des Benutzers wieder in die Ortszeit konvertiert wird. Denken Sie auch daran, dass die Monate auf Null basieren. Der 4. Monat ist also eigentlich Mai, nicht April.

Setzen Sie in Ihrer Flash-Datei die Document-Klasse auf 'Main'.

Set the Document Class

Wenn Sie eine Auffrischung zur Verwendung der Dokumentklasse benötigen, lesen Sie diesen Quick-Tipp.


Schritt 22: Testen

Testen Sie Ihren Film jetzt und alles sollte funktionieren. Versuchen Sie, das Zieldatum in der Hauptklasse zu ändern, und sehen Sie, wie sich der Countdown ändert.

Ein möglicher Nachteil bei der Einrichtung ist, dass das Zieldatum in unserem SWF fest codiert ist. Das ist in Ordnung, aber es wäre cool, wenn wir das Datum dynamisch laden könnten, damit wir den Countdown für verschiedene Dinge wiederverwenden könnten.

Mal sehen, was wir dagegen tun können ...


Schritt 23: Erstellen Sie die XML-Datei

Erstellen Sie eine neue XML-Datei im selben Ordner wie Ihre Flash-Datei mit dem Namen "targetDate.xml" (eine XML-Datei ist nur eine reine Textdatei). Fügen Sie dies der XML-Datei hinzu:

Die Verwendung dieses Formats für unser Zieldatum ist ziemlich aufgebläht (es gibt mehr Markups als tatsächliche Daten), aber es wird die Dinge für die Zwecke dieses Tutorials sehr klar halten.


Schritt 24: Laden Sie das XML

Nehmen wir nun einige Änderungen an unserer Hauptdokumentklasse vor. Ersetzen Sie alles in dieser Datei durch diesen Code:

Sie werden feststellen, dass wir einige zusätzliche Klassen importiert haben, um das Laden der XML-Datei zu erleichtern. In der Konstruktorfunktion erstellen wir eine neue URLLoader-Instanz, um die Datei für uns zu laden. Wir fügen einen Ereignis-Listener hinzu, der eine Funktion namens 'onDataLoaded' aufruft, wenn die Datei vollständig geladen ist.


Schritt 25: Fügen Sie die Funktion onDataLoaded() hinzu

Fügen Sie diese Funktion der Hauptklasse hinzu:

Diese Funktion erstellt ein neues XML-Objekt aus der von uns geladenen Datei. Wir erstellen dann ein neues Date-Objekt aus den Werten im XML. Wir verwenden wieder setTime() und Date.UTC(), um das Datum in Universal Timecode zu konvertieren. Die letzte Zeile ist dieselbe wie zuvor, sie sendet nur das Zieldatum an unsere Clock-Instanz.


Schritt 26: Zusammenfassung

Das ist so ziemlich alles für diesen. Es gibt jedoch einige Verbesserungen, die Sie möglicherweise vornehmen möchten:

  1. Je nachdem, wofür Sie den Countdown verwenden, möchten Sie möglicherweise etwas Besonderes für den Benutzer tun, wenn der Countdown Null erreicht. Sie würden dies der Clock-Klasse in dem Teil der update-Funktion hinzufügen, der prüft, ob der Timer auf Null steht.
  2. Wie ich bereits erwähnt habe, ist das Format unseres XML so ziemlich verschwenderisch. Sie können das Datum lieber einfach als Zeichenfolge über FlashVars übergeben, ein anderes Datenformat (wie JSON) verwenden oder das XML einfach neu formatieren, um es etwas kompakter zu gestalten.

Viel Glück! Schreiben Sie wie immer einen Kommentar und teilen Sie mir Ihre Meinung mit.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.