- Home
- Tutorials
- Flash
- Intermediate
- Actionscript 2.0 Loading Xml To Populate a Featured News Article Movie
Step Four : Writing the Actionscript to wire up our movie
Now we are ready for the Actionscript. Go to the layer you named actionscript. Click in frame 1 (you should only have one frame) and press F9 to open the ACTIONSCRIPT panel. Once that is opened Copy and paste the code below into it:
/* initialize variables */
var xmlObj:XML = new XML();
var featuresArray = new Array();
var counter:Number = 0;
/* stylize text areas */
txtHeadline.html = true;
txtHeadline.wordWrap = true;
txtCopy.html = true;
txtCopy.wordWrap = true;
//load the xml into the Xml Object
xmlObj.ignoreWhite = true;
xmlObj.load("xml/features.xml");
/* parses the xml file and copies to array */
xmlObj.onLoad = function(success) {
var temp = new Array();
temp = xmlObj.childNodes[0].childNodes;
//remove any disabled items
for (var p = 0; p<temp.length; ++p) {
if (temp[p].attributes["enabled"].toString() == "false") {
temp.splice(p, 1);
}
}
//assign the temp array to our declared features array
featuresArray = temp;
//call the bind method - this just adds the necessary
bindFeatures(0);
};
/* bind the data to the controls */
bindFeatures = function (index) {
/* set up text fields */
txtHeadline.text = featuresArray[index].childNodes[0].firstChild.nodeValue.toString();
txtCopy.text = featuresArray[index].childNodes[1].firstChild.nodeValue.toString();
this.image_mc.loadMovie(featuresArray[index].childNodes[2].firstChild.nodeValue.toString());
};
/* EVENT HANDLERS */
/* Learn More Button Event */
btnLearnMore.onRelease = function() {
getURL(featuresArray[counter].childNodes[3].firstChild.nodeValue.toString(), "_blank");
};
/* Next Button Event*/
btnNext.onRelease = function() {
counter++;
//this just makes sure we are not at the end of our list of items - if so it goes back to 0
if (counter>=featuresArray.length) {
counter = 0;
}
bindFeatures(counter);
};
/* Previous Button Event */
btnPrevious.onRelease = function() {
counter--;
//this just makes sure we are not at the beginning of our list of items - if so it goes to the last feature
if (counter<0) {
counter = featuresArray.length-1;
}
bindFeatures(counter);
};
Wow, that seems like a lot of code, but really its not. Let's go through each piece together to understand what i am trying to do here.
/* initialize variables */
var xmlObj:XML = new XML();
var featuresArray = new Array();
var counter:Number = 0;
These three lines simply set some variables up we need to use in our movie. The first one is "xmlObj" this is a new instance of the XML class provided in Flash for us to use. "featuresArray" is the name of the new array we will put all the XML into when we load it into memory. "counter" is simply a counter that keeps track of our position in the array and makes sure we don't try to move to an article number that does not exist.
/* stylize text areas */
txtHeadline.html = true;
txtHeadline.wordWrap = true;
txtCopy.html = true;
txtCopy.wordWrap = true;
These are simply setting some additional properties for those two text boxes we created. We are making them HTML enabled so we can inject html text in there (if we want too), and i am setting wordWrap on both of them so the text wraps around (especially needed for the txtCopy Text Box).
//load the xml into the Xml Object
xmlObj.ignoreWhite = true;
xmlObj.load("xml/features.xml");
These two lines load the XML document into Flash's memory. The first statement "ignoreWhite" is used to ensure if there are any white spaces in the xml document, flash does not incorrectly interpret them as actual values. The second line actually gets the xml document at the path specified and loads it to that xmlObj we declared at the top.
/* parses the xml file and copies to array */
xmlObj.onLoad = function(success) {
var temp = new Array();
temp = xmlObj.childNodes[0].childNodes;
//remove any disabled items
for (var p = 0; p<temp.length; ++p) {
if (temp[p].attributes["enabled"].toString() == "false") {
temp.splice(p, 1);
}
}
//assign the temp array to our declared features array
featuresArray = temp;
//call the bind method - this just adds the necessary
bindFeatures(0);
};
This is an event method. Basically, when we run that line: "xmlObj.load("xml/features.xml");" it loads the xml. Once it's loaded it runs the method listed above. Notice how the method is defined for the onLoad event of our XmlObject. The XmlObject has many events you can attach methods to in this fashion.
This method looks for a parameter passed to it from the load operation named success. If it's true we can go ahead, if success is not true it will fail silently and will not process anything. (ex: if it can not find the path to the XML file it would fail). So let's assume everything was a success. We start by creating a new Array in our method. Then we assign the children of our xml Object to this array, (xmlObj.childNodes[0].childNodes) < This is looking two levels down from the top of the XML document. So its grabbing everything in the <features> tags.
From there it looks at the attributes of each feature (we only have one attribute which is "enabled"). If this is false it removes it from the array (remember disabling the feature) using the array classes splice method.
We then copy the temp array we created to our publicly available "featuresArray" we declared way at the top of the Actionscript. By doing this we allow the array that is only available in this method to be available to all methods in the movie.
After that it calls another function "bindFeatures" which does the work of actually tying the text to the text boxes and image to the image box. Let's look at that code now.
/* bind the data to the controls */
bindFeatures = function (index) {
/* set up text fields */
txtHeadline.text = featuresArray[index].childNodes[0].firstChild.nodeValue.toString();
txtCopy.text = featuresArray[index].childNodes[1].firstChild.nodeValue.toString();
this.image_mc.loadMovie(featuresArray[index].childNodes[2].firstChild.nodeValue.toString());
};
bindFeatures method takes one parameter named "index". This is the index position in the array of the specific article you want to display. So at first it shows the first article, but when you press the next and previous buttons it passes different numbers into this method to display different articles or features.
All this method does is look in the features array and traverses the XML nodes that are stored in there. It’s a bit cryptic to read childNodes[0].firstChild.nodeValue.toString(); but basically we are looking at a specific features children (which are the headline, copy, image, link properties). You can issue trace statements to help you get a grasp on what element is where in the XML DOM. Once we find each element we assign it to the proper text box. In the case of the image we issue a simple loadMovie Command like so :
this.image_mc.loadMovie(featuresArray[index].childNodes[2].firstChild.nodeValue.toString());
So that’s pretty much it, this method binds the information to the text boxes, etc and displays it on the page. Now to wire up the buttons:
/* EVENT HANDLERS */
/* Learn More Button Event */
btnLearnMore.onRelease = function() {
getURL(featuresArray[counter].childNodes[3].firstChild.nodeValue.toString(), "_blank");
};
This (above) is the event handler for clicking on the learn more button. Basically it issues a getURL with the hyperlink you specified in the xml document. It also uses a "_blank" target to spawn a new window (no sense driving traffic away for little 'ol me).
/* Next Button Event*/
btnNext.onRelease = function() {
counter++;
//this just makes sure we are not at the end of our list of items - if so it goes back to 0
if (counter>=featuresArray.length) {
counter = 0;
}
bindFeatures(counter);
};
This event is for the Next Button. All it does is increment the counter we declared at the top of our actionscript by one. It then does a tiny bit of error checking to make sure our new index position is not greater than the number of articles we have available. If it is, we just re-set it back to the beginning.
/* Previous Button Event */
btnPrevious.onRelease = function() {
counter--;
//this just makes sure we are not at the beginning of our list of items - if so it goes to the last feature
if (counter<0) {
counter = featuresArray.length-1;
}
bindFeatures(counter);
};
This event is for the Previous Button. All it does is decrement the counter we declared at the top of our actionscript by one. It then does a tiny bit of error checking to make sure our new index position is not less than zero. If it is, we just set it to the LAST article.
Using this type of error checking ensures that your users will be able to loop through all articles without ever reaching an "end" or getting an error.
