Flash ActionScript 3.0 XML Text Array Loader
After creating the Flash 8 ActionScript 2.0 Image slideshow modifications, I wanted to start from scratch on my next set of tutorials with AS3. AS3 is very different from AS2, the learning curve is not easy but its worth it. I would like to recommend a few books to help you get started in AS3; Essential ActionScript 3.0 by Colin Moock and Learning ActionScript 3.0: A Beginners Guide by Rich Shupe and Zevan Rosser. This is my first tutorial in a series where I will be rebuilding the XML/Flash Slideshow in ActionScript 3.0.In this tutorial, I will be focusing on how to setup your XML file, how to read in text from that XML file into you flash, and how to move through the xml nodes in your flash file and have them show up.First thing is first, how do you setup your XML file, I used a lot of examples from Colin Moock's book to achieve this. By no way is my way the right way, since XML is pretty flexible. I setup my xml file by opening up with a parent node "images" then placing all of the attributes within each node "image". AS3 makes it really easy to pull the varibles out, so thats why I set it up this way. Here is a screenshot:
Next, I setup my AS3 file. I opened a new AS3 document, and created two movieclips and gave them instance names of prevBtn and nextBtn. I didnt setup my code in OOP, that will be part of the next tutorial. I just wanted to do something basic here to help people get started. I also added a dynamic text field to the stage and gave it an instance name of "imageText".
Step 1: Declare Your VariablesThis is where I setup my Loader and XMLList instances. I also setup slideNum which Im going to be using to hold the position or index of the array.
-
//variables
-
var xmlList:XMLList;
-
var mcLoader:Loader;
-
var slideNum:Number = 0;
Step 2: Load the XMLNow I setup the loader request for XML and once its finished loading using the EventListener, then I tell flash to pull the name attribute out of the first node in my xml file and place it in the dynamic text field called imageText.
-
//loads xml and assigns the text field the first node using the slideNum variable from above
-
var xml:XML = new XML();
-
var loader:URLLoader = new URLLoader();
-
loader.load(new URLRequest("images.xml"));
-
loader.addEventListener(Event.COMPLETE,
-
function(evt:Event):void {
-
xml = XML(evt.target.data);
-
xmlList = xml.children();
-
trace(xmlList);
-
imageText.text = xml.image[slideNum].@name.toString();
-
}
-
);
Step 3: Add Event ListenersNow Im telling flash that whenever a user clicks to perform a function. So if a user clicks on nextBtn, the onClickNextSlide function will run. If a user clicks on prevBtn, the onClickPrevSlide function will run. This is one of the biggest changes of AS3, whenever you create a button, you must always assign it an event listener. There seems to be much more flexility in this way.
-
//stage event listeners for the movieClip buttons
-
nextBtn.addEventListener(MouseEvent.CLICK, onClickNextSlide);
-
prevBtn.addEventListener(MouseEvent.CLICK, onClickPrevSlide);
Step 4: Change Text FunctionThis function works with the buttons. The text will change based on the slideNum var that is fed into the function from the button functions which come next
-
//this function will change the text depending upon which number is fed to the var slideNum in the onClickNextSlide function
-
function changeText(slideNum:Number):void {
-
imageText.text = xml.image[slideNum].@name.toString();
-
}
-
changeText(0);
Step 5: Button FunctionsThe onClickNextSlide function increases the slideNum variable with each click. If slideNum reaches 4 (the total number of nodes), then it starts over at 0. The onClickPrevSlide function does the reverse.
-
//this function adds 1 to the current number, if the current number is 4, it starts over
-
function onClickNextSlide(event:MouseEvent):void {
-
slideNum++;
-
trace(slideNum);
-
if (slideNum == 4) {
-
slideNum = 0;
-
}
-
changeText(slideNum);}
-
// this function dos the opposite of the one above, it subtracts 1 to current number, when it reaches 0 it starts back at 4
-
function onClickPrevSlide(event:MouseEvent):void {
-
slideNum--;
-
trace(slideNum);
-
if (slideNum == 0) {
-
slideNum = 4;
-
}
-
changeText(slideNum);}
There is currently some known issues which Im going to fix and re-release. I know currently that if you try to go backwards when the flash first loads, it wont work. The previous button only works after you go forward first. If anyone has a solution, please post a comment. Here is an example of the working file:View Demo
