Flash ActionScript 3.0 XML Text Array Loader

18

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:AS3 Part 1 Tutorial - XML FileNext, 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.

[as]
//variables
var xmlList:XMLList;
var mcLoader:Loader;
var slideNum:Number = 0;
[/as]

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.

[as]//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();
}
);[/as]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.[as]
//stage event listeners for the movieClip buttons
nextBtn.addEventListener(MouseEvent.CLICK, onClickNextSlide);
prevBtn.addEventListener(MouseEvent.CLICK, onClickPrevSlide);
[/as]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
[as]
//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);
[/as]
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.[as]
//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);}
[/as]

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

  1. dear i want to text automatic via xml not for buttons

    means i load the text in xml file and then run the flash file it appear on it and change the text automaticly like animation
    thanks best regard
    sana

  2. Hello I have fixed your issue. Without the use of an external plugin.

    Im sure you might have thought about this approch already. The problem was in your itteration functions. You need your dynamic textbox to fill the first value on load for this to work. However do not increment the counter on load.

    function onClickNextNews(){
    //Check var on entering function to keep values withen specified range.
    if (counter >= 4) {
    counter = 0;
    }
    //Increment after check. This is why you need to set initial value. However solves problems later.
    counter++;
    //Trace when variable is about to be used not when you increment.
    trace(counter);
    changeText(counter);
    }
    // this function does the opposite of the one above, it subtracts 1 to current number, when it reaches 0 it starts back at 4 (really only three values are displayed thats the reason for the ending string being the first string also.)
    //Same thing here as the next function.
    function onClickPrevNews(){
    if (counter <= 0) {
    counter = 4;
    }
    counter–;
    trace(counter);
    changeText(counter);
    }
    //NOTE: Counter is NumSlide.

    Hopefully this helps I like your overall approach by the way. It is cleaner than what I had been using.

  3. I just ran this code and it worked great. Perhaps you are putting things in the flash file wrong? And don’t you think its a bit much to jump to such a conclusion as to call Jake an ass clown? What juvenile remarks… Grow up, learn code and then instead of insulting someone because you cannot figure out how to make something work, offer up suggestions or perhaps make a sensible comment.

  4. from your example, I can’t seem to get the syntax “xml.image[…” to work, and have had to use “xml.child(“image”)[0]….”

    Any ideas why?

  5. Hello,

    I went through and added what Chris had done plus I set it up so you did not have to hard code the number of entities like in the example. I also added the code to view the images. In my case I was loading them into a UILoader component. I fixed a couple errors i was getting and it seems to run solid now.

    The next thing that would be nice is a play and pause.

    //variables
    var xmlList:XMLList;
    var mcLoader:Loader;

    //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);
    var totalSlides:Number = xmlList.length() -1;
    var slideNum:Number = 0;
    imageFile.source = xml.slide[slideNum].@name.toString();
    slideText.text = xml.slide[slideNum].@title.toString();

    }
    );

    //stage event listeners for the movieClip buttons
    nextBtn.addEventListener(MouseEvent.CLICK, onClickNextSlide);
    prevBtn.addEventListener(MouseEvent.CLICK, onClickPrevSlide);

    //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 {

    imageFile.source = xml.slide[slideNum].@name.toString();
    slideText.text = xml.slide[slideNum].@title.toString();
    }
    changeText(0);

    //this function adds 1 to the current number,
    //if the current number is 4, it starts over
    function onClickNextSlide(event:MouseEvent):void {
    //Check var on entering function to keep values within specified range.
    if (slideNum >= totalSlides) {
    slideNum = 0;
    //changeText(0);
    }
    else {//Increment after check.
    slideNum++;
    }
    trace(slideNum);
    trace(totalSlides);
    changeText(slideNum);
    }

    function onClickPrevSlide(event:MouseEvent):void {
    //Check var on entering function to keep values withen specified range.
    if (slideNum <= 0) {
    slideNum = totalSlides +1;
    }
    //Increment after check.
    slideNum–;
    trace(slideNum);
    trace(totalSlides);
    changeText(slideNum);
    }

  6. Great tutorial. Very clean, easier to understand ๐Ÿ™‚
    I did have one hitch though. Typically, I don't lay my XML files out like that. What I work with, everything is in its own holder verse one long line.
    <imgTitle> blah blah</imgTitle>
    <imgURL>"images/15.jpg"</imgURL>

    I figured out the AS3 for the text imageText.text = xml.image[slideNum].imgTitle;
    but I don't know how to write the call for the actual images.
    movieclip. '?' = xml.image[slideNum].imgURL;

  7. I know this shouldn't be difficult, but I'm trying to figure out how to do this and take it one step further. Unless I'm missing something, this doesn't load the images. I'm trying to develop something similar, that will call an swf file and load it on the stage from an xml file, then when next is clicked load the next swf file from the xml list. Is there any help you can share with me on how to do this?

    Thanks so much for any help.

LEAVE A REPLY