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


18 thoughts on “Flash ActionScript 3.0 XML Text Array Loader”

Dimitar G. · January 21, 2008 at 2:47 pm

You might take a look at http://code.google.com/p/bulk-loader/

It’s open-source, allows you a great control of what is preloaded and can be used for all-in-one daily tasks which needs preloading in any matter.

sana · February 14, 2008 at 12:29 pm

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

Chris · October 3, 2008 at 9:58 pm

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.

manoharan · November 17, 2008 at 6:56 am

It was very useful to me. Thanks! 🙂

Michael · November 20, 2008 at 5:51 pm

That dosent place the images in the slideshow! How do you pull the images through the xml doc and put them on the stage?

Red · December 20, 2008 at 10:42 am

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.

rbc · February 27, 2009 at 2:44 pm

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?

cbc · March 9, 2009 at 4:24 pm

hi guys, this is great, but for some reason i cant load my images.
any idea why?
please let me know.
thanks
cecilia

Shawn · April 14, 2009 at 1:08 pm

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);
}

callen · April 21, 2009 at 12:42 pm

thanks for the tutorial, keep up the good work

bnther · October 29, 2009 at 10:12 pm

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;

Guy · January 18, 2011 at 1:28 pm

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.

AS 3.0 XML Text Array Loader | Programming · January 21, 2008 at 6:14 pm

[…] Text Array Loader […]

Flash ActionScript 3.0 XML Basic Slideshow with Transitions | Jake Rutter - XHTML/CSS Developer · January 22, 2008 at 7:40 pm

[…] This slideshow is based off my prior tutorial: Flash ActionScript 3.0 XML Text Array Loader. […]

AS 3.0 XML Text Array Loader | aboutall · January 26, 2008 at 3:56 am

[…] Text Array Loader […]

news4u.qa2.info » Blog Archive » AS 3.0 XML Text Array Loader · January 27, 2008 at 5:05 am

[…] Text Array Loader […]

aboutall.za21.info » Blog Archive » AS 3.0 XML Text Array Loader · January 27, 2008 at 1:14 pm

[…] Text Array Loader […]

Flash tutorials | Using XML and E4X,XML data and Parse AS3 in Flash CS3 roundup | Lemlinh.com · August 14, 2008 at 7:03 am

[…] Flash ActionScript 3.0 XML Text Array Loader […]

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Web

Angular JS Magazine on Flipboard

I have been working with AngularJS for about a year now, trying to learn as much as I can about this growing framework. It’s been a wild ride and I’m going to post a summary Read more…

Top 5

Top 5 Articles : Week of November 25

During the the week of November 25th, I really started to dive into Angular JS. My top 5 articles of the week are mainly about AngularJS, an MVC framework by Google. #1 : AngularJS WebInspector Read more…

eCommerce

How to implement Bronto Email JavaScript Conversion tracking in Google Tag Manager

This tutorial will show you how to setup Bronto Advanced JavaScript Conversion tracking using Google Tag Manager. Bronto Advanced JavaScript tracking gives you more visibility to all of the products that customers are purchasing, then Read more…