Countdown-Script in Flash MX


Realisierung eines Countdowns in Flash
Erhöhen Sie die Vorfreude und die Spannung auf ein besonderes Ereignis mit einem Countdown-Script. Lassen Sie sich die Tage, Stunden und Minuten bis zu einem besonderen Ereignis wie einem Geburtstag, Feiertag oder Sportereignis anzeigen.
Mit einem Countdown-Script können Sie ein besonderes Ereignis anständig würdigen und Ihre Besucher auf dessen Datum nachhaltig hinweisen. Mit geringem Aufwand steigern Sie so beispielsweise die Spannung auf die nächste Fußball-WM oder der Veröffentlichung einer neuen Version Ihrer Webseite. Die Einsatzmöglichkeiten sind vielseitig.

Erstellen Sie in einem neuen Flashdokument eine zweite Ebene. Benennen Sie die erste Ebene mit „Aktionen“ und die zweite Ebene mit „Anzeige“. Gehen Sie anschließend in das erste Bild der Ebene „Aktionen“. Rufen Sie nun durch Betätigen der Funktionstaste F9 das Aktionen-Fenster auf. Zur Realisierung eines Countdowns benötigen wir zunächst das aktuelle Datum und ein Zieldatum. Letzteres wollen wir in den einzelnen Komponenten vom Jahr bis zur Sekunde in Variablen festlegen:

001:
002:
003:
004:
005:
006:
 var tSecond = "00";     // Zielsekunden
 var tMinute = "00";     // Zielminuten
 var tHour   = "00";     // Zielstunden
 var tDay    = "24";    // Zieltag
 var tMonth  = "12";    // Zielmonat
 var tYear   = "2005";  // Zieljahr

Um die Berechnungen der Zeitdifferenz zwischen dem Zieldatum und dem aktuellem Datum zu vereinfachen, wandeln wir beide Angaben mittels „getTime()“ in den Unix-Timestamp um. Der Rückgabewert entspricht den seit dem 1. Januar 1970 0:00 Uhr verstrichenen Millisekunden.

001:
002:
003:
004:
005:
006:
007:
 // Zieldatum umrechnen
 var target = new Date(tYear, tMonth - 1, tDay, tHour, tMinute, tSecond);
 target = target.getTime();
 
 // aktuelles Datum umrechnen
 var now = new Date();
 now = now.getTime();

Nun können wir beide Zeitwerte einfach vergleichen und die Differenz bilden. Als Ergebnis erhalten wir die noch verbleibenden Millisekunden bis unser Zieldatum erreicht ist. Diese Angabe wäre für den Betrachter natürlich schwer zu lesen. Lassen Sie uns deshalb das Ergebnis in ein benutzerfreundlicheres Format umwandeln. Damit die Ausgabe zu einem späteren Zeitpunkt korrekt erfolgt, erstellen wir eine Variable „howlong“. Dieser Variable weisen wir zunächst einen leeren String zu, um sicher zu Stellen, dass Sie keinen Wert enthält.

001:
002:
003:
 // Differenz bilden
 var diff = target - now;
 var howlong = "";

Es folgt die angekündigte Umwandlung von Millisekunden in die einzelnen Datumskomponenten von Jahr bis Sekunde.

001:
002:
003:
004:
005:
006:
007:
008:
009:
010:
011:
012:
 // einzelne Datumskomponenten berechnen
 var years = (diff - (diff % 31557600000)) / 31557600000;
 diff = diff - (years * 31557600000);
 var months = (diff - (diff % 2628000000)) / 2628000000;
 diff = diff - (months * 2628000000);
 var days = (diff - (diff % 86400000)) / 86400000;
 diff = diff - (days * 86400000);
 var hours = (diff - (diff % 3600000)) / 3600000;
 diff = diff - (hours * 3600000);
 var minutes = (diff - (diff % 60000)) / 60000;
 diff = diff - (minutes * 60000);
 var seconds = (diff - (diff % 1000)) / 1000;

Die einzelnen Komponenten wurden zunächst in entsprechenden Variablen „abgelegt“. Dies hat den Zweck, dass wir vor dem Zusammensetzen der Komponenten zu einer einzigen Zeichenkette die jeweiligen Werte mit einer Bezeichnung im richtigen Numerus versehen können. Sollte der jeweilige Wert Null sein, so lassen wir diesen komplett weg.

001:
002:
003:
004:
005:
006:
007:
008:
009:
010:
011:
012:
013:
014:
015:
016:
017:
018:
019:
020:
021:
022:
023:
024:
025:
026:
027:
028:
029:
030:
031:
032:
033:
034:
 // Komponenten formatieren
 if(seconds > -1) {
     if (years != 0) {
         howlong = years + " Jahr";
         if (years > 1) howlong = howlong + "e";
     }
  
     if (months != 0) {
         howlong = howlong + " " + months + " Monat";
         if (months > 1) howlong = howlong + "e";
     }
  
     if (days != 0) {
         howlong = howlong + " " + days + " Tag";
         if (days > 1) howlong = howlong + "e";
     }
  
     if (hours != 0) {
         howlong = howlong + " " + hours + " Stunde";
         if (hours > 1) howlong = howlong + "n";
     }
        
     if (minutes != 0) {
         howlong = howlong + " " + minutes + " Minute";
         if (minutes > 1) howlong = howlong + "n";
     }
  
     if (seconds != 0) {
         howlong = howlong + " " + seconds + " Sekunde";
         if (seconds > 1) howlong = howlong + "n";
     }
 } else {
     howlong = "Ziel erreicht!!!";
 }

Vor dem Zusammensetzen der Komponenten überprüfen wir den Sekundenwert in einer If-Bedingung. Ist dieser Wert bereits negativ, so bedeutet dies, dass unser Zieldatum erreicht wurde und eine entsprechende Formatierung unnötig ist. In diesem Fall geben wir im Else-Zweig einen entsprechenden Hinweis aus.
Es fehlt die Ausgabe des berechneten Wertes. Hierfür sind zwei weitere Schritte notwendig. Zunächst übergeben wir einer Variable „countdown“ den berechneten Wert.

001:
002:
 // Countdown ausgeben
 var countdown = howlong;

Auf der Bühne muss anschließend ein dynamisches Textfeld erstellt werden, welches diesen Wert ausgibt. Gehen Sie in die Ebene „Anzeige“ und erstellen Sie mit dem Textwerkzeug durch Aufziehen eines Viereckes ein Textfeld. Im Bedienfeld „Eigenschaften“ müssen Sie auf den Textfeldtyp „Dynamischer Text“ wechseln und unter „Var“ den soeben verwendeten Variablennamen „countdown“ eintragen. Damit der Counter fortlaufend runterzählt, benötigen wir eine weitere ActionScript-Anweisung. Erzeugen Sie mit der Funktionstaste F6 in der Ebene „Aktionen“ im zweiten Bild ein neues Schlüsselbild und rufen Sie anschließend erneut das Aktionen-Fenster auf. Platzieren Sie folgende Anweisung in dem Fenster:

001:
 gotoAndPlay(1);

Mit Hilfe der Anweisung springen wir vom aktuellen zweiten Bild stetig zurück in das erste Bild. Somit zählt unser Countdown-Script fortlaufend runter. Das Script ist somit vollständig. In der Beispieldatei wurde zusätzlich das Zieldatum in einem weiteren Textfeld „date“ ausgegeben. Fügen Sie hierfür folgenden Code unterhalb der Definition des Zieldatums ein:

001:
 var date = tDay + "." + tMonth + "." + tYear + " " + tHour + ":" + tMinute + ":" + tSecond;

Die einzelnen Komponenten werden lediglich zu einer Zeichenkette zusammengefügt und entsprechend der Variable „date” übergeben. Das vollständige Script können Sie ebenso der Beispieldatei entnehmen.

Beispieldatei: Countdown-Script [Countdown-Script _in_Flash_MX.zip]