[tutorial] 100% flash-countdown

[cainam]

ich kam heute auf die grandiose idee, den start meiner neuen website mit einem countdown anzukündigen - da es eine flash-seite wird, wollte ich das natürlich auch in flash realisieren.

also stellte ich mich selbst vor die allseits beliebte frage "wie bau ich in flash einen funktionierenden countdown, der 100% korrekt läuft?"


vorüberlegung
flash kann nur die zeit vom computer des betrachters auslesen. bei einem australier wäre also der countdown 9 stunden vor einem deutschen beendet und in amerika liefe der countdown dann noch weitere 9 stunden. also muß eine zeit her, die auch dann noch stimmt, wenn der betrachter seine uhr falsch gestellt hat.

20 minuten kopfzerbrechen und eine tasse heißen zitronengranulat-tee später kam ich drauf ... php liefert mir die zeit des servers, auf dem die website liegt. also lese ich diese aus und übergebe sie per flashvars an flash.

die zwei wichtigen dateien habe ich countdown.php und countdown.swf genannt. wie man eine swf-datei in webseiten einbindet, erkläre ich jetzt nicht - das wird oft genug beschrieben


1. zeit-auslesen in der countdown.php

<? 
$serverzeit = (time() + 1) * 1000; 
$zielzeit = mktime(9,0,0,1,16,2006) * 1000; 

if ($serverzeit >= $zielzeit) { 
   header("location: http://www.irgend-ne-sei.te/sprungziel"); 
   exit(); 
} 
?>

serverzeit ist die zeit des servers. ich habe hier noch das laden der flash-datei von etwa 1 sekunde berücksichtigt - kann man aber auch weglassen. zielzeit ist das ende des countdowns (hier: 09:00.00 am 16.01.2006).

"http://www.irgend-ne-sei.te/sprungziel" ist die seite, wohin der countdown springen soll, wenn er abgelaufen ist...

die unix-timestamps rechne ich jeweils mal 1000, weil php in sekunden, flash aber mit millisekunden rechnet. so umgehe ich die formelbastelei in flash...


2. variablen per flashvars übergeben

zeitnahme=start&serverzeit=<? echo $serverzeit; ?>&zielzeit=<? echo $zielzeit; ?>

wie das mit den flashvars genau funktioniert, steht in der flash-hilfe. wichtig ist, daß man die flashvars im object- UND im embed-tag einbindet ... sonst gibt es probleme mit diversen browsern. außerdem sollte loop auf true stehen, damit der countdown auch brav weiter zählt.

den sinn der variablen zeitnahme erkläre ich im actionscript-teil.


3. neue flash-datei anlegen
in flash wird eine neue datei angelegt. die gestaltung ist ganz euch überlassen. da ich lediglich den countdown haben wollte, beschränke ich mich auf die einfachste variante.

die framerate auf 2 bilder pro sekunde stellen und auf der bühne ein dynamisches textfeld einzeichnen. diesem textfeld wird die variable countdown zugewiesen. unbedingt die zeichen 0123456789: im dynamischen textfeld einbetten, weil sie sonst mit standard-schrift gezeigt werden.

in der zeitleiste auf der einzigen ebene mit rechts ins zweite bild klicken und im kontextmenü "bild einfügen" wählen, damit zwei bilder belegt sind. nun auf das erste klicken und F9 fürs actionscript drücken. da kommt jetzt die folgende lustige programmierarbeit rein


4. das actionscript

var clientzeit = new Date(); 
clientzeit = clientzeit.getTime(); 

if (zeitnahme != "stop") { 
   countdown = ""; 
   zeitnahme = "stop"; 
   zeitunterschied = clientzeit - serverzeit; 
} else { 
   realtime = clientzeit - zeitunterschied; 
   if (realtime >= zielzeit) { 
      countdown = "00:00:00" 
      getURL("countdown.php","_top"); 
      stop(); 
   } else { 
      restzeit = Math.abs(zielzeit - realtime); 

      countdown_h = Math.floor(restzeit / 3600000); 
      countdown_m = Math.floor((restzeit / 60000) - (countdown_h * 60)); 
      countdown_s = Math.floor((restzeit / 1000) - (countdown_h * 3600) - (countdown_m * 60)); 

      if (countdown_h < 10) countdown_h = "0" + countdown_h; 
      if (countdown_m < 10) countdown_m = "0" + countdown_m; 
      if (countdown_s < 10) countdown_s = "0" + countdown_s; 

      countdown = countdown_h + ":" + countdown_m + ":" + countdown_s; 
   } 
}

