Digitálne hodiny – práca s objektom Date()

Tento jednoduchý príklad ukazuje vytvorenie digitálnych hodín v Adobe Flash (tieto môžu byť zaujímavým doplnkom web stránky) a využitie objektu/knižnice Date().
Knižnica Date() patrí medzi štandardné knižnice funkcií ActionScript, podobne ako napríklad knižnica Math().

Objekt/Knižnica Date() slúži na to, aby sme pomocou ActionScript získali prístup k systémovemu času (zahŕňa čas, dátum…)

Tento príklad funguje na princípe načítania a následného zobrazenia času pri návrate na Frame 1. Aby táto mini aplikácia fungovala budeme potrebovať Framy dva (nestačí mať jeden frame pretože potom hodiny nefungujú).

[Update] Kvôli množstvu dotazov som pridal aj návod na vytvorenie analógových hodín.

Kvôli prehľadnosti si umiestnime jednotlivé prvky aplikácie do osobitných vrstiev (Layers)

  • Actions – tu vložíme kód jazyka ActionScript (dobrá prax je túto vrstvu zamykať)
  • Text – do tejto vrsty vložíme textové pole – bude slúžiť na zobrazenie času
  • Hodiny – toto je vrstva v ktorej nakreslíme grafický dizajn našich hodin

Vrstvy Flash aplikácie digitálne hodiny

Ako vidieť na obrázku, tak v každej vrstve sú spominané dva Framy (ďalší Frame je vložený klávesovou skratkou F5)

Keďže digitálne hodiny sú aplikáciou malých rozmerov, môžeme zmenšiť veľkosť Stage povedzme na 200x100px.
Vo vrstve “Hodiny” nakreslíme vzhľad hodin, napríklad:

Dizajn pre Digitalne hodinyTeraz do vrstvy “text” vložíme textové pole, ktoré bude tvoriť display hodin. Prednastavený typ textového poľa je “Static text”. Zmeníme ho na “Dynamic text”, pretože typ textového poľa “Dynamic text” môžeme označiť špecifickým menom (instance name) a podobne ako pri Symboloch následne odkazovať na toto pole cez jeho meno (či už z neho čítať alebo zapisovať).
My použijeme Instance name “mojText”.

Odporúčam vpísať do textového poľa nejaký text, aby bolo možné nastaviť najvhodnejšie parametre textu (veľkosť, farbu..)

Digitalne hodiny - instance name

Teraz pristúpime k samotnému kódu, ktorý zabezpečí fungovanie aplikácie.

Klikneme na niektorý Frame vo vrstve “Actions” a stlačíme F9. Otvorí sa editor pre ActionScript.

Najprv si nadeklarujeme niekoľko premenných.

var cas = new Date();

Premenná “cas” bude odteraz vystupovať ako objekt reprezentujúci knižnicu Date() takže bude mať všetky vlastnosti a metódy tejto knižnice.

Nadeklarujeme ďalšie premenné, do ktorých budú načítané časové hodnoty vrátené funkciami (metódami) knižnice Date() – tú teraz zastupuje náš objekt “cas”.

var sekundy = cas.getSeconds(); //do premennej sekundy načítame aktuálne sekundy
var minuty = cas.getMinutes();
//do premennej minuty načítame aktuálne minuty
var hodiny = cas.getHours(); //do premennej hodiny načítame aktuálnu hodinu

Do premenných sekundy, minuty a hodiny máme načítané hodnoty a tie vpíšeme cez vlastnosť “.text” do textového poľa mojText.

mojText.text = hodiny + ":" + minuty + ":" + sekundy;

A vrátime sa späť na prvý Frame.

gotoAndPlay(1);

Ak aplikáciu spustíme (Ctrl + Enter) tak máme digitálne hodiny s presným časom hotové.

Kompletný kód:

var cas = new Date();

var sekundy = cas.getSeconds();
var minuty = cas.getMinutes();
var hodiny = cas.getHours();

mojText.text = hodiny + ":" + minuty + ":" + sekundy;

gotoAndPlay(1);

Reklamy
1 comment

Pridaj komentár

Zadajte svoje údaje, alebo kliknite na ikonu pre prihlásenie:

WordPress.com Logo

Na komentovanie používate váš WordPress.com účet. Odhlásiť sa / Zmeniť )

Twitter picture

Na komentovanie používate váš Twitter účet. Odhlásiť sa / Zmeniť )

Facebook photo

Na komentovanie používate váš Facebook účet. Odhlásiť sa / Zmeniť )

Google+ photo

Na komentovanie používate váš Google+ účet. Odhlásiť sa / Zmeniť )

Connecting to %s

%d bloggers like this: