News Ticker
      by kirupa | 25 July 2005

In the previous page, we created the interface and got a working example. In this and the following pages, I will explain some of the background details that you will need to know in order to create your own, better News Ticker!

Let's take a look at our XML file now. Here is how our XML file looks like:

The structure of our XML file is fairly straightforward. Here is a simpler format that highlights the basic layout of our data:

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<images>
  <item>
    <news>Eat more Spam</news>
    <url>http://www.kirupa.com</url>
  </item>
  <item>
    <news>FXPression 05 Contest</news>
    <url>http://www.kirupa.com/forum/</url>
  </item>
  <item>
    <news>Check out our Footer Contest #2</news>
    <url>http://www.kirupa.com/tutorials/</url>
  </item>
</images>

Each item node contains two children: news and url. Simply create new copies of the item node with the children and modify the news and url children data accordingly. You can take a look at my XML file here: http://www.kirupa.com/developer/mx2004/swf/news.xml


ActionScript Code Explained
With the XML file out of the way, let's move on to the ActionScript code.  Hopefully, by me explaining the code behind it, you will be better prepared to make modifications and make my generic news ticker much cooler!

Let's start:

The above section of code is fairly generic for cycling through your XML file and loading the pieces of data into an array. The two variables I used are caption and url for storing the data on our site.

In short, I load all of the URL data into the url array, and I load all of our news titles into our caption array. The thing to notice is the index position added after childNodes: 0 and 1.

I won't go into any greater detail, for I cover the concepts hidden in the code in greater detail in my explanation of the XML PhotoGallery tutorial: http://www.kirupa.com/developer/mx2004/xml_flash_photogallery5.htm

The only main variation besides the varied variable names is that I call the function first_item() after all of the data from the XML file has been loaded.


xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;

These three lines are covered in detail here: http://www.kirupa.com/developer/mx2004/xml_flash_photogallery4.htm I am not trying to short-change you by not covering the material here, but I don't want to be repetitive when the same material has been covered in detail in that page.


xmlData.load("http://www.kirupa.com/developer/
mx2004/swf/news.xml?blarg="
+new Date().getTime());

This is the line of code that specifies the URL of the XML file I am loading. If you recall, even in the code you pasted, I did not refer to an XML file stored locally. The reason is due to caching. The browser does not cache external files that are loaded from the hard drive (or another local location), but it does cache external files that are loaded from a remote location such as a web server.

Caching is great for animations that stay constant, but for data that is constantly updated such as our news ticker's XML file, you need to find a way to prevent caching. That is done by using a unique identifier that varies each time the user accesses the animation: blarg="+new Date().getTime());

The unique identifier does not prevent your file from being cached, but it does prevent the cached file from being loaded when the animation is accessed again. Each time you load the XML file, the identifier produces a varied string based on the data and time in our case.

For example, your browser interprets news.xml?blarg=blkajdf as being different from news.xml?blarg=352ld even if the content of the XML file is not varied. I know it is weird, but I don't write the rules


More coding up ahead, so onwards to the next page!


page 2 of 4


 




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.