Začínáme s Flash MX 2004: 22. díl – MP3 přehrávač, druhá část

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.

Klepněte pro větší obrázek

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“.

Klepněte pro větší obrázek

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.

Klepněte pro větší obrázek

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.

Klepněte pro větší obrázek

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.

Klepněte pro větší obrázek

Ú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é.

Klepněte pro větší obrázek

Ukázka dnešní lekce zde.

Zdrojový soubor ukázky ke stažení zde.

Diskuze (5) Další článek: Ke stažení: All-In-One komunikační klient zdarma

Témata článku: Software, Programování, Flash, MP3, Spodní odstín, Mixer, Druh, Díl, Neznámý autor, Textové pole, Nutná úprava, Levý panel, Jednoduchá pozice, Přehrávač, Undefined, Zelené tlačítko, Černá verze, Modrý nádech, Song


Určitě si přečtěte

Nové iPhony, hodinky a další novinky Applu: Zase bude za co utrácet

Nové iPhony, hodinky a další novinky Applu: Zase bude za co utrácet

Dnes proběhla další velká prezentační akce Applu, na které došlo k odhalení nových iPhonů a dalších novinek. Událost jsme sledovali online, a tak se můžete podívat na chronologický zápis těch nejdůležitějších informací.

David Polesný | 136

Pojďme programovat elektroniku: České chytré zásuvky Netio pro kutily i firmy

Pojďme programovat elektroniku: České chytré zásuvky Netio pro kutily i firmy

** Wi-Fi zásuvky nevyrábí pouze Čína ** Vyzkoušeli jsme českou Netio PowerCable ** Je přímo určená pro vývojáře, má totiž jednoduché JSON API

Jakub Čížek | 42

Jak funguje kontroverzní program, který ženám krade plavky. Mají se čeho bát?

Jak funguje kontroverzní program, který ženám krade plavky. Mají se čeho bát?

** Strojové učení ještě nepřitáhlo takový zájem jako na začátku prázdnin ** Ne, umělá inteligence nenašla lék na rakovinu ** Naučila se svlékat ženy nejen z plavek

Jakub Čížek | 34

Jak doma vylepšit signál Wi-Fi: Pomůže repeater, více routerů, ale nejlépe systémy mesh

Jak doma vylepšit signál Wi-Fi: Pomůže repeater, více routerů, ale nejlépe systémy mesh

** Máte špatný signál Wi-Fi? Mesh systémy to vyřeší ** Už vás nezruinují, meziročně ceny příjemně spadly ** Jak systém funguje a čím je výjimečný?

Jiří Kuruc | 99

10 novinek Androidu 10, které vás budou bavit

10 novinek Androidu 10, které vás budou bavit

Jan Láska, Vladislav Kluska | 25

Google Coral: Raspberry Pi s čipem, který zpracuje 4 biliony operací za sekundu

Google Coral: Raspberry Pi s čipem, který zpracuje 4 biliony operací za sekundu

** Je to velké jako Raspberry Pi ** Ale je to až o několik řádů rychlejší ** Dorazil nám exotický Google Coral s akcelerátorem Edge TPU

Jakub Čížek | 18



Aktuální číslo časopisu Computer

Speciál o přechodu na DVB-T2

Velký test herních myší

Super fotky i z levného mobilu

Jak snadno upravit PDF