als erstes wird der variable clientzeit der typ date zugewiesen (sonst schnallt flash nicht, was man von ihm will). dann wird die uhrzeit auf dem rechner des betrachters abgefragt und in der variable clientzeit abgelegt.

in der ersten if-schleife setze ich countdown (der text des vorhin angelegten dynamischen textfeldes) erstmal als leere zeichenkette. nun kommt der vergleich serveruhr-rechneruhr. hier taucht auch die ominöse variable zeitnahme auf. da die serverzeit nur einmal vom php-script ausgegeben wurde, die clientzeit sich aber immer ändert, darf man den unterschied nur ein einziges mal bestimmen. aus den flashvars kam ja die zeitnahme mit dem wert "start" und hier wird sie in "stop" umgeschrieben. somit wird der uhrenvergleich bei den nächsten durchläufen übergangen.

realtime ist die echte uhrzeit. sollte die uhr des betrachters tatsächlich anders gehen als die server-uhr, wird hier immer der versatz mit eingerechnet. wenn die zielzeit kleiner ist als die echte zeit (also wenn der countdown bereits abgelaufen ist), soll der browser die countdown.php neu aufrufen.

warum?

ganz einfach: wenn man während der countdown-anzeige an der rechneruhr datum oder uhrzeit so vorstellt, daß der countdown abgelaufen ist, würde die seite weiterspringen. der flash-countdown soll bei 00:00:00 erneut die countdown.php aufrufen. DIESE entscheidet - anhand der serverzeit -, ob die weiterleitung wirklich ausgeführt werden soll. natürlich sollte die serverzeit stimmen

wenn der countdown noch nicht abgelaufen ist, wird die restzeit berechnet und in eine positive zahl verwandelt.

dann errechne ich aus der restzeit die restlichen stunden, minuten und sekunden. wenn die zahlen kleiner als 10 sind, füge ich noch eine führende null an und fasse die zahlen in der variable countdown zusammen. der inhalt dieser variable wird im dynamischen textfeld angezeigt.

da ich nicht der beste programmierer bin, gibt's hier sicherlich ein paar schönheitsfehler auszubügeln ... ich lass mich gerne belehren.

[_level0]

http://www.uni-koeln.de/bin2/zeit1

mit dem xml object kannst du hier die aktuelle atomzeit abfragen genaue gehts nicht

nicht falsch vertsehen aber als ich den titel 100% flashcountdown las dachte ich er würde nur auf flash basieren.

und mit

getTimezoneOffset

müsstest du dann auch sommerzeit winterzeit zund zeitverschiebung anpassen können

[yoC]

Wo muss ich diese Zeile reinschreiben???
Am Ende der countdown.php???

zeitnahme=start&serverzeit=<? echo $serverzeit; ?>&zielzeit=<? echo $zielzeit; ?>

[yoC]

kann mir jemand helfen?
oder hat vielleicht dieses oder ein ähnliches Skript fertig und kann das hochladen? Es müsste auf jeden Fall mit PHP realisiert sein.

Oder ansonsten müsste ich nur wissen, wo ich diese eine Zeile hinschreiben muss

[yoC]

*hochschieb*
Wo muss ich diese Zeile hinschreiben:

zeitnahme=start&serverzeit=<? echo $serverzeit; ?>&zielzeit=<? echo $zielzeit; ?>

Bitte um Hilfe

[bamboocha]

Das kommt in die Datei, in der du das Flash einbindest! Und wenn du mal die Suche nach "FlashVars" gequält hättest (was man auf Grund der Überschrift zu Punkt 2 hätte machen können...), hättest du genügend Threads gefunden, bei denen per PHP FlashVars übergeben werden.

[yoC]

Ok, das mit den Flashvars hab ich jetzt gecheckt.
Aber irgendwas klappt nicht, weil er nie runterzählt, sondern immer eine weiße Seite (die countdown.php) abzeigt.

Siehe: http://www.virreal.net/spiele/countdown.html

Wäre jemand so nett und könnte mal schauen was ich falsch gemacht habe. Datei hängt dran.

Wär wirklich furchtbar nett.