Hozzunk létre egy új Flash dokumentumot, majd a színpad méretét állítsuk be 240×240 képpontra, a képkocka-sebességet pedig 25 fps értékre. A Flash vektoros eszközeinek a segítségével hozzunk létre egy 160×160 képpont méretű körvonalat az óra lapjának jelölése végett, illetve egy 70 képpont magas, hajszálvékony (hairline) vonalat a másodpercmutató, egy 60 képpont magas, 2 pont vastag vonalat a percmutató, valamint egy 40 képpont magas és 3 pont vastag vonalat az óramutató szimbolizálására.

Jelöljük ki a másodpercmutatót, majd az F8 gyorsbillentyű segítségével hozzunk létre belőle egy "m" (mint másodperc) névre keresztelt, filmklip (Movie clip) típusú szimbólumot, amelynek regisztrációs középpontja alul-középen helyezkedik el. Miután nyugtáztuk a műveletet, helyezzük át a szimbólum transzformációs középpontját úgy, hogy az egybeessen a regisztrációs középponttal. (Az áthelyezéssel kapcsolatos tippet itt találjuk). Új szimbólumunknak adjuk az "m_mc" példánynevet. (Az elnevezéssel kapcsolatos tippet itt olvashatjuk).

A másodpercmutatóhoz hasonlóan hozzunk létre egy "p" (mint perc) nevű filmklipet a percmutató felhasználásával, majd a transzformációs középpont áthelyezése után adjuk neki a "p_mc" példánynevet. Ismételjük meg az eljárást az óramutatóval is, ennek neve "o" (mint óra), a színpadon elhelyezett példányé pedig "o_mc" legyen. Igazítsuk szimbólumainkat úgy, hogy regisztrációs középpontjaik egybeessenek a korábban megrajzolt körvonal középpontjával.

Zároljuk le rétegünket, adjuk neki az "Óra" elnevezést, majd hozzunk létre egy új réteget "Utasítások" névvel. Zároljuk le ezt a réteget is, jelöljük ki az első képkockáját, majd Macintosh alatt az Option + F9, Windows alatt pedig az F9 gyorsbillentyű segítségével nyissuk meg a cselekményszerkesztőt (Actions - Frame). Első lépésként hozzuk létre az óra "mozgatórugóját", az onEnterFrame eseménykezelőt, valamint rendszeridő-változónkat ("ido") is:

onEnterFrame = function () {
     ido = new Date();
}

A másodpercmutató 60 szekundum alatt járja be az óralap 360°-os felületét, így minden másodpercben tulajdonképpen 6°-kal fordul el a tengelye körül. Az "m_mc" elforgatását a "_rotation" tulajdonság értékadásával hajthatjuk végre a következőképpen:

onEnterFrame = function () {
     ido = new Date();
     _root.m_mc._rotation = ido.getSeconds() * 6;
}

Animációnk futtatásakor a következőt tapasztaljuk:

Hasonlóképpen járhatunk el a percmutató esetében is, amely 60 perc alatt járja körül az óralapot. Más a helyzet azonban az óramutatóval, hiszen az "ido" objektum 24 órás üzemmódban adja vissza a jelenlegi idő értékét, ellenben hagyományos, analóg óránk 12 órát képes csak mutatni. A megoldás matematikailag egyszerű, a visszaadott érték 12-vel való osztásának maradékát kell vennünk egy olyan mutató esetében, amely 12 óra alatt járja be a 360°-os óralapot, vagyis óránként 30°-ot fordul el:

onEnterFrame = function () {
     ido = new Date();
     _root.m_mc._rotation = ido.getSeconds() * 6;
     _root.p_mc._rotation = ido.getMinutes() * 6;
     _root.o_mc._rotation = (ido.getHours() % 12) * 30;
}

Amennyiben lefuttatjuk animációnkat, és hosszabb ideig figyeljük az eredményt, azt fogjuk tapasztalni, hogy mutatóink az adott időegységnek megfelelő váltáskor a megszokottól eltérő módon ugranak egyik helyzetből a másikba. Ez a jelenség nyilvánvalóan a hagyományos órák precíz mechanikai és az általunk elkészített digitális megvalósítás különbségéből fakad. A még tökéletesebb szimuláció megteremtése végett utasítás-sorozatunkat a következőképpen kell módosítanunk (a percmutató esetében a másodperc értékét, az óramutató esetében pedig a perc értékét is figyelembe véve):

onEnterFrame = function () {
     ido = new Date();
     _root.m_mc._rotation = ido.getSeconds() * 6;
     _root.p_mc._rotation = (ido.getMinutes() * 60 + ido.getSeconds()) / 10;
     _root.o_mc._rotation = (ido.getHours() % 12) * 30 + ido.getMinutes() / 2;
}

Ezek után nincs más hátra, mint munkánk elmentése, és az eredmény megtekintése. Természetesen némi fantáziával mind az óralapot, mind a mutatókat tetszés szerint testre szabhatjuk.

Jó munkát!