ActionScript 3 Dynamic XML Slideshow

February 2, 2008 by jared

Update (18 May 08)

Click here for the latest version.

Filed Under Blog
Tagged: actionscript 3, dynamic, slide show, slideshow, xml, xml slide show, xml slideshow

Comments

53 Responses to “ActionScript 3 Dynamic XML Slideshow”

Jennifer Singer on February 13th, 2008 2:29 am

Hi – This is really helpful, thanks! I’m interested in making it so that the forward and back buttons are available on the movie load, rather than after you hit the pause button. Any ideas?

Thanks again!
jared on February 14th, 2008 12:03 am

Glad it helped. Sure here’s an updated copy. All I did was remove the timer, pause button, and made the forward and back buttons show up when it loaded. xmlslideshow-notimer.zip
Bloo on February 13th, 2008 4:55 pm

Great Code! I was able to learn from it as well. But I have a question about the variable “_control” in XMLSlideshow.as in your original with the timer. I was going through the code to understand what was going own and notice that when I took about “_control” the fade didn’t work after the first image loaded. Can you please explain to me why that is? I’ve tried looking in all the files to see if the variable was being used somewhere else but I can’t seem to find it. Can you please help, Thank you!
jared on February 13th, 2008 7:13 pm

Bloo: It’s a little hard to explain in text here, but it all has to do with hierarchy.

I assumed you commented out every line pertaining to _control inside XmlSlideshow.as .

The quick fix is simply changing lines 196 and 208 of the onTick function, instead of setChildIndex -2, change it to -1.

Use

trace(getChildIndex(child1));

to find out the index of objects (remember to replace child1 with the relavent object).

When I find time I’ll write up a post on how this slideshow works. Hope this helped.
Bloo on February 13th, 2008 9:45 pm

Thanks! I get it, because I commented out “_control” it caused the display object array to only have 2 cells instead of 3. So while “_control” is commented and “setChildIndex-2″ is executed it returns back a negative number, which is not good. So I’m thinking that causes the transition to not take place.
Patrick on February 14th, 2008 3:26 pm

Hello!

Here another stupid question. I use a very specific XML format as I output EXIF info using JHEAD. So my call to the xml looks like this:

var cNodes:XMLList = data.ImageInfo.FileName;

and then in picLoader:

var _slide:String = data.ImageInfo.FileName[i].text();

The first image is loading fine, but then I run into problem with the onTick function. I am pretty sure it’s somewhere in this line with the xml.length but not sure where to find it. If I check with a trace(cNodes.length) I get nothing back so I am misinterpreting your code.

Not sure what to do to fix this. Any help greatly appreciated. Here’s what my xml structure looks like:

photos/07.30.2006 20-23-20.jpg
38145
Wed, 30 Jan 2008 19:35:44 +0000
Caption Text Here

600
450

true
cloudy

Baseline
Patrick on February 14th, 2008 3:29 pm

Opps, my XML code got stripped. I’ll fake it

-ImageList
–ImageInfo
—FileName
—FileSize
—FileDateTime
—Comments
—Resolution
—-Width
—-Height
—IsColor
—Whitebalance
—MeteringMode
—JpegProcess
–ImageInfo
-ImageList
Patrick on February 14th, 2008 9:58 pm

OK,

figured it out. It was simply:

var _slide:String = data.ImageInfo[i].FileName;
greg on February 15th, 2008 2:39 pm

This is pretty slick!

I want to have thumbnail previews of the slides as i only use a max of 4 or 5 slides at a time.
jared on February 15th, 2008 6:54 pm

Greg: Go for it, I’m very sure it’s possible (it’ll just take some time!!). Just modify the xml file to suit your purpose, then maybe figure out a way to dynamically generate thumbnails. Maybe when you’re done you can share your results here.
jared on February 15th, 2008 6:56 pm

Patrick: No question is stupid. Good you got it working.
RL on February 19th, 2008 2:07 am

This is lovely.
Is there a way to control the time of each picture invidually in the XML sheet?
I would love to be able how long each picture stays on the screen independant of the others.
jared on February 19th, 2008 5:43 am

RL: Yes. First you have to create a new xml tag in the xmlfile, specifying how long (in miliseconds) each image should stay on the screen. Lets call this tag “delay”.

