Simple ActionScript 3 Slideshow Engine
Simple ActionScript 3 Slideshow engine. This class file simply creates a slideshow that in its current setup, cross fades between each image. The class uses external images and is in fact, abstracted from sourcing any images. It is up to you to provide the class with an array of image URLs for it to use. This is a reworking of an earlier class, which has now been removed from this site.
Class currently uses tweenLite to handle the alpha transitions. However, this is simply replaced via a simple timer function. But I’ve left tweenLite in the class so that people can change the transitions to other types, like, blur, photoFlash etc easily by changing the tween type. If you just want an alpha fade and don’t use tweenLite elsewhere in your project, replace the tweenLite functionality with your own alpha fading transition. An example of which, is commented out in the class source code.
Class settings are instance based, which you access via getters/setters. So you can have muliple slideshow instances running at the same time
Class Features
- External Images
- Control over image cross fade time
- Control over image display time
- Linear or random image progression
- Automatic (timer) progression, or via mouse event
- Looping or play once
- Pause / Resume the slideshow in auto mode
Via setters, you can access and set the following properties for each slideshow instance..
xFadeTime: get/set – DataType:uint – Sets crossfade time or transition time between two slides in seconds
imageTime: get/set – DataType:uint – Sets total image display time, not including xFadeTime in seconds
slidesPlayRandom: get/set – DataType:Boolean – Sets the linear or random play order for slides. Set to true for random playback.
slidesLoop: get/set – DataType:Boolean – Sets whether the slideshow loops, or stops at end of images array. True = looping
slidesAutoPlay: get/set – DataType:Boolean – Sets whether the slides use the timer to auto progress, or whether a user must click on the slides to progress. True = autoPlay
Look in the demo .fla’s document class for examples of listening for the classes various events. You can listen for Open, Progress, Complete and SlideShowComplete events at the class instance level. You can also dispatch a pause and a resume event to the class. Which will pause / resume the class if it is in automatic mode.
View Example
http://www.noponies.com/dev/as3_xslideshow/
Source Files
http://www.blog.noponies.com/wp-content/uploads/as3_xslideshow_1_2.zip
Dependencies
tweenLite
May 7th, 2008 at 3:48 am
hii,
can we create same slideshow without using xml or flashvars,
i need that the image will readed from a one single directory,if we update or delete somthing flash will work accordingly.
is it possible
thanks,
neeraj
May 7th, 2008 at 6:48 pm
Sure, you would have to use a PHP or similar solution to parse the directory for files.
May 8th, 2008 at 10:50 am
Hey,
great thing. It would be really nice if you could add controls to it and a loading status of the current loading image. Controls like
stop the slide show, start the slide show.
have a look at this website and it?Ǭ¥s slide show feature
http://www.sasokos.com/
Greets,
Roman
May 8th, 2008 at 11:57 am
Roman,
The class is meant as a base example that can be extended on. It already supports a progress event for each slide loading. I have demonstrated in the demo how to hook into that event.
For pausing and starting, simply adjust the classes timer interval.I added in a pause / resume event pair for pausing and resuming the slideshow.May 13th, 2008 at 5:43 pm
I can’t view the flash after embed. But I can view the flash by directly type the full URL SWF path. What’s wrong with me?
May 13th, 2008 at 9:21 pm
Mike,
NO idea.
June 3rd, 2008 at 6:56 pm
glad to see you switched back to this layout! It’s much nicer
June 9th, 2008 at 7:18 am
Awesome slideshow engine, thanks for sharing!! Oye Dale, if i modify your flash source, can i publish it in my blog?
June 9th, 2008 at 12:06 pm
Dario,
yeah thats fine. Just put in a credit etc. Be interested to see what you make.
June 9th, 2008 at 2:17 pm
Thanks Dale, i will tell u when publish it!! Best Regards from Mexico.
June 11th, 2008 at 4:50 pm
Hi Dale,
If I want to use this slideshow without using xml and php, just point to specific folder, how difficult to do it? Do you mind to show me how to do it in simplest way? The main reason why I want this is currently I have a project, and it requires to update the content from the directory (a folder), then every six hours, they will change the images (6 images) by replacing the old images.
Hope you can help and really appreciate it!
Thank you so much.
Budy
June 13th, 2008 at 3:33 pm
I am curious if it is possible to have the images fade out like they fade in. I have several different sized images in my slide show so when a smaller one shows up over a larger one the on in the back just disappears without any fading.
June 14th, 2008 at 2:04 am
I’m still a poor student so I can’t afford much but I’ve sent you what I can. To be honest, it’s not just because I’ve used this bit of flash (twice) but because I really do respect people who take the time to write concise code. And not just that but it’s easy to use (which takes good planning to achieve) and has notes that are all useful. Cheers. Buy yourself a good meal along with a tasty beer
June 15th, 2008 at 12:10 am
Kai,
Thanks a lot. Your support is very appreciated.
June 15th, 2008 at 12:45 am
Hi there!
Love the stuff you have here..!!
I have a question – does anyone know how would you go about to have the lower right corner fixed instead of the top left one? That way the image would still be cropped when needed but on the left side instead…
All the best, Nikals
June 18th, 2008 at 5:37 am
Howdy,
I just got your Full Browser XML Slideshow working, and out of curiosity i checked the rest of your blog and found this script. I have a few question:
1. How is this script different than FullBrowserXShow class you published in Feb 2008?
2. Is this new class meant to replace FullBrowserXShow class, or were you referring to a different outdated script at the beginning of this post?
3. Would you recommend using this script instead for a simple fullscreen slideshow?
Thanks and great work,
John
June 18th, 2008 at 12:07 pm
John,
The only difference is the fullScreen element of it.
The reference to the older class was about a version of this particular example, that I reworked to better handle memory and improve the overall structure etc.
For a simple fullScreen slide show, I’d still use the other fullBrowserSlideshow example. You could use this one, but you would have to implement the resizing to browser size etc.
A future update to most of the fullscreen classes etc here will abstract out the fullScreen elements of each class. I’ve written a more modular class that takes any display object and resizes it to fullScreen. Once I post that, you will be able to simply plug in content as you see fit, and have it scale to full browser size etc. Its all part of the fullScreen video demo I’ve been working on, and taking too long to finish.
June 24th, 2008 at 1:05 pm
Thanks for the clean script. In response to the folks above who want the old slide to fade out, add ‘onStart:oldSlideAlpha’ to the TweenLite function, then paste the following function right before the onFinishAlpha one:
function oldSlideAlpha():void {
if (contentHolder.numChildren>1) {
TweenLite.to(contentHolder.getChildAt(0), crossFadeTime, {alpha:0});
}
}
This will crossfade the old slide for the same duration as the new slide fade-in
June 24th, 2008 at 1:07 pm
Oops! I forgot to mention that the tween function is located on line 212 of the Xslides.as file.
July 13th, 2008 at 12:02 pm
[...] Simple ActionScript 3 Slideshow Engine [...]
July 16th, 2008 at 11:12 am
Hi , thx for the slideshow
i get an error when i try to remove the xslides from the display list
newSlides = new Xslides(imgNames);
.
.
.
removeChild (newSlides);
err:”There was an error when attempting to delete all slide content: class [error]”
ot seems this is the culprit: //loader.unload(); inside removedFromStage
thx any ideas?
July 16th, 2008 at 11:30 am
Nabil,
Yeah, I knew about that error and had fixed it, but had not quite uploaded it to the site.
I’ve uploaded it now, but if you just wanted to change your version; Remove that unload call from the RemovedFromStage handler and add in this..
[cc lang="actionscript" tab_size="2" lines="60"]
if(loader !=null){
loader.close()
}
[/cc]
The version I’ve uploaded also kills any running tweens, which can also cause an issue when removed from the stage, as tweenLite will continue to tween and then look for an object when it completes is tween, which of course is no longer there, and throws and error.
July 16th, 2008 at 12:40 pm
Awesome Dale- thank you so much for getting back to me so quickly i should have also thought about it too -but thx and i ll download your latest files.
July 21st, 2008 at 2:28 pm
Hi – is there a way to just cached the images after the slideshow has done rotating once ? instead of loading again the same images ?thx nabil
July 21st, 2008 at 4:58 pm
Hi,
No, no method to cache the images.
August 28th, 2008 at 9:30 pm
This is really awesome. I was having a huge issue with getting a good crossfade in Flex. I changed your class to extend UIComponent, and it works like a dream.
Cheers.
September 5th, 2008 at 5:12 am
Hi thanks for sharing this cool viewer!
Is it possible to add urls to the images you load?
Cheers.
September 6th, 2008 at 1:52 pm
Bernhard,
No, that functionality is not present at the moment.
September 25th, 2008 at 4:52 am
Thank you very much for your script. It helps a lot to all of us that are moving from AS2 to AS3!!
Cheers.
October 9th, 2008 at 3:14 pm
Hi i would like to know how to load an external movie, above the sliding images, on this example… can someone help??
December 21st, 2008 at 7:54 am
is it possible to use SWF files instead of images OR can i use both images and SWF files.
December 23rd, 2008 at 9:13 pm
Mike,
It only supports bitmaps at the moment. I’ve been meaning to update it.
January 13th, 2009 at 8:16 pm
Great swf!
One question, I can not get the swf to “play” in my absolutely positioned div. I currently play a swf intro and give visitors the option to skip or replay it. This all works, but the swf is at position 0, 0. How do I get it tto play in the div with id movie like on the club’s live page: http://www.hcca.org/index.html
My Flash skills are week, I tried creating this with a motion tween, but your version is much better. I saw someone mentioned making a “donation”, that seems more than fair for this great app, assuming I can get it to work. Again, thanks!
Also, thanks for providing the source class, I will try to learn from it. Note, if you load indexT it will pop an alert with movie’s x and y coordinates.
January 13th, 2009 at 11:50 pm
OK, I tried looking at the FLA. First, I just wanted to resize the movie to 400 / 300. However after doing this when I try to publish, I get several errors in AAS3_CrossFaade.as:
Line 20, Type not found or was not a comppile time constant loadxml
The same error on line 21 for Xslides
Also, there are errors that the definitions for the above can’t be found. A path problem perhaps?
My lack of knowledge is showing. How do I change the size to 400/300? Instead of random photo display, would it be possible to have a random start position, but retain the order?
Is it possible to point the one swf to different images.xml files for different slide shows?
Thank you for helping a newbie learn. I’m using Flash Pro CS3.
January 14th, 2009 at 9:03 am
I really should organize my thoughts … I fixed the path errors. I modified the .as files and changed the fade and pause speeds. This looks great. Again, thanks for the comments.
I loose my ‘movie’ div after launching the javascript function to load the swf. The pre and post call alerts in the page linked to show this. You referenced an id of movie it appears, so I renamed my movie div to hccamovie, but this did not resolve the issue. Any ideas on how to get the swf properly positioned in the hccamovie div would be greatly appreciated.
Thanks for a great app
February 9th, 2009 at 8:24 am
I really love this slideshow code! I’ve just made the transition to AS3 and this has been very helpful for learning. My one question though is, how can I add in titles and descriptions?
March 20th, 2009 at 12:07 pm
The only thing I find missing really is the function for “next slide” and “previous slide”. Other than that it’s a perfect solution. I’m attempting to implement that functionality myself now
March 20th, 2009 at 7:08 pm
nextSlide() was easy, previousSlide() still not working well
May 12th, 2009 at 1:23 am
Great slideshow! Does anyone have a next/previous button solution that they would be willing to share? That would be extremely useful.
June 16th, 2009 at 2:33 am
Really nice slideshow. But I’m missing next/prev buttons… Is it possible to implement this functions?
June 19th, 2009 at 11:18 am
Thanks, it was really helpful!
AT