Ceas analogic in Flash

[Dr4k3]

Unde vrem sa ajungem ?

Cand ati ajuns sa descoperiti ca Flash-ul poseda un tip de data numit "Date", este imposibil sa nu va doriti sa construiti un ceas analogic precum acesta.

Cu ce cunostinte puteti porni la drum? Pai v-ar trebui cam asa: putina tigonometrie, notiunea de movieclip si cea de punct de insertie a acestuia, functii pentru determinarea orei, minutului, secundei, proprietatea _rotation a unui movieclip si un mecanism de a rula o functie in mod repetitiv (gen setInterval sau onEnterFrame).

Incepeti prin a crea un document nou flash la dimensiunile 200 x 200 si fundal negru. Desenati un cerc (eu am ales: 170.5px x 170.5px) pozitionat in centrul scenei

Transformati-l in movieclip (tasta Fb) , denumiti acest movieclip contur si instanta de pe scena tot contur.

Ceas analogic in Flash

Ceas analogic in Flash Autor Corina Haloiu

Adauga comentarii

Commentariile voastre

Ceas analogic in Flash

Unde vrem sa ajungem ?

Cand ati ajuns sa descoperiti ca Flash-ul poseda un tip de data numit "Date", este imposibil sa nu va doriti sa construiti un ceas analogic precum acesta.

Cu ce cunostinte puteti porni la drum? Pai v-ar trebui cam asa: putina tigonometrie, notiunea de movieclip si cea de punct de insertie a acestuia, functii pentru determinarea orei, minutului, secundei, proprietatea _rotation a unui movieclip si un mecanism de a rula o functie in mod repetitiv (gen setInterval sau onEnterFrame).

Incepeti prin a crea un document nou flash la dimensiunile 200 x 200 si fundal negru. Desenati un cerc (eu am ales: 170.5px x 170.5px) pozitionat in centrul scenei

Transformati-l in movieclip (tasta Fb) , denumiti acest movieclip contur si instanta de pe scena tot contur.

Completati designul format din cifrele sale (de diviziunile corespunzatoare orelor ne vom ocupa ceva mai incolo), apoi realizati 3 movieclip-uri pentru limbile ceasului (eu le-am numit: hour, min si sec) pentru care punctul de insertie sa fie capatul limbii care "sta" fix, adica cel din centrul cadranului ceasului.

In acest moment documentul vostru ar trebui sa arate astfel:

Sa facem limbile sa se miste!

Ceea ce trebuie sa stiti este ca proprietatea _rotation a unui movie clip are valori cuprinse intre 0 si 180 pentru o rotire in sensul acelor de ceas, respectiv intre 0 si -180 pentru o rotire in sensul invers acelor de ceas si ca de exemplu 367 grade este totuna cu 7 grade, iar 270 de grade este totuna cu -90 grade.

Apoi, tinand cont ca pentru cele 360 de grade cat are un cerc secundarul parcurge 60 de secunde, inseamna ca fiecarei secunde ii va corespunde un unghi egal cu 360/60 adica 6 grade. Mai clar spus, la trecerea unei secunde, movieclip-ul numit sec trebuie sa faca o rotatie cu 6 grade in sensul acelor de ceas evident.

Acelasi lucru se va intampla cu movieclip-ul numit min.

In schimb, pentru cele 360 grade corespunzatoare unui cerc, orarul parcurge 12 ore, deci la trecerea unei ore, movieclip-ul numit hour va face o rotatie de 360/12 adica de 30 de grade.

Sa analizam functia setare de mai jos. Aceasta este functia care se va executa in mod regulat la fiecare 100 de milisecunde trecute. Codul ei este pe scena principala, in primul frame.

function setare() {

var my_date:Date = new Date();

var h = my_date.getHours();

var m = my_date.getMinutes();

var s = my_date.getSeconds();

sec._rotation = 6*s;

min._rotation = 6*m;

hour._rotation = 30*h+m/2;

}

Variabilele h, m, s vor memora ora, minutul, respectiv secunda pentru momentul de timp curent.

Daca s este 3, avem nevoie de o rotatie egala cu 6 grade * 3; la modul general o rotatie cu 6*s pentru movieclip-ul numit sec. De aceea avem atribuirea: sec._rotation = 6*s;

La fel se vor petrece lucrurile si pentru min._rotation.

