Create a Dynamic Slideshow with ActionScript 3.0 and XML

Apr 20th in Screencasts by Pierre Laveklint

In this screencast I'll show you how to create a dynamic slideshow using ActionScript 3.0 and how to grab the images from an xml file. We'll keep the FLA empty except for the path to our Document Class and also create a custom class that will act as the engine for the slideshow. This is a file you can use over and over again, I hope you find it useful!

Author: Pierre Laveklint

Pierre is a flashdeveloper from Sweden. He spends his freetime learning new fun stuff and experimenting. He´s in a band called Moll Flanders where he plays guitar. Aside from Actionscript he is trying to expand his knowledge in other programming languages. It´s all about the fun...

View Screencast

Get the Flash Player to see this player.

Keep reading with more great tutorials and articles!

Enjoy this Post?

We'd love your vote!

User Comments

( ADD YOURS )

inLine April 20th

Nice Firt
( Reply )
1. yo' man February 4th
  
  super FIRT
  ( Reply )
GeemeeTheway April 20th

Great. I was hoping for this one since flashtuts debut!

you make my day!
( Reply )
Dave Poon April 20th

Thank you for taking time for this!! Great screencast!
( Reply )
cyber April 20th

First , thanks for taking time for doing the tutorial.

I have to comment though on the transition–it’s a bit jarring seeing those white space during the transition.

Dear Editor, could I request that all the screencast be made downloadable? Just like in AEtuts. It makes iy more convenient for people with slow connection or for people who wants to study it at a much later time.
( Reply )
1. Ian Yates April 20th
  
  No problem, from now on I’ll see that it’s an option. Check back soon and I’ll make sure all previously published screencasts are also downloadable.
  
  Thanks.
  ( Reply )
  1. cyber April 20th
    
    That would be great, Ian. Thanks for being a wonderful site editor.
2. Pierre Laveklint April 20th
  
  Hey Cyber
  
  The reason for not making the images fade from one to another so to speak was that I wanted to keep the tutorial as a first-base-slideshow so to speak, a quicklook at what you can do.
  
  If Ian and you guys want to see a part 2 where we make the images fade from one to another and maybe add some labels and tweaking the slideshow a bit more, just make a shout and I´ll be right to it.
  ( Reply )
  1. Ian Yates April 20th
    
    OK people – let’s see those votes! Who wants to see a part 2?
  2. samBrown2 April 20th
    
    yes on part 2
  3. DeMoehn_sm April 20th
    
    Oh yeha.
    I want to see part 2 for sure.
    
    I’ll do this part also because I’m only really confirm with AS2. But the fading effect is rellay missing here. Though because it’s just a beginner tut it’s good to keep it simple. *thumbsup*
  4. haobam April 20th
    
    Yeah… Part II pluzzzz
  5. cyber April 20th
    
    Ok, that would be great!
  6. Jasper Wissels April 20th
    
    Part 2 would be an awesome idea.
    Suggestion for nettuts to generate an xml based from php-mysql, so it can work together with the flash movie. Multiple areas where the text messege can appear, inclusion of links, etc. This could be the beginning af a great series of tutorials, which alot of people will find real helpfull in my opinion!
samBrown April 20th

great tutorial, thx for the post
( Reply )
Dario Gutierrez April 20th

Good work! Nice tutorial.
( Reply )
Zack April 20th

very nice. Like the screencast.
( Reply )
dev21 April 20th

nice
( Reply )
Franky April 20th

Pretty Cool. The flash to white is a little distracting. But that can be fixed!
( Reply )
samBrown2 April 20th

one thing I’d like to see more of, which BTW Pierre did a good job of while wrapping up, is the overall description of what the app will do, how it will function, and therefore how to approach building it

For example, this is a slideshow app, so an overall description talk about loading images, transitions, things to think about progromatically before hand (what variables need to be set up) etc.

again, great screencast, very informative…and like the see the use of Flex as well!
( Reply )
André April 20th

