Rheinwerk Design < openbook > Rheinwerk Design - Know-how für Kreative.
Know-how für Kreative.

Inhaltsverzeichnis
Vorwort
1 Flash für ActionScript
2 ActionScript in Flash
3 Flash Pro für ActionScript
4 Grundlagen der Programmierung
5 Einfache Filmsteuerung
6 Bildschirme und Präsentationen
7 Drucken und das Kontextmenü
8 Textfelder
9 Tasten
10 Datum und Zeit
11 Rechnen
12 Farbe wechseln und Drag
13 Zeichnen und Zufall
14 Von Mäusen und Duplikaten
15 Kollisionstest
16 Sound
17 Video
18 Externe Filme
19 Vorladen und Player erkennen
20 Formulare und UI-Komponenten
21 Komponenten anpassen
22 Formulare versenden
23 Warenkorb
24 Ausblick auf ActionScript 3
Stichwort
Ihre Meinung?

Spacer
 <<   zurück
Einstieg in ActionScript von Christian Wenz, Tobias Hauser, Armin Kappler
Aktuell zu Flash 8
Buch: Einstieg in ActionScript

Einstieg in ActionScript
brosch., mit CD und QuickFinder und Referenz
416 S., 24,90 Euro
Rheinwerk Design
ISBN 978-3-89842-774-6
Pfeil 10 Datum und Zeit
  Pfeil 10.1 Gegenwart, Vergangenheit und Zukunft
  Pfeil 10.2 Zeit und Uhr
  Pfeil 10.3 Countdown


Rheinwerk Computing - Zum Seitenanfang

10.2 Zeit und Uhr  topZur vorigen Überschrift

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.

 <<   zurück
  
  Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: ActionScript 3 – Das Praxisbuch
ActionScript 3
Das Praxisbuch

bestellen
 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: JavaScript






 JavaScript


Zum Rheinwerk-Shop: jQuery






 jQuery


Zum Rheinwerk-Shop: Responsive Webdesign






 Responsive Webdesign


Zum Rheinwerk-Shop: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


Zum Rheinwerk-Shop: Schrödinger lernt HTML5, CSS3 und JavaScript






 Schrödinger lernt
 HTML5, CSS3
 und JavaScript


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2006
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das Openbook denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern