| ActiveDen | Flash Marketplace |
| ThemeForest | Web & CMS Themes |
| GraphicRiver | Graphics, Vectors & Icons |
| VideoHive | Motion Graphics & Projects |
| AudioJungle | Loops & Effects |
| FreelanceSw | Freelance Jobs & Community |
| Rockable | Books & How-To |
| Creattica | Design Community |
| Mac.AppStorm | Mac Apps |
| Web.AppStorm | Web Apps |
| WorkAwesome | Be Awesome At Work |
| Envato | About Us |
| More Coming Soon! |
During its first two months, Part 1 of Pierre's slideshow screencast pulled in over 30,000 unique pageviews, making it the most frequently visited post on Flashtuts+ to date. The comments and requests came flooding in, so back by popular demand, here's Part 2!
Read on to see what's in store during this, the second of three installments.
In this screencast we'll take what we learned in Part 1 and dig a little deeper. However it´s not crucial to have watched Part 1 in order to follow along. We'll restructure the application and write all code from scratch again, since we'll be adding new features in Part 3.
In this episode we'll fix the transitions and also add a preloader. All settings and images are loaded from an external xml file. Be sure to come back and check out Part 3, where we´ll add more power to the slideshow with labels, navigation, multiple transitions and more!
Note: This tut has been split into two sections owing to the file size and the screencast duration.
Keep reading with more great tutorials and articles!
We'd love your vote!
We pay $150 for user submitted tutorials and articles that we publish. Anyone can send in a contribution
Community Link Feed
Oh my God, it even has a watermark
The effects and techniques demonstrated in tutorials on the Tuts network can be used in whatever manner you wish without attribution.
The text, images and tutorials themselves are copyright their respective owners.
You cannot copy whole tutorials, either in English or translated to another language.
Writing a tutorial or article for the site is not only a great way to get exposure and give back to the community, but we'll also give you $150 cash to boot!
This is YOUR site, so if you have suggestions or feedback on how we can improve it for you, please let us know! We do our best to keep up!
User Comments
( ADD YOURS )Dario Gutierrez July 8th
Excellent tut, maybe I will change the ease effect for the first slideshow, but definitely good.
( )Pierre Laveklint July 10th
Hi Dario, in Part 3 we will go over how to change the easing effects. An elastic ease may not be the perfect ease for a slideshow, mainly just to show of how easy it is to apply the ease you want in the final stage of application we´re creating here.
( )dupsycode August 18th
When is the part 3 coming out. I must confess this is a great tutor,complete and excellent. Will be glad if the part3 comes out very soon.
On a quick one, with the code for part 2 how can include the label tag to display text in the final output. Thanks.
Şahap (shahap) Tuna July 8th
Perfect. I wish that video tutorial is always. Thanks
( )Marquell July 8th
This was a great tutorial just what I was looking for on a friend of mines site. I want to use the first example but make it automated like the second example. I have to figure out how to do that. Do you need Flash CS4 or can you use Flash CS3?
( )cyber July 9th
either
( )Diego SA July 8th
Interesting!
( )Arnold July 9th
now there you go!
( )you make my life easier…
thanks for lettings us , download the screencast.Thanks!
your tutorial are really useful
Pierre Laveklint July 23rd
Thank you Arnold
( )System.gc() July 9th
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at classes.utils::SlideView/transitionSlides()
clicking the right arrow on top image..
( )Pierre Laveklint July 10th
That´s odd, I´m guessing you´re refering to the demo?
( )Pierre Laveklint July 23rd
This is caused by clicking the nav-button to fast. I will give you a quick fix for this in part 3.
( )Sebastian July 9th
Great tutorial!
any body know how can do that whit AS 2?
( )Pierre Laveklint July 10th
Hi Sebastian,
Why do you feel the need to do this with AS2?
( )Mario July 12th
Hi, first of all, I want to thank you for taking the time of writing and sharing your code with the rest of us.
Regarding your question, I don’t know why Sebastian would have asked to have it written in AS2, but I can tell you why I needed it too.
I am trying to get started in AS3, but still can’t get the time to do so, and even though I am not a programmer, I have read quite a lot of AS2 and find my way around it a lot easier, so that’s why I am still working with it.
I know that I have to change to AS3, but in the meantime also have to keep working, and AS2 is a far more accesible option for me.
Fortunately I was able to solve it, so Sebastian, should you still need it, let me know where to send you the code to, and Pierre, again, thank you for the time you took to write this… and I hope to be able to look into it very soon
Andris July 10th
I didn’t watch the tutorial but took a look at the demo. And I just wonder why I should do that with Flash and not just use jQuery. Are there any advantages?
( )Pierre Laveklint July 10th
Well, jQuery is awesome. I myself use it alot for showing of images in a fast and neat way. However, everything has it place. You might wanna tweak you slideshow and give it your own touch, use the font of your choice without worring about which fonts the end-user got installed etc.
Except of the obvious of this tutorial it will hopefully learn some of you out there how to get started with actionscript 3 development.
( )Tim July 10th
nice tut, only a bit strange that your are loading pictures again and again.. why not make a simple check if they are loaded. Then use them again..
you agree?
Thnx
grtzz
( )Pierre Laveklint July 10th
Once each image has been loaded, they are cached so loading them over again won´t take and time. As it will also keep our application more lightweight.
You could create one “container” for each image loaded, but my approach on this is to have two “containers” and switch the content.
As I mention in the tutorial, this is not the only way to create this kind of application, you can approach this in many ways.
( )Tim July 13th
True!
I adjusted it a little bit!! Ik made a simple array for de images..
great tutorial!
It’s nice that you keep in mind so many options.!!
grtzz
Tobias July 10th
I receive a #1007 handler at various functions in dynamicSlideShow.as. I have the feeling it has something to do with being a private function or public at the wrong place in the document. I have done exactly as stated in the tutorial… Any suggestions?
( )Pierre Laveklint July 10th
Hi Tobias, you must have missed out on something, since the code provided in source and in the screencast is correct. Could you send me your files and I will take a look and help you out?
( )Tobias July 17th
Hi Pierre, I found the error. In an attempt to keep up with you I’ve made a silly mistake! Thanks!
Dimitree July 11th
I get also TypeError: Error #1009: Cannot access a property or method of a null object reference.
at classes.utils::SlideView/transitionSlides() when clicking right arrow….
I have flash debug player with Firefox 3.5
Nice tutorial though!
( )Dimitree July 11th
I meant at demo page…
( )Stéphane July 11th
Thank you so much for this! It was very informative for an AS3 newbie like me.
I have a question though. I’d like to make a slideshow of .swf files instead of using images. So I modified the “transitionSlides” method as follow (sorry if the formatting gets distorted):
private function transitionSlides( e:Event ):void
{
_currentSlide.addChild(_loader.content);
new TweenMax( _currentSlide, _xmlProperties.tweenTime, { alpha:1, onComplete:startTimer } );
}
So basically, I just removed the bitmap var from the method and replaced by “_loader.content” in the addChild’s parameter.
When I test it, the swf’s show up, but they don’t fade away. You can see the result here:
http://files.getdropbox.com/u/1412336/testXmlSlider/index.html
I tested it with 4 slides containing 4 swf files (a, b, c and d). I know, it’s beautiful.
Is there something more I need to do for it to work with swf’s?
Again, thank you!
( )Vic July 12th
Very nice tutorial. Just what I was looking for.
I need some help. I mean I want to built a homepage on top of this slide show. Like, the logo and navigation in the front and the slideshow playing at the background. When I add the Document Class, the slideshow is working fine but the Logo and Navigation are also fading with the images. How can I retain the Logo and Navigation but have the slideshow play at the background?
I’m just getting started with AS 3.0. So, any help would be really appreciated.
( )Rid July 17th
I added a mask to the flash file because I needed rounded corners and now the swf is smaller in firefox. I am new to flash, is there something I can do about this?
( )Pierre Laveklint July 23rd
Hi Rid, by smaller.. could you explain or send me an email with screenshots?
The most efficient way to mask the slideshow would be to create a rounded rectangular with code and mask the slideshow container.
I´ll see if I can incorpate this in part 3.
( )Rid August 1st
Hi Pierre,
Thanks for replying.
I think the problems is that I am adding a 15px rounded corner mask. So I think what firefox is doing is shrinking it 15px to compensate or something. I am not exactly sure.
So if my slideshow is supposed to be 950 x 300 in firefox it is only 935. It’s kind of weird but I would love to use this script.
Thanks for any help or advice you could offer.
cris July 21st
Nice tut Pierre
I wanted to ask when we can expect the next screen cast? If it is going to be a while would you be so kind as to upload the completed source? I’m dying to finish this thing, and would like to reverse engineer the code before viewing the next vid.
( )Pierre Laveklint July 23rd
Hi Cris, I´m hoping to be able to record part 3 this weekend, so I hope you can wait…
The complete sourcecode for the slideshow will be included in part 3, and due to some requests made here I can´t give you the final code yet since I havn´t finalized it yet.
Hope this is okey with you
( )Fred August 27th
Which weekend??????
Gwen July 22nd
Hi Pierre,
( )Liked the slideshow so I want to use on my homepage. I’ve followed the tutorials, loaded my images and it looks good. I want to incorporate some of the other effects in the second tutorials, but now I get this message:
TypeError: Error #2007: Parameter url must be non-null.
at flash.net::URLStream/load()
at flash.net::URLLoader/load()
at SlideEngine()
at DynamicSlideshow()
Can you tell me what I’m doing wrong? Sorry I’m a newbie with AS.
Pierre Laveklint July 23rd
Hi Gwen,
glad you liked the slideshow. About the error message…
If you try to just load the slideshow up in a htmlfile, make sure to look at the embed-code in the sourcefiles, there you will see that the path to the xmlfile is passed into flash through flashvars, set the path to your .xml-file.
If you don´t use that embedding-code, change the xmlfile-variable-value to the path of your xmlfile, in the document-class.
Let me know how it works out
( )Gwen July 24th
Hi Pierre,
Thanks for the advice. I’ve tried everything and I’m stuck. Hate to be a pest but can you give me an example on where I need to start?
Pierre Laveklint July 24th
Hmm.. don´t know what to tell you beside of what I posted above, look at the embedding in the source-files. ( index.html )
Or change the path to the .xml-file inside the doucmentclass and re-publish the .swf.
If you´re still stuck, send me an email with all your files and I can take a look at it.
/ Pierre
Tim July 23rd
Finally found the time to sit down and watch your screencasts. (This takes some time as I’m in Africa and downloading over 300mb took 2 days…)
The best and most thorough tutorial I’ve seen in a long time.
I’m really looking forward to Part 3…
Tack så mycket
(PS Hope you get paid double for driving so much traffic to tuts+)
( )Pierre Laveklint July 23rd
Hi Tim.
Wow, that´s slow
Glad you finally can see the screencast on your computer!
Thanks, part 3 is coming up soon.
Nice goin´ with the swedish
Just glad you guys and girls enjoy the screencasts, I will try to find time really soon to do more tutorials.
See you around!
( )Pierre Laveklint July 23rd
For those of you who got this error message:
“TypeError: Error #1009: Cannot access a property or method of a null object reference.
at classes.utils::SlideView/transitionSlides()”
This is due to clicking the “next”-button to fast. I will make sure in incorperate a quick solution to this in part 3, which I hope to be able to record this weekend.
Later //
( )Fred August 6th
How ya goin’ with part three Pierre?
( )It’s two weeks since your last post, not that I’m trying to be pushy…
William Albert August 12th
Hi Pierre,
I’m look your class and i can’t find the code of navigation button, where is it?
thanks to this tutorial is very good
( )Chris D. August 13th
Hi Pierre,
Thank you very much for the tutorial. Exactly what I’m looking for.
I am having one final bit of trouble in the launching of it though.
I’m using Flash CS3, and the movie builds great. I can open the .swf and watch the slideshow. Once I insert the flash movie into Dreamweaver it just won’t run (local or server side). I’ve searched and searched for a solution to this, and now I think I’m just going down strange dark paths trying to find the solution to the problem.
If anyone can help with this it would be very appreciated.
( )Kristian August 14th
Dejlig Tutorial Pierre!
Hvornår kommer den sidste del?
(When will the last part be up?)
Cheers from Denmark!
( )Fred August 15th
Is it possible to use this as an attachment to a project without making it the document class?
Because I want to use this with timeline code at the same time… I’m not good enough to convert the entire project to purely AS3.0 coding…
I tried removing the doc class and creating an instance of DynamicSlideShow on the time line, but give back :
TypeError: Error #1009: Cannot access a property or method of a null object reference.
( )at DynamicSlideShow$iinit()
Numano designs September 15th
I was looking for this tutorial like months. Clients of mine asking me for ellegant and tight slideshow design, and this is it.
Big thanks,
Numano
( )Ty September 25th
hey great tutorial! i am trying to add a pre loader to this slide show with no sucess keep getting
TypeError: Error #1009: Cannot access a property or method of a null object reference. at DynamicSlideshow$iinit()
my loader is another preloader.swf file trying to load this DynamicSlideshow.swf it locates it loades the content gets to 100% and gives me this message.
( )Andreas September 27th
Hey Pierre*
Thanks a lot for this wonderful tutorial!
I would like to include the gallery into my main flash project.
What is the smartest way to do that?
I tried to import the DynamicSlideShow.as into my main package and to import the DynamicSlideShow.swf into my main flash file. Both didn´t work at all.
I guess more people are trying to do that. If you could give me a few quick hints how that works out, that would be amazing!
Have a nice weekend!
Andreas
( )Andreas September 27th
the error message I get says:
5006: An ActionScript-File can´t have more than one external, visible definition: main_script, gallery
Does anyone know how to solve that?
Thanks in advance!
Have a great weekend!!
Andreas
( )mish October 22nd
Hi Pierre,
( )Also trying to include the gallery into my main fla file but can’t seem to figure how to go about this. Any tips would be great
Great tutorial – many thanks,
Kasper October 22nd
Thanks for the tutorial. I’ve followed the video tutorial step by step up to the 18th minute mark on the second video. I’m getting an error from the SlideView.as file. The error is- 1120:Access of undefined property DynamicSlideShow. Does anyone have any suggestions on how to troubleshot this error? Thanks in advance.
( )Matt November 2nd
Is there a chance to add thumbnails to this slideshow?
( )Sakib November 11th
Great Tutorial, I learnt a lot from this. Thanks.
( )