Macromedia FLASH 4 – rolování Movie Clipu

V dnešním příkladu si předvedeme vytvoření animace, která bude obsahovat Movie Clip a ten se vždy posune do středu animace při přejetí myší přes příslušné tlačítko.

Princip tohoto efektu spočívá v tom, že při přejetí nad tlačítkem s příslušným číslem se uloží do proměnné příslušná souřadnice na kterou se má Movie Clip přesunout a pomocí "postupného krokování" se tam také přesune.

Nejdříve vytvořte novou animaci o rozměrech 300 x 150 px a nastavte počet snímků za vteřinu na hodnotu 30 (CTRL+M). Nyní vytvoříme Movie Clip, se kterým budeme pomocí tlačítek hýbat.

Animace bude mít v hlavní scéně pouze jeden snímek, který bude klíčový. V  tomto snímku prvním snímku je třeba stanovit proměnné se kterými budeme a animaci dále pracovat. Do tohoto snímku tedy vložte (CTRL+F, záložka Actions) následují akce:

Tato akce vytvoří nové proměnné "x"a "old_x" a nastaví jejich hodnotu na nulu.

Vytvořte nový symbol Movie Clip (CTRL+F8) pojmenujte jej "obsah". V tomto symbolu vytvořte pás z buňek ve kterých budou vepsaná čísla 1 až 6 dle obrázku. Každá buňka má velikost 200 x 80 px a jsou umístěny hned za sebou, takže velikost celého symbolu "obsah" bude 1200 x 80 px. Dbejte na to, aby celý Movie Clip začínal na souřadnici x=0 (CTRL+ALT+I, záložka Object).

Přepněte se zpět do hlavní scény a z knihovny přetáhněte do scény symbol "obsah" . Umístěte jej vertikálně do středu scény a nastavte souřadnici x tohoto objektu na x=-150, to způsobí, že se na úvodu zobrazí rámeček s číslem dvě. Na symbol klepněte pravým tlačítkem a z nabídky zvolte Properties a v záložce Definition vložte Instance Name = obsah.

Hlavním prvkem celého efektu je Movie Clip "refresh" ve kterém jsou uložené akce, pomocí kterých se Movie Clip přesunuje na dané místo. Vytvořte si tedy nový symbol (CTRL+F8, Movie Clip) a pojmenujte jej "refresh". V tomto symbolu se bude nacházet pouze jedna vrstva, která bude mít tři klíčové snímky. V prvním snímku bude nadefinovaná tato akce:

Tato akce zajistí, že hodnota proměnné "x" bude přiřazena proměnné "old_x". Proměnné "x" bude vždy po kliknutí na tlačítko přiřazena příslušná hodnota x-ové souřadnice, kam se má animace přesunout.
Druhý snímek bude prázdný a do třetího vložte následující akce:

Na prvních třech řádcích jsou stanoveny nové proměnné. Hodnota proměnné "offset_x" je stanovena jako třicetina rozdílu hodnot proměnných "old_x" a "x". Tato hodnota v podstatě vyjadřuje jak rychle se bude symbol posunovat svoji novou pozici, čím větší hodnotu jmenovatele vložíte, tím pomaleji se bude animace posouvat.Proměnné "cur_x" je přiřazena hodnota aktuální x-ová souřadnice symbolu "obsah" a v proměnné "new_x" je uložena hodnota součtu proměnných "cur_x" a "offset_x".

Na dalším řádku je symbol "obsah" přesunut na navou pozici o x-ové souřadnici "new_x". Na dalších řádcích jsou stanoveny podmínky, že pokud hodnota proměnné "old_x" (původní souřadnice) je menší než požadovaná nová souřadnice bude se tato akce vykonávat stále dokola než se přesune na požadovanou pozici.

Na dalším řádku je taková podmínka, že pokud bude záporná hodnota proměnné "new_x" menší než je hodnota hodnota proměnné "x" přejde animace na druhý snímek a to způsobí znovu vykonání akcí, které jsou ve třetím snímku. V případě, že tato podmínka není splněna je symbol "obsah" přesunut na x-ovou souřadnici, která je rovna záporné hodnotě proměnné "x" a animace se přesune a zastaví na prvním snímku tohoto symbolu. Další akce zajišťují stejným způsobem opačný případ, tedy že záporná hodnota proměnné "new_x" bude mít větší hodnotu než proměnná "x".

Do scény si z knihovny přetáhněte tento symbol a pojmenujte jej "refresh", protože se na něj budeme dále v animaci odkazovat.

Nyní si vytvořte kulaté tlačítko, ve kterém se bude zobrazovat příslušné číslo. Kruhovým nástrojem vytvořte malé kolečko s šedou barvou okraje a žlutou výplní. Šipkou toto kolečko označte a uložte jako symbol (F8, Button) a pojmenujte jej "tlacitko". Přepněte se do editace tohoto objektu a do políčka Over vložte klíčový snímek v němž změňte barvu výplně na oranžovou. Nezapomeňte ještě také vložit klíčový snímek do pozice HIT, která definuje aktivní oblast tlačítka.

Přepněte se do hlavní scény a do umístěte vedle sebe šest tlačítek na které napište čísla 1 až 6. Každému tlačítku je třeba přiřadit akci, která předá souřadnici kam se má "obsah" přesunout. Do prvního tlačítka tedy vložte následující akci (pravé tlačítkem klepněte na symbol a z nabídky zvolte Properties, záložku Actions):

Tato akce platí pro první tlačítko a je v ní proměnné "x" přiřazena hodnota -50 a je zde odkázáno na objekt "refresh" ve kterém se vykonají příslušné akce, které přesunout symbol "obsah" na příslušnou souřadnici "x".

Do každého dalšího tlačítka vložte stejnou akci, která se ovšem bude lišit pouze v hodnotě "x". Do tlačítek 2 až 6 postupně vkládejte tyto hodnoty: 150, 350, 550, 750, 950.

Tím je celá animace prakticky hotová a vy máte možnost si ji otestovat stisknutím kláves CTRL+ENTER. Jako vždy máte možnost stáhnout si zdrojový FLA soubor a projet si jej přímo v programu.