XML-sisältöä helposti Flashiin

Mika Saviranta | 17.1.2008

Flash-esitysten sisältöön halutaan usein tehdä muutoksia, tai esityksen pohjalta halutaan tehdä toinen samankaltainen. Esitysten päivittäminen on usein työlästä ja aikaavievää, etenkin jos muokattavia elementtejä on paljon. Useiden eri swf-tiedostojen jatkuva muokkaaminen saattaa rikkoa koko esityksen rakenteen, varsinkin jos päivittäjä itse ei niitä ole luonut.

Usein muokattavaa tekstisisältöä ei kannata laittaa itse esitykseen, vaan sen voi laittaa erilliseen XML-tiedostoon. Tiedostoa voi muokata tavallisella tekstieditorilla, eikä Flash-editoria tarvitse edes avata. XML-pohjaiset sivut nopeuttavat päivittämistä ja rakenteen hallintaa.

ActionScript-ohjelmointikieli kykenee lukemaan XML-tiedostoja ja lataamaan niiden sisältöä Flashiin. Tässä oppaassa teemme yksinkertaisen linkkilistan käyttämällä ActionScript 2.0 -kieltä.

XML-tiedoston luominen

XML-tiedoston luomiseen et tarvitse muuta kuin tekstieditorin. XML-tiedosto alkaa XML-deklaraatiolla <?xml version="1.0" encoding="UTF-8" ?>. Flashin kannalta tämä ei tosin ole oleellista, koska Flash tunnistaa vain tiedostossa olevat tagit. Tiedostolle luodaan rakenne, jonka voi keksiä itse tai käyttää valmista ns. XML-skeemaa. Allaolevassa esimerkissä on rakennettu linkkilista jossa ovat linkkien nimet sekä osoitteet.

<?xml version="1.0" encoding="UTF-8" ?>

<linkit>
  <linkki>
    <osoite>http://assemblix.net</osoite>
    <nimi>Assemblix</nimi>
  </linkki>

  <linkki>
    <osoite>http://adobe.com</osoite>
    <nimi>Adobe</nimi>
  </linkki>
</linkit>

Kun olet saanut XML-tiedoston valmiiksi, tallenna se nimellä linkit.xml kansioon jossa Flash-projektisi tulee sijaitsemaan.

Flash

Avaa Adoben Flash ja valitse projektin ohjelmointikieleksi ActionScript 2. Tässä esimerkissä käytetään kakkosversiota, Flash-playerin uusi ActionScript 3 tukee uudempaa ja tehokkaampaa XML-tekniikkaa. Tämän artikkelin käyttämät komennot on ActionScriptin kolmosversiossa korvattu uusilla eivätkä ne välttämättä toimi.

Nimeä jo olemassaoleva layeri nimellä teksti. Luo uusi layeri ja nimeä se nimellä koodi. Teksti-layerille luo tekstikenttä aikajanan ensimmäiseen frameen ja muokkaa se haluamaasi kokoon. Anna Properties-valikossa tekstikentän instance-nimeksi linkit_txt. Aseta vieressä olevasta pudotusvalikosta single-linen sijaan multi-line jotta teksti rivittyy useammalle riville. Koska kyseessä on dynaaminen tekstikenttä muista myös valita pudotusvalikosta tekstikentän tyypiksi Dynamic Text. Voit halutessasi myös muotoilla tulevan tekstin fonttia, väriä jne.

Tallenna Flash-tiedosto kansioon jossa XML-tiedostosi sijaitsee.

ActionScript

Klikkaa koodi-layerin ensimmäiseen frameen aikajanalla ja paina F9. Tämä avaa ActionScript koodi-ikkunan. Kirjoita tai kopioi allaoleva koodi ja tallenna.

var linkit_xml:XML = new XML();
linkit_xml.ignoreWhite = true; 
linkit_xml.load('linkit.xml');

linkit_xml.onLoad = function(success){
 linkit_html = '<ul>';
 var linkit:Array = this.childNodes[0].childNodes;
 for(i=0;i<linkit.length;i++){
  if (success) {
   linkit_html+='<li><a href="';
   linkit_html+=linkit[i].childNodes[0].firstChild.nodeValue.toString();
   linkit_html+='">';
   linkit_html+=linkit[i].childNodes[1].firstChild.nodeValue.toString();
   linkit_html+='</a></li>';
  } else {
   linkit_html += '<li>Virhe ladattaessa XML:ää</li>';
  }
 }
 linkit_html += '</ul>';
 linkit_txt.htmlText = linkit_html;
}

Testaa Flash-esitys painamalla CTRL-Enter. Tekstikenttään pitäisi ilmestyä kaksi linkkiä html-listan muodossa. Muokkaamalla XML-tiedostoa voit lisätä linkkejä listaan ilman että sinun tarvitsee koskea Flashiin.

Miten koodi toimii?

Flash kykenee näyttämään HTML-muotoista dataa. Koodi käy XML-tiedostoa läpi ja muuttaa löydetyt tiedot HTML-pätkäksi joka näytetään tekstikentässä.

var linkit_xml:XML = new XML();
linkit_xml.ignoreWhite = true; 
linkit_xml.load('linkit.xml');

Luodaan uusi XML-objekti nimeltä linkit_xml. Ladataan sille sisältö tiedostosta "linkit.xml".

linkit_xml.onLoad = function(success){
  linkit_html = '<ul>';
  var linkit:Array = this.childNodes[0].childNodes;
  for(i=0;i<linkit.length;i++){

Ladattaessa XML-tiedoston sisältö luodaan merkkijono nimeltä "linkit_html", johon HTML-pätkä tulee. Luodaan myös array nimeltä "linkit", johon asetetaan jokainen <linkit>-noodista löytynyt <linkki>-noodi.

Aletaan käydä linkit-arrayta läpi silmukalla.

if (success) {
  linkit_html += '<li><a href="';
  linkit_html += linkit[i].childNodes[0].firstChild.nodeValue.toString();
  linkit_html += '">';
  linkit_html += linkit[i].childNodes[1].firstChild.nodeValue.toString();
  linkit_html += '</a></li>';
} else {
  linkit_html += '<li>Virhe ladattaessa XML:ää</li>';
  }
}

Jokaisen linkin kohdalla etsitään XML:stä linkin osoite ja nimi.
linkit[i].childNodes[0].firstChild.nodeValue.toString(); tarkoittaa, että etsitään ensimmäinen linkin sisältämä noodi, joka tässä tapauksessa on osoite. Tämän sisältä etsitään ensimmäinen noodi, joka on osoitteen varsinainen teksti. Luetaan tekstin sisältö, ja muunnetaan se Flashin ymmärtämäksi merkkijonoksi.
Yhdistetään nämä HTML-pätkään.

linkit_html += '</ul>';
  linkit_txt.htmlText = linkit_html;
}

Suljetaan html-lista ja ohjataan "linkit_html" -sisältö avautumaan tekstikenttään nimeltä linkit_txt. htmlText -komennon avulla tekstikenttä tunnistaa html-muotoilut.

Yhteenveto

Vaikkakin tässä esimerkissä rakennettu linkkilista on varsin yksinkertainen, kykenee Flash tunnistamaan monimutkaisemmatkin XML-tiedostot. XML:n avulla voit hallita myös graafisia elementtejä tai lukea tiedostoja jotka eivät sijaitse omalla palvelimellasi. ActionScriptin 3.0-versiossa on laajennettu XML:n hallintaan. Uusi versio tukee EcmaScript for XML(E4X) standardia, mikä tehostaa XML:n käyttöä Flash-esityksissä.

Linkit

• Adobe Flash Resources:
• Actionscript.org:
• Kirupa tutorials: