PROJEKT 4
Elektronické haiku s trochou zábavy s mixováním zvuku Aria Danika
společně s Chrisem Normanem, autorem Geishy Moje rané zážitky a fascinace zvukovými hračkami a generováním hudby – původ myšlenky na vytváření hudby pomocí interaktivního návrhu rozhraní – sahá až k mému Aria Danika
studiu na Hypermedia Research Centre v Londýně. Toto nadšení mi zůstalo dodnes
je interaktivní designérka
a dovedlo mě k tomu, že jsem vytvořila několik sérií hravých zvukových aplikací ve
a vývojářka, senior moderátorka ve Flashkit.com a členka Hypermedia Research Centre v Londýně.
Flashi a Directoru. Žánr hudebních hraček se rozvíjel díky zkušenostem designérů a tvůrců video her, kteří se pokoušeli docílit interaktivního zvukového zážitku. Dokázali to tak, že vytvořili jednoduché rozhraní, které umožňuje uživateli manipulovat se zvukem, vytvářet rytmy a vniknout do hravé tvorby hudební kompozice. V knize Noise: A Political Economy of Music, University of Minnesota Pr., 1985, autor Jacques Attali předpovídal zlom v kulturní spotřebě hudby, přechod od poslouchání (konzumování) nahrávek směrem k vlastní kompozici. S rozvojem technologií se interaktivní hudba nepochybně bude rozvíjet od statických představení do nových forem, estetiky a společných víceuživatelských zkušeností.
Funguje to následovně: V tomto projektu je rozhraní tvořeno mřížkou, která se vymezuje políčka (objekty), které jsou uloženy v Library a ovládány pomocí skriptu. Uživatel může aktivovat zvuky, přehrát a několikrát opakovat vybraný hudební záznam a upravit si hlasitost během přehrávání. Základ vašeho klipu bude mít dvě základní části. První z nich představuje poměrně obsáhlý kód, který se spustí hned jakmile se animace načte, inicializuje veškeré vlastnosti vašeho nástroje a vykreslí vizuální soubory na plochu. Druhá část má na starosti uživatelské rozhraní, přehrává zvuky a pracuje s přehrávací hlavou a nastavením hlasitosti. Tady jsou základní kroky tohoto projektu: 1. Vytvoření základní mřížky za použití ActionScriptu.
Pro animaci mixující zvuk vytvoříme rozhraní a doplníme je o interaktivitu.
2. Tvorba dynamického mixovacího rozhraní a jeho umístění do středu plochy. 3. Dynamické propojení zvuků s rozhraním z knihovny pomocí odkazů na ID propojení. 4. Použití událostí animace (onPress()), jejích metod (crateEmptyMovieClip()) a metod objektu Sound (start()) k vytvoření interaktivního prostředí a ovladačů rozhraní, jako je přehrávací hlava a Sound Volume pro ovládání hlasitosti.
Výsledkem je interaktivně se tvořící a neustále se měnící hudební skladba.
54 PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku
Příprava k práci Pro tento projekt budete muset udělat následující: 1. Stáhněte a rozbalte si 04.zip na váš pevný disk vašeho počítače.
grafiku hry jako geisha na pozadí (background), vycházející slunce (risingsun) a text haiku (text).
2. Otevřete soundtoy_final.swf a podívejte se, jak bude výsledný projekt fungovat. Až skončíte, zavřete jej. Poznámka: Některé z nejlepších mixážních hraček nabízejí takovou abstrakci a jsou vybaveny natolik intuitivním rozhraním, že mohou být užívány bez instrukcí, což uživatele navnadí víc než holá technika, která by přebírala vizuální metafory z toho, co už uživatel zná (jako mixážní pulty, jukebox nebo přehrávač).
Vytvoření základní mřížky Než začnete přidávat ovládání zvuku, musíte vytvořit různé prvky rozhraní, které vám umožní spolupracovat s touto hudební hrou. Začneme vytvořením mřížky: šachovnice několika políček (buněk), které zastupují zvuky, které máte uložené v knihovně (Library). Poznámka: Abyste vytvořili tento projekt tak flexibilní, jak to jenom bude možné, budete muset budovat všechno (kromě statických obrázků) dynamicky. Toto vám umožní přidat více zvuků nebo změnit vzhled nástroje a aplikovat je velmi jednoduše na celý klip.
1. Začneme deklarací všech proměnných. Otevřete soubor soundtoy_ start.fla z adresáře 04, který jste si zkopírovali na svůj harddisk během přípravné práce. Časová osa hlavního klipu má následující vrstvy: background, text, risingsun a script. Vrstvu script budete používat k uložení akcí. Spodní tři vrstvy obsahují veškerou statickou
2. Klikněte na vrstvu script a otevřete panel Actions. 3. K deklaraci proměnných přidejte do snímku 1 tento skript. Pokud se vám nechce kód psát, můžete ho převzít ze souboru 04-01.txt ze složky 04\Code listings.
Výpis 4.1 onLoad = function(){ //konstanty _global.ROWS _global.COLUMNS
= 4; = 5;
PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku 55 _global.BOXWIDTH _global.BOXHEIGHT _global.DEFAULTBOXALPHA _global.SPEED //proměnné var x,y var soundNum
= = = =
100; 40; 30; 5;
:Number = 0; :Number = 0;
}
Následující obrázek je ukázkou, jak by váš kód měl v tomto okamžiku vypadat.
Máte tu rozepsané inicializační funkce, abyste mohli váš projekt budovat dynamicky. Pokud je spojíte s metodou onLoad animace, můžete si být jisti, že se konstrukce provede v prvním snímku souboru s příponou .swf a postup je pro uživatele transparentní. Následně vložíte proměnné, které definují parametry mřížky jako šířku, výšku, hodnotu průhlednosti alpha a rychlost pohybu přehrávací hlavy. Uvědomte si, že tyto hodnoty jsou konstantní a nemohou být měněny. _global.ROWS _global.COLUMNS _global.BOXWIDTH _global.BOXHEIGHT _global.DEFAULTBOXALPHA _global.SPEED
= = = = = =
4; 5; 100; 40; 30; 5;
Díky definování těchto proměnných jako globální, budou tyto hodnoty přístupné každé časové ose ve vaší animaci a nemusíte používat volání s uvedením cesty typu _root nebo _parent. var x,y var soundNum
:Number = 0; :Number = 0;
Tyto tři proměnné jsou definovány jako typ Number, který zabrání, aby mohly být naplněny jiným typem hodnot (pokud by se tak stalo, oznámí se chyba). 4. Svou práci si uložte. Poznámka: Můžete také zkontrolovat syntax vašeho skriptu na této ploše, jak následně vidíte na přiloženém vzoru, abyste se ujistili, že tam nejsou chyby. Stačí kliknout na tlačítko Check Syntax v panelu Actions. Je to vhodná zkouška vašeho movie a kontrola kódu během rozvíjejícího se procesu.
56 PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku
Tvorba mixovacího rozhraní Pokud máte definované parametry mřížky (šířka, výška, počet sloupců a řádků), můžete nyní mřížku pomocí ActionScriptu vytvořit. K tomu potřebujete připojit instance boxMC, který je předpřipraven v Library, umístit je a vyrovnat na ploše. Dále je zapotřebí přiřadit animaci boxMC identifikátor propojení (Linkage ID) tak, abyste se k tomuto objektu dostali pomocí ActionScriptu. 1. Otevřete knihovnu – Library (Ctrl+L).
2. Označte animaci boxMC. Klikněte pravým tlačítkem a vyberte příkaz Linkage. 3. V okně Linkage Properties zvolte Export for ActionScript. Identifikátor boxMC se vloží automaticky.
PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku 57 Klikněte na tlačítko OK a okno Linkage Properties se zavře. 4. Klikněte na první snímek vrstvy script a vložte následující skript hned za proměnnou soundNum a před uzavírací složenou závorku }:
Výpis 4.2 //vytvoření mřížky createEmptyMovieClip("movieGrid", 1); //nastavení hlasitosti movieGrid.soundVolume = 100; movieGrid.gridColumnCount = 0; //přidání jednotlivých políček //nastavení šířky a výšky for(x=0;x
Následující obrázek ukazuje, jak by měl v tomto okamžiku váš kód vypadat.
Tady jste si vytvořili kontejner animace se jménem movieGrid, takže teď můžete lépe určovat, kde se vaše dynamicky generovaná mřížka má na ploše objevit. Dále jsme nastavili počáteční hlasitost soundVolume na 100 a počáteční hodnotu počtu sloupců mřížky gridColumnCount na 0. Vložený cyklus nastaví vaši mřížku dynamicky, funguje nějak podobně jako psací stroj. Přidá nové políčko k pravé straně předchozí buňky, dokud nedosáhne počtu definovanému proměnnou COLUMNS (byla nastavena již dříve), a pak se přesune na další řadu a bude pokračovat, dokud nebude celá mřížka zkonstruována.
58 PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku 5. Vyzkoušejte základ své animace pomocí Ctrl+Enter. Mřížka je zatím vyrovnána k levému hornímu rohu animace, což není zrovna ideální, ale zatím s tím nic neuděláme. Dříve, než se pustíme do umisťování, přidáme ještě zvuky.
2. Zvolte první položku ARIA_S1.MP3. 6. Svou práci si určitě uložte.
3. Kliknutím pravého tlačítka otevřete kontextovou nabídku a zvolte příkaz Linkage. 4. V okně Linkage Properties vyberte Export pro ActionScript.
Přidávání zvuků Teď, když máme vytvořenou mřížku, můžete přidat zvuky (všech 20 hodnot) z knihovny do každé buňky vytvořené mřížky. Předtím než začnete psát (nebo kopírovat) kód, je potřeba každému zvuku přidělit identifikátor propojení – Linkage ID. 1. Otevřete adresář sounds v Library.
5. Do pole Identifier napište: sound0.
PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku 59 6. Kroky 3 – 5 opakujte pro zbývajících 19 zvuků v knihovně, přičemž ARIA_S2.MP3 má identifikátor sound1, ARIA_S3.MP3 má identifikátor sound2 a tak dále.
//přidání políček a nastavení jejich šířky a výšky for(x=0;x
7. Zvolte vrstvu script (hlavní animace). Klikněte na snímek 1. 8. Hned za kód movieGrid a před poslední } vložte tento kód: Výpis 4.3 //přidání zvuků movieGrid[boxName].sound = new Sound(); movieGrid[boxName].soundNum = soundNum; movieGrid[boxName].sound.attachSound("sound"+ ¯ soundNum); soundNum++;
//přidání zvuků movieGrid[boxName].sound = new Sound(); movieGrid[boxName].soundNum = soundNum; movieGrid[boxName].sound.attachSound(“sound”+ ¯ soundNum); soundNum++; } }
Vaše akce pro tento snímek budou nyní vypadat takto: onLoad = function(){ //konstanty _global.ROWS = 4; _global.COLUMNS = 5; _global.BOXWIDTH = 100; _global.BOXHEIGHT = 40; _global.DEFAULTBOXALPHA = 30; _global.SPEED = 5; //proměnné var x,y :Number = 0; var soundNum :Number = 0; //vytvoření mřížky createEmptyMovieClip(“movieGrid”, 1); //nastavení hlasitosti movieGrid.soundVolume = 100; movieGrid.gridColumnCount = 0;
}
V každém průchodu cyklem bude vytvořena instance boxMC animačního klipu (z knihovny animace) jako jeden z prvků mřížky movieGrid, umístěna na plochu a bude jí dáno jméno symbolu a označení podle její řady a sloupce. Poté, co bude instance políčka umístěna na ploše, vložíte do něj nový zvukový objekt (sound) a pomocí metody attachSound() mu přiřadíte jeden ze zvuků z knihovny. (Tyto zvuky jsme v předchozím pojmenovali sound0 – sound19.) Když používáte objekty sound, nemusíte přetahovat zvuky z knihovny na plochu a můžete využít metody a vlastnosti objektu sound k manipulaci s vašimi zvuky.
60 PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku projekt si vytvoříte vlastní klip přehrávací hlavy, tlačítko PLAY/STOP, a ovladač hlasitosti. Než začnete připravovat každý z těchto prvků, budete potřebovat přidat nějaké akce do boxMC, které by dokázaly přehrát přiřazený zvuk a adekvátně přizpůsobit transparentnost (vlastnost _alpha) jednotlivých buněk mřížky. 1. Klikněte dvojitě na klip boxMC v Library, abyste se dostali do editovacího módu symbolu. Instance symbolu BoxMC má přiřazeno jméno boxLight (pokud byste chtěli využívat rad – tlačítko Show Code Hint – bylo by třeba použít název s koncovkou _mc).
Nakonec zvětšíte o 1 proměnnou soundNum (kterou jsme inicializovali na začátku skriptu a která slouží jako čítač zvuků), takže zvuky se přidávají v pořadí dle čísel. Zvuky budou do mřížky vloženy dle následujícího schematu: 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
9. Svou práci si uložte.
2. Ve vrstvě script klikněte na snímek 1. 3. Vložte tento kratičký skript:
Skriptování hudebních políček Nyní se můžete soustředit na přidávání prvků rozhraní, které uživateli umožní zacházet se zvukovými políčky a mixovat zvuky. Pro tento
Výpis 4.4 var activated:Boolean = false; boxLight._alpha = 0;
PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku 61 Skript nastaví proměnnou activated na false a vlastnost _alpha klipu boxLight na 0 (úplná průhlednost). Proměnná activated je definována jako booleovský (logický) typ. 4. Za poslední příkaz skriptu vložte následující kód:
Výpis 4.5 onRelease = function () { if(activated==false){ activated = true; boxLight._alpha = DEFAULTBOXALPHA; if(_parent.playButton.isPlaying == false) { sound.start(); } } else { sound.stop("sound"+soundNum); activated = false; boxLight._alpha = 0; } }
Funkce onRelease() nastavuje vlastnosti klipu boxMC, když je aktivován (pokud na něm uživatel klikne), i když aktivován není (activated = false). Jakmile uživatel klikne na políčko, pak se průhlednost _alpha klipu boxLight nastaví na DEFAULTBOXALPHA (který má hodnotu 30) a zvuk začne hrát. Pokud má proměnná activated hodnotu true, pak se provede příkaz sound.stop(„sound“+soundNum) – to umožňuje uživateli kdykoliv během přehrávání kliknout na již aktivní okénko a zvuk tím vypnout.
V pátém kroku dokončíte kód pro boxMC skriptováním poslední části, kterou je postupné zprůhledňování – „blednutí“ políčka – snižování hodnoty _alpha. 5. Za tyto tři řádky boxLight._alpha = 0; } }
přidejte následující kód:
Výpis 4.6 onEnterFrame = function() { if(activated == true && boxLight._alpha > ¯ DEFAULTBOXALPHA) { boxLight._alpha--; } }
Funkce onEnterFrame() způsobuje blednutí barvy políčka pokud jsou splněny dvě podmínky: activated == true AND boxLigt._alpha > DEFAULTBOXALPHA
tedy: pokud je políčko aktivní a současně průhlednost _alpha má hodnotu vyšší než DEFAULTBOXALPHA (tj. 30). 6. Svou práci si uložte.
Skriptování přehrávací hlavy Tak jak jste si předtím v této kapitole vytvořili dynamickou mřížku (část Tvorba rozhraní Mixer), opět použijete ActionScript k dynamickému připojení hrací hlavy (playhead) tak, že bude vždy umístěna ve vztahu k proměně definované velikosti mřížky.
62 PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku Začnete s movie clipem playHead, který se skládá z horní šipky (grafika), střední lišty (movie clip bar) a spodní šipky (movie clip knob). Vytvoření správného rozměru lišty tak, aby odpovídala mřížce, je skutečnou výzvou. Dosáhnete toho tak, že budete měnit velikost lišty na výšku kontejneru moiveGrid a spodní šipku umístíte pod ni. 1. Dvojitě klikněte na movie clip playHead v knihovně a vstupte do editačního módu symbolu.
6. Jděte zpět do hlavní časové osy, klepněte na snímek 1 vrstvy script. 7. Za tyto tři řádky soundNum++; } }
vložte skript:
Výpis 4.7 //vytvořeni Playhead a umístěni na ploše movieGrid.attachMovie("playHead","playHead",10000); movieGrid.playHead.bar._height = movieGrid._height; movieGrid.playHead.knob._y = movieGrid._height; movieGrid.playHead._x -= BOXWIDTH/COLUMNS;
Tento skript kontroluje výšku movie clipu movieGrid a podle hodnoty přizpůsobuje movie clip bar a umísťuje knob na spodek movieGrid. 8. Svou práci si uložte.
Skriptování tlačítek PLAY a STOP
2. Na ploše klikněte na klip knob. Pomocí panelu vlastností (Properties) mu přidělte název instance knob. 3. Na ploše klikněte na movie clip bar. Přidělte mu jméno instance bar. 4. Klikněte pravým tlačítkem na movie clip playHead v knihovně a zvolte Linkage. 5. Označte volbu Export for ActionScript. Identifikační jméno playHead se vloží automaticky.
Abyste mohli playHead spustit, potřebujete k ní mít jako uživatel přístup. K tomu slouží tlačítko PLAY/STOP. Pro tlačítko použijete jediný objekt a zapíšete pro něj skript tak, aby tlačítko mělo několikerou funkčnost. K tomu budete muset udělat následující: • Vypnout všechny hrající zvuky a pak přehrát sekvenci.
• • •
Umožnit hrací hlavě pohyb. Vypnout všechny zvuky. Přestavit hrací hlavu do její původní pozice.
PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku 63 Poznámka: Místo toho, abyste vytvářeli dvě tlačítka Stop a Play, použijete dvousnímkový movie clip nazvaný playButton. Ten vám umožní dynamicky spojit a umístit movie clip na plochu z knihovny pomocí metody attachMovie().
1. V knihovně zvolte movie clip playButton. Pravým kliknutím zvolte Linkage. 2. V panelu Linkage Properties zvolte Export for ActionScript. Název movie clipu, playButton, je automaticky vložen jako identifikátor propojení.
Časová osa tohoto movie clipu má tři vrstvy: buton, stop a scprit. Vrstva stop obsahuje movie clip stopSymbol, který je navrchu tlačítka. Pokud je stopSymbol viditelný (visibility = true), pak je tlačítko tlačítkem Stop. Pokud stopSymbol viditelný není (visibitity = false), tlačítko se stává tlačítkem Play. 3. Dvojitě klikněte na movie clip playButton, čímž pro tento movie clip otevřete editovací mód.
4. Jděte zpátky do snímku 1 vrstvy script a přidejte kód, který je uveden jako Výpis 4.8. Své akce si uložíte právě do vrstvy script.
64 PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku Výpis 4.8 var z:Number = 0; //skript pro tlačítko stopSymbol._visible = false; isPlaying = false;
Tady si nastavíte proměnnou z na 0, oborem této proměnné je tento movie clip. Pak nastavíte proměnnou isPlaying na false, ta sděluje movie, zda bylo nebo nebylo zmáčknuto tlačítko Play, a dále nastavíte viditelnost (_visible) stopSymbol na false.
Přehrávací hlava se bude pohybovat tak dlouho, dokud _x hodnota její pozice bude menší než BOXWIDTH*COLUMNS (úplně vpravo v rohu mřížky). Jinak (else) bude přehrávací hlava resetována do původní pozice (playHead_x = 0). 6. Tento kód přidejte k funkci movePlayhead():
Výpis 4.10 //kontrola pozice, přehrání zvuku a zesvětlení buněk if(Math.floor(_parent.playHead._x/BOXWIDTH) == ¯ _parent.gridColumnCount) { if(_parent.gridColumnCount < COLUMNS) {
5. Za poslední příkaz předchozího skriptu vložte následující kód:
Výpis 4.9
trace(_parent.gridColumnCount);
//přesun hlavy function movePlayhead() {
for(z=0;z
if(isPlaying == true) { if(_parent.playHead._x < BOXWIDTH*COLUMNS) { _parent.playHead._x += SPEED; } else { _parent.playHead._x = 0; _parent.gridColumnCount = 0; } }
Funkce movePlayhead() ovládá pohyby přehrávací hlavy po ose X. První podmínka se vztahuje k tomu, když isPlaying == true. Pokud tato podmínka platí, může se přehrávací hlava pohybovat doprava s tím, že přírůstek, o který se posune, je definován proměnnou speed. Pokud je hodnota podmínky false, dojde ke skoku zpět do vyčkávací pozice, vlevo od movieGrid.
} } }
Tento kód přiřazuje “boxMC”+z+”_”+_parent.gridColumnCount proměnné boxName, což vede jednak k jednoduššímu volání a také umožní Flash playeru vyhodnocovat výraz hodnotu pouze
PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku 65 jednou. Tady skript kontroluje pozici přehrávací hlavy a jestliže je parent[boxName].activated == true, pak se spustí zvuky, nastaví se hlasitost na hodnotu _parent.soundVolume (která byla definována v hlavní časové ose) a nastaví vlastnost _alpha v boxLight na 100. 7. Dále vložte následující skript:
Výpis 4.11 onRelease = function() { stopAllSounds(); if (isPlaying==false) { movieGrid.playHead._x=0; isPlaying = true; stopSymbol._visible = true; playSounds = setInterval (movePlayhead, 60); } else { isPlaying = false; stopSymbol._visible = false; clearInterval(playSounds); _parent.playHead._x = 0-BOXWIDTH/COLUMNS; _parent.gridColumnCount = 0; } }
Pokud je tlačítko zmáčknuto, všem zvukům je dán příkaz stop, protože přehrávání zvuků bude nyní závislé na přehrávací hlavě. Jestliže hlava není zrovna v pohybu (isPlaying==false), stačí zmáčknou tlačítko a hlava skočí na začátek mřížky, čímž naznačí, že je aktivní, a spustí se její pohyb. Nastavení vlastnosti _visible objektu stopSymbol je pro uživatele znamením, že když podruhé zmáčknou tlačítko, přehrávání se zastaví.
Aby se časová osa mohla pohybovat nezávisle na snímkové frekvenci klipu, využívá se funkce setInterval – ta volá právě vytvořenou funkci movePlayhead() každých 60 milisekund (nebo-li asi 16krát za sekundu). Zvýšením této hodnoty se bude hlava pohybovat pomaleji. Toto volání setInterval je přiřazeno proměnné (playSounds), a může tedy být zastaveno, pokud uživatel zmáčkne tlačítko stop (clearInterval(playSounds)); jinak pořád poběží dál. Pokud uživatel znovu zmáčknul tlačítko, stopSymbol se zneviditelní, hlava skočí zpátky do své odpočívací pozice a funkčnost tlačítka playButton se vrátí k nastavení play. Hodnota gridColumnCount bude také vrácena na hodnotu 0, protože se hlava už nepohybuje. Současně se provede i umístění tlačítka playButton na plochu a jeho zarovnání. 8. Vraťte se na hlavní časovou osu (Scene 1). Ve vrstvě script klikněte na snímek 1. 9. Za příkaz movieGrid.playHead._x -= BOXWIDTH/COLUMNS vložte následující skript:
Výpis 4.12 //vytvoření a umístění tlačítka movieGrid.attachMovie("playButton","playButton", ¯ 20000); movieGrid.playButton._x = movieGrid._width ¯ (BOXWIDTH+movieGrid.playButton._width/2); movieGrid.playButton._y = movieGrid._height + ¯ BOXHEIGHT;
Tady umístíte playButton dynamicky na plochu přidáním instance movie clipu playButton k movie klipu movieGrid a nastavíte jeho umístění pomocí vlastnosti _x a _y podle velikosti movieGrid:
66 PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku playButton._x = movieGrid._width - (BOXWIDTH+movieGrid. ¯ playButton._width/2)
Výpis 4.13
a
var btnLoc:Number = 0;
playButton._y = movieGrid._height + BOXHEIGHT
10. Svou práci si uložte.
Přidání ovladače pro kontrolu hlasitosti Ovladač – táhlo – pro kontrolu hlasitosti je posledním prvkem rozhraní, který umožní uživateli lepší ovládání objektů zvuku a jejich příslušenství. Pro dynamické umístění této animace na plochu použijeme ActionScript, ale předtím jej musíte sestavit. 1. Klikněte pravým tlačítkem na movie clip volumeSlider v knihovně. Zvolte Linkage.
2. V panelu Linkage Properties zvolte Export for ActionScript. Identifikátor pro Linkage ID volumeSlider je vložen automaticky. 3. Jděte na vrstvu script. Klikněte na snímek 1. 4. Do panelu Actions vložte následující skript:
//pokud je kulička stisknuta, umožňuje taženi ve //vodorovném směru volume_btn.onPress = function() { volume_btn.startDrag(true,0,0,300,0); } //je-li kulička uvolněna, ukončí se taženi //a nastaví se odpovídající hlasitost zvuku volume_btn.onRelease = volume_btn.onReleaseOutside = ¯ function() { volume_btn.stopDrag(); btnLoc = Math.floor(volume_btn._x/3); _parent.soundVolume = btnLoc; for(x=0;x
Za prvé jste si definovali jméno proměnné btnLoc (typ Number). Tato lokální proměnná je vytvořena pro zachování pozice kuličky – tlačítka volume_btn – na liště volumeSlider. volume_btn.onPress je metoda tlačítka, kterou uživatel uvede
do chodu zmáčknutím tlačítka, které vypadá jako dřevěná kulička. startDrag je metoda tlačítka, které se předává 5 parametrů:
- true, který říká funkci, že přetahování bude omezeno (lepší, než aby mohl uživatel přetahovat tlačítko kamkoli na plochu)
PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku 67 - a další čtyři hodnoty definující toto omezení (left, top, right a bottom, tedy omezení zleva, shora, zprava a zdola). left a right jsou okraje lišty táhla. onRelease a onReleaseOutside jsou dvě další metody tlačítka,
které jsou vnořeny, protože by měly mít stejnou funkčnost, když bude tlačítko uvolněno. Metoda stopDrag() zastaví tlačítko a proměnné btnLoc bude přiřazena aktuální pozice tlačítka na liště děleno třemi (lišta je 300 pixelů dlouhá a vy chcete hodnotu hlasitosti mezi 0 a 100). Hodnota soundVolume bude nastaven na nově zadanou hodnotu a pak se v cyklu nastaví hlasitost každého okénka mřížky pomocí metody setVolume objektu sound. 5. Vraťte se do hlavního klipu (Scene 1). Klikněte na snímek 1 (ve vrstvě skript) a vložte tento skript, čímž umístíte ovladač hlasitosti na plochu:
Výpis 4.14 //vytvoření a umístění ovladače hlasitosti movieGrid.attachMovie("volumeSlider","volumeSlider", ¯ 30000); movieGrid.volumeSlider._x = BOXWIDTH - (BOXWIDTH/ ¯ COLUMNS)/COLUMNS; movieGrid.volumeSlider._y -= BOXHEIGHT/2;
Tady přidáváte instanci movie clipu volumeSlider k animaci movieGrid a zarovnáváte ji ke středu horního okraje instance movieGrid. 6. Svou práci si uložte.
Všechno dáme dohromady Jakmile máte všechny elementy spolu v instanci movieGrid, můžete celek vyrovnat ve svém movie na střed. 1. Klikněte na snímek 1 (vrstvy script) v hlavní animaci. 2. Za předchozí skript vložte následující:
Výpis 4.15 //umistěni všech prvků movieGrid._x = ((Stage.width/2) ¯ (movieGrid._width/2))+(BOXWIDTH/COLUMNS)/COLUMNS; movieGrid._y = ((Stage.height/2) ¯ (movieGrid._height/2))+BOXHEIGHT/2;
Tady jste si nastavili souřadnice – vlastnosti _x a _y instance movieGrid tak, že je nyní vycentrovaná. Uvedené hodnoty flexibilně závisejí na rozměrech mřížky (na jejím počtu sloupců, columns, i řádků, rows). Obrázek na následující stránce vám ukazuje, jak v tomto místě vypadá celý skript.
68 PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku 3. Vyzkoušejte klip a spusťte nějaké zvuky; klikněte na okénko a poté znovu, abyste volbu zrušili. Jestliže jste s vaším nastavením spokojeni, klikněte na tlačítko Play a vychutnejte si svou kompozici.
4. Svou práci si uložte.
PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku 69
Nyní zkuste toto Doteď jste si vytvořili pěkný kus kódu, který se spustí, jakmile se klip stáhne, inicializuje vlastnosti veškerých součástí vašeho nástroje a zobrazí jeho vizuální podobu. Také jste se naučili ovládat uživatelské rozhraní a přehrávat zvuky. Tady vám nabízím další nápady jak zužitkovat dovednosti, které jste právě získali, i jiným způsobem: • Když budou vaše „zvukové hračky“ složitější a budete užívat více zvukových cyklů, hodilo by se vám použít preloader, nebo optimalizovat cykly tak, abyste zmenšili velikost souboru. Můžete také experimentovat s použitím metod v objektu Sound, jako jsou getBytesTotal() a getBytesLoaded() k načtení vašich zvuků odděleně od zbytku animace.
•
Můžete také nahrát zvuky z externího zdroje (pomocí metody loadSound() z objektu Sound). Umožní vám to jednak upravovat a aktualizovat MP3 ukázky zvuků mimo tvůrčí prostředí Flashe, a také značně snížit počáteční velikost vaší animace.
•
Vytvořte si rozhraní, které umožní uživateli vstup z více než jednoho přehrávače. Každý přehrávač může mít přístup do mřížky, která přehrává jednotlivé sekvence, a účastní se tak s ostatními přehrávači na kompozici komplexního společného hudebního představení.
