XHTML into flash through Javascript (XML)

Sorry for the long title, couldn’t think of a better description. The following tutorial will show you how to pull any valid XHTML into your flash application for use as XML. We will be using Javascript and the “[Unobtrusive Flash Object](http://www.bobbyvandersluis.com/ufo/)” or UFO to achieve. What is great about this technique is that it allows you to publish your content only once and then, depending if the user has flash installed, they will see the same information in either Flash or Plain HTML.

Instructions

We will be creating a very simple news ticker as an example.

1. Insert some html into your document:

           <div id=“news_ticker”>
   <p><a href=“news1.html”>News Flash: Men on the Moon<p>
   <p><a href=“news2.html”>Peanut butter food of the gods<p>
   <p><a href=“news3.html”>News Flash: I like coffee<p>
   </div>
   

2. Next the Javascript, long lines are wrapped with >>:

   <script type=“text/javascript”>
   var temploca = document.getElementById(”news_ticker”).innerHTML;
   var loca = escape(temploca);
   document.getElementById(”news_ticker”).innerHTML = loca;
   var FO = { movie:”news-ticker.swf”, width:”450", height:”28", majorversion:”8",  >>
   build:”0", id:”ufoCom”,name:”ufoCom”, swliveconnect:”true”, >>
   allowscriptaccess:”always”,flashvars:”loc=”+loca};
   UFO.create(FO, “news_ticker”);
   

3. The first few lines of code get the contents of the “news_ticker” div tag and then “escape” them, escape encodes the data removing all lines and spaces. The last few lines use the UFO mentioned above to embed the flash movie into the page and pass our data to it, this part “flashvars:”loc=”+loca ” Next we will go over to the Flash file.

4. Ok so create a new flash document and then in the first frame type in this actionscript :

   loc = “”+loc+”"; 
   loc = loc.split(”n”).join(”"); 
   loc = loc.split(”r”).join(”");
   loc = loc.split(”t”).join(”");
   

5. The variable “loc” has been passed into flash via the UFO object. The first line add an xml node around all the data, this is because xml is required to have a root node, the rest of the lines remove all newlines, returns and tabs from the data, these will also screw up your precious xml.

6. Now we load our data into the xml object: var myXml:XML = new XML(loc); myXml.ignoreWhite = true;

7. You should now have a fully functioning XML object in flash to play around, here is what I did with mine:

   // Check how many child nodes myXml has
   kids = myXml.firstChild.childNodes.length;
   //  Feed all nodes into an array
   news = new Array();
   newsLink = new Array();
   for (i = “0?; i < kids; i++) {
   news[i] = myXml.firstChild.childNodes[i].firstChild.firstChild.nodeValue;
   newsLink[i] = myXml.firstChild.childNodes[i].firstChild.attributes.href;
   }
   newsNumber = 0;
   // Place the timer movie on stage
   _root.attachMovie(”timer”, “timerStage”, _root.getNextHighestDepth());
   

8. All I did here was create an array from the contents of thetags, then I placed a “timer” movieclip on stage which updated a textbox in the movie at certain intervals.

And there you have it, please let me know if this has helped you and if you have any further ideas to improve on this technique.

© Copyright Foozia 2007