Pentru movieclip-ul hour, unghiul de rotatie este suma a doua unghiuri. Primul are valoarea 30*h si reprezinta rotatia pentru fiecare trecere a cate unei ore conform rationamentului de mai sus, iar expresia m/2 se datoreaza faptului ca vrem ca, daca ora este de exemplu 5:30, movieclip-ul numit hour sa nu fie exact in dreptul cifrei 5, ci undeva la jumatatea arcului de cerc dintre 5 si 6, astfel ca avem nevoie de o regula de trei simpla si anume: daca in 60 de minute acul care indica ora parcurge un arc de cerc de 30 grade, atunci, in m minute va parcurge un arc de cerc de m*30/60 grade, adica de m/2 grade.

Acum cred ca este mai clar de unde vine atribuirea: hour._rotation = 30*h+m/2;

Ramane doar sa apelati functia setare, nu o singura data ci, dupa primul apel sa stabiliti reapelarea acesteia la un interval de 100 ms sa zicem. Altfel spus, codul actionscript se rezuma la functia setare si cele doua randuri de mai jos.

setare();

setInterval(setare, 100);

Daca nu functioneaza, urmariti daca movieclip-urile pentru cele 3 limbi ale ceasului poarta numele hour, min, sec. Daca nici asa nu functioneaza... trimite-ti un email

Inapoi la diviziuni

Veti spune probabil ce mare filosofie sa desenezi niste bulinute sau liniute. Numai ca farmecul nu este acela de a le desena, ci de a scrie un script care sa faca munca asta, mai ales ca este atat de simplu...

Sa pornim deci la drum. Va amintiti ca avem un movieclip care se numeste contur? Si ca nu l-am folosit deloc pana acum ? Acum i-a venit si lui randul sa devina util. Dar mai intai avem nevoie de un alt movieclip pentru una din cele 12 diviziuni ce corespund orelor. Creati un cerc cu diamentrul de 5px, transformati-l in movieclip (din nou F8, ati retinut, da ?) iar in fereastra Convert to Symbol selectati butonul Advanced spre a putea sa asociati un identificator acestui movieclip (in Library). Bifati deci “Export for ActionScript” si alegeti un nume. Eu i-am spus bulina. O sa va intrebati la ce foloseste asta ? Raspuns: pentru a putea apoi sa cream diviziunile in mod dinamic, prin actionscript.

In primul frame, tot acolo unde aveti si scriptul care face ca limbile ceasului sa se miste, va aparea in plus partea de script pentru crearea diviziunilor. Am marcat cu rosu ceea ce este nou.

diviziuni();

setare();

setInterval(setare, 100);

function diviziuni() {

var raza = contur._width/2-4;

var niv = 100;

for (var i=0; i<12; i++) {

var flm=attachMovie("bulina", "b"+i, ++niv);

unghi = i*360/12;

alfa = (unghi)*Math.PI/180;

flm._x = contur._x+raza*Math.cos(alfa);

flm._y = contur._y-raza*Math.sin(alfa);

}

}

function setare() {

var my_date:Date = new Date();

var h = my_date.getHours();

var m = my_date.getMinutes();

var s = my_date.getSeconds();

sec._rotation = 6*s;

min._rotation = 6*m;

hour._rotation = 30*h+m/2;

}

Sa analizam sursa functiei diviziuni care face toata munca de trasare a diviziunilor. Si pentru ca un desen face mai mult decat o mie de cuvinte, in imaginea de mai jos am exemplificat pozitia bulinei relativa la centrul cercului numit contur. Mai intai am fixat o raza a unui cerc imaginar pe care voi pozitiona aceste diviziuni ca fiind aproximativ egala cu jumatate din diametrul cercului numit contur. Mai exact cu 4 pixeli mai mica. Apoi am ales un nivel pe stiva pentru crearea celor 12 movieclip-uri (100). Si in sfarsit, in cadrul structurii for se vor executa, pentru fiecare din cele 12 diviziuni pasii:

* crearea unei instante pe scena ca si copie a movieclip-ului numit bulina, instanta identificata mai apoi prin intermediul variabilei flm (var flm=attachMovie("bulina", "b"+i, ++niv)

* fixarea unghiului de rotatie unghi (vezi figura) (360/12 reprezinta a 12-a parte dintr-un cerc, pentru prima bulina unghiul va fi de 0 grade, pt urmatoarea de 360/12 grade, pentru urmatoarea de doua ori 360/12 grade s.a.m.d) (unghi = i*360/12;)

* transformarea acestui unghi din grade in radiani pentru ca functiile flash pentru calculul sinusului si cosinusului primesc argumentele exprimate in radiani (alfa = (unghi)*Math.PI/180;)

* fixarea poxitiei bulinei (flm._x = contur._x+raza*Math.cos(alfa); si flm._y = contur._y-raza*Math.sin(alfa)

Autor Corina Haloiu