Dnes vyřešíme problémy s načítáním dat z jiných serverů. Upravíme naší čtečku pro online provoz na webu a pozměníme její design a funkce, abychom ji mohli snadněji začlenit do webové prezentace.
Bezpečnostní omezení při načítání externích dat
Od flashplayeru verze 7 nám přibylo několik bezpečnostních „vylepšení“, která nám mohou komplikovat život, při externím načítání dat. Jedná se především o situace, kdy chceme načítat externí data, jpg nebo swf soubory z domén, které jsou různé od domény, ze které spouštíme hlavní flashovou prezentaci.
Pro načítání externích jpg souborů obvykle stačí změnit kód html stránky, zobrazující swf animaci. Jedná se o tuto část:
name="allowScriptAccess" value="sameDomain"
kterou změníme na:
name="allowScriptAccess" value="crossDomain"
Tedy nic nového pod sluncem. Uvedené řešení ale bohužel nefunguje v případech, kdy chceme načítat vzdálená rss data. V tomto případě máme dvě možnosti jak dál postupovat. První z nich je umístění extra xml souboru na serveru, ze kterého chceme data stahovat. Další podrobnosti nalezneme zde.
Jedná se sice o hezké a elegantní řešení, ale asi těžko budeme obesílat webmastery zpravodajských portálů a přemlouvat je, aby nám u sebe umístili naše skvělé xml soubory.
Naštěstí zde existuje druhá možnost a tím je „oklika“ například přes php nebo asp. Fígl spočívá v tom, že necháme načíst xml dokument do php(případně jiné) strany, která je umístěna na našem serveru a kterou následně načteme do Flashe. Ten ji bere jako stranu z vlastní domény a bez problému ji načte i s nataženým xml obsahem. Více informací o této problematice naleznete zde.
Velmi jednoduchá php strana pak vypadá takto:
<?php
$rss = $_GET[`rss`];
readfile($rss);
?>
Jednodušší to snad už být nemůže. Samozřejmě, že by si tento skript zasloužil mnohá vylepšení, ale my se s ním spokojíme, protože je opravdu funkční a jednoduchý.
Z Flashe pak do adresy, kterou uvádíme ve funkci load, uvedeme adresu php souboru na našem serveru společně s adresou požadovaných xml dat v tomto formátu:
http://www.vase_adresa.cz/rss.php?rss=www.zdrojdat.cz/data.xml
RSS čtečka
Čtečka, kterou si dnes vytvoříme, bude patřit opět mezi ty jednodušší, ale pokud porozumíte dnešnímu kódu, bude otázkou chvilky jí rozšířit o další funkce.
Od čtečky chceme, aby se nám do sloupce vypsaly nadpisy článků z rss zdroje. Je samozřejmě možné, že bude článků hodně, proto budeme chtít, aby se zobrazil jen určitý počet článků. Dále chceme od čtečky, aby po najetí myší, na příslušný název článku, se zobrazilo okno s popisem článku. Poslední funkcí je odkaz na originální článek, který se zobrazí po kliknutí na nadpis.
Řešení objektů
Abychom mohli snadno pracovat s nadpisy článků, vytvoříme z každého nadpisu MC, do kterého vložíme textové pole, které zobrazí samotný nadpis. Nadpisů vygenerujeme tolik, kolik je položek <item> ve zdrojovém xml souboru. Pokud ovšem bude počet větší, než je počet článků, které chceme zobrazit, zobrazíme pouze náš požadovaný počet.
Protože máme nadpisy schované v MC, můžeme těmto objektům přiřadit funkce, které se provedou při různých událostech, v našem případě to bude reakce na kurzor myši. Chceme, aby se po najetí myši objevilo textové pole, které obsahuje text s popisem článku. Vytvoříme si proto funkci, která vytvoří textové pole, které bude umístěno v nejvyšší hloubce, aby překrývalo všechny objekty na scéně. Textové pole se, pro lepší přehlednost, bude zobrazovat nalevo od kurzoru myši.
Další funkce bude sloužit k vymazání pole, při opuštění nadpisu.
Skript
Otevřeme si nový dokument a do prvního snímku hlavní osy napíšeme následující kód:
System.useCodepage = true;
//zdroj rss
rssZdroj = "http://servis.idnes.cz/rss.asp?c=zpravodaj";
//nastavení počtu zobrazených zpráv
pocetZprav = 6;
//nastavení šířky nadpisu
sirkaTextu = 300;
vyskaTextu = 20;
//x,ysouřadnice prvního nadpisu
yZacatek = 25;
xZacatek = 0;
//formát nadpisu
nadpisFormat = new TextFormat();
nadpisFormat.bold = true;
nadpisFormat.size = 10;
nadpisFormat.font = "Verdana";
//formát textu popisu
textFormat = new TextFormat();
textFormat.size = 11;
textFormat.font = "Verdana";
//funkce pro zobrazení textového pole popisu článku
createText = function () {
ox = 1;
// v cyklu zjistíme se kterým nadpisem článku se kryje kurzor
do {
if (eval("pole"+ox).hitTest(_root._xmouse, _root._ymouse, true)) {
txt = clanekSouhrn[eval("pole"+ox).num-1];
sourX = eval("pole"+ox)._x;
sourY = eval("pole"+ox)._y;
break;
}
ox++;
} while (eval("pole"+ox).num != undefined);
// vytvoříme textové pole a naformátujeme jej
this.createTextField("obsah", 1000, _root._xmouse-sirkaTextu*1.1, _root._ymouse, sirkaTextu, vyskaTextu);
obsah.multiline = true;
obsah.wordWrap = true;
obsah.border = true;
obsah.background = true;
obsah.borderColor = 0xFF9900;
obsah.backgroundColor = 0xFFCC99;
obsah.html = true;
obsah.text = txt;
obsah.setTextFormat(textFormat);
obsah.autoSize = "center";
};
//funkce pro zrušení textového pole
removeText = function () {
obsah.removeTextField();
};
//fce pro provedení odskoku na stránku článku
getLink = function () {
lx = 1;
// v cyklu zjistíme se kterým nadpisem článku se kryje kurzor
do {
if (eval("pole"+lx).hitTest(_root._xmouse, _root._ymouse, true)) {
//oskočíme na danou stránku
getURL(clanekUrl[eval("pole"+lx).num-1], "_blank");
break;
}
lx++;
} while (eval("pole"+lx).num != undefined);
};
//funkce pro zobrazení nadpisů článků
tx = 1;
createHeader = function (txt) {
if (tx<pocetZprav+1) {
//názvy polí pro další použití
poleName = "pole"+tx;
textName = "pole"+tx+".mytext"+tx;
// vytvoření MC, ve kterém vytvoříme textové pole
this.createEmptyMovieClip(poleName, tx+60);
eval(poleName)._x = xZacatek;
eval(poleName)._y = yZacatek;
eval(poleName).num = tx;
// vytvoření textového pole pro nadpis
eval(poleName).createTextField("mytext"+tx, tx, 0, 0, sirkaTextu, 15);
eval(textName).multiline = true;
eval(textName).wordWrap = true;
eval(textName).border = true;
eval(textName).background = true;
eval(textName).borderColor = 0xFFCC00;
eval(textName).backgroundColor = 0xFFFFCC;
eval(textName).html = true;
eval(textName).text = txt;
eval(textName).autoSize = "center";
eval(textName).setTextFormat(nadpisFormat);
// přiřazení funkcí pro vytvořený MC
eval(poleName).onRollOver = function() {
createText();
};
eval(poleName).onRelease = function() {
getLink();
};
eval(poleName).onRollOut = function() {
removeText();
};
// nová hodnota proměnné yZacatek, která se zvětší
// o výšku právě vytvořeného objektu
yZacatek = yZacatek+eval("pole"+tx)._height+5;
tx++;
}
};
//fce pro načtení a zpracování xml dat
rssData = new XML();
rssData.ignoreWhite = true;
rssLoad = function (url) {
rssData.load(url);
rssData.onLoad = function() {
nodeArray = rssData.firstChild.firstChild.childNodes;
clanekNazev = new Array();
clanekSouhrn = new Array();
clanekUrl = new Array();
xx = 0;
dx = 0;
do {
nodeNm = nodeArray[xx].nodeName;
if (nodeNm == "item") {
itemArray = nodeArray[xx].childNodes;
x = 0;
do {
if (itemArray[x].nodeName == "title") {
clanekNazev.push(itemArray[x].firstChild.nodeValue);
createHeader(itemArray[x].firstChild.nodeValue);
dx++;
} else if (itemArray[x].nodeName == "description") {
clanekSouhrn.push(itemArray[x].firstChild.nodeValue);
} else if (itemArray[x].nodeName == "link") {
clanekUrl.push(itemArray[x].firstChild.nodeValue);
}
x++;
} while (x<itemArray.length);
}
xx++;
} while (xx<nodeArray.length);
};
};
rssLoad("http://www.mad-site.com/rss.php?rss="+rssZdroj);
Tento skript vytvoří všechny objekty a přiřadí jim potřené funkce.
Vložení skriptu do MC
Někdy je ale lepší, když přímo vidíme, kde se čtečka objeví. Nebo ji chceme několikrát použít a neustálé kopírování jejího kódu nás nebaví. Proto je lepší, když celý kód vložíme do extra MC.
Zvolíme tedy z menu „Insert – New symbol“, objekt pojmenujeme třeba „rssčtečka“ a do prvního snímku jeho osy vložíme výše uvedený skript. Pak už stačí jenom přetáhnout objekt z knihovny symbolů na scénu a máme hotovo. MC můžeme doplnit dalším textem, přidat pozadí atd.
Při přidávání čtečky musíme mít na paměti, že již máme obsazené některé hloubky objekty nadpisů, případné další generované objekty musíme umisťovat do jiných hloubek (depths).
Funkční ukázku dnešní čtečky si můžete prohlédnout na této adrese.
Zdrojový soubor dnešní lekce je k dispozici zde.