Flash-Countdown

Im Folgenden wird ein kleiner ActionScript-Code (AS2) für einen Flash-Countdown vorgestellt. Anhand der Systemzeit und eines Enddatums wird die verbleibende Zeit errechnet. Um die Anwendung ein wenig interaktiv zu machen, kann man mittels eines Kalenders das Enddatum verändern.

Enddatum des Countdowns bestimmen

Zuerst legt man ein Enddatum fest. Hierzu nutzt man ein Objekt der Klasse Date. Im Beispiel ist das Datum der 3. September 2008, da die Monate bei 0 (=Januar) beginnen.

[as]// ::::: COUNTDOWN DATE :::::::::::::::::::::::::::::::::::
var endDate:Date = new Date(2008, 8, 3, 0, 0, 0);[/as]

Countdown ständig aktualisieren

Anschließend sorgt man mit setInterval dafür, dass die Funktion updateCountdown alle 200 ms ausgeführt wird. Somit wird der Countdown ständig aktualisiert.

[as] var interval:Number;
interval = setInterval(this, „updateCountdown“, 200);
[/as]

DataChooser

In der Funktion updateCountdown wird im Beispiel zuerst der Wert des Kalenders (=DataChooser) als neues Enddatum des Countdowns gesetzt. Dies ist natürlich nur zu Demonstrationszwecken. Hat man ein fixes Enddatum, erübrigt sich dieser Abschnitt.

[as]
// for DateChooser (delete this for use without DateChooser )
if (myDateChooser.selectedDate != undefined) {
endDate = myDateChooser.selectedDate;
}
[/as]

Aktuelle Systemzeit auslesen

Nun speichert man die aktuelle Systemzeit ab:
[as]
// get system time
var now:Date = new Date();
[/as]

Zeitdifferenz bilden

Jetzt gilt es, das aktuelle Datum vom Zieldatum abzuziehen, um die Zeitdifferenz zu erhalten. Dieser Wert mit der verbleibenden Zeit ist in Millisekunden!

[as]
// time between now and enddate
var deltaMilliS:Number = 0;
deltaMilliS = endDate.getTime() – now.getTime();
[/as]

Zeitzonen berücksichtigen

Nun sollte berücksichtigt werden, dass die beiden Daten in unterschiedlichen Zeitzonen liegen könnten (Winter- bzw. Sommerzeit in Deutschland). Diese kann man getrost herausrechnen, da sonst der Eindruck entsteht, der Countdown liegt eine Stunde daneben.

[as]
// Timezone offset?
var offsetMilliS:Number = 0;
offsetMilliS = (endDate.getTimezoneOffset() – now.getTimezoneOffset())* 60 * 1000;
deltaMilliS -= offsetMilliS;
[/as]

Millisekunden umrechnen

Abschließend errechnet man aus dem Wert in Millisekunden die einzelnen Bestandteile: Tage, Stunden, Minuten, Sekunden.

[as]
// determine seconds, minutes, hours and dates
var diffSecs:Number = Math.floor (deltaMilliS / 1000); // Seconds left
var diffMins:Number = Math.floor (deltaMilliS / ( 1000 * 60)); // Minutes left
var diffHours:Number = Math.floor (deltaMilliS / ( 1000 * 60 * 60)); // Hours left
var diffDays:Number = Math.floor (deltaMilliS / ( 1000 * 60 * 60 * 24)); // Days left

// mod
diffSecs = diffSecs % 60;
diffMins = diffMins % 60;
diffHours = diffHours % 24;
[/as]

Beispiel anschauen:

[kml_flashembed movie=“http://www.video-flash.de/wp-content/uploads/2007/07/countdown.swf“ height=“300″ width=“600″ /]

[ad]

Kompletter Beispielcode des Flash-Countdowns

Der komplette am Stück lautet folgendermaßen:

[as]

// ::::: COUNTDOWN DATE :::::::::::::::::::::::::::::::::::
var endDate:Date = new Date(2008, 8, 3, 0, 0, 0);

// ::::::::::::::::::::::::::::::::::::::::::::::::::::::::
var interval:Number;
interval = setInterval(this, „updateCountdown“, 200);

// init Countdown
updateCountdown();

// ::::: UPDATE COUNTDOWN :::::::::::::::::::::::::::::::::::
function updateCountdown() {

// for DateChooser (delete this for use without DateChooser )
if (myDateChooser.selectedDate != undefined) {
endDate = myDateChooser.selectedDate;
}

// get system time
var now:Date = new Date();

// time between now and enddate
var deltaMilliS:Number = 0;
deltaMilliS = endDate.getTime() – now.getTime();

// Timezone offset?
var offsetMilliS:Number = 0;
offsetMilliS = (endDate.getTimezoneOffset() – now.getTimezoneOffset())* 60 * 1000;
deltaMilliS -= offsetMilliS;

// determine seconds, minutes, hours and dates
var diffSecs:Number = Math.floor (deltaMilliS / 1000); // Seconds left
var diffMins:Number = Math.floor (deltaMilliS / ( 1000 * 60)); // Minutes left
var diffHours:Number = Math.floor (deltaMilliS / ( 1000 * 60 * 60)); // Hours left
var diffDays:Number = Math.floor (deltaMilliS / ( 1000 * 60 * 60 * 24)); // Days left

// mod
diffSecs = diffSecs % 60;
diffMins = diffMins % 60;
diffHours = diffHours % 24;

// update text
myTxt.text = „Verbleibende Zeit: \n“ + diffDays + “ Tage \n“ + diffHours + “ Stunden \n“+ diffMins + “ Minuten \n“ + diffSecs + “ Sekunden“;
myEndDateTxt.text = „Enddatum: \n“ + endDate;
}

[/as]