Mnohým z vás jistě nemusím říkat, že základem každé webové stránky je přehledné menu. Existuje mnoho způsobů, jak takové menu můžete vypadat. Někdo dává přednost textovému menu, pro někoho jsou elegantnější obrázky či animace. Nástupem revolučního nástroje pro web, Flashe, se nám otevírají dveře k novým možnostem, jak oživit webové stránky právě animacemi. To, že animovat ve Flashi není nic složitého, vám předvedu právě v tomhle článku. Ukáži vám, jak si můžete pomocí Flashe vytvořit pěkné a zajímavé menu na vaše stránky. Hotový soubor FLA si můžete stáhnout na konci stránky. Ještě poznamenávám, že účelem tohoto článku je vysvětlit základní akce, prováděné ve Flashi.

Dnešní výsledek bude vypadat nějak takto:

Začneme úpravou scény (pravý klik - movie properities). Nastavíme si požadovanou šířku a výšku plochy a podkladovou barvu.

Vytvoříme si nový button (CTRL+F8) s názvem "menu", do tohoto buttonu nakreslíme jakýkoliv obrázek budoucího menu v uzavřené podobě, nejlépe ve všech fázích kliknutí stejný.

V našem případě jsem menu ještě trochu dozdobil třemi movie clipy (červená, žlutá dioda a otáčející se znak), které ovšem nejsou nutné.

Editujeme (pravý klik na menu - Edit) si button "menu" a z knihovny (CTRL+L) do něj přetáhneme na libovolné místo movie clipy (červená, žlutá dioda a otáčející se znak).

Přejdeme zpět do scény a button "menu" přetáhneme z knihovny do hlavní scény kousek za obzor viditelné plochy. Tento button se nyní nachází na prvním snímku scény. Označíme si snímek č.1 a vložíme do něj funkci "stop()". Označíme button "menu" v prvním snímku časové osy a vložíme do něj funkci "on (rollOver) {gotoAndPlay (2);}", klikneme na druhý snímek a vložíme keyframe (F6).

Do tohoto snímku se nám teď nakopíroval button "menu", z nějž musíme odstranit všechny funkce.

Označíme snímek č.30 do kterého vložíme také keyframe (F6). V tomto snímku posuneme "menu" celé do viditelné plochy. Snímky č.2 až 30 označíme a vložíme Tweening: Motion výběrem z paletky frame. Zároveň na snímek 30 vložíme funkci "stop()" a na button "menu" v tomto snímku funkci "on (press) {gotoAndPlay (31);}".

Vytvoříme si nový movie clip (CTRL+F8) s názvem "rozsun". Do něj nakopírujeme obrázek "menu". Označíme levou polovinu obrázku a uděláme z něj movie clip (F8) s názvem "levý". To samé uděláme s pravou polovinou a nazveme ji "pravý". Pomocí kopírování přeneseme jeden z movie clipů (levý nebo pravý) do druhé vrstvy.

V layeru "levý" přejdeme na snímek 30 a vložíme keyframe (F6) a následně na všechny snímky 1-30 Tweening: Motion a v tomto snímku posuneme levý obrázek do rozsunuté polohy. To samé provedeme v layeru "pravý".

Přidáme dvě pomocné vrstvy (Layer 3 a Layer 4) a umístíme jednu nad layer "levý" (v našem případě to je Layer 3) a druhou nad layer "pravý".

Do Layeru 3 nakopírujeme obrázek z prvního snímku layeru "levý". To samé v Layeru 4 ze snímku "pravý". Pravým tlačítkem klikneme na Layer 3 a potom na Layer 4 a zvolíme masku.

Díky masce se nám ve snímku ztratily okraje buttonu "menu" a proto si vytvoříme nový Layer 5 a tyto okraje do něj nakopírujeme. Zároveň do něj vložíme na snímku 30 keyframe (F6) a zde funkci "stop()". Layer 5 bude umístěný nad všemi ostatními layery.

Vytvoříme Layer 6 a umístíme do něj libovolný obrázek, jenž bude vidět po rozsunutí. Layer 6 bude pod všemi ostatními layery.

Přejdeme do hlavní scény.

Vytvoříme keyframe č.31, vložíme funkci "stop()" a přetáhneme do něj právě vytvořený movie clip "rozsun".

Vytvoříme si nový layer s názvem "click", na snímek 31 vložíme keyframe.

Uděláme nový movie clip (CTRL+F8) s názvem "items" a nakreslíme konečný obrázek rozevřeného menu, který označíme a uděláme z něj movie clip (F8) s názvem "roll". Vrátíme se k editaci klipu "items" a vložíme keyframe na snímek 40 a následně funkci "stop()".

Nyní označíme v prvním snímku celý obrázek a na paletce Transform zadáme výšku 0. Ve snímku 1 označíme obrázek a na paletce Info zadáme stejné souřadnice XY jako má obrázek snímku 40. Všechny snímky teď označíme a vložíme Tweening: Motion.

Nyní přejdeme k editaci clipu "roll".

V tomto clipu označíme jednotlivé položky "item 1-6" a postupně z nich vytvoříme buttony (F8). Tyto buttony můžeme dále upravovat a vkládat do nich odkazy funkcí "getURL ("http://www.xxx.cz", "_blank");".

Přejdeme do hlavní scény a z knihovny přetáhneme "items" na spodní hranu obrázku našeho menu.

Hotový FLA soubor je ZDE.

Čevelíček Marek