Ondřej Brichta 22.8.2005
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.
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.
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.
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;
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“.
Vedle přehrávače nakreslíme symbol reproduktorku, který převedeme na symbol tlačítka.
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.
