Flash ActionScript 3.0 XML Text Array Loader
19 January
Posted by Jake Rutter
ActionScript 3.0, Flash, Web
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
Dimitar G. Said,
January 21, 2008 @ 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.
AS 3.0 XML Text Array Loader | Programming Said,
January 21, 2008 @ 6:14 pm
[...] Text Array Loader [...]
Flash ActionScript 3.0 XML Basic Slideshow with Transitions | Jake Rutter - XHTML/CSS Developer Said,
January 22, 2008 @ 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 Said,
January 26, 2008 @ 3:56 am
[...] Text Array Loader [...]
news4u.qa2.info » Blog Archive » AS 3.0 XML Text Array Loader Said,
January 27, 2008 @ 5:05 am
[...] Text Array Loader [...]
aboutall.za21.info » Blog Archive » AS 3.0 XML Text Array Loader Said,
January 27, 2008 @ 1:14 pm
[...] Text Array Loader [...]
sana Said,
February 14, 2008 @ 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
Flash tutorials | Using XML and E4X,XML data and Parse AS3 in Flash CS3 roundup | Lemlinh.com Said,
August 14, 2008 @ 7:03 am
[...] Flash ActionScript 3.0 XML Text Array Loader [...]
Chris Said,
October 3, 2008 @ 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.