FLASH rychle a snadno 6.

Abychom mohli zdárně vytvořit již několikrát předesílanou flashovou hru, musíme si osvojit i znalost správy zvuků ve Flashi. Dnes se podíváme na třídu Sound – ukážeme si vkládání a ovládání zvuku v dokumentu pomocí názorné aplikace.

Dnes nahlédneme pod pokličku vyšší školy programování v action scriptu v rámci tvorby aplikace na dynamické měnění hlasitosti do Flash vloženého zvuku. Programování v action scriptu jsme se zatím věnovali poměrně málo, bohatě nám to však vynahradí dnešní lekce v níž shrneme doposud získané zkušenosti a rozšíříme je o několik dalších základních principů. Ačkoliv je Action Script jako celek podobný v řadě ohledů jiným programovacím jazykům, je možné, že některé programátorské postupy vám připadnou nesmyslné nebo zde nebudou dopodrobna vysvětleny, protože to naše základní pojetí Flashe zatím nevyžaduje (instanciace konstruktoru apod.).

Objekt Sound

Pokud chceme k jakémukoliv klíčovému snímku připojit zvuk z knihovny, není snazší volby než použití panelu Sound. Zde nejprve zvolíme zvuk, na výběr jsou ty v naší knihovně. Poté nastavíme má-li být zvuk nějak efektován, například přechodem z levého reproduktoru do pravého. U položky Sync jsou důležité 2 volby, Event a Stream. Ta první začne na rozdíl od té druhé přehrávat zvuk bez ohledu na další animace. Pokud tedy chceme dodat v rámci některé animace v našem flashovém filmu dialog, volbou Sync Stream ošetříme synchronizaci zvuku a obrazu.

Vytvoření globálního objektu Sound

Pokud ovšem potřebujeme zvuk dynamicky ovládat či efektovat, musíme použít následujícího postupu pro jeho vytvoření. Protože však již zabředáme do složitější podoby action scriptového programování, rozebereme si celý postup pro jistotu na úvod po menších sekvencích.

  1. Pomocí zvolení File -> Import vložíme do knihovny zvuk, s nímž budeme pracovat.
  2. Vytvoříme si na scéně symbol tlačítka.
  3. Vyvoláme panel Actions a vybereme naše tlačítko na scéně.
  4. Zvolíme Actions -> set variable.
  5. Do pole Variable zadáme jméno našeho objektu.
  6. Klikneme do pole Value a zvolíme Objects -> Sound -> new Sound.
  7. Zaškrtneme spodní políčko Expressions pro odstranění uvozovek.
  8. Smažte slovo target ze závorek vymezujících funkci new Sound.
  9. Bez určení cíle (targetu), movie klipu pro náš zvuk, vytváříme zvukový objekt jenž ovládá všechny zvuky na časové ose.

Připojení zvuku

K samotnému dynamickému vložení zvuku musíme už pouze dodržet tento postup, který lehce alternuje s vkládáním movie klipů na scénu.

  1. Dle předcházejícího návodu vytvoříme globální objekt Sound.
  2. Zvuku, který jsme si importovali do knihovny, přidělíme Linkage stejně jak jsme to dělali u movie klipů.
  3. Vybereme panel Actions u našeho tlačítka.
  4. Označíme kliknutím řádek kódu s příkazem new Sound a klikneme na něj, čímž se další příkaz za něj zařadí.
  5. Pomocí Actions -> evaluate začneme psát další příkaz.
  6. Do pole Expression vložíme jméno našeho zvukového objektu.
  7. Připojíme zvuk z knihovny pomocí Objects -> Sound -> attachSound.
  8. Parametr idName nahradíme identifikátorem našeho zvuku v uvozovkách.

Přehrání a zastavení zvuku

Abychom mohli náš zvuk i přehrát, použijeme metodu start. Jejími parametry jsou secondOffset a loops - označují od které sekundy zvuku má začít přehrávání a kolikrát má proběhnout, čili příkaz start(5,2); by zvolený zvuk přehrál od jeho páté vteřiny dvakrát po sobě bez jakéhokoliv přerušení.

  1. Navážeme na předchozí postup vložení zvuku a vybereme poslední řádek kódu psaný v rámci akcí našeho tlačítka.
  2. Pomocí Actions -> evaluate začneme psát další příkaz.
  3. Do pole Expression napíšeme jméno našeho zvukového objektu.
  4. Navolíme mu metodu start volbou Objects -> Sound -> start.
  5. Vybereme libovolné číselné parametry namísto secondOffset a loops a konečně si náš snímek spustíme a poslechneme.

Pro zastavení zvuku můžeme obdobným způsobem využít funkci Objects -> Sound -> stop, nebo zastavení všech přehrávaných zvuků díky základní akci stopAllSounds.

Úprava zvuků