Then modify the PicLoader.as class: Create a public variable above the constructor, lets call it _delay. (We use a public variable here because we want it to be accessable outside of PicLoader.as).

public var _delay:Number;

And inside the myLoader function in PicLoader, assign _delay to reflect the “delay” tag inside the xml file.

_delay = data.slide[i].delay;

Now you can access the _delay for each image from XMLSlideshow.as, using child1._delay, or child2._delay.

That should give you a head start. Keep trying you’ll get it!
RL on February 19th, 2008 5:52 am

Thanks for the pointers Jared, that is very kind of you. I will try it out later today.
Cheers
andyrue on February 20th, 2008 4:38 am

Wow, great tool thanks for this. I was struggling to get to grips with XML usage in AS3, but your well-commented file makes it a lot simpler!

Just one question:
How could I build in an image randomiser, so the images don’t load one after the other, but go in no particular order?
jared on February 20th, 2008 4:54 am

Andy: Thanks but frankly the code I’ve provided is pretty messed up and could be much improved.

To answer your question, the variable i in XMLSlideshow.as refers to the node number in xmlfile.xml. i.e. if i is = 0, slide id=1 (in xmlfile.xml) will show. if i is = 1, slide id=2 will show. What you need to do is simply randomize the value of i inside the onTick function.

Every 7 seconds, the function onTick is executed. The current code inside onTick basically checks if the current image is the last, and if it is, it then loops the slideshow.

If you want to randomize images, remove the conditional statements used to check and use the Math.random class to randomize the value of i.

Good luck.
andyrue on February 20th, 2008 5:24 am

Thanks for the quick reply. I’ll try this when I get back home tonight.

You’re code may be “messed up” to you, but to a n00b like me who can so far only code simple navigation and loading functions, it’s great
jared on February 20th, 2008 5:52 am

No worries Andy. That’s the point of my blog: newbie perspectives Keep trying you’ll get it eventually.
andyrue on February 20th, 2008 11:18 am

Ok, I think I’m gonna need some help with this…

I’m developing it with a simpler XML file with only 3 images. (so that’ll be i=0, i=1, i=2)

The math.random function produces a psudo decimal random number, between 0 and 1. So to get 0, 1, or 2. I’m gonna need to *3, right?

Here’s the code I’m using instead of onTick:

public function onTick(event:TimerEvent):void {
i = Math.floor(Math.random()*3);
}

I know I must be doing something wrong, as it doesn’t change anything at all. The slideshow just goes also exactly the same as the old as file were being used…?

Please help!
jared on February 20th, 2008 5:50 pm

Andy: Great that you got a random number going. Yes *3 is correct. But you now need to load that number into the “container”.