This is a really great work, would be better if wrote the steps because i cant read well the video, but your work is great, congratulations
( Reply )
1. Ian Yates April 20th
  
  I would suggest you download the source files at the top of the page – 100% legible ActionScript!
  ( Reply )
  1. André April 21st
    
    I´ve downloaded, and it´s VERY WELL structured, the author is very carefull in those parts, but i think in steps is a little bit better to learn, just my suggestion.
    
    But i liked this tut very much, and again congratulations Pierre Laveklint for this great job, keep you great work and thanks for sharing.
Tanna Shaknovsk April 20th

very interesting way to do this kind of stuff. thanks for the video!

and PART II are welcome! ))))
( Reply )
lawrence77 April 20th

Download ScreenCast a good option!
In previous screencast tutorial i hardly try to download that, and finally i download that…
but here u simplified my work!

Thanks Flashtuts!

A next and previous button added crown to this, but its missing!

Anyway a nice tutorial!
( Reply )
1. lawrence77 April 20th
  
  maybe part 2 includes next and previous buttons!
  Looking forward to that!
  ( Reply )
Benjamin Reid April 20th

Nice TUT. I still haven’t delved into AS3. I might… Soon…
( Reply )
john April 20th

It’s so good to see the tutorial as a screencast, makes it so much easier to understand and follow. and being able to download would be so good.
looking forward to Part 2
( Reply )
Richard S Davies April 21st

Very nice tut, +1 for part 2, wouldnt mind seeing some AS3 masking techniques, and loading bar
( Reply )
ev4n April 21st

another vote for part 2!

needs to have:
loading bar
transitions
menu to jump to a particular picture

thanks!
( Reply )
jack April 22nd

thanks for effort!!!!!!!:) but the code not clear
( Reply )
Diego SA April 22nd

Hmmm. there’s something missed in this effect… Dunno.
But it’s great!
( Reply )
Majesticskull April 23rd

Nice tutorial! I vote to part II
( Reply )
Stephan April 25th

Another vote for part II, just love to learn some functional AS3
Keep it going Flashtuts
( Reply )
zeroone April 26th

nice tutorials
( Reply )
CgBaran Tuts April 27th

Great tutorial thankss
( Reply )
Devang April 28th

That’s Nice Tutorail….
I just see…

But Add some tutorial for beginners…. so they can also learn flash & Flex.
( Reply )
YISRAEL April 28th

I need help!
I am new to this and dont’ know where it is that I should start so basically I am lost. Is there somewhere I can go to get some learning on an very very begainners level. I need somewhere to start with this for I would like to learn all about flash and how to use it especially when it comes to this tutorial
( Reply )
Janel Thomas April 29th

Part 2 sounds good to me
( Reply )
Steffen April 30th

Hey, a great tutorial Thx a lot! I’ll wait for the next parts

But i need some help…If I want to load the DynamicSlideshow.swf in my main.swf (Flash-Website), i get an error:
TypeError: Error #1009: Cannot access a property or method of a null object reference.

I don’t know what to do…using flash cs4 with as3

And thx a lot
( Reply )
1. Steffen May 2nd
  
  Btw, I’ve found a solution…but now there is a new problem…i can’t unload this slideshow…with unloadAndStop() it stops, but there is still the last loaded picture….
  ( Reply )
  1. Rafe July 20th
    
    How did you solve your first problem, I have the same issue!
Nityagopal Sahoo May 3rd

Good Tutorials……
Nice Work………..
GOD BLESS YOU MY FRIEND…………………..
HA HA HA HAAAAAAAAAAAAAAAAAAAAA
( Reply )
viaria May 12th

not good enough,
you should first load image when the current one stays there, after that make transition.. the white screen is not good. and think about slow net connection..
but anyway i learned from you some staf.. thanks.
( Reply )
sree May 12th

really rocks
( Reply )
Dainis Graveris May 14th

I really enjoy this simple tutorial and I like the most it’s screencast! Great I only now discovered You have also FLASH-tuts added to network:)
( Reply )
Tom Readings May 17th

Thank you for the screencast – I am just converting from as2 and it was very comforting to just follow along with a simple but well executed project (without too many classes)
( Reply )
Mike May 20th

