Dnes si připravíme náš přehrávač pro začlenění do vytvořené prezentace. Ukážeme si jednoduchý způsob čtení ID3 tagů, které mohou být součástí mp3 souborů, dále přidáme ovladač hlasitosti a nakonec upravíme barevnost použitých tlačítek.
ID3 tagy
Každý, kdo poslouchá hudbu na počítači, se s tímto výrazem již určitě setkal. Jedná se o souhrnné informace k souboru, který právě posloucháme. Tagy mohou nést informace o názvu skladby, alba, autorovi, roku vydání, žánru atd.
Pokud do Flashe načteme mp3 soubor, můžeme si tyto informace přečíst a podle potřeby je dále využít. Flash podporuje čtení tagů v těchto verzích: 1.0,1.1, 2.0, 2.3 a 2.4.
Čtení tagů ve Flashi
Tagy je možné přečíst ze zvukových objektů, kterým byl mp3 soubor přiřazen pomocí příkazů zvuk.attachSound(); - přiřazení z knihovny a nebo pomocí zvuk.loadSound(); - načtení externího zvuku.
Nejdříve je nutné nechat Flash načíst ID3 tagy. Protože se jejich umístění liší podle verze ( buď na začátku mp3 souboru nebo na konci) je nutné vyčkat kompletního načtení tagů.
Abychom to ale neměli tak jednoduché, v případě že máme tag ve verzi 1.0, tak například k názvu skladby přistoupíme pomocí zvuk.id3.songname; Pokud ale máme tag ve verzi 2.0, ke stejné vlastnosti přistoupíme pomocí zvuk.id3.TIT2; Pokud nemáme jistotu o verzi tagů v mp3 souborech, je lepší přistupovat k vlastnostem tagů, jako by se jednalo o 1.0 verzi.
Pokud totiž nejsou data ve verzi 1.0 dostupná a ve verzi 2.0 ano, automaticky dojde k jejich překopírování do vlastností verze 1.0. V případě, že chceme zjistit vlastnost tagu 2.0 verze a je k dispozici pouze 1.0 verze, nedostaneme žádnou hodnotu, lépe řečeno, výsledkem bude hodnota „undefined“.
Úprava přehrávače
Otevřeme si zdrojový soubor z minulého dílu, v knihovně najdeme MC „přehrávač“ který si otevřeme. Budeme chtít vložit textové pole, které bude zobrazovat autora a název skladby. Posuneme proto MC ukazatele stavu načtení skladby trochu výše a do prostoru mezi ním a tlačítky vložíme dynamické textové pole.
Pole pojmenujeme „info“, zvolíme velikost písma „10“ a barvu černou.
Dále si vytvoříme objekt, který bude sloužit jako ovladač hlasitosti. Nakreslíme si nalevo od tlačítek trojúhelník „nastojato“, který bude sloužit jako pozadí ovladače. Klikneme na něj pravým tlačítkem myši a převedeme jej na MC, který pojmenujeme „volume“.
Nezapomeneme určit, že registrační bod MC bude v levém horním rohu.
Dvojklikem na nový MC jej otevřeme, vybereme nakreslený trojúhelník a na panelu vlastností upravíme jeho výšku na 50px.
Dále si vytvoříme posuvník. V horní části trojúhelníku nakreslíme menší obdélník, který také převedeme na MC.
Zde opět určíme, že registrační bod bude v levém horním rohu klipu. Abychom mohli sledovat hodnotu hlasitosti, vytvoříme ve spodní části dynamické textové pole s názvem „vol“, velikost písma zvolíme „8“ a barvu určíme opět černou.
Úprava AS
Nyní nás čeká dopsat pár řádků skriptu, především pro ovládání hlasitosti. V MC „volume“ zvolíme obdélník, který slouží jako posuvník a otevřeme si panel akcí. Zde napíšeme tyto řádky:
on (press) {
this.startDrag(false, 0, 0, 0, 50);
dragging = true;
}
on (release) {
stopDrag();
dragging = false;
}
onClipEvent (mouseMove) {
if (dragging) {
hlasitost = 100-(this._y*2);
this._parent._parent.song.setVolume(hlasitost);
this._parent.vol.text = hlasitost + "%";
}
}
Nejprve jsme určili, že po kliknutí na objekt jej začneme přetahovat. Přetahování ale umožníme jen v určitých mezích, které zajistíme pomocí hodnot v závorce. My jsme určili, že s objektem můžeme pohybovat pouze dolů a maximálně do vzdálenosti 50px.
Po uvolnění myši chceme přestat přetahovat a pomocí proměnné „dragging“ určíme konec tahání objektu. Následuje kód, který se provádí, pokud je kurzor myši v pohybu. My zde ještě navíc testujeme, zdali opravdu přetahujeme objekt (pomocí proměnné dragging) a pokud ano, určíme hodnotu hlasitosti podle aktuální pozice objektu. Protože jej přetahujeme pouze do 50px, musíme násobit jeho aktuální pozici 2. Pak už jen napíšeme aktuální údaj o hlasitosti do připraveného pole „vol“ a máme ovládání hotové.
Vypsání ID3 tagů
Vrátíme se zpět do MC „přehrávač“ a otevřeme si panel akcí pro první snímek časové osy, ve kterém již máme několik řádků skriptu. Zde přidáme funkci, která přečte a zobrazí vybrané údaje o skladbě do připraveného textového pole.
Najdeme si funkci startMusic, která by měla začínat na 9. řádku a vložíme do ní kód pro čtení tagů podle následujícího příkladu:
//funkce pro přehrání skladby
startMusic = function (music) {
song = new Sound();
song.onID3 = function() {
if (song.id3.artist != undefined) {
info.text = song.id3.artist+" - ";
} else {
info.text = "Neznámý autor - ";
}
if (song.id3.songname != undefined) {
info.text = info.text+song.id3.songname;
} else {
info.text = info.text+"Neznámý titul";
}
};
song.loadSound(music, true);
pozice = 0;
paused = false;
};
Přibyla nám zde funkce, která se provede po načtení tagů (onID3), ve které zjišťujeme přítomnost údajů o autorovi a názvu skladby. Pokud tyto údaje chybí, zobrazíme text o neznámém autorovi a případně i skladbě. Použili jsme čtení vlastností tagů verze 1.0, protože ukázkové soubory nemají tagy ve vyšší verzi.
Pozor, je nutné umístit příkaz loadSound() až za událost onID3, jinak se texty z tagů nebudou zobrazovat!
Seznam dalších podporovaných vlastností tagů nalezneme zde. Jejich zobrazení je velmi jednoduché, pouze musíme dbát na to, abychom nezapomněli umístit funkci pro čtení tagů do události onID3, která nám detekuje úspěšné načtení.
Změna barvy tlačítek
V příštím díle budeme vkládat dnešní přehrávač společně s rss čtečkou do naší prezentační stránky, proto si ještě dnes změníme barvu tlačítek, abychom nerušili zelenou barvou modrý nádech celé strany.
Nejedná se nijak složitý postup, ale uvádím jej zde proto, že někdy potřebujeme získat barvu objektu, ale pokud se jedná o různé přechodové výplně, nemůžeme postupovat s jednoduchým „kapátkem“, které nám nabírá barvy ze scény.
Dojklikem na některé z tlačítek jej otevřeme a klikneme na zelenou část výplně. Otevřeme si panel vlastností a můžeme vidět, jak je u kyblíku zelená přechodová výplň. Pokud ale otevřeme panel barev „Color Mixer“, nebudeme ji zde mít. Kdybychom teď zvolili na panelu barev přechodovou radiální výplň, změní se nám barva na tlačítku na poslední použitou výplň.
To je sice hezké, ale pokud chceme změnit jen barvu výplně tlačítka a přitom zachovat rozložení barevného přechodu, jsme na špatné cestě.
Nesmíme tedy na panelu barev cokoliv měnit. Pouze na panelu vlastností klikneme na výplň a při otevřené barevné paletě klikneme buď do okna, kde se nám zobrazují vybrané barvy a nebo někam na okraj barevné palety. Tímto krokem se nám vloží barevný přechod i do panelu barev, kde už můžeme jednoduše změnit zelené odstíny na modré.
Ukázka dnešní lekce zde.
Zdrojový soubor ukázky ke stažení zde.