public function onTick(event:TimerEvent):void { if (contLoaded == 1) { // if first container is used setChildIndex(child2, this.numChildren - 2); //bring the 2nd container to the top child2.myLoader(i); // load the image in the 2nd container contLoaded = 2; // image is now in second container } else if (contLoaded == 2) { // if 2nd container in use setChildIndex(child1, this.numChildren - 2); //bring first container to the top child1.myLoader(i); use 1st container to load image } }

Hope it helps.
Lynne Heller on March 7th, 2008 4:42 pm

Thanks so much for this code! I’m trying to load a lot of images – 259 to be exact. I can load up to 21 but at 22 something breaks. I’m been looking through the code but can’t find anything that would limit the number of images. I did create an xml file with all those images listed and have checked it over and over but don’t see any mistakes, particularly between the 21 and 22 images.

images/sb021.jpg

images/sb022.jpg

Any help would be gratefully appreciated!
Steph on March 13th, 2008 6:57 am

Hi, I came across this tutorial and it looks great! But I’m wondering if it’s possible to use a timer AND images links (1 | 2 | 3). I will max out at 3 pictures for any given slide show but need to have links to each spot, plus the transition and timer. Thanks!
Taylor on March 31st, 2008 12:25 pm

Hey,

How would I get rid of all the button controls and preloader so that I am left with a raw image slideshow?

Taylor
HM on April 8th, 2008 10:04 am

I’ve tried the instructions above for “Is there a way to control the time of each picture invidually in the XML sheet?” (posted by RL) but am having trouble figuring out how to write the code in order to access the _delay for each image from XMLSlideshow.as, using child1._delay, or child2._delay. I am totally new to AS3 and not a coder! Please help!
Howard on April 11th, 2008 6:51 pm

Got “unexpected file format” error while opening the XMLSlideshow.fla. I’m using Flash Professional 8. Any hints?

Regards, Howard.
Jared on April 12th, 2008 6:11 am

Howard you need Flash CS3.
peter on April 17th, 2008 9:20 am

Very good well done jared it helped my perception very much too. And here comes my question where is the Control class that you use ?
Thanks.
peter on April 18th, 2008 11:13 am

I am fine , sorry.
Ben on April 22nd, 2008 8:29 pm

Jared, thanks for the script. I am totally confused by AS3. It seems to me incredible that something that used to take a few lines of as and some sprite tweens now requires 4 external code files and an indecipherable (to a non-programmer) amount of code. Can you suggest some resources where I can learn more about what all that stuff means? Thanks.
jared on April 23rd, 2008 2:43 am

Check your email ben.
nton1 on April 25th, 2008 3:32 am

Hey,

Thank you for some great work.

Is there any way to get rid of the buttons and the controls, so you only have a slideshow?

Thanks
ron on April 25th, 2008 7:40 pm

Thanks so much for sharing I have been searching hard to find something that shows xml loading photos not just one part of the process in AS3. However, I would like to understand how this works. Is there any sites you recommend or links?? I do have a book I am going thought just takes a little time to understand it all..

again thanks for sharing any pointers would be awesome. and if not thanks for sharing the script.
walter on April 26th, 2008 6:03 am

I love that the player is simple. Question for you…this is what I have in my config file

var xmlFileLoc:String = “../shows/matt/bbb/xmlfile.xml”; //location of xml file.

It is still trying to load xmlfile.xml in the same folder as the rest of the slideshow. I’m trying to have everything work the same way in the folder but move the xmlfile.xml to another location because I want to make it so I can have multiple users be able to have their pictures in the xml file but still use all the code a couple directories down.
jared on May 5th, 2008 7:14 am

ron: I know what you mean. I’m not a book person either. Video tutorials have helped me a lot. Ultimately you have to get down and build something on your own. That’s probably the best way to learn. Start small, like a website. Get used to the cycle of getting stuck, searching the help files in flash, or googling it. You’ll be amazed, I think almost every kind of error encountered can be found with google.
jared on May 5th, 2008 7:16 am

walter: im not sure if relative paths will work that way with ../ , I haven’t tested anything but at least for now you know that putting the xml in the root directory works. Maybe try searching around and share your fix here!
Real Estate Graphic Design and Marketing on May 8th, 2008 10:29 am

Hi, this is a great program. Easy, customizable. Much thanks. Is it possible to make it stop at the end of the slideshow (all the images have been shown) rather than repeating?
jared on May 9th, 2008 5:09 am

Yes most definitely. All you have to do is put a check in the timer function, i.e., if currentslidenumber = totalslides, remove event listener for the timer, so it’ll stop the timer, and effectively stopping the slideshow.
Real Estate Graphic Design and Marketing on May 9th, 2008 8:26 am

Jared,

I’m sorry, I don’t quite understand actionscript too well. I only use the visual aspects of the program, being a graphic designer first. On what line would this function be on?

I’m don’t actually know what an “event listener is” so I’m not sure what I’m looking for.

Once again, major props to you for making this available for us newbs.
jared on May 14th, 2008 2:29 am

Mr Real Estate,

This file should sort you out. It’ll stop once it hits the last slide. Getting it to play again, well, that’s another issue.

http://www.simplistika.com/files/XMLSlideshow.as
jared on May 14th, 2008 2:32 am

In actionscript 3, you set up event listeners to handle “events”. Events may include mouse clicks, mouse overs, keyboard presses, and in this case, timers.

So all I really changed in there was to stop the timer from running once it reaches the last slide..
Real Estate Graphic Design on May 14th, 2008 8:59 am

Thanks Jared, I would never have known to insert “trace(“LAST”);” on lines 200 and 214, or to comment out “i = 0;child2.myLoader(i);”

Funny thing though, it goes through all 20 of my photos, but instead of stopping at image #20, it pops back to #19.

Odd. But good enough for me.
jared on May 17th, 2008 1:28 am

trace is just a debugging tool to tell you that the program runs through that particular part of the code. i think you’re the second person who reported problems with more than 20 images. anyway i’ve simplified some of the code for this project and will post it up soon.
beb on May 17th, 2008 7:25 am

Hi jared,
thanks for this great example.
I need to remove all _control to enable to click on the DisplayObject to go to the next picture.
I comment all the code relative to the _control object and set up the following property:
this.addEventListener(MouseEvent.CLICK, ctrlForward);

this thing work perfectly but i still have the green progress bar.
How can i disable this thing and add my own progress bar.

Thanks
AS3 XML Slideshow | Simplistika on May 17th, 2008 11:23 pm

Updated version. I’ve tested it with more than 20 images and it’s working fine.
http://jared.simplistika.com/as3-xml-slideshow-v12/
Steve on May 20th, 2008 5:45 am

Great slideshow app!

How about adding the means to have a title for each image displayed over the top and pulled from the XML?

Thanks for being generous with your code. Much appreciated.
Quince on May 25th, 2008 11:22 am

This was an excellent script. I changed a few lines in the XMLSlideshow.as to make the transistion work better. The reason for this is that I’m using different size images and the previous image was showing through on the bottom or sides.

First change line 227 to this and add line 228:
TweenLite.to(child2, 1.5, {alpha:1});
TweenLite.to(child1, 1.0, {alpha:0});

Now, change line 234 to this and add line 235:
TweenLite.to(child1, 1.5, {alpha:1});
TweenLite.to(child2, 1.0, {alpha:0});

This will make the back image fade out while the new image fades in.

Two other things I found that were very nice was to comment out the preloader width and height. The only trick is to make sure the preloader is not above the menu so you willneed to re-position the controls, preloader or both.

the other thing I found is, the controls MC was a great place to add a skin for the slideshow.

Finally you can fix the preloader to make frame 1 blank in the preloader MC then add

_preBg.gotoAndStop(1);

just after line 238. After the slides have been loaded the preloader won’t show up.

You can see how it came out at http://12seasonswinebar.com

Excellent work, Thanks!
Quince

Download the files here
Steve on May 25th, 2008 11:56 am

Quince, Nice additions…

I looked at your site but have to wonder if the images should not be loaded continually rather than each time so you have to see the wine bottle or any preloader…? Preloaders have virtually little design value and are only feedback to the viewer if they are not seeing anything change on their screen.

Even though the wine bottle is a cool preloader graphic it seems any preloader takes away from the clients intended display material.

So my question would be if you could load all the images so there was no need to see the preloader unless the images were not available (a slow connection for instance)? Maybe preloading constantly is not a good use of resources so we “have” to preload each time an element is called?

Regardless, if your new code solves the background image showing problem, good job!
Brad on June 5th, 2008 6:00 am

Jared,

Nice slide-show.
was able to customize buttons, size etc…
Need to add more images than just three. Is this as simple as adding more images into the “images” folder and keeping the naming sequence? I tried this, but still keep cycling through the first 3 images. Any help is greatly appreciated.
brad on June 5th, 2008 1:18 pm

nevermind, figured it out in .xml file.
matt on June 24th, 2008 2:17 pm

Thanks for the example.

Can you give me any pointers on how to implement a link for each image and have all the navigation(back, pause/play, forward) work at all times?

I can’t even seem to find info on the functions preBG() and Control().

Is Control() part of the MovieClass which Sprite inherits? Is that right?

AS3 has got me lost…
iamsmug on July 3rd, 2008 11:30 am

Dude the example is great but if lefft on for a long time it crashes. How can garbage collection be added to stop this?

Cheers
mike on August 7th, 2008 8:29 pm

got this error when I tested your v1.2 (with images) on my mac: 1046: Type was not found or was not a compile-time constant: XMLSlideshow.
Shikha on November 12th, 2008 8:14 pm

The code is amazing
but as my knowledge of as3 is very limited, i cannt find my way around for accomplishing the desired output.
is there a way the unending loop of transitions could be limited to the number of images and embedd a video in the end thats also database driven in the end.
AM i asking for too much!!!!!!!!!!1

ActionScript 3 Dynamic XML Slideshow

Comments

Featured

Recent Posts

Recent Comments

Categories

Tip Jar

Archives