ActionScript 3 Full Browser Slideshow
An ActionScript 3 implementation of my AS2 Full Browser XML Cross fading slideshow.
One of the main areas of concern for me when making this file is memory usage. It is pretty easy if no clean up routines are used to push the Flash player memory usage right up and over 100 megs due to the size of the images that are loaded in. To get around this I’ve used bitmap objects which I dispose of after every image cycle. This keeps memory usage to the bare minimum and frees up memory from Flash player instantly, rather than waiting around for the garbage collector to do its thing. If the bitmap approach is ditched and just a pure object deletion approach is used the garbage collector will keep the memory usage of this example down around 40-50 megs, with peaks up to 70 and lows of around 25. With the bitmap approach coupled with the object deletion memory peaks at around 30 (depending on image size) and drops down to lows of 15. Much better I think. This class attempts to keep memory usage down by creating bitmapdata objects from the loaded images. It then runs a routine to keep track of each bitmap loaded so that they can be removed when no longer needed. At most there are only ever two bitmaps in memory. As soon as a new slide is fully displayed, the old slide is removed and all vars pointing to it set to null. Memory usage stays fairly low using this approach, around 20 megs or so depending on the size of the images loaded in.
The slideshow supports a clean up routine, that deletes all objects and disposes of the current bitmap objects. The slideshow dispatches a Loaded, Beginning Load and progress event. Along with various other utility events related to changing slideshow settings.
Purpose and Intent
This class is designed for creating fullscreen background images that can be set to change or transition in the same manner as a traditional slideshow. It is however not really intended as a stand alone slideshow and as a result does not support text descriptions etc. The main idea is that this should be unobtrusive to the end user. The methods for manually loading new slides etc are primarily for developers and not really end user features. With that in mind, the slideshow does work fine if its methods are exposed to a user of your site.
Class Features
- Change image source Array at runtime
- Image Alignment within Stage
- Various Public Methods for loading, pausing, resuming slideshow
- Random or linear image progression
- Manual or automatic (timer) image shuffling
- Various Events
- Memory Management
- Looping or non looping
- Definable Image Time
- Definable Cross Fade Time
- Definable Min scale size at which point the images are clipped
This is a fairly complex class. Read the class documentation and look at the included document class for the .fla for examples of how to use the various methods and respond to the various events the class dispatches. If you encounter bugs, please post them here
The download includes a .fla, a document class for that .fla, the main slideShow class and a couple of utility classes, one for parsing XML, one for creating a FullScreen Contextual menu and one for flexibly laying out the button on the stage. Along with the font used and the images used
Feel free to hit that donate button, this was a fair bit of work! Enjoy!
Updates
27 Feb, 2008: Initial Release.
01 Aug, 2008: New methods, clean up of properties, documentation, moved to using NpFSObjectResize class for scaling of images.
24 July, 2009 Fixed tween timing issues, moved events into seperate class, new names for some methods, cleaned up documentation, some refactoring of code.
In this demo, the slides are displayed for 25 secs, cross fade time of 2 secs. Slideshow is in automode and fullscreen is enabled in the host swf.
View Example
Here is an example; http://www.noponies.com/dev/as3_fullbrowser_slide/
Source Files Here are the examples source files; http://www.blog.noponies.com/wp-content/uploads/npfullbrowserxfade.zip
Dependencies
This class uses the NpFSObjectResize Class (via composition) to handle stage alignments and scaling etc.
February 19th, 2008 at 5:46 am
same notes as above actually. It’s funny because I just got done building something similar myself. 25 euros is kind of ludicrous if you ask me.. I was going to say 15$..
February 29th, 2008 at 11:52 am
Pei,
The class expects an array of images. You are trying to pass it a particular image from what looks like an array called LINKS. The loadXML helper class does not return an Array called LINKS. If you have created an Array somewhere called links like so. var LINKS:Array = [image.jpg, image2.jpg, image3.jpg] then you would pass that Array to the slideshow constructor like so; var newSlides:FullBrowserXShow = new FullBrowserXShow(LINKS);
March 2nd, 2008 at 5:22 am
est il availible en Francais, my English not good
March 2nd, 2008 at 1:14 pm
Duvar,
Sorry, but my French is no good..
March 3rd, 2008 at 8:55 am
Looks good !
Thanks for share your work
I.
french user
March 3rd, 2008 at 11:50 am
Hi Dali,
thanks for your suggestion.
I assign a new array to save the array of loadxml.LINKS[i], according to the trace output, loadxml.LINKS[i] is working fine.
so my script looks like this:
var pics:Array = loadxml.LINKS[i];
var newSlides:FullBrowserXShow = new FullBrowserXShow(pics);
but i still got the same error:
1104: invalid xml name on Line 413
if (stage.stageWidth
the above line ends with “>” am I not copying your script correctly?
March 3rd, 2008 at 11:54 am
i just found the comments wasn’t allow to paste that problematic line, let me re-paste it here:
“if (stage.stageWidth”
March 3rd, 2008 at 11:55 am
if (stage.stageWidth
March 3rd, 2008 at 12:48 pm
What does your LINKS array look like? Is it a nested array? Ie, an array within and array? Like LINKS=[[blah, blah],[bob, bob]] etc?
The slideshow expects an array of images exactly like how I posted above, you seem to be trying to tell it to load one image from an array, which wont work.
This line in the demo, newBgSlideShow = new FullBrowserXShow(myloadXml.imagesArray); is using the returned array of images from the XMLloading class.
March 4th, 2008 at 8:16 am
Hi,
it traced as “img_2.jpg,img_1.jpg,img_4.jpg,img_2.jpg,img_4.jpg,img_4.jpg,img_4.jpg,img_2.jpg,img_1.jpg”
it doesn’t look like LINKS=[[blah, blah],[bob, bob]] , should i reformat it?
March 4th, 2008 at 11:03 am
OK,
then you need to pass the LINKS array itself to the slideshow, not just one image from that array.
Correct: newBgSlideShow = new FullBrowserXShow(LINKS);
Incorrect: newBgSlideShow = new FullBrowserXShow(LINKS[i]);
March 22nd, 2008 at 5:12 pm
hey there, i really love this script, but i don’t undrestend actionscript 3.0 very well yet. I wonder ig there is any way in this acordian menu, to make some submenus…can you help me?
Thanks
March 22nd, 2008 at 5:58 pm
Susana,
I think you posted this in the wrong blog entry. But, to answer your question; there is not really a simple method using the accordion to make it have submenu’s. I’ve been meaning to build an example of an XML Menu system, but have been pressed for time. There is an excellent AS2 XML menu at kirupa.com; http://www.kirupa.com/forum/showthread.php?t=124931
March 23rd, 2008 at 3:43 pm
hello, thanks, it is very usefull. but wath i really want, is this acordian xml menu that loads images, but eith submenus…like a tree menu with images
did you undrestend that? is is very dificult?
thanks
sory my bad english
June 5th, 2008 at 1:04 pm
Soren,
As its a fullScreen gallery, it just shows the images fullscreen. If you don’t want it to be random, change the var for randomSlideshows
June 9th, 2008 at 5:46 am
is it possible to make it autoplay, so it automatically change slide ?
thanks
June 9th, 2008 at 12:08 pm
Rob,
Sure is, make sure this is true
private var autoSlides:Boolean = true;//Automatic slideshow progression (true), or Manual (false)
Looking at the class, thats actually not that clear. I’ll have to make a change to it I think.
June 18th, 2008 at 5:19 am
Hi,
Great script. Well done on getting the memory down. Love the events. And nice code documentation. Good job all around.
I was hoping to use this script in an upcoming project of mine and i wanted to check what the license is. You seem to be letting us use it freely, but a more clear declaration from you would be great. The “Creative Commons By” license is pretty close to what you seem to be offering.
http://creativecommons.org/licenses/by/3.0/
Would you let me know, thanks.
-John
p.s. Im definitely gonna toss a few bucks your way if i end up using this.
June 18th, 2008 at 12:00 pm
John,
Yeah, you are free to modify, use the script in anyway you like. The only thing I don’t want people to do, is use the scripts as a basis for flash templates on sites like flash den.Basically to stop people from download one of these examples, posting it somewhere else and getting paid for it. I’ll have a look at the creativecommons licenses and see what one fits.
June 22nd, 2008 at 3:44 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, Niklas
July 1st, 2008 at 2:06 pm
Just wondering if there’s an easy way to get the images centered in browser(when bigger than browser’s window)instead of top left anchored. I’m trying to use this class to get images in a Flash “header” section of an HTML site that covers the whole width of the window. I’m using very wide images to start with and setup a minimum width so that on most configs images will show at 100% but still stretch for users with big screens…
Thanks!
July 1st, 2008 at 3:06 pm
Yann,
A few people have requested the ability to scale the images from a point other than 0,0. You could try the new http://www.blog.noponies.com/archives/105 class. If I get a chance I was going to rework this class to take advantage of that new class.
But, to answer your question, at the moment, no there is no easy way without editing the class files.
July 12th, 2008 at 9:00 pm
[...] ActionScript 3 Full Browser XML Slideshow [...]
July 22nd, 2008 at 10:54 pm
Hey, the script is great. Just having some trouble. I’m uploading a test of the site. BUt the background images don’t seem to be coming up.It works well on my computer. but I uploaded everything, the images in the background do not show up.
Yes, they’re uploaded on the server.. so what do I have to do to fix this?
thanks for any help…
July 28th, 2008 at 11:42 am
This is perfect. How would I go about adjusting the speed of the transition? I’d like for it take a little longer to fade. I thought it might be in the showLoadResult function in the .as file, but I don’t see a change when that happens, can you help me with that?
July 28th, 2008 at 1:27 pm
Joe,
//set cross fade image time
public function set imageFadeTime(newcrossFadeTime:int):void{
crossFadeTime = newcrossFadeTime
}
July 28th, 2008 at 3:46 pm
For some reason that didn’t work for me. I tried a different approach, I added:
private var crossfadeTime:Number = 4;
around line 31 (it’s my last variable I’m defining)
Under the following line:
slideTimer=new Timer(timerVal,0);
I added:
this.crossfadeTime = 4;
Then in my showLoadResult function, I added:
private function showLoadResult(evt:Event):void {
if (contLoaded == 1) {
addChild(child2);
child2.alpha=0;
setChildIndex(child2,this.numChildren – childVal);
TweenLite.to(child2,this.crossfadeTime,{alpha:1});
contLoaded=2;
} else {
addChild(child1);
child1.alpha=0;
setChildIndex(child1,this.numChildren – childVal);
TweenLite.to(child1,this.crossfadeTime,{alpha:1});
contLoaded=1;
}
_preBg.alpha=0;
}
Is there something I’m doing wrong here?
July 29th, 2008 at 4:36 pm
Oh Crap! I was referring to a completely different blog I’m sorry. Admin please delete my comments. I’m really sorry about that.
August 11th, 2008 at 5:47 pm
These classes reads some SWF into XML?
August 11th, 2008 at 7:10 pm
Yes, it does. But its for images only.
August 28th, 2008 at 11:52 pm
This is excellent thank you! Just what I’ve been looking for. One thing I can’t figure out is how to add a Previous button functionality. I’ve assigned a new private var of q:int; and on my previous button function I use q–; but it doesn’t seem to like that. Any help would be greatly appreciated.
Thanks again.
Rose
August 28th, 2008 at 11:52 pm
Sorry, to add to the message above I actually use q–;
August 28th, 2008 at 11:53 pm
Me again. Just to clarify, your form doesn’t like 2 minuses, that’s what I intended to put
Thank you!
August 29th, 2008 at 4:29 pm
Rose,
Currently it does not really expose the internal counter for tracking where in the array of possible images the slides are loaded from. What probably needs to be done, is for the displayNewSlide() method to support a parameter that controls what slide you want to load in.
Try this modification – you will have to make sure that you don’t pass in an int index for your images array that is beyond what is in your array images!
Note, two modified methods, the load image method, and the displayNewSlide method.. Once you are done, call the displayNewSlide(yourImageToLoadIndex)
[cc lang="actionscript" tab_size="2" lines="60"]
public function displayNewSlide(…args):void {
if(args.length==0){
loadBgImage();
}else{
loadBgImage(args[0]);
}
}
//————————————–
// LOAD IMAGE METHOD – LOADS IN NEW SLIDE ASSETS
//————————————–
//will attempt to kill any currently downloading images if a new image is requested before the currently downloading image has finished loading.
private function loadBgImage(…args):void {
//if an image is currently downloading, and another image is requested, kill the loader and its download.
if(loader!=null){
try {
loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, loaded);
loader.contentLoaderInfo.removeEventListener(IOErrorEvent.IO_ERROR, onIOErrorHandler);
loader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS, progressHandler);
loader.close()
loader = null
} catch (e:Error) {
trace(e);
}
}
loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded);
loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onIOErrorHandler);
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);
if(args.length==0){
loader.load(new URLRequest(String(imagesArray[p])));
}else{
loader.load(new URLRequest(String(imagesArray[args[0]])));
}
}
[/cc]
August 30th, 2008 at 12:08 am
Thanks Dale, I’ve modified the code as above but I still can’t get it to show the previous slide. I’m using this as a linear slideshow and I’m sure this should be easy but my brain has gone numb!
August 30th, 2008 at 2:00 pm
Rose,
call the currentSlide getter, which will return the current slide+1, so to reverse, you could go;
classInstance.displayNewSlide(classInstance.currentSlide-2)
I should change that currentSlide getter, so it returns the actual int of the current slide, and not a “friendly – never zero” version…
August 30th, 2008 at 10:06 pm
Thanks Dale, I’ve got it! Really appreciate your prompt replies and your help with this. Well worth a donation!
October 27th, 2008 at 10:43 am
Will it be possible to set image alignment via xml?
if i have different images should be great to set single alignment directly… (sometimes is better to have on with center align sometimes on left etc…)
thank you!
October 28th, 2008 at 2:39 am
Federico,
That’s not built into the class. You can add it however.
December 1st, 2008 at 2:49 pm
Hi Dale, great works, but I am going crazy to have it in background to a site similar to http://www.hellostereo.co.uk/
More in detail their 4 bgs images could either/also remain or be smaller while your works runs in background.
I have tried to load antohwer swf in your flla import classs but nothing seems to work
Many thanks in advance stefano
December 3rd, 2008 at 12:08 pm
Great source mate. Thanks a lot.
Does it seem like the 2 second cross fade takes a lot longer than it should? Any reason why this might be the case? I’m trying to get the transitions to take place at quite a fast pace but I can’t seem to make the cross fade any shorter.
December 8th, 2008 at 5:20 am
Adam,
The timer controlling it may be out, I’ll check it out.
December 10th, 2008 at 8:34 am
Hi Dale,
Thanks for great code!! just wondering how you were going with the timer control issue? i seem to be having the same issue, i have set the timer at 1 second and it is still quite slow.
January 16th, 2009 at 11:14 am
same problem here :-/
January 17th, 2009 at 3:40 am
I have to rewrite that element of the class, to ensure that the timer function is working correctly. I’ll do it over the next few days.
January 19th, 2009 at 10:48 am
Cool – looking forward to this. But can the fade still be smooth and flickerless? As it is now the fade transition is slower, the bigger the window is.
January 19th, 2009 at 9:31 pm
I think Flash just struggles a bit when its fading huge images, hence the slowdown.
January 24th, 2009 at 8:32 pm
Firstly, the script is quality
I do have a slight problem though, I am going through the classes and everything says that the images are aligned top left but when I resize the browser the images seem to be aligning top right.
Am I being silly or is this somewhere easy to change because your As2 version from previous was aligned top left.
Any help would be good, cheers
January 25th, 2009 at 8:43 am
there is a setting for controlling alignment, check the docs
March 1st, 2009 at 5:30 pm
I’m definitely a novice at flash and I cannot seem to wrap my head around how you implement this? Maybe I’m just blind but I didn’t see any actionscript in the .fla to call the external class. Also I know through the posts you say the pictures have to be loaded into an array to be passed to the constructor but I don’t see this happening in the example (I probably just don’t know where to look) Is it possible to have it just loaded straight from an xml file?
This is quite perfect for what I’m trying to make but I just need a little info on how it starts up!
Thanks for the files Dale!
March 1st, 2009 at 8:04 pm
It uses a Document Class, which you set in the properties panel after you have clicked on the stage, and given it focus. At line 43 or so of the Document class, is where the images are loaded, they come from xml.
newBgSlideShow = new NpFullBrowserXShow(myloadXml.imagesArray);
March 3rd, 2009 at 11:46 pm
Hello, first of all thanks for this great class.
But why in the dowloaded files when i test the index page i cannot find the “right-click View Full screen” menu?
March 4th, 2009 at 1:17 am
Its not in there, add it yourself!
March 17th, 2009 at 5:08 pm
Dale, great work on this class, I’m using it for a website I am building which I’ll be sure to link you to as it utilizes a couple of your classes. I had a question for you regarding this class in particular however:
I have a site I am building with a size of 1200×800, but for one section of the site, I know the images are going to be panoramas in a 2:1 or even 3:1 ratio. I’d like those images to be constrained by width so that the full image appears in the slideshow (scaling by width rather than by height or by “full”).
I was wondering how I could do this using your slideshow class? I saw that it references your npFsObjectResize class, and I thought there was a parameter for handling this (resizeMode ?) but I can’t get it work. Any help you can provide would be appreciated.
Thanks,
Kunal
April 3rd, 2009 at 10:52 pm
Thanks, this is exactly what i need for my site. I was wondering if you could show how to remove the status info and the next button. I’ll keep trying on my own but any help would be much appreciated.
Thank You.
April 22nd, 2009 at 9:19 am
@Adam and @Jenna and @Thor
Any luck getting the timer to be quicker fade?
Cheers me dears,
Clare
April 23rd, 2009 at 9:48 am
Also how do i ‘restart’ the slideshow? When i click a button i want to pass a different URL for XML to it and reload it. Any help would be greatly appreciated.
Thanks a million,
Clur
April 28th, 2009 at 8:29 pm
@Clur,
I’ve fixed it, I just have to upload a new version. I’ll try to do that this weekend.
May 3rd, 2009 at 6:40 pm
hey dale, this is great. have also used your full screen video class. Your blog has taught me a lot about AS 3.
I was wandering what sort of changes I would have to make to the various classes to display the images in a grid that respond to the NpFSObjectResize class. I want to fill the browser window with a grid of images that scale and resize as the browser window is resized. I understand how to load images and create a grid, just wandering how I could use the various classes in this example to accomplish this.
Any advice?
Cheers,
May 3rd, 2009 at 7:41 pm
Dale,
have managed to use NpFSObjectResize class to scale my content in the grid when I have around 6 columns. The problem is that I would like to have 17 columns, my image are all 180×135. When running the SWF with 17 columns, when resizing the swf – making the height smaller roughly 300 pixels in height – the content resizes and 17 columns fit – when viewing in the full broswer window the grid is cropped at 6 columns. Any ideas?
Also looking for suggestions on how to use your classes in this example for what I am trying to accomplish.
Thanks,
May 11th, 2009 at 1:38 pm
Really good work!
I wonder how does one create a “mouse” function.
An example http://www.ciriljazbec.com/#/commercial/portraits/2/
Mouse moves the image up and down.
I hope you can fix it to new version
August 5th, 2010 at 9:51 pm
Hi there, I tried to open the FullBrowserSlideDemo.fla in flash CS3 with no luck… An “unexpected file format” message pops up…
Could you kindly help me with that?
Thank you for all the precious knowledge you putting out there!!!!
August 8th, 2010 at 12:36 pm
@Lydia, its probably a CS4 file. I’d save it down to CS3 for you, but I have CS5, which I don’t think lets you back save that far. But, you really only need the document class to make it run in CS3, just create two dynamic text fields that that doc class expects, and it will work fine in CS3.