News
Ticker
by
kirupa | 25 July 2005In 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 |
|
|