Flash 4 - menu pomocí ovládání Movie Clipu - Grafika.cz - vše o počítačové grafice

Macromedia Flash tutorial

Macromedia Flash tutorial

6. března 2001, 00.00 | Vytvořit menu, které má hodně položek a ještě k tomu musí být poutavé, nebývá lehkým úkolem. Flash nám ovšem umožňuje použít takových metod, které to dokáží... a nemusí to být jen menu.

Dnes si ukážeme jakým způsobem lze vytvořit celkem poutavé menu a to na principu "volání" movie clipu. Takto bude tedy náš výtvor vypadat:

Nejdříve si upravíme plochu (Modify - Movie), kde rozměry nastavíme na 400 x 450 px a pro background si zvolíme tmavou modř.

V knihovně symbolů si vytvoříme nový Movie clip. V něm se nastavíme na první rámeček a nakreslíme pomocí nástroje Brush šipku. Na rámečku č. 1 si po stisku pravého tlačítka zvolíme Create Motion Tween, nastavíme se na rámeček č. 10, kde zvolíme Insert Keyframe. S šipkou jsme po celou dobu ani nehnuli! Nyní vidíme, že se nám všech 10 políček v animační řadě zbarvilo do modra. Pravým tlačítkem klikneme kdekoliv v této řadě 10 rámečků a z nabídky Properties zvolíme Tweening. V tomto dialogovém okně si všimněte políčka Rotate. Pomocí šipečky vpravo zvolíme "Clockwise", což znamená, že se šipka bude otáčet po směru hodinových ručiček... tedy Flash toto otočení udělá za nás a my to nebudeme muset dělat ručně. Nesmíme ještě zapomenout, že do kolonky "times" musíme vepsat "1", což udává, že otočení bude probíhat pouze jedenkrát.

Vše potvrdíme tlačítkem OK a můžeme si, stiskem klávesy Enter, vyzkoušet, že se opravdu šipka otočí - jedenkrát a po směru hodinových ručiček. Na rámečku č. 1 ještě vepíšeme script "stop" (Pravý klik - properties - actions - +), který nám způsobí, že se animace nezačne bezhlavě přehrávat, ale zastaví se na prvním rámečku a bude tzv. čekat co dál.

Nyní zbývá vytvořit ještě jeden symbol v knihovně - a tím je tlačítko. Vytvoříme ho standardním způsobem a záleží jen na nás, jaký typ tlačítka použijeme. Já jsem v tomto případě použil znak, který se nachází ve fontu "Webdings".

Tak... momentálně by naše knihovna symbolů měla vypadat takto:

A je na čase celé naše dílo zkompletovat.

V hlavní scéně si pojmenujeme vrstvu na "komplet" a tím naše práce s vrstvami končí. Nebudou žádné "action scripts" na pozicích rámečků, ani žádné animace. Vrstva bude pouze jedna, rámeček také jenom jeden. Všechny akce budou probíhat pouze přímo.

Přetažením z knihovny si na plochu umístíme jak movie clip "střelka" (či šipka, či jak jste si to nazvali), tak také button "tlačítko" (či button, či ....). Šipku si umístíme asi do horní třetiny plochy. Nyní si v okruží kolem šipky musíme vytvořit vhodné obrázky. Já osobně jsem je použil z nějakého fontu, sám nevím ze kterého, ale líbil se mi (v případě, že autor tohoto fontu bude číst tyto řádky a bude rozezlen, že jsem se ho na použití nezeptal, tak ať mne prosím omluví a kontaktuje ... já ho dodatečně požádám o povolení). Tyto obrázky si musíme umístit tak, aby byly zhruba ve stejné vzdálenosti od sebe a MUSÍ JICH BÝT 9!!! To z toho důvodu, že movie clip "střelka" je složen z animace 10 rámečků - a 10 rámečků = 9 rámečků animovaných + 1 statický. A v případě, že se šipka bude otáčet, tak každé pootočení (posunutí na další rámeček) bude ukazovat na jeden obrázek.

Zatím by naše plocha měla vypadat asi takto:

Umístění buttonu máme pouze provizorní, a proto si ho musíme přesunout tam, kde nám to asi tak nejvíce vyhovuje. Problém je v tom, že my nepotřebujeme pouze jeden button, ale hned několik, resp. také 9. Nebudeme to dělat nijak složitě a zdlouhavě, že bychom si vytvořili 9 různých buttonů, potom .... atd. Uděláme to jednoduše. V tomto případě nebude vadit, když budou všechny buttony stejné, rozlišitelné budou stejně podle textu, který se nad nimi objevuje. My si zkrátka buttonu nakopírujeme, a to klávesou zkratkou Ctrl+D, tedy "duplicate". Vždy si označíme jeden button, potom stiskneme Ctrl+D a zduplikovaný button přesuneme tam, kde má být. Je jasné, že někteří "cimprlich" lidé mi vytknou, že by to šlo udělat také takovým způsobem, že postupně 9x přetáhneme z knihovny symbolů button "tlačítko" na plochu. Ano, i takovým způsobem to jde... a já jsem vlastně teď uvedl oba, takže mi nemá nikdo co vytknout.

Obrázky máme umístěné, šipku také, buttony máme naduplikované a umístěné také, zbývá vytvořit textové pole, které si umístíme někde nad "usměv" tlačítek a z nabídky textového pole vybereme pouze "disable editing", "disable selection" a samotné pole pojmenujeme prostě "text". Někde v pozici tohoto pole můžeme vytvořit např. elipsu, která nám bude ještě znázorňovat toto pole a bude to vypadat, jako by ona sama byla textovým polem, ale jestli nechcete, tak to nemusíte dělat, protože "na funkci to nijaký vliv mít nebude." ;-).

Náš neoživený výtvor by měl mít asi takovýto "výzor":

Oživení tohoto díla bude probíhat v podstatě pouze na dvou frontách. Na frontě "buttonů" a "střelky". Nejprve přijde na řadu střelka. Nastavíme se NA střelku (přímo na ni najedeme kurzorem) a klasickým "dvojklikem" si vyvoláme dialogové okno, kde do kolonky "instance name" vepíšeme "strelka". Tímto máme naši střelku navždy a všude v tomto klipu vedenou pod svým "instantním jménem" "strelka". Tím naše práce se střelkou končí.

Jako další krok si oživíme buttony. Z nabídky Properties - Actions - + si navolíme na buttonu č. 1 (ten co nejvíce vlevo nahoře) script:

On (Roll Over)

Begin Tell Target ("/strelka")

Go to and Stop (2)

End Tell Target

Set Variable: "text" = "tučňák"

End On

Tento script udává, že po najetí na tlačítko (On(Roll Over)) "zavoláme" movie clip s "instantním jménem" "strelka" (Begin Tell Target ("/strelka")), kde se zastavíme na rámečku č. 2 (Go to and Stop (2)), čímž naše práce v klipu "strelka" končí (End Tell Target). Poté už jen zbývá, aby se do textového pole "text" vepsal název "tučňák", tedy zvíře, na které šipka ukáže (Set Variable: "text" ....), konec (End On).

Stejný script vepíšeme i do ostatních buttonů, ovšem s tou vyjímkou, že v řádku "Go to and Stop" se budou postupně zvyšovat hodnoty (2, 3, 4, 5, ..., 9) a v řádku "Set Variable" se budou měnit názvy zvířat (tučňák, myš, jelen, atd.).

Tímto je naše dílo hotovo. Tento tutorial berte jako ukázku toho, co se dá vytvořit pomocí technologie flash a záleží jen na vás, co si k tomu vymyslíte více. Fantazii se meze nekladou ... např. můžete mírně pozměnit script tak, aby toto "menu" fungovalo, jako odesílač pošty a to tím způsobem, že výše uvedený script byste doplnili o řádky:

On (Release)

Get URL: "odesli.php"

End On

A ještě k tomu by se v textovém poli nemusely objevovat pouze jména zvířat, ale např. již zmíněné e-mailové adresy, např.: jelen@lesík.cz, tučňá, apod.

Ale TO záleží jen na vás.

A abych nezapoměl, tady je zdroják ZDE.