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!
Figyelem! A tartalom legalább 2 éve nem frissült! Előfordulhat, hogy a képek nem megfelelően jelennek meg.
