FLASH XVI - jednoduché menu - Grafika.cz - vše o počítačové grafice

Fotosoutěže
Fotogalerie
Rubriky
Odběr fotomagazínu

Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!

 

Zadejte Vaši e-mailovou adresu:

Kamarád fotí rád?

Přihlas ho k odběru fotomagazínu!

 

Zadejte e-mailovou adresu kamaráda:

Nabídka práce
Poptávka práce


Webdesign

FLASH XVI - jednoduché menu

30. března 2000, 00.00 | Výroba jednoduchého menu s použitím objektů z minulého dílu.

Dnes uděláme malé vyjíždějící menu, použijeme všechny komponenty z minulého dílu. Začneme otevřením souboru .fla a nastavíme pozadí na bílou, zrušíme mřížku, kterou dnes potřebovat nebudeme a odstraníme objekt z jeviště.

Ctrl + F8 -- vytvoříme novou animaci (rotace). Vytáhneme na jeviště symbol buton -- otevřeme si Windows -- Inspectors -- Transform a nastavíme Scale = 50%. Zadáme animaci -- Modify -- Frame -- Tweening -- Motion. Zde zaškrtneme políčko - Snap to Guide. Klikem na Add Guide Layer přidáme další vrstvu. Nakreslíme elipsu bez výplně, velikosti 100x50 px a nástrojem Rotate ji zkosíme. Tuto elipsu budou naše objekty kopírovat.

Protože již počítáme s velikostí animace, přidáme na poli 21 keyframe (F6). Vrátíme se do první vrstvy a protože jsme v animaci Tweening zaškrtli políčko Snap to Guide, vidíme, že se nám objekt automaticky přilepil na elipsu. Umístíme jej do spodního ohybu elipsy. Na poli 6, vložíme kexframe a přetáhneme objekt viz obr.1. Na poli 11 jej přesuneme dle obr.2 a na poli 16 dle obr.3. Na poli 21 objekt vrátíme do výchozí polohy jako na poli 1.

Vrstvu si zamkneme, zadáme zobrazení pouze obrysu a přidáme další vrstvu. Z knihovny opět vytáhneme buton a zmenšíme jej na 50%. Na poli 1 jej umístíme ve směru pohybu po elipse nad první objekt viz.obr.1. Na poli 6 dle obr.2, na poli 11 dle obr.3 a dále postupujeme úplně logicky, podle první vrstvy.

Přidáme další vrstvu a celý postup opakujeme i po přidání 4 vrstvy. Máme tedy hotovou animaci a protože u ní počítáme s tím, že z musíme vyrobit tlačítko pro odkaz na další animaci, musíme vytvořit klikací pole, protože do rotujících objektů bychom se těžko trefovali. Nad vrstvu Guide přidáme další vrstvu a v té nakreslíme obdélník bez okraje a libovolnou barvou výplně, protože u ní musíme nastavit Alpha=0%. Pro lepší práci a viditelnost objektů, si tuto vrstvu přetáhneme až dolů a po vytvarování obdélníku ji vrátíme zase až nahoru.Takto nakreslený obdélník vytvarujeme nástroji Scale a Rotate dle animace a výsledný obrázek by měl vypadat takto (vrstva je dole a potom ji vracíme nahoru):

Na jakýkoliv keyframe na poli 21 umístíme akci: Go to and Play (1)

Vrátíme se na Scénu1 a z knihovny právě vytvořený klip rotace umístíme na jeviště, kde funkcí Insert -- Covert to Symbol -- Button z něj uděláme tlačítko. Pravý klik -- Edit a zadáme keyframy ve všech polích. Na Scéně 1 dvojklik na objekt a zadáme akci:
On (Roll Over)
Go to and Play (5)
End On
Na poli 1 v Timeline zadáme také akci, ale pouze Stop.

V knihovně pravý klik na button tlac -- Duplicate a zhotovíme takto 3 kopie, abychom měli dohromady 4 tlačítka. Vložíme vrstvu, ve které tažením z knihovny na pole 5 umístíme na jeviště button tlac. A tím samým postupem jako v případě klipu rotace jej zmenšíme na 50 %, zadáme animaci, zaškrtneme políčko Snap to Guide, posuvník Easing přesuneme doleva až na hodnotu -100 a nakonec přidáme vrstvu Guide Layer. Ve vrstvě Guide na poli 5 nakreslíme kruh, který upravíme dle obrázku 1. Postupně přidáváme další vrstvy (do každé jedno tlačítko), ale začátek umisťujeme vždy o jeden keyframe dopředu.

Potom bude Vaše timeline vypadat takto:

V jakékoliv vrstvě na poli 15 zadáme akci Stop. Na jevišti potom dvojklikem na každé z tlačítek umístíme akci:
On (Release)
Go to and Play (1)
End On

Nakonec zase přebarvíme pozadí.

Celý tutoriál si můžete stáhnout TADY

Další relevantní články:

FLASH XV - animace tlačítka
Bezplatný export pro Flash z Corelu 9
FLASH XIV - intro a menu
FLASH NA SVĚTOVÉ ÚROVNI
FLASH XIII - jak na preloader a jak ho umístit
FLASH XII - akce pro tlačítka
FLASH XI - 3D hvězda, zvuk na pozadí
JAK DOSTAT ČEŠTINU DO FLASHE ?
FLASH - X - animace bitmapy
SEZNAMTE SE - FLASH 4 - IX
SEZNAMTE SE - FLASH 4 - VIII
SEZNAMTE SE - FLASH 4 - VII
SEZNAMTE SE - FLASH 4 - VI
SEZNAMTE SE - FLASH 4 - V
SEZNAMTE SE - FLASH 4 - IV
SEZNAMTE SE - FLASH 4 - III
SEZNAMTE SE - FLASH 4 - II
SEZNAMTE SE - FLASH 4 - I
Macromedia připravuje Flash plugin pro Illustrator
Macromedia představila Flash 4
FLASH - ANIMAČNÍ TECHNIKY I.

Obsah seriálu (více o seriálu):

Tématické zařazení:

 » Rubriky  » Go verze  

 » Rubriky  » Webdesign  

Poslat článek Diskuse (0) Tisk Přečteno: 2780x

www.grafika.cz/rubriky/webdesign/flash-xvi-jednoduche-menu-128756cz

 

 

 

Nejčtenější články
Nejlépe hodnocené články
Nabídka bazar

 

Přihlášení k mému účtu

Uživatelské jméno:

Heslo: