mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Sa 10.12.2016 07:52 Benutzername: Passwort: Auto-Login

Thema: [tutorial] countdown mit flash vom 15.01.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Multimedia -> [tutorial] countdown mit flash
Seite: 1, 2  Weiter
Autor Nachricht
Falk Wussow
Threadersteller

Dabei seit: 13.12.2005
Ort: Wiesbaden
Alter: -
Geschlecht: Männlich
Verfasst So 15.01.2006 00:20
Titel

[tutorial] countdown mit flash

Antworten mit Zitat Zum Seitenanfang

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?"


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 feste zeit her.

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 *zwinker*


1. zeit-auslesen in der countdown.php
Code:
<?
$serverzeit = (time() + 1) * 1000;
$zielzeit = mktime(9,0,0,1,16,2006) * 1000;
?>

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).

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
Code:
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 Lächel

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


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.

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 Lächel


4. das actionscript
Code:
var clientzeit = new Date();
clientzeit = clientzeit.getTime();

if (zeitnahme != "stop") {
   zeitunterschied = clientzeit - serverzeit;
   zeitnahme = "stop";
} else {
   realtime = clientzeit - zeitunterschied;
   if (realtime >= zielzeit) {
      getURL("http://www.irgend-ne-sei.te","_top");
   } 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.

jetzt kommt der uhren-vergleich von server- und clientzeit. 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 angegebene seite aufrufen. wenn nicht, 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 Lächel


edit: code konnte um eine zeile abgespeckt werden Grins


Zuletzt bearbeitet von Falk Wussow am So 15.01.2006 02:45, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
JanG

Dabei seit: 13.10.2002
Ort: Köln/Düsseldorf
Alter: -
Geschlecht: Männlich
Verfasst So 15.01.2006 02:12
Titel

Antworten mit Zitat Zum Seitenanfang

Ich bin auch kein PJ, äh Coderfreund, aber wieso die framerate auf 2bps stellen? Hat das nen Sinn... Würd mich mal interessieren. Ansonsten bleibt mir nur zusagen > Counter mit echtzeit findet man bestimmt auch im Flashforum. Würd ich fast meine Eier für ins Feuer legen... *ha ha*

Peaze!


Zuletzt bearbeitet von JanG am So 15.01.2006 02:12, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Falk Wussow
Threadersteller

Dabei seit: 13.12.2005
Ort: Wiesbaden
Alter: -
Geschlecht: Männlich
Verfasst So 15.01.2006 02:38
Titel

Antworten mit Zitat Zum Seitenanfang

2 bilder pro sekunde macht bei zwei bildern einen durchlauf pro sekunde ... wozu also mit 24 bps die performance für nen dämlichen countdown verbrauchen? Lächel

im flashforum hab ich ne gute stunde gesucht aber nix gefunden ... daher kam ich ja erst ins grübeln. die hatten dort nur eine echtzeit-variante, wo alle 720 frames eine php-seite neu geladen wurde, aus der die servertime ausgelesen wurde. das wollt ich einfach umgehen ... zumal flash ja nicht wirklich 24 bps schafft, nur weil man's angegeben hat ... da kommt der andere countdown schnell mal durcheinander *zwinker* *zwinker*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
JanG

Dabei seit: 13.10.2002
Ort: Köln/Düsseldorf
Alter: -
Geschlecht: Männlich
Verfasst So 15.01.2006 02:42
Titel

Antworten mit Zitat Zum Seitenanfang

Das mit dem Flashforum und "nichts gutes gefunden" ist komisch... Aber ok... Und das mit den 2 bps (die laufen doch die ganze zeit durch, oder ned) ist denk ich nicht grad soviel performancefreundlicher als bei 24bps... Laufen ist laufen, egal wie langsam und wenn da nur 2frames sind, springt der dann echt nur jede halbe Sekunde ins nächste frame (teste ich jetzt mal)... Interssiert mich wirklich.

Bin mal gespannt was PJ oder Tux zum Code schreiben.

Peaze!

Edit: Test erfolgriech... Hast Recht... Der rennt langsamer, aber ob performance spart, wäre ich mir nicht so sicher. Vielleicht wissen da P und T ja auch was zu. Haut mal rein Jungs, ihr wisst das doch bestimmt.


Zuletzt bearbeitet von JanG am So 15.01.2006 02:44, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Falk Wussow
Threadersteller

Dabei seit: 13.12.2005
Ort: Wiesbaden
Alter: -
Geschlecht: Männlich
Verfasst So 15.01.2006 02:47
Titel

Antworten mit Zitat Zum Seitenanfang

wenn die grafikkarte die 24 bps z.b. nicht schafft, läuft das teil nur so schnell, wie er kann. wer jetzt also sagt, daß bei 24 bps IMMER 1 sekunde vergeht, irrt sich *zwinker*

eine 12-bps-animation, die für die gleiche zeit ausgelegt ist, schafft es wahrscheinlich auch in der zeit Lächel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
l'Audiophile

Dabei seit: 16.09.2004
Ort: Berlin
Alter: 35
Geschlecht: Männlich
Verfasst Mo 16.01.2006 09:20
Titel

Antworten mit Zitat Zum Seitenanfang

Nen dickes RESPEKT von mir. Lächel *Thumbs up!*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Falk Wussow
Threadersteller

Dabei seit: 13.12.2005
Ort: Wiesbaden
Alter: -
Geschlecht: Männlich
Verfasst Mi 18.01.2006 06:46
Titel

Antworten mit Zitat Zum Seitenanfang

COUNTDOWN 1.1

hab's noch etwas verfeinert. wenn man während der countdown-anzeige an der rechneruhr datum oder uhrzeit so einstellt, daß der countdown abgelaufen ist, würde die seite weiterspringen. jetzt soll der flash-countdown bei 00:00:00 erneut die countdown.php aufrufen. DIESE entscheidet - anhand der serverzeit -, ob die weiterleitung wirklich ausgeführt werden soll.

nun kann der countdown wirklich nur noch durch einen falschgehenden server verarscht werden Grins

countdown.php
Code:
<?
$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();
}
?>



im actionscript lasse ich die echte zeit schon im ersten durchlauf errechnen. das dynamische textfeld zeigt so lange nichts an, bis die zeit berechnet ist (auf langsamen rechnern verhindert das einen anzeigefehler). außerdem hab ich vergessen, darauf hinzuweisen, die zeichen 0123456789: im dynamischen textfeld einzubetten, weil sie sonst mit standard-schrift gezeigt werden.

actionscript in countdown.fla
Code:
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;
   }
}


eben fiel mir übrigens auf, daß ich sowas wahrscheinlich nie wieder brauchen werde Grins


Zuletzt bearbeitet von Falk Wussow am Mi 18.01.2006 06:47, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
JanG

Dabei seit: 13.10.2002
Ort: Köln/Düsseldorf
Alter: -
Geschlecht: Männlich
Verfasst Mi 18.01.2006 16:20
Titel

Antworten mit Zitat Zum Seitenanfang

Wenn du es nicht brauchst, hier brauchen es vielleicht der ein oder andere... Kannst es ja auch mal im FF posten, da hab ich nämlich auch nur teile gefunden (wie du selber wahrscheinlich auch) *g*...

Peaze!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen [flash] countdown für bestimmtes datum
Countdown für kleinen Flash-Shooter
Ablaufdatum für Countdown aus xml Datei lesen[Flash]
wie baue ich dieses flash tutorial ein???
Director und Flash Tutorial
Tutorial Flash Slideshow
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Multimedia


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.