In acest tutorial este prezentat un script ActionScript 3 prin care sunt afisate intr-o prezentare Flash data si ora. Pe scurt, un ceas facut in Flash.
Prezentarea si explicatiile sunt indreptate mai mult spre partea de cod din script, grafica ceasului avand un design cat mai simplu, putand fi creata de fiecare dupa preferinte, cu instrumentele din Scena documentului Flash. Important este scriptul, care o data inteles, poate fi aplicat oricarui desen grafic ce reprezinta forma ceasului.
1. Deschideti un document Flash nou, ActionScript 3.0 si creati in scena un desen pentru ceas. Sa aibe 2 zone distincte, una in care va fi afisata data zilei si alta pentru ora, dupa cum se vede in imaginea urmatoare.
- In zona alba, de sus, va fi afisata data zilei, iar in ovalul galben e adaugata ora.
2. Cu istrumentul "Text Tool" trasati un camp text peste dreptunghiul alb, cu dimensiunile apropiate de acesta (dupa cum se observa in imaginea de jos. Dati acestui camp-text numele de instanta dat_v (in panoul Properties al campului, in caseta de sus unde e scris <Instance Name>) si lasati-l gol.
- Acest camp va fi folosit in ActionScript ca obiect in care se scrie textul cu data.
Trasati si peste ovalul galben un alt camp de text, ca dimensiuni incadrate in oval, si dati-i numele de instanta ora_v. Lasati-l si pe acesta gol. Acest camp va fi folosit in ActionScript ca obiect in care se scrie textul cu ora.
- In imaginea urmatoare se vad cele doua campuri text, cu linie punctata.
3. Click-dreapta pe primul Cadru din Timeline si alegeti optiunea Actions, iar in panoul care se deschide, pentru scriere cod ActionScript, adaugati urmatorul cod:
- In Scena, cele 2 campuri text "dat_v" si "ora_v" sunt esentiale pentru afisarea datei si orei in ceas.- In zona alba, de sus, va fi afisata data zilei, iar in ovalul galben e adaugata ora.
2. Cu istrumentul "Text Tool" trasati un camp text peste dreptunghiul alb, cu dimensiunile apropiate de acesta (dupa cum se observa in imaginea de jos. Dati acestui camp-text numele de instanta dat_v (in panoul Properties al campului, in caseta de sus unde e scris <Instance Name>) si lasati-l gol.
- Acest camp va fi folosit in ActionScript ca obiect in care se scrie textul cu data.
Trasati si peste ovalul galben un alt camp de text, ca dimensiuni incadrate in oval, si dati-i numele de instanta ora_v. Lasati-l si pe acesta gol. Acest camp va fi folosit in ActionScript ca obiect in care se scrie textul cu ora.
- In imaginea urmatoare se vad cele doua campuri text, cu linie punctata.
3. Click-dreapta pe primul Cadru din Timeline si alegeti optiunea Actions, iar in panoul care se deschide, pentru scriere cod ActionScript, adaugati urmatorul cod:
// Creaza Array cu zilele saptamanii si lunile anului in romana
var ar_zile:Array = new Array("Duminica", "Luni", "Marti", "Miercuri", "Joi", "Vineri", "Sambata");
var ar_luni:Array = new Array("Ianuarie", "Februarie", "Martie", "Aprilie", "Mai", "Iunie", "Iulie", "August", "Septembrie", "Octombrie", "Noiembrie", "Decemberie");
// Functia care defineste si afiseaza datele
function ceas():void {
// Creare instanta obiect Date (unde sunt stocate data si ora)
var acum:Date = new Date();
// Definire variabile pt. preluarea datelor necesare din "acum"
var anul:int = acum.getFullYear(); // Obtine Anul
var luna:int = acum.getMonth(); // Nr. luna din an
var zi_luna:* =acum.getDate(); // Nr. zi din luna
var zi_sap:int = acum.getDay(); // Nr. zi din saptamana
var ora:int = acum.getHours(); // Preia ora
var minute:* = acum.getMinutes(); // Minutele
var secunde:* = acum.getSeconds(); // Secundele
// Ajustare format pt. valori mai mici decat 10 (sa fie afisate cu 2 caractere
if(zi_luna<10) zi_luna = '0'+ zi_luna; // Adauga 0 pt. nr. zi_luna<10
if(minute<10) minute = '0'+ minute; // Adauga 0 pt. minute<10
if(secunde<10) secunde = '0'+ secunde; // Adauga 0 pt. secunde<10
// Definire text care va fi afisat in campul-text "dat_v" (cu data zilei)
dat_v.text = ar_zile[zi_sap]+ ', '+ zi_luna+ ' '+ ar_luni[luna]+ ' '+ anul;
// Definire text care va fi afisat in campul-text "ora_v" (cu ora curenta)
ora_v.text = 'Ora: '+ ora+ ':'+ minute+ ':'+ secunde;
}
ceas(); // Apeleaza functia pt. afisare date in ceas
// Apeleaza functia "ceas()" la fiecare secunda (1000 milisecunde)
setInterval(ceas, 1000);
4. Apasati Ctrl+Enter ca sa vedeti rezultatul. Va apare o prezentare Flash precum aceasta:
- Pe partea de ActionScript sunt doua elemente importante: obiectul Date, prin care sunt obtinute datele pentru ora si data curenta (despre lucrul cu obiectul Date, proprietatile si functiile lui, vedeti lectia Data si Timp - Obiect Date) si functia "setInterval()", care apeleaza continuu, la interval de 1 secunda (1000 milisecunde), functia "ceas()", prin care sunt definite si adaugate in campurile text din Scena data si ora. Explicatii mai detaliate sunt in codul scriptului
• Fisierul FLA cu acest exemplu poate fi descarcat de la: Tutorial creare ceas.
Pentru a adauga acest ceas intr-o pagina web, trebuie sa creati fisierul SWF, care poate fi inclus in documente HTML. Fisierul SWF se obtine prin Export, din meniul File -> Export -> Export Movie.