IPRO - PC Magazine Romania, 2002
Comunitatea experţilor şi a cititorilor PC Magazine - Internet PRO

Tutorial: Realizarea unui ceas în Flash MX

Ioan Alexandru Lazăr

download: swf, fla

Foarte mulţi web-designeri se confruntă cu o problemă stringentă: afişarea orei curente. Folosirea JavaScript dă rezultate neimpresionante ca aspect, iar applet-urile Java, deşi pot arăta cât de cât decent, se încarcă foarte greu. Odată cu creşterea vitezei de transfer, afişarea orei se poate realiza în Flash, foarte uşor şi cu un aspect foarte plăcut.

Pentru ca ceasul să funcţioneze (adică să îşi mişte limbile, aşa cum trebuie) este nevoie doar de câteva fişiere grafice şi câteva linii de cod foarte, foarte simple. Acest tutorial cere doar cunoştinţe de bază de Action Script şi Flash, iar programele pe care eu le-am folosit au fost Flash MX (pentru scenă) şi Fireworks (pentru ceas).

Fişierele grafice se pot realiza fără probleme în Photoshop sau în alt program de grafică. Recomandarea mea este, totuşi, Macromedia Fireworks, care are o serie de stiluri predefinite şi funcţii perfecte pentru un asemenea scop. În orice caz, este nevoie de: imaginea ceasului (fără limbi) - care va fi importată ca "Movie Clip" in Flash MX, şi imaginile celor trei limbi (orar, minutar şi secundar), ce vor deveni Movie Clip-uri.

Pentru a uşura cât mai mult posibil munca de management a scenei (şi eventualele adăugiri ulterioare), este bine să împărţiţi scena în mai multe layere, câte unul pentru fiecare element, plus unul pentru acţiuni (care va fi lăsat gol).

Primul lucru care trebuie să îl faceţi este împărţirea în layere a scenei. În cazul acestui tutorial, ordinea layerelor a fost (de sus în jos): "Acţiuni", "Orar", "Minutar", "Secundar", "Ceas". Creaţi apoi câte două cadre-cheie alăturate în fiecare layer (selectaţi cadrul imediat următor primului, clic dreapta pe mouse şi alegeţi opţiunea "Insert frame".

În layer-ul Ceas, importaţi imaginea ceasului (în ambele cadre-cheie). Urmează apoi să creaţi imaginile limbilor. Este nevoie de câte o imagine pentru orar, minutar şi secundar. Imaginea limbilor se poate realiza fără probleme, chiar şi din Flash, cu ajutorul instrumentelor de desenare. Pentru a realiza imaginea unei limbi, apăsaţi Ctrl+F8 (sau mergeţi pe Insert>New Symbol), alegeţi Movie Clip, şi apoi editaţi acest nou movie-clip până ajungeţi la forma dorită. Atenţie: capătul de JOS al limbii trebuie să fie exact în centrul Movie Clip-ului. Ţineţi seama şi de următoarele lucruri: în primul rând, orarul este limba cea mai mică, iar secundarul, cea mai mare. Gândiţi-vă la faptul că limbile trebuie să fie cel mult egale cu raza cadranului ceasului, altfel vor ieşi din cadran. Şi, în mod sigur, nu vreţi asta. De asemenea, fiţi siguri că, după ce aţi terminat editarea unei limbi, completaţi câmpul "Instance Name" din tab-ul Properties cu numele potrivit (în acest tutorial, am folosit instance name-urile: "Orar" pentru orar, "Minutar" pentru minutar şi "Secundar" pentru secundar)

După ce aţi terminat imaginea ceasului (cu limbi cu tot), urmează singura parte mai grea a acestui tutorial: programarea acţiunilor. Atenţie: am spus "mai grea" şi nu "foarte grea". Cine a mai lucrat în JavaScript nu va avea nici o problemă, dar nici cei care nu au lucrat cu JavaScript nu se vor simţi stingheriţi.

Haideţi, totuşi, să facem o scurtă pauză şi să vedem (concret) ce trebuie făcut. Pentru ca limbile să se mişte corect, trebuie să găsim mai întâi o soluţie pentru a citi data calculatorului. Acest lucru se face foarte uşor, prin intermediul comenzii new Date(). Apoi, limbile trebuie să se şi mişte. Pentru asta am spus că este nevoie de două cadre-cheie, pentru că, în cazul în care aţi folosi un singur frame, limbile nu s-ar mai mişca. Apoi, pentru a "ordona" limbilor să se mişte, vom ţine cont de modul în care ele se mişcă în realitate. Pentru limbi, se foloseşte funcţia MovieClip._rotation, care defineşte numărul de grade cu care se mişcă limbile după fiecare unitate de timp.

Aşadar, faceţi click dreapta pe primul frame din layer-ul cel mai de sus (cel care conţine acţiunile), şi apoi urmează să scrieţi codul:

//————————------------------------------
Data = new Date();//citeste data curenta
_root.Orar._rotation = Data.getHours()*30+(Data.getMinutes()/2);
//roteste orarul...
_root.Minutar._rotation = Data.getMinutes()*6+(Data.getSeconds()/10);
//roteste minutarul
_root.Secundar._rotation = Data.getSeconds()*6;
//in fine, roteste secundarul. Daca nu folositi secundar, puteti scoate linia fara probleme
//——————-------------------------------

Selectaţi apoi al doilea cadru-cheie şi introduceţi următoarea secvenţă:

//———————————————--------------------------
gotoAndPlay(1);
//——————————————————————------------------

Încercaţi acum să testaţi scena. Dacă aţi executat totul corect, ceasul funcţionează şi trebuie să indice ora care este arătată şi în System Tray (dreapta-jos, pe taskbar). Dacă ceasul refuză, totuşi, cu încăpăţânare să funcţioneze, ar fi unele lucruri ce ar trebui verificate. În primul rând, asiguraţi-vă că, după ce aţi creat limbile ceasului, aţi completat câmpul "Instance Name" şi că, atunci când aţi scris codul Action Script, aţi folosit instance name-ul respectiv. În al doilea rând, fiţi sigur că nu aţi omis vreo porţiune de cod. Pentru orice eventualitate, ţineţi fereastra "Output" activă cât timp testaţi ceasul. Şi, nu în ultimul rând, verificaţi că nu aţi omis includerea celui de-al doilea cadru-cheie, pentru că, dacă nu îl includeţi, limbile ceasului nu se vor mişca.

Soluţii şi probleme legate de Internet