10.2 Zeit und Uhr 

Das Paradebeispiel für die Zeit ist eine analoge Uhr. Sie lässt sich mit Flash so einfach realisieren, wie das mit keiner anderen Webtechnologie möglich ist. Im Fundus von Flash MX findet sich ein mitgeliefertes Beispiel einer aus Vektoren bestehenden Uhr.

Wir lassen uns davon inspirieren, gestalten aber eine Uhr, die auf einem Foto basiert. Die Ausgangsdatei ist uhr.fla auf der CD-ROM. Das Foto mit der Uhr liegt im Hintergrund. Die benötigten Stunden-, Minuten- und Sekundenzeiger sind Vektoren und einzelne MovieClips, sie liegen auf der Ebene Zeiger. Jeder Zeiger besitzt einen zugehörigen Schatten. Auch diese drei Schatten sind einzelne MovieClips.

Ausgangsposition sind also sechs MovieClips; die gedreht werden müssen. ActionScript macht es Ihnen hier einfach, denn ein MovieClip-Objekt besitzt die Eigenschaft _rotation. Dieser Eigenschaft weisen Sie den Wert der Drehung in Grad zu (360° sind eine volle Umdrehung).

Besonders wichtig ist in unserem Fall der Registrierungspunkt der sechs MovieClips. Er wird jeweils so gewählt, dass er das Zentrum der Drehung darstellt, er liegt also in der Mitte der Uhr.

Abbildung 10.5 Der Registrierungspunkt des MovieClips ist bei einer Uhr der Drehpunkt für den Zeiger.

Schritt für Schritt: Uhr mit ActionScript

Wir zeigen Ihnen nun das ActionScript zur Uhr. Der Code landet im ersten Schlüsselbild des Hauptfilms, da kein besonderes Ereignis benötigt wird.

Halten Sie den Film mit stop() an:

stop();

Anschließend rufen Sie die Funktion aktualisieren() in regelmäßigen Abständen auf, die die Zeiger auf die aktuelle Uhrzeit dreht:

aktualisieren();
setInterval(aktualisieren, 100);

Die schon aus Kapitel 8, »Textfelder«, bekannte Funktion setInterval(Funktion, Interval) dient dazu, die Uhrzeit alle 100 Millisekunden (1/10 Sekunde) zu aktualisieren, was gleichzeitig die Bewegung der Zeiger bewirkt.

Die Funktion aktualisieren() sollten Sie vor dem Intervall einmal aufrufen, da sie sonst erst nach Ablauf der ersten Intervallzeit gestartet wird.

Übrigens, die Länge des Intervalls bestimmt, wie exakt der Sekundenzeiger läuft. Bei zu großem Abstand hinkt er hinterher, bei zu wenig Abstand kostet der dauernde Aufruf der Funktion aktualisieren() zu viel Performance. So viel zur Theorie; sehen Sie sich nun die Funktion selbst an:

Zuerst instanziieren Sie ein Date-Objekt und übergeben dann die Stunden, Minuten und Sekunden an Variablen:

function aktualisieren() {
   var aktuell_date:Date = new Date();
   var stunden_num:Number = aktuell_date.getHours();
   var minuten_num:Number = aktuell_date.getMinutes();
   var sekunden_num:Number = aktuell_date.getSeconds();

Die Stunden, Minuten und Sekunden können Sie nun über die Variablen flexibel im Code einsetzen.

Im nächsten Schritt geben Sie den Drehwinkel für den Stundenzeiger und seinen Schatten an:

   stundenZeiger_mc._rotation = stunden_num * 30 + (minuten_num / 2);
   stundenZeigerSchatten_mc._rotation = stunden_num * 30 + (minuten_num / 2);

Der Winkel berechnet sich aus den Stunden multipliziert mit 30, was eine Gradzahl zwischen 0 und 360 ergibt.

Anschließend addieren Sie die Minuten geteilt durch 2. Das berechnet sich so: Eine Stunde ist ein Zwölftel von 360°, das heißt 30°.

Die Stunde hat aber 60 Minuten, deswegen repräsentiert jede Minute, die der Stundenzeiger überstreicht, ein halbes Grad (20 Minuten wären beispielsweise 10 Grad).

Der Minutenzeiger und sein Schatten erhalten ebenfalls ihren Drehwinkel:

   minutenZeiger_mc._rotation = minuten_num * 6 + (sekunden_num / 10);
   minutenZeigerSchatten_mc._rotation = minuten_num 
* 6 + (sekunden_num / 10);

Die Drehung berechnet sich aus den Minuten mal 6, da eine Minute 6° (= 360° geteilt durch 60) beim Minutenzeiger überspannt. Anschließend addieren Sie die Sekunden, geteilt durch 10.

Dies errechnet sich so: Eine Minute ist ein Sechzigstel von 360°, also 6°. Eine Sekunde ist ein Sechzigstel einer Minute, also 0,1°; daraus erklärt sich das Teilen durch 10.

Zum Schluss fügen Sie den Code für den Sekundenzeiger hinzu:

   sekundenZeiger_mc._rotation = sekunden_num * 6;
   sekundenZeigerSchatten_mc._rotation = sekunden_num 
* 6;
}

Hier ist die Logik einfach: Eine Sekunde ist ein Sechzigstel von 360°, also 6°. Millisekunden bleiben außen vor, da der Sekundenzeiger nur von Sekunde zu Sekunde ticken soll.

Abbildung 10.6 Wer hat an der Uhr gedreht, ist es wirklich schon so spät?

Die fertige Datei finden Sie auf der CD-ROM zum Buch unter dem Namen uhr_AS2.fla bzw. uhr_AS1.fla. Sie können unseren Vorschlag natürlich beliebig erweitern. Wie wäre es beispielsweise, wenn sich der Himmel im Hintergrund ändert, sobald es Nacht wird?

Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.