Při použití objektu Sound můžeme plně kontrolovat jeho hlasitost a panning, tedy váhu zvuku na levý a pravý reproduktor. Toto umožňují metody setVolume a setPan. Metoda setVolume má jako parametr hodnotu 0 - 100, kde nula je ticho a 100 je nejvyšší hlasitost. Oproti tomu metoda setPan vyžaduje číslo mezi -100 a 100, poměry balancování jsou zde vůči nule zřejmé, což si můžeme vyzkoušet. Obě tyto metody se volají klasicky jako každá jiná metoda objektu:

zvuk.setVolume(50);
zvuk.setPan(-100);

Dynamické ovládání zvuku

Na závěr dnešních zvukových kouzel si ukážeme, jak vytvořit zvuk, jehož hlasitost budeme ovládat pomocí posuvného proužku na scéně. Celý postup si opět schématicky rozfázujeme, tentokrát se navíc nejprve budeme zabývat omezením pohybu našeho posuvníku hlasitosti díky drážce (podklad, po němž se smí objekt pohybovat, čili ve své nejsvrchnější a nejspodnější pozici je jako nastavení nejvyšší a nejnižší hlasitosti), poté generováním samotné hlasitosti díky metodě GlobaltoLocal a nakonec oboje spojíme v jeden celek. Protože neobvykle doplním tento článek o odkaz na zdrojový kód slibovaného ovládání zvuku, budeme pracovat s tím, že jej máte před sebou pro případné nejasnosti v systematice celého produktu - ale vše lze odvodit i z návodu a screenshotů.

  1. Vytvoříme movie klip do něhož umístíme obdélník vysoký 100 pixelů se středovým bodem na dolní hraně.
  2. Umístíme objekt na scénu a pojmenujeme drazka.
  3. Vytvoříme další movie klip s posuvníkem a zvolíme jeho editaci.
  4. Vytvoříme neviditelné tlačítko a vložíme jej do klipu posuvníku.
  5. Zvolíme pro tlačítko panel Actions.
  6. Vložíme akci on(press).
  7. Vložíme dále akci startDrag.
  8. Do pole Target zadáme this.
  9. Zaškrtneme políčka Expression, Lock mouse to center a Constrain to rectangle.
  10. Vyplníme pole:
    • L hodnotou root.drazka._x
    • R hodnotou root.drazka._x
    • T hodnotou root.drazka._y-100
    • B hodnotou root.drazka._y

    čímž jsme omezili levou a pravou stranu posuvníku na střed movie klipu drážky kdy vrch je omezen na 10 pixelů nad okraj drážky a spodek je spodní okraj drážky.

  11. Zvolte další událost on - release - a vložíme do ní akci stopDrag.
  12. Na hlavní scénu umístíme instanci posuvníku a pojmenujeme ji posuvnik.
  13. Abychom mohli získat souřadnice posuvníku a aplikovat je na nastavení hlasitosti v rozmezí 0-100, využijeme výšky drážky 100 pixelů a získáme tak relativní souřadnice posuvníku funkcí GlobaltoLocal, začneme otevřením panelu akcí u posuvníku.
  14. Zvolíme Actions -> onClipEvent.
  15. Vybereme volbu mouseMove.
  16. Vložíme Actions -> set variable.
  17. V poli Variable zvolíme jméno pro objekt, jenž bude uchovávat souřadnice x a y našeho posuvníku, bodový objekt.
  18. Pro pole Value použijeme Objects -> Object -> new Object.
  19. Opět navolíme Actions -> set variable.
  20. Do pole Variable vložíme jméno našeho bodového objektu a vlastnost y.
  21. Do pole Value zase zadáme this._y.
  22. Obdobně vložíme i nastavení souřadnice x a tím zajistíme vlastnosti bodového objektu dle posuvníku.
  23. Vložíme Actions -> evaluate.
  24. Do pole Expression zadáme cílovou absolutní cestu drážky.
  25. Požijeme Objects -> Movie Clip -> globaltoLocal.
  26. Jako parametr pro převod souřadnic zadáme jméno našeho bodového objektu.
  27. Importujeme do Flashe náš cílový zvuk.
  28. Vytvoříme tlačítko na hlavní scéně a podle výše uvedeného návodu mu přiřadíme po nakliknutí spuštění naší hudby, kdy globální objekt Sound pojmenujeme mojeHudba a "naši hudbu" zase vzorekHudby.
  29. Vybereme náš posuvník a jako poslední akci v rámci zvolené mouseMove absolutně polohovaně přiřadíme objektu mojeHudba hlasitost výrazem -1*mujBod.y je-li náš bodový objekt pojmenovaný mujBod. Protože souřadnice posuvníku počítáme v rozsahu -100 až 0, jsou po tomto vynásobení u naší drážky 100 až 0.

Nejnázornější bude pro Vás asi download tohoto zdrojového kódu, který jsem okořenil o jeden můj kratičký letní samplík, který můžete použít někde jako podklad či k běžnému poslechu. Příští pokračování seriálu o základech Flash zasvětím maskám, takže si opět na své přijdou i milovníci grafické stylizace.

Váš názor Další článek: Seminář: Windows v. Linux (živě)

Témata článku: , , , , , , , , , , , , ,