Tupps.com --

	Latest News Tutorial

Photo Album		LT3D		Flash		Albert Sailing Club		Bookmarks

Latest News Tutorial

This tutorial gives an easy introduction to using XML with FLash. This tutorial shows the steps required that will allow the user to change the information displayed by the flah file without having to re compile the flash application. This tutorial does not cover all aspects of creating the flash file. You should download the completed latestNews and XML file so you can follow this tutorial. The finished application is shown below.

The application is a simple application that displays a random selection of the latest news items found on the tupps.com web site. The user can click on the news item and be taken to the relevant web page.

The data for this page is loaded from an XML file. Two pieces of information are loaded:

The headline to display to the user

The link that the user should be taken to when they click on the link.

There are numerous books and articles explaining exactly what XML is and how you can use it. Have a look at the Flash-XML FAQ for details: http://www.tupps.com/flash/faq/xml.html

The XML file for this tutorial is shown below:

<?xml version = "1.0"?> <news> <newsitem link="http://www.tupps.com/flash/index.html">Flash Section Created</newsitem> <newsitem link="http://www.albertsc.org.au/">Albert Sailing Club Web Site Created</newsitem> <newsitem link="http://www.tupps.com/cgi-bin/photos.pl">Photo Album Online</newsitem> <newsitem link="http://www.tupps.com/">Tupps.com created</newsitem> </news>

You will see the main node is <news>, with any number of <newsitem> nodes underneath. The number of nodes is completely up to the end user. The text that is going to be displayed is value of each newsitem node while the link attribute is the link that will be followed when the news item is clicked on.

All of the actual work occurs in the LatestNews movie clip. The rest of the scene is just a nice border and some text. The LatestNews clip has the following layers:

HitButton -- This is a transparent button layered over the entire clip. When the user clicks on the button, they are taken to the URL defined by HitURL
Sliding Bar -- This clip has no coding, just the animation that causes the text to appear.
Text -- This clip contains the text that contains the latest news item. It is also responsible for loading the latest news data from the XML file.

The code!

The first thing that needs to be done is extract the XML data. This is performed in the first frame of the Text layer. And is displayed below:

// Declare Catalog XML object, and load data file	
stop();

//Initialise the hitURL
hitURL = "http://www.tupps.com";

newsXML = new XML();
newsXML.onLoad = ExtractData;
newsXML.load("news.xml");
gotoAndPlay(2)

// ExtractData Function
function ExtractData(success) {
	_root.newsItems = new Array();
	
	//Check if our XML file has been successfully loaded
	if (success) {
		for (counterA in this.childNodes) {
			for (counterB in this.childNodes[counterA].childNodes) { 
				if (this.childNodes[counterA].childNodes[counterB].nodeName == "newsitem") {
					//Creates a new NewsItem object (see function at bottom of script)	 
					myNewsItem = new NewsItem(
						this.childNodes[counterA].childNodes[counterB].firstChild.nodeValue,
						this.childNodes[counterA].childNodes[counterB].attributes.link); //Spans 3 lines
					//Assign myNewsItem to the end of the array, of news items. 
					
					_root.newsItems.push(myNewsItem); 
					trace("_root.newsItems.length: " + _root.newsItems.length);
				}
			}
		}
	//end of if statement	
	} else {
		//Create a hard coded link just in case the XML has failed to load!
		myNewsItem = new NewsItem(
			"Welcome to Tupps.com", "http://www.tupps.com"); //Spans 2 lines
		//Assign myNewsItem to the end of the array, of news items. 
		_root.newsItems[_parent.newsItems] = myNewsItem; 
	}
}

function NewsItem(DisplayName, URL) {
	this.DisplayName = DisplayName;
	this.URL = URL;
}

Going from the top, the hitURL variable is used by the HitButton layer to take the user to another site. It is initialized here so that if the user clicks the latest news before the XML is loaded they will be taken to a web site rather than being shown a blank page.

The next three lines of code creates a new XML container object, newsXML. The second line calls ExtractData when XML data has been loaded. The third line loads the news.xml file. The link to the news.xml file does not specify a path so it will always look in the same directory that the swf has been loaded from.

newsXML = new XML(); newsXML.onLoad = ExtractData; newsXML.load("news.xml");

The final bit of code in the main function is to set the flash player to play frame 2. Frames 2 and 3 are set to loop until the XML has been loaded.

The ExtractData function starts by creating an array for NewsItem objects which will contain the news headlines and the links. The contstructor for the NewsItem object is at the very end of the code. The array is created on the _root time line to make it accessible globally. The success parameter is checked to make sure that the XML has been loaded successfully. If the XML was not loaded successful then some default text and links can be used instead.

Next the data from within the XML needs to be extracted. One problem with Flash's XML parser is that it includes whitespace (carriage returns, tabs etc) as XML nodes. To avoid any problems with whitespace parse all the XML nodes is is important to look specifically for the node that is required. Doing this will also allow our application to continue to work if other fields are added to the XML file.

We want to get all of the 'newsitem' elements. Two nested for loops are used to check all the elements.
for (counterA in newsItemsXML) { for (counterB in newsItemsXML[counterA].childNodes) {

The first for loop will select the <news> node. The second for loop looks at all the nodes in the <news> nodes. We check to make sure that it is a newsitem node, a check is made to ensure that is not whitespace:
if (newsItemsXML[counterA].childNodes[counterB].nodeName == "newsitem") {

Once the newsItem node is identified we can extract the data:
_root.newsItems[_root.newsItems.length] = newsItemsXML[counterA].childNodes[counterB].firstChild.nodeValue; _root.newsLinks[_root.newsLinks.length] = newsItemsXML[counterA].childNodes[counterB].attributes.link;

The first line reads the information contained between start and end tags. For the first line of our XML file this would extract "Flash Section Created". The second line reads the attribute contained within the start tag. In our case it would grab "http://www.tupps.com/flash/index.html" from the XML file.

Catering for when things go wrong:
The last bit of code is designed to present some information to the end user if XML file fails to load:

} else { _root.newsItems[_root.newsItems.length] = "Welcome to Tupps.com"; _root.newsLinks[_root.newsLinks.length] = "http://www.tupps.com"; }

Other Parts of Latest News:
If you would like to look at the other code used in Latest News the code is contained in two areas:
On the Text layer, frame 3, the XML is checked that it is loaded, then a random news item is chosen. The user clicks on a movie called invisibleButton which is a located on the HitButton layer, and opens a new web page with the URL.

Information, Help, Etc...

If you have any comments, bugs, suggestions on how the flash file or this tutorial could be written better please don't hesitate to email me. I would love to hear from you.