Nice tutorial, Pierre. However, I’m having trouble running it after I recompile it using mxmlc. I just get a blue rectangle the same size as your images where one would expect to see the slideshow. Flex Builder is not an option, too expensive and I can live without it. Any chance you can post your build config xml file? I assume Flex Builder must have a way to spit out the same file that “mxmlc -dump-config=config.xml” does.

I downloaded Flex SDK 3 from the adobe site earlier this week so I should have the latest version of the tools. “mxmlc -version” yields “Version 3.3.0 build 4852″. I have tried all manner of mxmlc command line switches to no avail.
( Reply )
Slavka May 21st

How do i change the size of the slides?
( Reply )
Gustav May 28th

Is it possible to make a of the whole thing? like a clickable banner?
( Reply )
Brian May 31st

Is there any way to modify this to do the following things.

1.) have a transparent image / text overlayed over all of the images and change for each image
2.) have the picture resize itself automattically to meet the deminsions that you set in the html file

Thanks
( Reply )
Dan June 1st

When is part 2?
( Reply )
karla June 5th

how do i import a similar slideshow into dreamweaver cs3?
everytime i import the swf file, nothing happens, i am very new at this
( Reply )
Pierre Laveklint June 6th

Hey guys, thanks for all the comments. I´ve been super busy, but part 2 and 3 are coming up. There will be some pretty cool stuff.

We will go over quite a lot..

See you soon.
( Reply )
geoff June 8th

I have to say this is the most easy to follow guide i have seen on how to create this viewer. i have a question though. Let’s say you wanted to make one that was like the one off the main page from hulu.com. How would you create the controls, not just the forward and back but also the buttons at the bottom that will bring that pic that is assigned to it to that screen? Also how would you make it so that when you click on that pic it would take you to a picture with more detail?
( Reply )
Durgesh June 19th

HI i m Durgesh.
nice work
( Reply )
Luee June 28th

Thanks for the tut. But why do I get

“TypeError: Error#2007: Parameter url mast be non-null.
at flash.net::URLStream/load()
at flash.net::URLLoader/load()
at SlideEngine()
at DynamicSlideshow()
”

when I try to compile the source file?
Thanks,
( Reply )
1. Pierre Laveklint July 2nd
  
  hey Luee
  If you try to run the file from within flash you have to change the path to the xmlfile, since you can´t load the flashvariables sent through the html-file if you loading it up from Flash IDE.
  
  Change the slidesfile-variable to the path of the xmlfile.
  
  Check back soon, part 2 is around the corner, I know they are planning to release part 2 in the beginning of july.
  
  Later //
  ( Reply )
  1. Julio Villa September 17th
    
    where it reads:
    
    var slidesfile:URLRequest = new URLRequest(root.loaderInfo.parameters["slidesfile"]);
    var delaytime:Number = root.loaderInfo.parameters["delaytime"];
    var tweentime:Number = root.loaderInfo.parameters["tweentime"];
    
    what should we change it to….in orfer to run run it from the flash IDE,
    sorry but really new to this!!
Alex July 4th

Great tutorial, can’t wait for part two!
An example of slideshow I really like – http://www.foreverpipe.ro/slideshow.swf
( Reply )
dilip July 28th

Hi,

i see that you developed a great component but i would like to suggest you that let you create slideshow like as in myspace.

dilip
( Reply )
Chris July 28th

When I run the html, the screen is blank? What am I doing wrong?
( Reply )
Nathan August 12th

I’m having the same problem as Chris, does anybody know what is causing it?
( Reply )
Julio Villa September 17th

Great tutorial……how do can I use this same slideshow without the HTML page,
lets say I want to load it in another swf
( Reply )
Steven November 22nd

IS PART 2 coming anytime in the future?
( Reply )
tresdead December 9th

this is great! muchas gracias!!!
( Reply )
Amelia January 29th

Oh wow I did so not understand this lol! I don’t even know how to put the code into my HTML.
( Reply )
Ameliab2005 February 1st

Awwwe!!

I was looking forward to getting the source files from tuts Part II and III but the files are not working for some reason. Please fix!
( Reply )