Macromedia FLASH 5 - analogové hodiny - Grafika.cz - vše o počítačové grafice

Flash analogové hodiny

Flash analogové hodiny

13. prosince 2000, 00.00 | Láká Vás umístit si na stránky hodiny ve flash? V dnešním článku si ukážeme, jak vytvořit v Macromedia FLASH 5 klasické analogové hodiny s třemi rafičkami - hodinovou, minutovou a sekundovou, které se budou pohybovat podle aktuálního času.

Láká Vás umístit si na stránky hodiny ve flash? V dnešním článku si ukážeme, jak vytvořit v Macromedia FLASH 5 klasické analogové hodiny s třemi rafičkami - hodinovou, minutovou a sekundovou, které se budou pohybovat podle aktuálního času na Vašem počítači.

Principem tohoto příkladu je získání systémového času, převedení hodin, minut a sekund na stupně a následné přiřazení rotace příslušné hodinové rafičce. Pro získání systémové času využijeme novou funkci ve FLASH 5 new Date(), ze které lze dále získat hodiny, minuty a vteřiny.

Vytvořte si tedy novou scénu (CTRL+N) o velikosti 300 x 150 px s šedou barvou pozadí a Frame Rate 12 (CTRL+M). Scéna se bude skládat ze čtyř vrstev, z nichž každá bude obsahovat pouze dva snímky. V první vrstvě (akce) se budou nacházet všechny potřebné skripty, v druhé vrstvě (cas) se bude nacházet dynamické textové políčko, které bude zobrazovat aktuální systémový čas, v třetí vrstvě (rucicky) budou umístěny tři hodinové ručičky - hodiny, minuty a sekundy a v poslední vrstvě (pozadi) se bude nacházet obrázek hodin, který ovšem nemá na funkčnost vliv.

Nejdříve si vytvoříme všechny proměnné a teprve potom začneme vyvářet samotné hodiny. Do prvního snímku první vrstvy vložte následující akce:

cas = new Date();
hodiny = cas.getHours();
minuty = cas.getMinutes();
sekundy = cas.getSeconds();
if (hodiny>12) {
hodiny = hodiny-12;
}
if (hodiny<1) {
hodiny = 12;
}
hodiny = hodiny*30+int(minuty/2);
minuty = minuty*6+int(sekundy/10);
sekundy = sekundy*6;

Na prvním řádku je stanovena nová proměnná "cas" , které je přiřazena hodnota aktuálního systémového času. Na dalších třech řádcích jsou z této proměnné získány další tři hodnoty - hodiny, minuty a sekundy, které se uloží do proměnných"hodiny", "minuty" a "sekundy". Na dalších šesti řádcích je ošetřena možnost, že v proměnné "hodiny" bude větší číslo než 12 nebo menší číslo než 1. V prvním případě se od čísla většího než 12 odečte právě číslo 12 a v druhém případě se nastaví proměnná "hodiny" na číslo 12.

Na posledních třech řádcích tohoto skriptu jsou převedeny velikosti jednotlivých proměnných na stupně. Jak víme, kružnice má 360 stupňů, přičemž hodinová ručička 12 jednotek a minutová a sekundová ručička 60 jednotek. Nyní musíme zajistit převod mezi těmito hodnotami. Je tedy jasné, že proměnnou "hodiny" je k dosažení 360 stupňů třeba vynásobit 30 krát a proměnné "minuty" a "sekundy" musíme vynásobit 6 krát. Pro plynulý posun hodinové a minutové ručičky ještě slouží malý skript přiřazený k jednotlivým proměnným. Výraz "int(minuty/2" nám vrátí polovinu hodnoty proměnné "minuty" jako celé číslo a výraz "int(sekundy/10)" vrátí desetinu hodnoty proměnné "sekundy" jako celé číslo. V podstatě to znamená, že po deseti posunech rafičky sekundy se jednou posune rafička minuty a po dvou posunech rafičky minuty se jednou posune rafička hodiny.

Do stejné vrstvy vložte do druhého snímku klíčový snímek a do něj vložte akci:

gotoAndPlay (1);

Tato akce zajistí přechod zpět na první snímek a tím vytvoření neustále se opakující smyčky.
Nyní vytvořte novou vrstvu, ve které budou umístěny rafičky hodin. Nástrojem obdélník vytvořte první rafičku a uložte ji jako symbol (F8, Movie Clip) a pojmenujte ji "sekundy". V editaci tohoto symbolu posuňte rafičku tak, aby byla stála svisle základnou na středovém křížku, protože kolem tohoto křížku se bude rafička otáčet. Přepněte se zpět do hlavní scény a umístěte rafičku do předpokládaného středu hodin. Klepněte na ni pravým tlačítkem a z nabídky vyberte položku "Actions" a vložte sem následující akci:

onClipEvent (enterFrame) {
setProperty (this, _rotation, _root.sekundy);
}

Tato akce zajistí pomocí funkce setProperty polohu sekundové rafičky otočením o předem zadaný počet stupňů.

Podobným způsobem vytvoříte minutovou rafičku, které přiřadíte akci:

onClipEvent (enterFrame) {
setProperty (this, _rotation, _root.minuty);
}

A nakonec vytvoříte hodinovou rafičku, které přiřadíte akci:

onClipEvent (enterFrame) {
setProperty (this, _rotation, _root.hodiny);
}

Tím je celá animace analogových hodin prakticky hotová a funkční a vy si můžete kolem rafiček nakreslit nějaké pěkné hodiny, to už nechám na vás. Pokud chcete zároveň vedle hodin zobrazit i jejich digitální podobu, můžete tak udělat vložením dynamického textového políčka do nové vrstvy. Vyberte nástroj text a v paletce zvolte položku Dynamic Text a jako proměnnou (variable) zvolte "cas". Font vyberte Arial, aby se zobrazoval bez problémů i na ostatních počítačích a nenechávejte zatrženou volbu Selectable.

Celou animaci si můžete odzkoušet stiskem kláves CTRL+ENTER a pro bližší prozkoumání celé animace si můžete stáhnout zdrojový soubor.