thehenrys.net

April 18, 2006

Flash Banner with XML input.

Filed under: Programming — dh @ 5:38 pm

I have been creating a new site for Demott Auction and thought it would be cool to have a Flash banner that would read in a XML file that contained the upcoming auctions to display to the visitors. I have done some Flash development in the past ( version 5 ), but have never used the new flash before ( version 8 ). Below is my attempt to do just such a banner with Flash 8 (will probably work with other versions too). Hope this helps you out cause it took me a minute or two to code it up!� 😉

OK so I’m gonna assume that you know a little about Flash ( frames, motion tweens, etc. ) and jump right into the meat of the issue. We need to read in an XML file that contains some upcoming auction data, formatted like this:

<?xml version="1.0" encoding="UTF-8"?>
<Auctions>
  <Auction id="1">
	<Date>April 30, 2006</Date>
	<Time>9:30 AM</Time>
	<City>Iron City</City>
	<State>Georgia</State>
	<Address>555 South Main Street</Address>
    <Name>12th Annual Spring Auction</Name>
    <Info>More Information Coming Soon!</Info>    
  </Auction>
  <Auction id="2">
	<Date>April 30, 2007</Date>
	<Time>9:30 AM</Time>
	<City>Iron City</City>
	<State>Georgia</State>
	<Address>555 South Main Street</Address>
    <Name>13th Annual Spring Auction</Name>
    <Info>More Information Coming Soon!</Info>    
  </Auction>
  <Auction id="3">
	<Date>April 30, 2008</Date>
	<Time>9:30 AM</Time>
	<City>Iron City</City>
	<State>Georgia</State>
	<Address>555 South Main Street</Address>
    <Name></Name>
    <Info>More Information Coming Soon!</Info>   
  </Auction>
  <Auction id="4">
	<Date>April 30, 2009</Date>
	<Time>9:30 AM</Time>
	<City>Iron City</City>
	<State>Georgia</State>
	<Address>555 South Main Street</Address>
    <Name></Name>
    <Info>More Information Coming Soon!</Info>  
  </Auction>
</Auctions>

We need to read in this XML file and dynamically display all the upcoming auctions in the banner. I created a new movie ( 468px X 59px ) and made 4 layers: ‘flashing’, ‘auction’, ‘bg_frame’, and ‘script’. The layer ‘flashing’ handles the flashing intro text. The layer ‘auction’ is where the dynamic text box is located. The layer ‘bg_frame’ contains the black outline and white background of the banner. The ‘script’ layer is where all of the scripting takes place. We will concentrate on this layer and go into it’s details. All the code for this project is included at the end of the post. Go ahead and download it now and pull up the file banner.fla now with Flash 8 so you can follow along.

The first frame of the ‘script’ layer is where we read in the XML file and store the auctions in an object to be used later. The script reads in a XML file and stores each auction in the global variable ‘_global.auctions’. Another global variable ‘_global.num_auctions’ keeps track of the total number of auctions in the file. We are basically building up the ‘_global.auctions’ object to contain all of the auctions that we will display later.

var debug = 0;
if(debug) trace(_global.auctions);
// load XML file on first pass
if(_global.auctions == undefined)
{
  _global.num_auctions = 0;
  _global.auctions = new Object();
  auctions_xml = new XML();
  auctions_xml.ignoreWhite = true;
  auctions_xml.onLoad = function(success) {
          if (success) {
                  process_auctions(auctions_xml);
          }
  };
  // Load up the XML file into Flash
  auctions_xml.load('http://www.thehenrys.net/wp/wp-content/uploads/2006/04/auctions.xml');
}

// This is the function that will be called when
// our XML document is loaded succesfully
function process_auctions(xmlDoc_xml)
{
  // xmlDoc_xml is now a reference to the XML
  // object where our information is stored
  auct_txt = '';
  for (var m = 0; m < xmlDoc_xml.firstChild.childNodes.length; m++)
  {
    _global.num_auctions ++;
    if(debug) trace( m+'=m '+_global.num_auctions+'=_global.num_auctions' );
    auction = new Object();
    for (var n = 0; n < xmlDoc_xml.firstChild.firstChild.childNodes.length; n++)
    {
      if(debug) trace( m+'=m '+n+'=n' );
	  if(debug) trace(xmlDoc_xml.firstChild.childNodes[m].childNodes[n].nodeName+'='+xmlDoc_xml.firstChild.childNodes[m].childNodes[n].firstChild.nodeValue);
	  auction[xmlDoc_xml.firstChild.childNodes[m].childNodes[n].nodeName] = xmlDoc_xml.firstChild.childNodes[m].childNodes[n].firstChild.nodeValue;
    }
    // assign this auction to the global auctions
    _global.auctions[_global.num_auctions] = auction;
  }
}

The line auctions_xml.onLoad = function(success)… allows us to set up a callback function to occur when we have sucessfully loaded in the XML file. NOTE: The movie will continue on before knowing whether or not we have loaded the XML file successfully. If you check the contents of the ‘_global.auctions’ global in frame 5, it may or may not have data in it depending on if the callback function has finished yet. So you are warned to leave enough time for the XML file to be loaded before trying to do anything with the ‘_global.auctions’ global. What I did was wait until frame 50 before displaying the data from the ‘_global.auctions’ global. This gives me plenty of time to read in the XML and load it. I found all this out the hard way of course. 🙂

var debug = 0;
if(_global.current_auction == undefined)
  _global.current_auction = 1;
if(debug) trace( _global.auctions[_global.current_auction].Name+' '+_global.current_auction );
// assign to the text box
auct_txt = '<b>'+_global.auctions[_global.current_auction].Name+'<br>'+_global.auctions[_global.current_auction].City+', '+_global.auctions[_global.current_auction].State+' -  '+_global.auctions[_global.current_auction].Date+' '+_global.auctions[_global.current_auction].Time+'<br>'+_global.auctions[_global.current_auction].Info+'</b>'; 
_global.current_auction ++;
if(_global.current_auction > _global.num_auctions)
  _global.current_auction = 1;

Frame 50 of the ‘script’ layer is where we display the XML data we loaded into the ‘_global.auctions’ global. Take a look at the code for it now. The first couple of lines checks for a new global variable called ‘_global.current_auction’. This is an integer representing the number of the auction that we need to display now. It is not set on the first pass, so we set it to 1. We use ‘_global.current_auction’ as the array index for the ‘_global.auctions’ object. You will see that we assign the text line to the variable ‘auct_txt’ which is what we named our text box in the ‘auction’ layer. After assignment of the text, we increment the ‘_global.current_auction’ and decide if we need to start over back at 1. That’s all there is to it!

Finished Banner:

banner.swf
banner.fla
auctions.xml

« Previous Page