Analog Uhr in Flash

Eine Analog Uhr in Flash ist eine Sache von ein paar Zeilen Code. Wie immer dauert es fast länger das Ding gut aussehen zu lassen, als es funktionsfähig zu machen. Hier eine Schritt für Schritt Anleitung.

Als erstes müsst ihr euch ein Ziffernblatt gestalten... Macht euch in Photoshop ein neues quadratisches Bild auf und zeichnet einen Kreis. Dazu nehmt ihr die Auswahl-Ellipse und haltet beim Ziehen die Shift-Taste gedrückt. Während ihr zieht und Shift gedrückt haltet, könnt ihr auf Space drücken und den Kreis verschieben, falls ihr an der falschen Stelle angesetzt habt. Erstellt eine neue Ebene und füllt den Kreis mit irgendeiner dezenten Farbe. Achtet darauf, daß der Kreis mittig im Bild platziert ist.

Blendet die Lineale ein (Ansicht -> Lineale) und zieht euch eine horizontale und eine vertikale Hilfslinie genau in die Mitte des Bildes. Das geht indem ihr auf das Lineal klickt und die Maus runter ins Bild zieht... Wiederum könnt ihr dabei Shift gedrückt halten und die Hilfslinie wird in der Mitte des Bildes rastern.


Jetzt nehmt ihr euch das Linienzeichner-Werkzeug und malt entlang der Hilfslinien einen Pfad quer über das ganze Bild.... Der Pfad wird sich an den Hilfslinien orientieren und sollte dadurch perfekt gerade werden. Gebt den Pfaden eine deutliche Farbe und schiebt die Hilfslinien dann weg, so daß ihr die Pfade gut sehen könnt.


Ihr habt jetzt schon die vier Stellen für 12 Uhr, 3 Uhr, 6 Uhr und 9 Uhr und könnt mit dem Pinsel- oder dem Buntstift-Werkzeug dort Punkte einmalen. Um die anderen Stellen zu bekommen, markiert die beiden Pfade, drückt Strg+T und rotiert die Pfade im Kreis. Wenn ihr dabei wieder Shift gedrückt haltet, rotieren die Pfade immer in 15° Schritten. Also einfach zwei Schritte (30°) weiterrotieren und die nächsten Punkte malen. Das ganze nochmal 30° weiter und ihr habt Punkte für alle Stunden...


Wer jetzt noch die Minuten einzeichnen will, der sollte die Rotation manuell in den kleinen Eingabefenstern ganz oben eingeben (in Schritten von je 6°).


Jetzt gehts nach Flash... Importiert euer Bild und zeichnet euch einen Stunden, Minuten und Sekunden Zeiger ein. Konvertiert jeden davon in einen Movieclip und vergebt die Instanznamen mc_stunde, mc_minute und mc_sekunde.

Als nächstes müsst ihr den Pivot-Point in die Mitte der Uhr verschieben (denn um diesen Punkt herum, wird der Zeiger nachher rotieren). Dazu nehmt ihr das Frei Transformieren Werkzeug und zieht den kleinen runden Punkt an den Anfang des Zeigers und damit in die Mitte der Uhr.


Markiert alle drei Movieclips und erstellt daraus einen gemeinsamen Movieclip dem ihr den Instanznamen mc_zeiger gebt.

Erstellt eine neue Ebene, nennt diese Actions, aktiviert das Schloss um die Ebene zu sperren und drückt dann F9 um in die Ebene Actionscript Code einzufügen.


onEnterFrame = function() {
now = new Date();
h = now.getHours();
m = now.getMinutes();
s = now.getSeconds();
setProperty(_root.mc_zeiger.mc_stunde, _rotation, (h*30));
setProperty(_root.mc_zeiger.mc_minute, _rotation, (m*6));
setProperty(_root.mc_zeiger.mc_sekunde, _rotation, (s*6));
}

onEnterFrame bedeutet, dass diese Funktion bei jedem Aufruf des Schlüsselbildes aufgerufen wird. Je nach Einstellung ist dies 12x pro Sekunde. Ich arbeite meistens mit 30 Bildern pro Sekunde, aber im Grunde würde hier auch 1 Bild pro Sekunde ausreichen.

now = new Date() ruft die Klasse Date auf, die euch einen ganzen Satz Funktionen zur Verfügung stellt, den ihr im nächsten Schritt braucht, und speichert diese Instanz in der Variable now.

in den variablen h, m und s speichern wir jetzt mittels der Funktionen getHours, getMinutes und getSeconds die aktuelle Zeit, die das Betriebssystem liefert.

mit setProperty und den drei Parametern (1. der entsprechende Zeiger, 2. die Eigenschaft des Zeigers, die verändert werden soll, nämlich die Rotation und 3. der Veränderungswert) wird die Position des Zeigers verändert... da der Stundenzeiger in 30 Grad schritten vorwärts rücken soll, muss der Stundenwert immer * 30 genommen werden, bevor er der Funktion übergeben wird. Bei den anderen Zeigern funktioniert dies nach dem gleichen Prinzip.

Sollte die Uhr keine richtige Zeit anzeigen, liegt das wahrscheinlich daran, daß die Ausgangsposition eurer Zeiger nicht korrekt war. Entweder ihr geht nochmal in den Movieclip und zieht die Zeiger an die richtige Stelle, oder ihr addiert einfach soviel Grad zum Veränderungswert hinzu, bis die Uhrzeit stimmt :)

Das war's :) Viel Spaß mit der Analog Uhr.


AnhangGröße
analogclock_1.jpg33.86 KB
analogclock_2.jpg29.74 KB
analogclock_3.jpg48.41 KB
analogclock_4.jpg6.54 KB
analogclock_5.jpg62.29 KB