Začínáme s Flash MX 2004 – 23. díl –RSS a MP3 přehrávač

Dnes začleníme do naší prezentační stránky vytvořenou RSS čtečku zpráv a dále umožníme přehrávání hudby s využitím MP3 přehrávače z minulého dílu.

Vložení RSS čtečky

Otevřeme si poslední zdrojový soubor prezentační stránky (ke stažení zde). Vytvoříme na hlavní časové ose vrstvu, kterou pojmenujeme „rss“. Klikneme pravým tlačítkem myši na druhý snímek vytvořené vrstvy a z menu zvolíme „Insert Blank Keyframe“. Vytvořili jsme tak prázdný klíčový snímek, do kterého vložíme objekt čtečky.

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

Otevřeme si proto zdrojový soubor naší čtečky (k dispozici zde) a přes schránku zkopírujeme z hlavní scény objekt čtečky, který poznáme podle textu „Aktuální zprávy:“. Klineme myší na snímek číslo dva, vrstvy „rss“ v prezentační stránce a vložíme objekt čtečky.

Myší čtečku přesuneme do pravé horní části menu.

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

Text „Aktuální zprávy“ je zde zbytečný. Dvojklikem otevřeme objekt čtečky a vymažeme textové pole s popisem. Stále nám ale několik zpráv „přetéká“ a navíc barvy nejsou zrovna v duchu celé prezentace.

Pro posunutí textů čtečky změníme proměnnou, určující začátek:

//x,ysouřadnice prvního nadpisu
yZacatek = 25;

na:

//x,ysouřadnice prvního nadpisu
yZacatek = 0;

Tímto jsme posunuli první textové pole o 25px výše. Do menu se nám vejdou pouze 4 zprávy, proto upravíme příslušnou proměnnou:

//nastavení počtu zobrazených zpráv
pocetZprav = 6;

na:

//nastavení počtu zobrazených zpráv
pocetZprav = 4;

Čtečku už máme dobře umístěnou, ještě zde ale neladí barvy. Změníme proto pozadí a okraj textového pole na těchto řádcích ve skriptu (80-82):

eval(textName).background = true;
eval(textName).borderColor = 0xFFCC00;
eval(textName).backgroundColor = 0xFFFFCC;
které změníme na:
eval(textName).background = false;
eval(textName).borderColor = 0x8A97A3;

Textové pole bude bez pozadí, pouze s okrajem. Aby nám text lépe kontrastoval s tmavou barvou horního menu, musíme ještě přidat parametr do formátování textu. Jedná se o tento řádek (16):

nadpisFormat.font = "Verdana";

za který dopíšeme následující příkaz:

nadpisFormat.color = 0x8A97A3;

Tímto jsme změnili barvu písma na stejnou barvu, jakou má okraj textového pole.

Nadpisy máme hotové, ještě nám scházejí náhledy článků. Jejich barvy se mění na následujících řádcích (41,42):

obsah.borderColor = 0xFF9900;
obsah.backgroundColor = 0xFFCC99;

Tady nám bude stačit černý okraj a světle modré pozadí:

obsah.borderColor = 0x000000;
obsah.backgroundColor = 0xBDCAD9;

Vložení MP3 přehrávače

Na hlavní scéně vytvoříme další vrstvu, kterou pojmenujeme „mp3“ a druhý snímek vrstvy přeměníme na klíčový. Vložíme do druhého snímku objekt přehrávače, který zkopírujeme z poslední lekce (k dispozici zde).

Přehrávač umístíme do levého dolního rohu scény a pojmenujeme jej „prehravac“.

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

Vedle přehrávače nakreslíme symbol reproduktorku, který převedeme na symbol tlačítka.

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

Od reproduktorku chceme, aby se po kliknutí postupně objevil přehrávač a my tak mohli ovládat zvuk. Dále chceme, aby po dalším kliknutí na reproduktorek přehrávač opět zmizel a nezabíral tak zbytečně místo. Zmizení a zobrazení přehrávače budeme dělat pomocí změny hodnoty průhlednosti _alpha objektu přehrávače.

Zvolíme nově vytvořené tlačítko a na panelu akcí mu přiřadíme následující skript:

on (release) {
  if (prehravac._alpha == 0) {
    prehravac.fadeIn = true;
    prehravac.fadeOut = false;
  } else if (prehravac._alpha == 100) {
    prehravac.fadeOut = true;
    prehravac.fadeIn = false;
  }
}

Skriptem měníme proměnné fadeIn a fadeOut, které budou sloužit pro spouštění efektu změny.

Zvolíme objekt přehrávače a na panelu akcí napíšeme následující řádky:

onClipEvent (load) {
  this._alpha = 0;
  info._visible = false;
  hlasitost.vol._visible = false;
}
onClipEvent (enterFrame) {
  if (fadeIn) {
    if (this._alpha<100) {
      this._alpha += 20;
      info._visible = false;
      hlasitost.vol._visible = false;
    } else {
      info._visible = true;
      hlasitost.vol._visible = true;
      this._alpha =100;
      }
  }
  if (fadeOut) {
    if (this._alpha>0) {
      info._visible = false;
      hlasitost.vol._visible = false;
      this._alpha -= 20;
    } else {
      this._alpha =0;
      }
  }
}

Ihned po načtení chceme, aby nebyl přehrávač vidět. Pak už jen neustále testujeme proměnné fadeIn a fadeOut a podle jejich hodnot buď zvyšujeme, nebo snižujeme průhlednost objektu.

Všimneme si také řádků, ve kterých nastavujeme vlastnost _visible pro textová pole přehrávače. Je to z toho důvodu, že u našich dynamických polí nelze provádět změnu hodnoty průhlednosti. Proto pouze zviditelníme nebo naopak zneviditelníme obě textová pole.

Nemáme ale pojmenovaný objekt pro změnu hlasitosti, ve kterém je jedno z dynamických polí „vol“. Otevřeme proto objekt přehrávače a na panelu vlastností pojmenujeme objekt pro změnu hlasitosti na „hlasitost“.

Tímto jsme dokončili dnešní úkol. Určitě jste narazili na problém, kdy máte větší množství textu, které se nevejde na obrazovku, a chtěli byste jej nějakým způsobem scrollovat. Bohužel nám naše dynamické textové pole neumožňuje využití jednoduché masky, pod maskou nebude dynamicky načtený text vidět.

Proto v příštím díle využijeme jednu z komponent Flashe a podrobněji se podíváme, jak tyto připravené komponenty upravovat.

Zdrojové soubory dnešní ukázky jsou k dispozici zde.

Ukázka vytvořené strany ke zhlédnutí zde.

Diskuze (7) Další článek: Ke stažení: bezpečnost především

Témata článku: Software, Programování, RSS, MP3, Flash, Textové pole, Pole, Přehrávač, Zbytečné místo, Info, Elsa, Černý okraj, Následující řádek, Klíčový snímek, Díl, Hlavní pole


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

Wi-Fi 6 konečně začíná dostávat smysl. Poradíme, jak ji využít

Wi-Fi 6 konečně začíná dostávat smysl. Poradíme, jak ji využít

** Na trh míří první levné Wi-Fi 6 routery ** Nabídka zařízení, zejména notebooků, každý den roste ** Poradíme, jak nejlépe přejít s domácností na Wi-Fi 6

Tomáš Holčík | 31

České Rajče je stále plné dětských nahotin. Student pomocí A.I. analyzoval miliony fotek

České Rajče je stále plné dětských nahotin. Student pomocí A.I. analyzoval miliony fotek

** Rajče.net má odjakživa problémy s choulostivými fotkami dětí ** Student zlínské univerzity analyzoval jeho katalog ** Neuronová síť doposud prozkoumala 6 milionů snímků

Jakub Čížek, Filip Šedivý | 73

Nejlepší notebooky do 10 000 korun: Co koupit a čemu se raději vyhnout

Nejlepší notebooky do 10 000 korun: Co koupit a čemu se raději vyhnout

** Do deseti tisíc korun lze dnes koupit slušné notebooky ** V nabídce ale i tak převládají zastaralé a pomalé modely ** Poradíme, jak dobře vybrat i s omezeným rozpočtem

David Polesný | 112



Aktuální číslo časopisu Computer

Test 9 bezdrátových reproduktorů

Jak ovládnout Instagram

Test levných 27" herních monitorů

Jak se zbavit nepotřebných věcí na internetu