Realisierung einer Digitaluhr
Eine besondere Herausforderung für viele Webmaster stellt das Arbeiten mit Datums- und Zeitwerten dar. Die Ausgabe der aktuellen Zeit macht den meisten Webmastern noch keine Probleme. Bei der grafischen Ausgabe werden jedoch sehr häufig Fehler gemacht, die zu einer ungewollten Darstellung oder zu viel zu großen Dateien führen. Erlernen Sie nachfolgend den grundlegenden Umgang mit dem Datumsobjekt von Flash. Durch das Erstellen einer Digitaluhr erfahren Sie zudem, wie Sie aus dem Zeitwert eine grafische Ausgabe erzeugen.
Erstellen Sie ein neues Dokument. Geben Sie der bestehenden Ebene den Namen „display“. Wir wollen uns zunächst mit der Ausgabe eines Zeitwertes in einem Textfeld begnügen. Erstellen Sie daher ein dynamisches Textfeld. Damit wir das Feld zur Ausgabe nutzen können, müssen Sie im Bedienfeld „Eigenschaften“ unter „Var“ einen Variablennamen festlegen. Geben Sie dem Textfeld den Variablennamen „displayTime“. Erstellen Sie anschließend eine neue Ebene und benennen Sie diese mit „action“. Zeichnen Sie in der neuen Ebene ein beliebiges Objekt - wie einen Kreis oder ein Rechteck - außerhalb des sichtbaren Bereiches ein. Wandeln Sie das erzeugte Objekt sofort in ein MovieClip-Symbol um.
Markieren Sie nun die Instanz des Symbols auf der Bühne und rufen Sie über die Funktionstaste F9 das Aktionen-Fenster auf. Zur Ausgabe eines Zeitwertes in Stunden, Minuten und Sekunden benötigen wir die folgenden Zeilen ActionScript:
Das Ereignis „onClipEvent(enterFrame)“ garantiert uns eine stetige Ausführung der Anweisungen innerhalb der geschweiften Blockklammern. Innerhalb der Klammern erzeugen wir zunächst ein neues Datumsobjekt und weisen dies der Variable „date“ zu. Über die Anweisung „getHours()“ gelangen wir an den Stundenwert. Den Wert speichern wir wiederum in eine separate Variable „hour“ ab. Zur Verbesserung der Ausgabe stellen wir dem Stundenwert eine Null voraus, wenn der Stundenwert kleiner als 10 ist. Dabei wandeln wir den ursprünglich als Nummer erfassten Zeitwert mittels „String“ in eine Zeichenkette um. Dies ist ein notwendiger Schritt, da Flash die führende Null sonst sofort wieder entfernt.
Mit demselben Verfahren ermitteln wir die Minuten und Sekunden. Die Ausgabe erfolgt in der letzten Zeile innerhalb der Klammern. Wir weisen der Variable „displayTime“ die ermittelten Zeitwerte zu. Da wir diesen Variablennamen unserem Textfeld zugewiesen haben, erzeugen wir eine direkte Ausgabe des Zeitwertes im Textfeld. Mit Hilfe einer passenden Schriftart können Sie der Ausgabe bereits einen digitalen Look verschaffen. Allerdings sollten Sie beachten, dass der Betrachter die gleiche Schriftart benötigt, damit bei ihm die Ausgabe genauso aussieht. Diese Problematik umgehen wir durch die Erstellung von Grafiken.
Löschen Sie die letzte Zeile des ActionScripts. Die grafische Ausgabe erfolgt auf einem anderen Weg. Zu einem späteren Zeitpunkt wollen wir auf die MovieClip-Instanz einschließlich des ActionScripts zugreifen. Geben Sie der Instanz daher über das Bedienfeld „Eigenschaften“ den Instanznamen „action“. Wechseln Sie in die Ebene „display“ und entfernen Sie hier das Textfeld. Zeichnen Sie nun eine Linie, wie die folgende (hier 800-fach vergrößert):
Wandeln Sie die Linie sofort in ein Grafik-Symbol um. Ziehen Sie anschließend sechs weitere Instanzen des Grafik-Symbols auf die Bühne. Ordnen Sie diese in einer typisch digitalen Darstellung an. Markieren Sie anschließend alle Linien und konvertieren Sie diese in ein MovieClip-Symbol. Im Bearbeitungsmodus des Symbols erzeugen Sie auf der bestehenden Ebene neun weitere Schlüsselbilder. Gehen Sie nun in das erste Bild und löschen Sie die entsprechende Linie um die Darstellung der Zahl Null zu erhalten. Gehen Sie anschließend in das zweite Bild und löschen Sie hier alle Linien um die Darstellung einer digitalen Eins zu erlangen. Fahren Sie mit dem Schema bis hin zur Darstellung der Neun im zehnten Bild der Zeitleiste fort. Benennen Sie die bestehende Ebene mit „display“ und erzeugen Sie daraufhin eine neue Ebene „action“. Gehen Sie in das erste Bild von „action“ und rufen Sie von hier aus das Aktionen-Fenster auf. Damit das MovieClip-Symbol nicht selbstständig alle Ziffern anzeigt, platzieren wir eine Stopp-Anweisung:
Die fertige Zeitleiste des MovieClip-Symbols sollte bei Ihnen wie folgt aussehen:
Wechseln Sie zurück in die Ansicht der Hauptzeitleiste. Platzieren Sie hier das MovieClip-Symbol sechs Mal auf der Bühne. Dabei stehen jeweils zwei Instanzen für die Stunden, Minuten und Sekunden bereit. Benennen Sie die zwei Instanzen für die Stunden mit „hour1“ für die höherwertige und „hour2“ für die niederwertige Ziffer. Geben Sie den übrigen Instanzen entsprechende Instanznamen. Markieren Sie nun die Instanz für die Darstellung der höherwertigen Ziffer der Stunden. Rufen Sie erneut das Aktionen-Fenster auf und platzieren Sie hier folgende Anweisungen:
Wir nutzen erneut das Ereignis „onClipEvent(enterFrame)“ für eine stetige Ausführung der Anweisungen aus. Wie bereits erwähnt wurde, interessieren wir uns für die höherwertige Ziffer des aktuellen Stundenwertes. Hierfür nutzen wir den Stundenwert der Variable „hour“ in der Instanz „action“. Mittels „substr(0,1) extrahieren wir das erste Zeichen der Zeichenkette und wandeln es anschließend durch „Number()“ in eine Zahl um. Die Anweisung „gotoAndStop“ führt innerhalb der Zeitleiste einen Sprung an die übergebene Bildnummer durch. Damit wir nun stets an das richtige Bild springen, addieren wir zu dem erhaltenen Wert noch eine Eins dazu. Die Ziffer Null befindet sich schließlich im ersten Bild der Zeitleiste und nicht im nullten Bild. Die Ziffer Eins liegt entsprechend im zweiten Bild der Zeitleiste.
Natürlich interessieren wir uns ebenso für die niederwertige Ziffer des Stundenwertes. Die dafür vorgesehene Instanz „hour2“ erhält hierfür folgende Anweisungen:
Wie Sie sehen, erfolgt das Ermitteln des Wertes auf eine sehr ähnliche Weise. Wir extrahieren dieses Mal lediglich das zweite Zeichen der Zeichenkette „hour“.
Passen Sie die Instanzen der Minuten- und Sekundenwerte entsprechend dem vorgestellten Schema an. Die beigefügte Beispieldatei enthält das erläuterte Script.
Beispieldatei: Zeitausgabe [Realisierung_einer_Digitaluhr1.zip]
Beispieldatei: grafische Digitaluhr [Realisierung_einer_Digitaluhr2.zip]
Erstellen Sie ein neues Dokument. Geben Sie der bestehenden Ebene den Namen „display“. Wir wollen uns zunächst mit der Ausgabe eines Zeitwertes in einem Textfeld begnügen. Erstellen Sie daher ein dynamisches Textfeld. Damit wir das Feld zur Ausgabe nutzen können, müssen Sie im Bedienfeld „Eigenschaften“ unter „Var“ einen Variablennamen festlegen. Geben Sie dem Textfeld den Variablennamen „displayTime“. Erstellen Sie anschließend eine neue Ebene und benennen Sie diese mit „action“. Zeichnen Sie in der neuen Ebene ein beliebiges Objekt - wie einen Kreis oder ein Rechteck - außerhalb des sichtbaren Bereiches ein. Wandeln Sie das erzeugte Objekt sofort in ein MovieClip-Symbol um.
Markieren Sie nun die Instanz des Symbols auf der Bühne und rufen Sie über die Funktionstaste F9 das Aktionen-Fenster auf. Zur Ausgabe eines Zeitwertes in Stunden, Minuten und Sekunden benötigen wir die folgenden Zeilen ActionScript:
001:002:003:004:005:006:007:008:009:010:011:
onClipEvent(enterFrame) { date = new Date(); hour = date.getHours(); hour = (hour < 10) ? "0" + String(hour) : String(hour); min = date.getMinutes(); min = (min < 10) ? "0" + String(min) : String(min); sec = date.getSeconds(); sec = (sec < 10) ? "0" + String(sec) : String(sec); _root.displayTime = hour + ":" + min + ":" + sec; }
Das Ereignis „onClipEvent(enterFrame)“ garantiert uns eine stetige Ausführung der Anweisungen innerhalb der geschweiften Blockklammern. Innerhalb der Klammern erzeugen wir zunächst ein neues Datumsobjekt und weisen dies der Variable „date“ zu. Über die Anweisung „getHours()“ gelangen wir an den Stundenwert. Den Wert speichern wir wiederum in eine separate Variable „hour“ ab. Zur Verbesserung der Ausgabe stellen wir dem Stundenwert eine Null voraus, wenn der Stundenwert kleiner als 10 ist. Dabei wandeln wir den ursprünglich als Nummer erfassten Zeitwert mittels „String“ in eine Zeichenkette um. Dies ist ein notwendiger Schritt, da Flash die führende Null sonst sofort wieder entfernt.
Mit demselben Verfahren ermitteln wir die Minuten und Sekunden. Die Ausgabe erfolgt in der letzten Zeile innerhalb der Klammern. Wir weisen der Variable „displayTime“ die ermittelten Zeitwerte zu. Da wir diesen Variablennamen unserem Textfeld zugewiesen haben, erzeugen wir eine direkte Ausgabe des Zeitwertes im Textfeld. Mit Hilfe einer passenden Schriftart können Sie der Ausgabe bereits einen digitalen Look verschaffen. Allerdings sollten Sie beachten, dass der Betrachter die gleiche Schriftart benötigt, damit bei ihm die Ausgabe genauso aussieht. Diese Problematik umgehen wir durch die Erstellung von Grafiken.
Löschen Sie die letzte Zeile des ActionScripts. Die grafische Ausgabe erfolgt auf einem anderen Weg. Zu einem späteren Zeitpunkt wollen wir auf die MovieClip-Instanz einschließlich des ActionScripts zugreifen. Geben Sie der Instanz daher über das Bedienfeld „Eigenschaften“ den Instanznamen „action“. Wechseln Sie in die Ebene „display“ und entfernen Sie hier das Textfeld. Zeichnen Sie nun eine Linie, wie die folgende (hier 800-fach vergrößert):
Wandeln Sie die Linie sofort in ein Grafik-Symbol um. Ziehen Sie anschließend sechs weitere Instanzen des Grafik-Symbols auf die Bühne. Ordnen Sie diese in einer typisch digitalen Darstellung an. Markieren Sie anschließend alle Linien und konvertieren Sie diese in ein MovieClip-Symbol. Im Bearbeitungsmodus des Symbols erzeugen Sie auf der bestehenden Ebene neun weitere Schlüsselbilder. Gehen Sie nun in das erste Bild und löschen Sie die entsprechende Linie um die Darstellung der Zahl Null zu erhalten. Gehen Sie anschließend in das zweite Bild und löschen Sie hier alle Linien um die Darstellung einer digitalen Eins zu erlangen. Fahren Sie mit dem Schema bis hin zur Darstellung der Neun im zehnten Bild der Zeitleiste fort. Benennen Sie die bestehende Ebene mit „display“ und erzeugen Sie daraufhin eine neue Ebene „action“. Gehen Sie in das erste Bild von „action“ und rufen Sie von hier aus das Aktionen-Fenster auf. Damit das MovieClip-Symbol nicht selbstständig alle Ziffern anzeigt, platzieren wir eine Stopp-Anweisung:
001:
stop();
Die fertige Zeitleiste des MovieClip-Symbols sollte bei Ihnen wie folgt aussehen:
Wechseln Sie zurück in die Ansicht der Hauptzeitleiste. Platzieren Sie hier das MovieClip-Symbol sechs Mal auf der Bühne. Dabei stehen jeweils zwei Instanzen für die Stunden, Minuten und Sekunden bereit. Benennen Sie die zwei Instanzen für die Stunden mit „hour1“ für die höherwertige und „hour2“ für die niederwertige Ziffer. Geben Sie den übrigen Instanzen entsprechende Instanznamen. Markieren Sie nun die Instanz für die Darstellung der höherwertigen Ziffer der Stunden. Rufen Sie erneut das Aktionen-Fenster auf und platzieren Sie hier folgende Anweisungen:
001:002:003:
onClipEvent (enterFrame) { gotoAndStop (Number(_parent.action.hour.substr(0,1)) + 1); }
Wir nutzen erneut das Ereignis „onClipEvent(enterFrame)“ für eine stetige Ausführung der Anweisungen aus. Wie bereits erwähnt wurde, interessieren wir uns für die höherwertige Ziffer des aktuellen Stundenwertes. Hierfür nutzen wir den Stundenwert der Variable „hour“ in der Instanz „action“. Mittels „substr(0,1) extrahieren wir das erste Zeichen der Zeichenkette und wandeln es anschließend durch „Number()“ in eine Zahl um. Die Anweisung „gotoAndStop“ führt innerhalb der Zeitleiste einen Sprung an die übergebene Bildnummer durch. Damit wir nun stets an das richtige Bild springen, addieren wir zu dem erhaltenen Wert noch eine Eins dazu. Die Ziffer Null befindet sich schließlich im ersten Bild der Zeitleiste und nicht im nullten Bild. Die Ziffer Eins liegt entsprechend im zweiten Bild der Zeitleiste.
Natürlich interessieren wir uns ebenso für die niederwertige Ziffer des Stundenwertes. Die dafür vorgesehene Instanz „hour2“ erhält hierfür folgende Anweisungen:
001:002:003:
onClipEvent (enterFrame) { gotoAndStop (Number(_parent.action.hour.substr(1,1)) + 1); }
Wie Sie sehen, erfolgt das Ermitteln des Wertes auf eine sehr ähnliche Weise. Wir extrahieren dieses Mal lediglich das zweite Zeichen der Zeichenkette „hour“.
Passen Sie die Instanzen der Minuten- und Sekundenwerte entsprechend dem vorgestellten Schema an. Die beigefügte Beispieldatei enthält das erläuterte Script.
Beispieldatei: Zeitausgabe [Realisierung_einer_Digitaluhr1.zip]
Beispieldatei: grafische Digitaluhr [Realisierung_einer_Digitaluhr2.zip]
