Macromedia FLASH 4 a hraní na klavír

Umožněte návštěvníkům vašich stránek zahrát si jejich oblíbenou písničku! V  dnešním díle se naučíme vytvořit jednoduchý klavír ve FLASH, který bude přehrávat zadané tóny buď pomocí stisknutí příslušných kláves anebo pomocí myši.

Tento příklad je založen na jednoduchém principu – každá klávesa na klavíru je v podstatě tlačítko, které směřuje na movie clip obsahující příslušný tón.

Vytvořte tedy novou scénu o velikosti 300 x 150 px (CTRL+M), Frame Rate nastavte na 20 snímků za vteřinu a barvu pozadí zvolte například šedou. V tuto chvíli si vytvoříme 5 movie clipů, ve kterých se budou nacházet jednotlivé tóny. Samozřejmě, že pokud budete chtít klavír o více klávesách, je třeba použít více tónu a k  tomu příslušný počet kláves, ale v tomto příkladu budeme vytvářet klavír o pěti klávesách. Naimportujte si do FLASH (CTRL+R) jednotlivé tóny, které se automaticky umístí do knihovny (CTRL+L).

Vytvořte nový symbol (F8 – Movie Clip) a pojmenuje jej "1". Tento symbol bude mít dva klíčové snímky. V prvním z nich bude pouze nadefinována akce (CTRL+F, záložka Actions) "Stop", aby se zvuk hned po natažení animace nespustil a v druhém snímku bude obsažen první zvuk (začneme třeba tím nejhlubším) – ten nastavíte pomocí kláves CTRL+F v záložce Sound, kde jej z  roletky vyberete a nastavíte Sync = Event (spouští se po dané akci) a Loops = 0 (nebude se opakovat).

Nyní se přepněte zpět do hlavní scény a přetáhněte z knihovny objekt "1" do scény a umístěte jej dle obrázku kousek vedle viditelné části scény. Klepněte na objekt pravým tlačítkem a zvolte Properties. V záložce Definition pojmenujte objekt Instance name=1.

Nyní je třeba vytvořit movie clip, který bude obsahovat druhý zvuk. V knihovně symbolů tedy klikněte pravým tlačítkem na symbol "1", z nabídky zvolte Duplicate a pojmenujte nový objekt "2" (ponecháte volbu Movie Clip). Klikněte na symbol "2" pravým tlačítkem a z nabídky zvolte Edit. V  editaci tohoto symbolu pouze změníte zvuk, který se přehrává v druhém snímku. Z roletkového menu vyberte zvuk číslo dvě a přepněte se zpět do hlavní scény. Z knihovny myší přetáhněte objekt "2" stejně jako předtím objekt "1" kousek mimo viditelnou scénu a pojmenujte tento objekt Instance name=2. Stejným postup jakým jsme vytvořili a umístili do scény objekt "2" použijte i na zbývající objekty, tedy 3, 4 a 5.

Když jsou všechny movie clipy obsahující zvuky hotové, je třeba vytvořit tlačítka – klávesy, pomocí nichž budeme zvuky přehrávat. Do stejné vrstvy jako jsme umísťovali objekty 1 až 5, nakreslete klávesu – obdélník s černým obrysem a bílou výplní. Je v podstatě jedno jaký bude mít tento obdélník rozměry, protože si jeho velikost můžeme ještě později upravit. Označte šipkou (A) tento objekt a uložte jej jako symbol (F8 – Button) a pojmenujte jej "klavesa". Další polohy tohoto tlačítka není třeba vyplňovat a proto se přepněte zpět do hlavní scény.

Nyní si objekt klávesa čtyřikrát duplikujte (CTRL+D) a umístěte vedle sebe tak, aby vznikl dojem klávesnice. Nad každou klávesu nyní ještě umístíme obdélník, který po stisku příslušné klávesy změní barvu a tím vyvolá optický dojem stisku klávesy. Vytvořte si tedy novou vrstvu a zamkněte vrstvu, ve které se nacházejí klávesy. Do této vrstvy nakreslete nad první klávesu obdélník, například o šedé barvě. Šipkou tento objekt označte, uložte jej jako Movie Clip a pojmenujte "tlacitko".

V editaci objektu "tlacitko" vložte do druhého a pátého snímku klíčový snímek. V prvním snímku se bude nacházet pouze akce "Stop" a v pátém snímku pouze akce "Go to and Stop (1)". Klíčová snímek na druhém snímku je zde umístěn z toho důvodu, aby mohl mít tento objekt na prvním snímku původní barvu klávesnice – tedy bílou a od druhého snímku již barvu šedou. Pro lepší polohování tohoto objektu nad klávesy zatím ovšem ponechte i v prvním snímku tento objekt v šedé barvě.

Přepněte se zpět do hlavní scény a vložte nyní nad každou klávesu objekt "tlacitko" a pojmenujte jej (Instance Name) dle umístění nad příslušnou klávesou názvy "t1" až "t5". Nyní se vraťte do editace symbolu "tlacitko" a objekt v prvním snímku přebarvěte pomocí kyblíku na bílou barvu.

V hlavní scéně opět zamkněte vrstvu, ve které se nacházejí objekty "tlacitko" a odemkněte vrstvu, ve které se nacházejí klávesy, protože právě jim na ní budeme přiřazovat důležité akce. Klikněte tedy pravým tlačítkem na objekt "klavesa" první zleva a zvolte z nabídky Properties (vlastnosti) – záložka Actions a vložte následující akce:

Dle definice na prvním řádku se akce spouští buď klepnutím na tlačítko myši anebo klávesou "c" (pozor na malá/velká písmena). Další tři řádky skriptu se odkazují na objekt "t1", který je umístěn nad prvním tlačítkem a přejdou s animací na jeho druhý snímek, čímž se klávesa zbarví do šedé barvy. Další řádky skriptu se odkazují na objekt "1", ve kterém je umístěn zvuk pro tuto klávesu a tím že animace přejde na druhý snímek tohoto objektu se příslušný zvuk spustí.

Při definování skriptu u dalších kláves postupujeme obdobně jako u první klávesy. Na prvním řádku se postupně odkazujeme na tlačítka "v", "b", "n" a "m". V dalších řádcích pak na objekty "t2" až "t5" a "2" až "5".

Tím je celá animace hotová a vy máte možnost si ji vyzkoušet a zároveň si přehrát nějakou jednoduchou skladbu. Při přehrávání jen dávejte pozor, jestli nemáte zapnutou klávesu "Caps Lock". Pokud máte zájem můžete si jako vždy stáhnout zdrojový soubor.