Analógové hodiny vytvorené v Adobe Flash

Nedávno som vytvoril návod na to, ako jednoducho vytvoriť digitálne hodiny pomocou Adobe Flash.
Dnes som sa rozhodol rozšíriť kolekciu návodov a napísať postup na vytvorenie analógových hodín.

Hotove analogove hodiny

Vytvoríme si nový súbor (budeme používať ActionScript 2).

Vrstvu ktorá je v novovytvorenej aplikácii premenujeme na „pozadie“ a nakreslíme tvar našich hodín.

Pozadie pre analogove hodiny

Označíme celé nakreslene pozadie hodín a skonvertujeme ho na symbol MovieClip (klávesova skratka [F8])

Pozadie ako MovieClip

Teraz necháme MovieClip s pozadím vycentrovať na Stage. Najjednoduchšie je zobraziť si panel Align (klávesova skratka Ctrl + K alebo cez menu Window -> Align)

Označíme na paneli Align, že chceme centrovať ku Stage a necháme MovieClip vycentrovať horizontálne aj vertikálne.

Vycentrovanie ručičiek

Teraz môžeme vrstvu pozadie zamknúť, aby sme do nej náhodou nezačali kresliť.

Zamknutie vrstvy

Vytvoríme si novú vrstvu s názvom „hodiny“ a nakreslíme hodinovú ručičku. Dôležité je aby každá hodinová ručička ktorú nakreslíme bola nakreslená zvyslo (tak ako je na obrázku).

Pri kreslení rovných čiar si môžeme pomôcť tým že pred ťahaním čiary alebo štetca držíme stlačenú klávesu [Shift] a pustíme až keď je čiara hotová.

Označíme si túto ručičku, skonvertujeme ju na MovieClip [F8], ale veľmi dôležité je označiť „Registration point“, tak ako na obrázku. Týmto Flashku povieme, kde je „aktívny“ bod podľa ktorého ručička bude rotovať.

Ručička analogových hodín

Označíme práve vytvorený symbol a na paneli vlastnosti mu nastavíme Instance Name na „hodin_mc“.

MovieClip hodin_mc

Rovnakým spôsobom vytvoríme novú vrstvu „minuty“ do ktorej nakreslíme horizontálnu čiaru (minútovu ručičku), označíme ju. Skonvertujeme na MovieClip [F8] a pamätajúc na „registration point“ potvrdíme vytvorenie. Následne priradíme Instance Name „minut_mc“

Rovnako aj pre ručičku sekundovú. Nová vrstva s názvom „sekundy“. Horizontálna čiara skonvertovaná na MovieClip s „registration pointom“ umiestneným dole (ako na predchádzajúcom obrázku). Pridáme Instance Name „sekund_mc“

Ručičky hodiniek

Označíme všetky tri ručičky a necháme ich zarovnať vertikálne a zarovnať podľa spodku [ctrl] + [k]. Tentoraz ale neoznačíme že chceme zarovnávať v rámci stage.

Keď sú ručičky zarovnané, pretiahneme ich do stredu pozadia.

Stred hodiniek

Teraz už môžeme pridať vrstvu s názvom „actions“. Nad prvým Framom v tejto vrstve stlačíme [F9] a v editore pre ActionScript, ktorý sa otvorí, vložíme nasledujúci kód.

var cas:Date=new Date;
var hours, minut, sekund;

//zisti aktualny cas
hodin=cas.getHours();
sekund=cas.getSeconds();
minut=cas.getMinutes();

hodin = hodin + (minut/60);
minut=minut*6 +(sekund/60);
hodin=hodin*30;
sekund=sekund*6;

//natocenie ruciciek
hodin_mc._rotation = hodin;
sekund_mc._rotation = sekund;
minut_mc._rotation = minut;

Už iba potrebujeme roztiahnuť aplikáciu na dĺžku dvoch Framov – označiť prvý frame a stlačiť [F5]
Vo výsledku budú vrstvy a časová os vyzerať nasledovne:

Vrstvy pre Flashové analógové hodinky

Pridanie druhého Framu zabezpečí, že aplikácia sa bude vracať na prvý Frame, kde sa vždy spustí náš kód, ktorý nastaví ručičky na aktuálny čas.
Otestovať aplikáciu môžeme skratkou [ctrl]+[enter]. Podľa chuti pridáme na pozadie označenie hodín, prípadne firemné logo.

Stiahni súborZdrojový súbor s analógovými hodinami (Flash CS4)
Zdrojový súbor s analógovými hodinami (Flash CS5)

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: