ActionScript 2 Full Browser Image Cross Fading XML SlideShow
A demonstration and source code for a Full browser Smoothed Image cross fading XML based slideshow using ActionScript 2, in Flash 8.
Basically it is a Full Screen Random Background Image XML slideshow. It uses the bitmap data object to create a smoothed background image, crossfade between new images and has the ability to turn scaling off at a certain user defined size. I borrowed some code from fr-ode’s example (image resizing) and have added in the XML and cross fading element. The code is well commented, you should be able to figure it all out.
Updates
20 Jan, 2008. Moved to tweenlite for tweening images. Bug fix.
Example
View an example here; http://www.noponies.com/dev/fullscreen
Source Files
Here are the source files; Full Browser SlideShow XML Source
Dependencies
You need GreenStocks excellent AS2 tweenLite class for this demo!
February 20th, 2008 at 3:15 am
Hi Dail,
just wanted to give you a shoutout from Sweden and say thanks for the source code, really nice stuff!
Question: implementing a preloader wouldn?Ǭ¥t be that hard, would it? I saw you left a variable in the code for it. Just output that to a dynamic textfield or to the _xscale of a movieclip would do it, right?
Again, thanks! // Marx
May 6th, 2008 at 3:52 pm
Hi Dail
First of all, let me tell you that your piece of code is great.
I just have one question, i have 4 buttons that load different
backgrounds, fallowing the xml file. My question is possible that, my
four buttons always load the same backs, independently of the order of
the xml file. Thanks in advanced
July 1st, 2008 at 4:21 am
Awesome!! — thanks so much for sharing this… I noticed that a bit of the images I tried get cropped off. For instance, I used an image that is 1600 w by 1069 h. It displays fullscreen nicely, but a little bit of the right side of the image is not there. Does flash think there is more screeen then there really is? I tried adjusting the code, but no success so far. Thanks again.
Steve
July 1st, 2008 at 3:02 pm
Steve,
That is pretty much how it works. If you want your image to match the stages dimensions exactly, it will get distorted.
July 1st, 2008 at 5:02 pm
Ah, ok. What I am getting at rather than a true background is a slideshow where the largest dimension of the image is sized fully to the browser size — that way the logic does not crop any images. This can be done with just some minor adjustment to the sizing logic.
Steve
July 1st, 2008 at 5:06 pm
Steve,
Yeah, you are correct, it can be done pretty simply!
July 5th, 2008 at 7:21 am
Dale,
Well, maybe not so simple for me. I got the slideshow to play with the sizing I wanted (I want the entire image to appear on screen without cropping and so the image is sized to the largest screen dimension). I got it to work this way ok, and I am using like a second interval between slides. But on resize of the screen the image first appears correctly sized and then adjusts to a different smaller size (this must occur with the fullscreenbg function). The code I used for the two sizing functions is shown below. I wonder is it possible to get the resize to work correctly (or is that a differnt application completely) and if you could spot readily where my code goes wrong? Thanks. — Steve
init function:
if (target._height>target._width) {
img_propa = target._width/target._height;
if (target._height>Stage.height) {
target._height = Stage.height;
target._width = Stage.height*img_propa;
}
target._y = (Stage.height – target._height)/2;
target._x = (Stage.width – target._width)/2;
} else {
img_propa = target._height/target._width;
if (target._width>Stage.width) {
target._width = Stage.width;
target._height = Stage.width*img_propa;
}
target._y = (Stage.height – target._height)/2;
target._x = (Stage.width – target._width)/2;
}
fullScreenBg function:
if (bgHolder_mc.bg_mc._height>bgHolder_mc.bg_mc._width) {
img_prop = bgHolder_mc.bg_mc._width/bgHolder_mc.bg_mc._height;
if (bgHolder_mc.bg_mc._height>Stage.height) {
bgHolder_mc.bg_mc._height = Stage.height;
bgHolder_mc.bg_mc._width = Stage.height*img_prop;
}
bgHolder_mc.bg_mc._y = (Stage.height – bgHolder_mc.bg_mc._height)/2;
bgHolder_mc.bg_mc._x = (Stage.width – bgHolder_mc.bg_mc._width)/2;
} else {
img_prop = bgHolder_mc.bg_mc._height/bgHolder_mc.bg_mc._width;
if (bgHolder_mc.bg_mc._width>Stage.width) {
bgHolder_mc.bg_mc._width = Stage.width;
bgHolder_mc.bg_mc._height = Stage.width*img_prop;
}
bgHolder_mc.bg_mc._y = (Stage.height – bgHolder_mc.bg_mc._height)/2;
bgHolder_mc.bg_mc._x = (Stage.width – bgHolder_mc.bg_mc._width)/2;
}
July 15th, 2008 at 2:31 pm
Thank u so much for this code. Is it possible to call loadRandomBitmap() function from a dynamic menu bar — Links are in an xml file . and if so can you please let me know how ?
Thanks
August 27th, 2008 at 6:30 pm
Hello,
I have managed to get the crossfading background working.. however i am loading an external swf on top of my background using LoadMovieNum. I am trying to get my code to load images from a specific folder depending on which scene of the loaded swf the user is in. How would I go about achieving this?
Thanks for any help
Jane
September 29th, 2008 at 6:06 pm
Hi,
This is a great code.
I was wondering if there was a way to create back and next buttons? Loading images sequentially and giving the user an option to look at a previous image…like you would in any gallery.
Instead of the loadRandomBitmap(); function.
Thanks for the help.
Chris
October 1st, 2008 at 11:39 pm
This is great – almost bang on what I’ve been looking for. I need to have a slideshow that loads random, external .jpg’s and fades in and out between them, roughly every second – any help hugely appreciated!
October 8th, 2008 at 4:35 pm
This is excellent! I was wondering though, you mentioned in another forum that you didn’t have time to make sure the pixelation was fixed before the image was done loading. How would you go about making this work?
Thanks!
October 8th, 2008 at 7:30 pm
Wade,
No, I never had time to do that. You would have to force smoothing on that temporary bitmap as it loads in.
October 28th, 2008 at 11:22 am
Hi Dale
This looks like what I’m after but I only have Flash MX vers. 6. Is there any way to post the code from Flash so that I can paste it in or will it not workk with vers. 6?
October 29th, 2008 at 4:00 am
Nat,
It wont work in Flash MX sorry. It uses bitmap smoothing etc which was introduced in Flash 8.
January 12th, 2009 at 1:05 pm
Hi dale!
I like much your file.
I have a problem, to see if you can help me.
The slideshow only works using _root, when I try to load the swf inside another swf that it does of principally, it does not work.
How it might do in order that it works using _parent, instead of _root?
Thank you very much
(Sorry, i don?Ǭ¥t speak english very well)
February 13th, 2009 at 6:15 am
hey guys,
Am using the code for a slideshow. The only modification i made to the code is to uncomment the amountLoaded part to use the data in a text box so the viewer can see percent loaded.
Well things are bad. It never goes beyond the first image.
It starts loading the first image then when it starts to load the second the percent goes up to 25 sometimes 70 and then it starts again from 0.
May be its a bit confusing.
I have uploaded an example.
http://www.medm.cc/preview/test.html
Thanks for your replies and thanks for the code.
am
July 9th, 2009 at 2:54 pm
Hi,
Many thanks for the script, am currently experimienting with it, but have a couple of issues:
- when viewed in Opera, the images start loading and then disapear, leaving a white screen.
- am i right in pasting the code onto every frame that i require a new image to be loaded?
- when a new button link is pressed quickly, before the previous image has loaded, i am left with whitespace and no image.
any help would be greatly appreciated. i am using xmlfullcrossxml(?)
July 9th, 2009 at 2:57 pm
Hi,
put the wrong email address!
July 9th, 2009 at 2:58 pm
Hi,
Many thanks for the script, am currently experimienting with it, but have a couple of issues:
- when viewed in Opera, the images start loading and then disapear, leaving a white screen.
- am i right in pasting the code onto every frame that i require a new image to be loaded?
- when a new button link is pressed quickly, before the previous image has loaded, i am left with whitespace and no image.
any help would be greatly appreciated. i am using xmlfullcrossxml(?) actionscript2
July 9th, 2009 at 9:16 pm
Hmm, not sure why it would not be working in opera. I don’t have it to test in sorry. You can place the code on frames, that should work, but I’ve not tested that. Dont really ever use frames for any work these days.
July 10th, 2009 at 10:41 am
many thanks for the reply.
for some reason in opera, the image loads, then disapears when it has faded in.
this works for random images;
on (release) {
_root.clearLevels();
gotoAndStop(”About”);
loadRandomBitmap()
}
but what if i wanted to call a certain image from the xml?
July 15th, 2009 at 8:32 am
have been using ‘backImage.load(”file.xml”);’ to call the xml on each frame
July 15th, 2009 at 1:29 pm
last question;
how would i implement a preloader for the images?
July 15th, 2009 at 2:14 pm
oh, and the slideshow doesn’t appear to be working!
any help would be greatly appreciated.