Create a Dynamic Slideshow with Actionscript 3.0 and XML – Part 3
Time to implement labels and navigation to our Slideshow Application. We’ll go over a lot in this third and final part of the series. This screencast is almost one and a half hours in total, so sit back, open up your files from Part 2 and let’s dig in!
View Screencast: Section One
Introduction
View Screencast: Section Two
Labels
View Screencast: Section Three
Tween Manager
View Screencast: Section Four
Navigation
View Screencast: Section Five
Roundup
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Pierre Laveklint
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
How to Write Great Copy for the Web
Add great content to your web projects with this easy to read guide to writing great web copy. Develop the skills to give your work a more professional edge.
Graphic Volcano - More
Active Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+ mobiletuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Activetuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
great slide show,thanks a lot
really great tuto!!!
thaks a lot
and more like that if possible
Good things come to those whose wait I guess…..
)
Thanks Pierre.
Great code, i didnt see the tutorial because i dont know why the video is too slow here, i still prefer steps written tutorials, but great job and keep this good work!!
Guess I missed it… How many parts are there going to be?
Hi RF,
This is the final part of 3.
- The first part was a somewhat walk-through of the basics ( no need to look at this in order to complete the application, start with part 2 instead )
I’m officially addicted to flash.tuts! a lot of great tutorial, thank you for sharing this Pierre
A message for webmaster: are the RSS feed of FlashTuts+ working?
I’ve the same problem with the CgTuts+ website…
Hmm, I’ve just noticed that the link to the Short RSS is broken (thanks for that, I’ll get it fixed) though all the other RSS feed links are fine.
Try clicking on the large RSS logo at the top of the page. And don’t forget you can always follow @flashtuts on Twitter
thanks for the tutrl, its really nice. I would like to see some more tutrls like these. Thank you.
Is there any way to have it auto play AND include the navigation buttons as well?
Some users may want to use the back button while watching the auto play… and some users may want to click through quickly after watching the auto play once.. thanks for a great tutorial!
Hi sled09,
as the application is setup that is not possible, however it´s not that hard to accomplish if you know a little AS3 to go in there and modify. But in order to have that you might also want to include play/pause buttons etc.
If this is a common request and with Ian´s approval I might put together one absolute final screencast on this subject and maybe how to add a mask for the application.
Any more of you out there who would like to see these features?
Thanks for the quick reply. It would be great if you could put together one more screencast and include the dual navigation functionality. I know I, and many others would greatly appreciate it!!
If you decide to do a final cast it might be nice to add a note about off setting the nav buttons so they hang off the edge of the images (just like on your homepage). I am trying to work it out right now, but I keep getting a gap that I can’t get rid of.
Thanks again for a great tut!
I think you should create a final shoutcast and send it, because it´s a great quality tutorial, and this kind of gallery is one of the most requested over the internet, so i think if you send it to Yan he shurelly will put it here, great work man!!
I´ve created my own slideshow api too, i need just to create the documentation so i will send it to the free stuffs, it´s xml controlled too, you can see it working at http://cavallari.freehostia.com/slides/ and http://cavallari.freehostia.com/slides/?swf=slide2.swf , also you can see the xml at http://cavallari.freehostia.com/slides/slides.xml , i didnt add a description section, but it´s too easy to create it, check the xml you can see the node, if you right click the slide you will see them there, the node sets the time of each image, each image can have different delays, at node you can add a start and stop context menu for the slide api… it´s all optional, the only node that need to exist is the of the … also you can bind keys for next and prev functions, if you press the arrows in my slideshow you can see it…
If approved, it will be soon at free area.
Another feature that I would really like is to make the image itself be a link. I tried wrapping the image with a link in the xml file but that keeps the image from displaying.
Yes waiting for the auto play WITH buttons.
Great tutorials Pierre! Thank you for taking the time
Part 4….
Yes please.
When do you think you could get this online?
Part 4
Yes please…
Great tuts btw! Keep’em comin’!
Is there a way to put a new png image in the same way as the navigation buttons – but without any action attatched. For example I want to put a logo in a layer over the slideshow instead of adding it to the images (wich means that the logo “slides” away with the image).
Great tutorial, it’s been really useful for us in many ways. (I’m also interested if there will be a part 4 with navigation and autoplay)
Thanks for the great tutorial. Please, more tutorials like this!
Hi Pierre,
I can’t thank you enough for this. I am in the process of implementing this on 3 commercial sites right now, with more to come.
I can’t for the life of me get the embedded font to work. I embeded the characters in a swf just like you did. I’ve tried with “ITC Stone Informal Std” and “Helvetica Lt Std.” I made the changes to the css as well.
Nothing shows up. Any clues here?
Thanks man…great work!!!
Nevermind…I just got it about 10 seconds after I posted this.
Thanks again!
OK – another question for you, Pierre.
Is there any way to have the labels on the bottom of the slides, and not the top?
Thanks.
When I try to edit the y values in CreateLabels.as, some really weird stuff happens. The bar appears for a second in one spot, then jumps to another.
Also, and more importantly, the swf doesn’t load some of the time…IE, just a white spot appears there. Really weird and sporadic…
I´m on the run right now but I´ll take a look at this tomorrow, ok?
Glad you enjoy the screencast!
One of the best tutorial, excellent work flow, and indeed its an advance technique.brilliant mate. keep it up, hope to see more good stuff coming.
Thank you Hussien, glad you like it!
Pierre i learned a lot from those 3tutorial and i moved from writing AS3 on timeline to, to writting classes, i have tried your slide show and it work fine.but when i try to load it from my dynamic xml driven drop down menu, it gives that error.
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at DynamicSlideShow$iinit()
and i always knew a way arround that error by
this.addEventListener(Event.ADDED_STAGE, init);
i have tried to load different swf file, they work perfectly that mean theirs nothing wrong with my dynamic XML driven drop down menu code.
any way to get round that error?
thanks a lot.
My first guess is that you haven´t changed the xmlfile-variable to have an absolute path to the xmlfile for the slideshow. We set it up to grab the xmlfile-path from flashvars, so make sure to set the path in the documentclass instead.
Let me know how it turns out.
how exactly would you do this? what would the code look like?
sorry, i’m a newbie to flash. but i LOVED your tutorials. so easy to follow and exactly what i was looking for.
Is there any way to have the labels on the bottom of the slides, and not the top?
Yes, in the SlideView.as file scroll down to the transitionSlides function. In the if( DynamicSlideShow.displayLabels ), you need to add label_box.y = stage.stageHeight – label_bg.height at the end. Place it after label_bg.height = label_tf.height + Number( _xmlProperties.labelBoxTopPadding ) + Number( _xmlProperties.labelBoxBottomPadding );
should look like this
if( DynamicSlideShow.displayLabels )
{
……..
label_bg.height = label_tf.height + Number( _xmlProperties.labelBoxTopPadding ) + Number( _xmlProperties.labelBoxBottomPadding );
label_box.y = stage.stageHeight – label_bg.height;
}
Nice topic!Thanks!
Pierre you are a genius!!!
i have only one problem…when i try to load it from another swf i have this error:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at DynamicSlideShow()
i’m going crazy….
thanks anyway
were you able to solve this?
cause i’m getting the same error trying to do the same thing and probably going the same amount of crazy…
This is very cool, I was looking for how to do something just like this for the past 30 minutes as well. Great work, thanks for sharing your knowledge.
Does anyone know if it is possible to use wordpress template tags for labels and descriptions?
Hello
The source file from this tutorial doesn`t work when i download it and try to play offline on my comouter. I launch index.html and get a blank grey rectangle of a clip also when i hit the demo on this site slideshows sometimes don`t come up (usually they do). The same is with examples frome the 2nd part of this tutorial, examples from the first part work correct
Anyone knows the reason??
thanks for help in advance
Maciej
Hey Pierrre! Thanks for this great tut! really helped.
I was just wondering if there was a way to have the same slideshow functioning on a swf file directly instead of an html file. I would be really thankful if you could help me out on this!
Thanks in advance!
Shahad
Hi,
Great tutorial, but when I download the source code and run the .fla file, it is giving an error.
And one thing I have different folder structure, I want to change the images folder path and the XML file path in this. Please help me.
Please update the souuce files.
Thanks.
Hi,
I tweak into it and I got it working (Actually I am not a flash guy
).
I need few more changes here.
1. Title and Short description – at the bottom
2. If I gave two lines of short description the entire short desc is showing in ONE line.
3. I want to add link to either image or some ‘go’ button for all / some of the slides.
If you know how to do this please help me.
Thanks in Advance.
Great tutorial, but when I convert the flash properties to flash player 10 I get a blank screen after I publish with no images also I get an error message.
TypeError: Error #2007: Parameter url must be non-null.
at flash.net::URLStream/load()
at flash.net::URLLoader/load()
at DynamicSlideShow()
Never mind I got it Thanks
TypeError: Error #2007: Parameter url must be non-null.
at flash.net::URLStream/load()
at flash.net::URLLoader/load()
at DynamicSlideShow()
Did you fix the problem?
Time for a DynamicSlideShow part 4 how to put the label in the bottom
I downloaded the files. Nothing seems to be playing when I open the index.html file.
The browser is telling me that some images have been blocked to prevent sender from intentifying my computer….reason I launch index.html and I don’t see the images loading….files from Parts I and II of this tutorial loaded fine on my browser, the only problem seems to be the source files from Part III……
And also, I forget where the css file is because I don’t see it.
Sorry for the multiples….correction….SOURCE FILES PARTS II AND III ARE NOT WORKING!
Seems that other users are encountering the same problem….it’s not my browser I believe.
Hi all I have the sme problem…….
TypeError: Error #2007: Parameter url must be non-null.
at flash.net::URLStream/load()
at flash.net::URLLoader/load()
at SlideEngine()
at DynamicSlideshow()
Any solution as yet?
i’m not very good with flash, but i think you can solve this in the DynamicSlideShow.as.
in the constructor, switch the lines that are commented out in the source files from the internet.
var slidesfile:String = “data/slides.xml”;
//var slidesfile:String = root.loaderInfo.parameters.xmlFile;
how do you integrate the swf into a flash site with actionscript 3.0? i want to place it in a frame that i have assigned to be one of the pages of my site. i would also like to know how you can remove the swf once you go to another frame.
GREAT TUTORIAL ……………
how can i use the swf in another flash movie?
great work!
Pierre – nice tutorial. How do i add labels at bottom of slideshow? Your help appreciated.
Is it also possible to add some dots in this slide show so that the viewer knows which image he’s watching
Here’s example what I mean:
http://www.kpn.com/glasvezel/home.htm
Thanx great tut
Another problem that accurred when I open only the swf the player stays blank. But when I open it in html it shows the slideshow. This is not really a big issue because with function f12 you can easily publish it in your browser. I just was wondering why this ‘bug’ accurred and if anybody else had this problem?
I use Flash CS4
thank your for the tutorial and well done slideshow!
i do have a question: i got everything working smoothly on my computer, but when i upload to my server, the slideshow doesn’t show. can anyone guide me? i am super-green when it comes to coding, but i do understand a little html and have a reasonable grasp how the pieces fit together.
thanks!
everything is error, even the demo
nice script. how can i upload multiple swf into dynamicslideshow.swf using nav buttions? maybe this can be an extension for script – Screencast 4? thanks.
regarding loading external swf. can anyone write class for uploading swf into dynamicslideshow.swf with nav buttons. want to display more photo galleries (swf’s) e.g. june. july. aug. etc using existing swf as container. any help is appreciated.