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:
-
5. září 2024
Matrixmedia - Obsluha a tisk na velkoformátových digitálních tiskárnách
-
30. září 2024
-
4. října 2024
-
14. listopadu 2024
Webdesign
FLASH 4 - animované menu
Flash menu
6. února 2001, 00.00 | V tomto článku si ukážeme, jak vytvořit animované menu použitím jednoduchých animačních metod a postupů.
V tomto článku si ukážeme, jak vytvořit animované menu použitím jednoduchých animačních metod a postupů. Výsledný efekt bude poté vypadat takto (kliknutím na nadpis MENU se nabídka rozbalí):
Nejdříve si vytvoříme pracovní plochu. Z nabídky MODIFY zvolíme MOVIE. V kolonce Frame Rate nastavíme 25, tedy udáme rychlost přehrávání výsledné animace. 25 nastavíme proto, aby uživatel nebyl moc zdržován rychlostí přehrávání animace (bude trochu svižnější). Rozměry nastavíme na 230 x 450 pixelů.
Klávesovou zkratkou Ctrl+L si otevřeme "knihovnu", kde si vytvoříme "button" 1 - 6. Jeho design závisí jen na vás. Já jsem pro tuto ukázku zvolil okrově zbarvená kola s netradičními znaky uprostřed. Dále si vytvoříme "movie clip", kde na prvním rámečku (frame) vyrobíme stejný typ kolečka. Na tomto rámečku určíme, že se jedná o animaci "Create Motion Tween" a na 10. rámečku vložíme "Insert Keyframe" a kolečko vybarvíme červeně. Opět se přesuneme na rámeček č. 1 a klávesovou zkratkou Ctrl+B objekt rozbijeme. Tutéž akci opakujeme na rámečku č. 10. Vidíme, že původní šipka animační řady se rozpadla, a proto pro docílení efektu přeměny jedné barvy v druhou klikneme pravým tlačítkem na jakýkoliv rámeček v animační řadě a z nabídky PROPERTIES - TWEENING zvolíme SHAPE. Animační řada se nám zbarvila do zelena a efekt prolínání barev je hotov.
Nyní zbývá vytvořit poslední "button" do knihovny symbolů - nadpis menu. Postupujeme stejným způsobem jako při tvorbě jednotlivých částí menu. Po dokončení máme již všechny symboly hotovy a připraveny k následné animaci.
Přepneme se do hlavní scény "Scene 1" a vytvoříme si "Layers" podle obrázku.
Nastavíme se na první rámeček ve vrstvě (layer) Menu a pouhým přetažením z knihovny si na potřebné místo v hlavní scéně přesuneme button Menu_napis. Pod tento nápis si nástrojem OVAL vyrobíme šest koleček, které vybarvíme radiální gradientní výplní podle obrázku. U každého kolečka postupujeme podobně jako u nápisu menu, kdy se nastavíme na první rámeček v každé jednotlivé vrstvě, tedy každému kolečku bude patřit jedna vrstva zvlášť.
Následně můžeme přejít k finální animaci. Postupujeme stejným způsobem jako při tvorbě animace v kolečka v knihovně. Vždy na 1. rámečku určíme po kliknutí pravým tlačítkem "Create Motion Tween", poté na nějakém dalším (dle našeho uvážení) "Insert Keyframe" a přetáhneme kolečko do pozice, ve které chceme, aby se udrželo. Opět se nastavíme na první rámeček animace a zvolíme "Shape Tweening" a totéž opakujeme na rámečku posledním, kde můžeme změnit gradientní výplň tak, aby vypadalo, že se kolečka otáčejí oproti světelnému zdroji. Tutéž akci opakujeme několikrát a u každého kolečka. Záleží jen na nás, jestli nám budou kuličky skákat, nebo jen pomalu létat atp. Na posledním a také prvním rámečku celé animace vždy zvolíme po stisku pravého tlačítka v PROPERTIES - ACTIONS z voleb po kliku na tlačítko + akci STOP. Toto nám umožní, že se animace na této pozici zastaví. Zároveň si na těchto rámečcích kolečka zvětšíme a zasadíme do pozic, ve kterých chceme mít výsledné menu umístěné a změníme jejich výplň z gradientní na plnou a to stejné barvy, jako jsou naše "buttony". Nesmíme také zapomenout na to, že nápis MENU by měl být aktivní po celou dobu přehrávání samotné animace, a proto klikneme na první rámeček ve vrstvě "Menu" a přetáhnutím (tlačítko myši stále držíme stisknuté) se nastavíme na konečnou fázi celé animace a tuto činnost opakujeme zase zpět. Celá animační řada se nám zbarví do šeda. A konečně jeden z posledních kroků - ve vrstvě "střed" se taktéž nastavíme na první rámeček celé animace a pouhým přetáhnutím z knihovny zde zasadíme do vzniklého prstence symbol "animace". Poté stisknutím levého tlačítka a jeho držením přetáhneme celý rámeček na konec animace. Naše animace vrstev by poté měly vypadat následovně:
Poslední fází je oživení menu. V jednotlivých vrstvách se vždy nastavíme na poslední rámeček animace a přetáhnutím jednotlivých tlačítek (buttons) z knihovny je umístíme NA jednotlivé kruhy. Samotná tlačítka jsme neanimovali proto, aby nebyla aktivní po dobu přehrávání animace, ale až po jejím definitivním skončení.
Zbývá zajistit, aby se po stisku nápisu menu animace přehrála, na konci zastavila (to už jsme zařídili zvolením PROPERTIES-ACTIONS-"stop") a po opětovném stisku nápisu menu se zastavila na prvním rámečku animace a zůstala stát. To zařídíme tak, že na posledním rámečku vrstvy "Menu" zvolíme po stisku pravého tlačítka INSERT KEYFRAME, poté opětovně stiskneme pravé tlačítko, ale již přímo na nápisu MENU a z nabídky PROPERTIES-ACTIONS-+ vytvoříme script, který nám zajistí, že po stisku tlačítka menu na posledním rámečku časové řady animace přejde na první rámeček a tam zůstane stát.
On (Press)
Go to and Stop (1)
End On
Totéž uděláme na prvním rámečku vrstvy "Menu", kdy opět PŘÍMO na nápisu menu stiskneme tlačítko a z nabídky PROPERTIES-ACTIONS-+ vytvoříme script, který nám zajistí, že se po stisku tlačítka menu začne animace přehrávat:
On (Press)
Play
End On
Nyní je již naše MENU hotovo a můžeme ho směle otestovat stiskem Ctrl+Enter.
Obsah seriálu (více o seriálu):
- FLASH - vyčkávající Trojský kůň
- FLASH - vyčkávající Trojský kůň - druhý díl
- FLASH - vyčkávající Trojský kůň - třetí díl
- FLASH - ANIMAČNÍ TECHNIKY I.
- SEZNAMTE SE - FLASH 4 - I
- SEZNAMTE SE - FLASH 4 - II
- SEZNAMTE SE - FLASH 4 - III
- SEZNAMTE SE - FLASH 4 - IV
- SEZNAMTE SE - FLASH 4 - V
- SEZNAMTE SE - FLASH 4 - VI
- SEZNAMTE SE - FLASH 4 - VII
- SEZNAMTE SE - FLASH 4 - VIII
- SEZNAMTE SE - FLASH 4 - IX
- FLASH - X - animace bitmapy
- JAK DOSTAT ČEŠTINU DO FLASHE ?
- FLASH XI - 3D hvězda, zvuk na pozadí
- FLASH XII - akce pro tlačítka
- FLASH XIII - jak na preloader a jak ho umístit
- FLASH XIV - intro a menu
- FLASH XV - animace tlačítka
- FLASH XVI - jednoduché menu
- FLASH XVII - akce Tell Target poprvé
- FLASH XVIII - akce Tell Target podruhé
- FLASH XIX - akce Tell Target potřetí
- FLASH XX - konverze MP3 na WAV
- FLASH XXI - vlnění, kruhy na vodě
- FLASH XXI - dokončení
- FLASH 4 - Text Field Properties
- FLASH 4 - Zvláštní výběr křivek a čar
- FLASH 4 - Optimalizace křivek
- Flash 4 a QuickTime video
- FLASH 4 - preloader
- FLASH 4 - Duplikování filmového klipu
- FLASH 4 - pohybování textem pomocí kurzoru
- FLASH 4 - Speciální textové vlastnosti
- Macromedia FLASH 4 - postupné vypisování textu
- FLASH 4 - Spirála
- FLASH 4 - natažení externího .swf
- Macromedia FLASH 5 - načítaní HTML souboru
- FLASH - komunikace mezi dvěma SWF soubory
- FLASH - hrátky s křivkou
- FLASH - menu s posuvníkem
- FLASH - menu s posuvníkem (dokončení)
- FLASH 5 - pseudo 3D menu (dokončení)
- FLASH 5 - menu
- FLASH - Color Effect
- Macromedia FLASH 5 - analogové hodiny
- FLASH 5 - "smart" clip
- Vánoční přání v Macromedia FLASH 5
- FLASH 5 - ohňostroj
- Macromedia FLASH 5 - preloader
- FLASH 4 - animované menu
- Macromedia FLASH 5 - změna kurzoru
- Flash - Efekt založený na nedokonalosti bitmap
- Flash 4 - on-line výpočet ceny - 1. díl
- Flash 4 - on-line výpočet ceny - 2. díl
- Odeslání dat z formuláře ve Flashi 4 - II.
- Macromedia FLASH 5 - odesílání formuláře
- FLASH 4 - postupné odkrývání textu - tzv. maskovací efekt
- FLASH 5 - jednoduchý kaleidoskop nebo projekce?
- Flash 4 - menu pomocí ovládání Movie Clipu
- FLASH 5 - Vypisování textu
- Flash 4 - efektní ukončení *.exe prezentace + práce s více scénami
- Macromedia FLASH 5 - ovládání hlasitosti
- FLAX 1.12 - program na textové efekty v SWF
- FLASH 5 - matematické objekty (1. část)
- Flash4 - animace obličeje
- Flash 4 - Hra na způsob šipek
- Flash 4 + Swift 3D - dokonalá souhra!
- Macromedia FLASH 5 - změna barvy pozadí a textu
- Flash 5 - aktuální datum a čas
- Flash - 2D animace - 3D efekt
- FLASH 5 - prohlížečka obrázků s maskováním
- FLASH A JAVASCRIPT
- FLASH 5 - reversní pohyb
- Jpeg2Swf v1.0 beta - převod jpeg do swf aneb flashwebkamera
- SWISH v2 - Flash bez Flashe
- Jak docílit plynulé animace ve formátu Flash
- Flash - jdoucí Elvis.
- Flash - running man.
- Macromedia Flash - posun pozadí
- Flash - mořská hladina.
- Flash - animace hořící sirky
- Flash - mávání na rozloučenou
- Flash - vzhůru v let
- Flash - animace řeči
- FLASH 5 - Kalkulačka v 1.0
- Flash - BOXující Elvis
- Flash + Flashamp - animace řeči
- Flash - ženský běh
- FLASH 5 - Kalkulačka v 2.0
- FLASH - Programy na analýzu a úpravu SWF souborů
- FLASH 6 - Jaký bude a kdy bude?
- FLASH - Programy na analýzu a úpravu SWF souborů 2
- FLASH MX - novinky pod lupou
- Flash desatero
Diskuse k článku
-
14. května 2014
Jak vkládat snímky do galerií a soutěží? Stručný obrazový průvodce
-
23. dubna 2014
Konica Minolta přenesla výhody velkých zařízení do kompaktních modelů
-
12. června 2012
-
9. dubna 2014
-
29. listopadu 2013
-
6. září 2004
OKI snižuje ceny barevných laserových tiskáren C3100 a C5200n
-
13. května 2004
-
19. ledna 2004
QuarkXPress Passport 6: předvedení nové verze na konferenci Apple Forum 27.1.2004
-
6. února 2001
-
30. listopadu 2014
Nový fotoaparát α7 II: první plnoformát s pětiosou optickou stabilizací obrazu na světě
-
8. září 2024
-
14. října 2024
-
22. října 2024
-
14. listopadu 2024