Countdown-Script in Flash MX
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:
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.
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.
Es folgt die angekündigte Umwandlung von Millisekunden in die einzelnen Datumskomponenten von Jahr bis Sekunde.
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.
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.
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:
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:
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]
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]