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, Undefined, Song, Díl, Druh, Neznámý autor, Nutná úprava, Mixer, Zelené tlačítko, Přehrávač, Modrý nádech, Jednoduchá pozice, Levý panel, Černá verze, Spodní odstín, Textové pole


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

Jak v prohlížeči vypnout oznámení zasílaná webovými stránkami

Jak v prohlížeči vypnout oznámení zasílaná webovými stránkami

** Obtěžují vás neustálé dotazy webů, zda chcete zobrazovat oznámení? ** Můžete je zakázat, a to jak kompletně, tak i pro jednotlivé stránky ** Připravili jsme návody pro Chrome, Firefox, Edge a Operu

Karel Kilián | 11

Nejlepší notebooky do 20 000 Kč. Tipy, co se dnes vyplatí koupit

Nejlepší notebooky do 20 000 Kč. Tipy, co se dnes vyplatí koupit

** S cenou do 20 tisíc lze vybrat solidní notebook na práci i hry ** Přenosné notebooky nabídnou i kovová těla a rychlý hardware ** Možná největší problém je nedostupnost, nejžádanější kusy jsou vyprodané

David Polesný | 21

Co když chce Microsoft nahradit Windows Linuxem. Dokážete si to představit?

Co když chce Microsoft nahradit Windows Linuxem. Dokážete si to představit?

** Windows už dávno nejsou pilířem podnikání Microsoftu ** Mnohem více mu vydělává cloud ** Pojďme si trošku zaspekulovat, kam až by to mohlo zajít

Jakub Čížek | 95

Co je to UWB? Nová technologie zastoupí Wi-Fi, Bluetooth i NFC a slibuje velké věci

Co je to UWB? Nová technologie zastoupí Wi-Fi, Bluetooth i NFC a slibuje velké věci

** V nových mobilech se začíná objevovat tajemná zkratka UWB ** Jde o další technologii, jak navzájem propojit různá zařízení ** Oproti Wi-Fi a Bluetooth má řadu výhod

Lukáš Václavík | 35

Šmírování kamerami Googlu: Koukněte, co šíleného se objevilo na Street View

Šmírování kamerami Googlu: Koukněte, co šíleného se objevilo na Street View

Google stále fotí celý svět do své služby Street View. A novodobou zábavou je hledat v mapách Googlu vtipné záběry. Podívejte se na výběr nejlepších!

redakce | 4


Aktuální číslo časopisu Computer

Velký test fitness náramků

Levné záložní zdroje

Jak si zabezpečit domov

Nejlepší monitory na trhu