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
-
27. září 2024
-
30. září 2024
-
4. října 2024
-
9. října 2024
Go verze
Flash 4 - Hra na způsob šipek
Macromedia Flash tutorial
23. dubna 2001, 00.00 | Nejlepším způsobem, jak upoutat návštěvníka našich stránek než se "naloadují", je donutit ho něco dělat. Třeba si i hrát. A my si dnes uděláme jednoduchou hru, která má pouze 4 kB.
V tomto díle seriálu o Flashi si vytvoříme jednoduchou hru, kterou můžeme návštěvníky našich stránek např. zaujmout mezi tím, než se "naloaduje" obsah naší prezentace.
Výsledek bude vypadat asi takto (je to schválně tak malé, aby se to tady vešlo, takže se tímto omlouvám slabozrakým jedincům):
Plochu si upravíme na 200 x 200 px a podklad dáme jemný okr :-).
V knihovně symbolů si nejdříve vytvoříme "graphic" a nazveme ho "terč". Pomocí nástrojů "oval" a "line" si vyrobíme něco jako terč.
Dále si vytvoříme "movie clip", který nazveme "nůž". Do tohoto "movie clipu" si přetáhnutím z knihovny symbolů umístíme terč, který pomocí nástroje Inspector - Object umístíme přesně do středu. Tento terč se bude nacházet na prvním až 40. rámečku vrstvy "terč". Dále si vytvoříme další vrstvu, kterou si pojmenujeme "nůž". Umístíme se na první rámeček v této vrstvě a vytvoříme motion tween. Na rámečku č. 10 zvolíme insert keyframe a nůž přesuneme do místa, kde se nachází červené políčko terče, trochu ho zmenšíme, zkosíme a dodáme čárky, které budou znázorňovat jeho "zabodnutí". Do výsledné animace dodáme otáčení podle hodinových ručiček (clockwise), kdy hodnota otočení bude 1. Stejným způsobem budeme pokračovat dále až do políčka 40 a to tak, že každý "hod" nožem bude do jiné části terče a bude po dobu 10 políček. Na první políčko vrstvy "nůž" umístíme action script "stop" a stejně to uděláme na každém posledním políčku každého hodu. Nyní již terč v tomto "movie clipu" potřebovat nebudeme, takže celou vrstvu smažeme. Místo ní si vytvoříme novou vrstvu, kterou si pojmenujeme "text" a umístíme do ní, někde vpravo od nože, textové pole, které bude rovněž pojmenováno "text". Opět se přesuneme do vrstvy "nůž", kde na prvním políčku v této vrstvě umístíme (pod script "stop") script Set Variable: "text" = "" , což nám zajistí, že se po spuštění této animace hodu nožem textové pole "vymaže". Na každé poslední políčko každého hodu si umístíme tento script také, ovšem s tou změnou, že do uvozovek napíšeme větu typu: "trefili jste zelenou", "trefili jste červenou" , ... , to vše podle toho, do které části terče nůž přistál. Celá naše animační řada by měla vypadat asi takto:
Nyní si vytvoříme v knihovně symbolů 4 "buttony", které nazveme postupně, "zelená", "červená", "modrá" a "žlutá". Každé toto tlačítko upravíme pouze tak, že do kolonky "hit" dodáme takový tvar, jaký znázorňuje barva, podle které je tlačítko pojmenováno. Dále vytvoříme další "button", který nazveme "další hod". Grafika tohoto tlačítka závisí pouze na vás. Knihovna symbolů by tedy byla hotova. Teď už nám zbývá pouze tuto "hru" vhodně zkompletovat.
Přesuneme se do hlavní scény.
Vytvoříme si zde 4 vrstvy: "šipka a text", "linka", "terč" a "další hod". Nastavíme se na první rámeček vrstvy "šipka a text" a přetažením z knihovny symbolů zde umístíme "movie clip" "nůž", který vhodně zmenšíme tak, aby nám tak akorát seděl do scény. Tuto vrstvu "roztáhneme" na 10 rámečků. Dále se nastavíme do vrstvy "linka", kde uprostřed scény rukou nakreslíme oválnou linku, která nepravidelná a nebude na sebe navazovat. Tuto vrstvu také "roztáhneme" na 10 rámečků. Navíc z ní (pravý klik) uděláme "guide". Nyní vrstvu terč (pokud tomu již tak není) umístíme POD vrstvu "linka", čímž by se nám z ní automaticky měla udělat "guided". Nastavíme se na první rámeček a z knihovny symbolů zde přetáhneme terč. Do tohoto terče umístíme také přetažením z knihovny symbolů, jednotlivé "buttony" a to tak, aby každý "seděl" na svou barvu. Celou skupinu objektů dáme dohromady pomocí Ctrl+G. Z tohoto terče uděláme "motion tween", kdy na prvním rámečku této animace terče, bude ten nastaven na počátečním bodě oválné linky a na konci (10. rámečku) se bude nacházet na konci oválné linky. Flash sám nám zajistí, aby animace byla PO lince.
Terč (i s buttony) se nám tedy hýbe.
Nyní si do vrstvy "další hod" umístíme "button" "další hod".
Teď už zbývají pouze action scripty.
Nesmíme ale zapomenout dát "instance name" "movie clipu" "nůž" a to prozaicky "nuz".
Nastavíme se na první rámeček vrstvy terč a 2x klikneme na jeho horní část, tím si označíme pouze "button" "červená". Tento button v hlavní scéně oscriptujeme tímto scriptem:
On (Release)
Begin Tell Target ("/nuz")
Go to and Play (12)
End Tell Target
Go to and Stop (1)
Stejným způsobem dodáme scripty ostatním "buttonům" s tím rozdílem, že vždy sice "zavoláme" stejný clip "nuz", ale umístíme se vždy na jiný rámeček tohoto "movie clipu". (2, 12, 22, 32).
Na tlačítko "další hod" si umístíme také script a to:
On (Release)
Go to and Play (1)
Begin Tell Target ("/nuz")
Go to and Stop (1)
End Tell Target
End On
Celá animační řada v hlavní scéně bude vypadat takto:
A samotná hlavní scéna bude vypadat takto:
To je asi vše. Pro jistotu vám tady dávám na stáhnutí zdroják, který je ZDE.
Tato ukázka nemá sloužit (to je pro všechny rejpaly) jako grafický zázrak, šlo mi hlavně o funkčnost a o ukázku toho, jak vytvořit celkem zábavnou hru, která návštěvníky našich stránek zaujme a můžeme ji díky její velikosti použít např. jako součást preloaderu.
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
-
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ě
-
5. srpna 2024
Bubnový scanner na 4000dpi optické rozlišení + PC + software
-
8. září 2024
-
14. října 2024
-
5. listopadu 2024