Začínáme s Flash MX 2004 – 20. díl – RSS čtečka podruhé

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.

Diskuze (3) Další článek: Ke stažení: finální verze nové Opery

Témata článku: Software, Programování, RSS, Flash, Čtečka, Pole, Bezpečnostní omezení, Uvedené řešení, Item, Díl, Nová hodnota, Textové pole


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

10 věcí, které nás štvou na Windows 10 a bohužel asi jen tak nepřestanou

10 věcí, které nás štvou na Windows 10 a bohužel asi jen tak nepřestanou

** Windows 10 je na trhu 5 let, ale pořád má velké rezervy ** Ani desátá velká aktualizace, která vyjde na podzim, je nevyřeší ** Štvou nás Windows Update, Store, Nastavení atd.

Lukáš Václavík | 146

Google mapy, Seznam mapy, Apple mapy... Velké srovnání šesti internetových map. Kdo to dělá nejlépe?

Google mapy, Seznam mapy, Apple mapy... Velké srovnání šesti internetových map. Kdo to dělá nejlépe?

** Která klasická webová mapa se vám líbí nejvíce? ** Srovnali jsme šest velkých služeb v několika situacích ** Hlasujte v anketě

Jakub Čížek | 78

Zapomeňte na kometu, české nebe každý den křižují mnohem zajímavější kousky

Zapomeňte na kometu, české nebe každý den křižují mnohem zajímavější kousky

** České nebe každý den křižuje hromada exotických letounů ** Na populární mapě Flightradar24 je ale nenajdete ** Jsou to vojenské letouny USA, UK a NATO

Jakub Čížek | 39

Není jen Flightradar: Našli jsme další aplikace pro sledování letadel, některé ukážou i víc

Není jen Flightradar: Našli jsme další aplikace pro sledování letadel, některé ukážou i víc

** 8 služeb pro sledování leteckého provozu ** Nejznámější je Flightradar24, ale alternativy leckdy prozradí více ** Letadla i v této pohnuté době čile létají a je co pozorovat

Karel Kilián | 13

Apple má šanci definitivně se uzamknout. macOS byl na jeho poměry až příliš otevřený

Apple má šanci definitivně se uzamknout. macOS byl na jeho poměry až příliš otevřený

** Apple, vývojáře i uživatele rozhodně nečekají dva roky prázdnin ** macOS se může uzavřít podobně jako iOS a iPadOS ** Přechod na Arm znamená stopku pro hackintoshe

Lukáš Václavík | 105


Aktuální číslo časopisu Computer

Megatest mobilů do 8 000 Kč

Test bezdrátových headsetů

Linux i pro začátečníky

Jak surfovat anonymně