ActionScript 2 Cross Fading XML Slide Show
A class based cross fading slideshow for ActionScript 2. Class file now supports captions which can be set to display persistently or only via a rollOver event. Captions use an embedded font, (contained in zip archive), however you are free to change this font or use device fonts. Look in the class variable declarations for what variables you can set. You can now (as of v 1.4) use multiple instances of the class in your swf.
SlideShow Features
By Editing the XML file, you can;
- Specify cross fade time.
Specify image duration.
Specify image sequence order.
Specify Captions
Specify Persistent Captions
The class file takes one parameter in its constructor, which where you want the slideshow to appear.
By editing the class variables you can;
- Specify Font
Specify Font Colour
Specify Font Size
Specify the use of embedded fonts
Specify Text background colour and alpha
Example
You can preview the files here;?Ǭ†http://www.noponies.com/dev/simplecross
Source Files
Get the files here; Demo Source Files
Old Non Captions based Files here; Simple Cross Fading Class Source Files
Dependencies
Class uses the excellent TweenLite class from greensock, which you can obtain from here;?Ǭ†http://blog.greensock.com/tweenliteas2?Ǭ†?Ǭ†(class file is included in .zip download)
Updates
23 Feb, 2008: Updated class with new methods, one ensures no duplicate slides are shown one after the other when using the random mode. The other is a public method that you can call when deleting one slideshow and replace it with another using the same generic holder var. This method kills the currently running interval (well it should). Class now takes another parameter in the constructor, which is the path to the XML file you want to use. This lets you use multiple instances of the class in your swf.
February 22nd, 2008 at 8:46 am
We’re finding a race condition with this where if you unload the movie, before the image has loaded the setInterval is never cleared.
Because setInterval seems to be a persistant (nuisance) object, it stays around so when we load the script again for a second slide show you get a ‘jump’ effect of the pages flickering as the first setInterval comes back to call the fade images function as well.
Really annoying! Bar using onEnterFrame instead (which we’ve done) or having a clearInterval on start to make sure there aren’t any rouge setInterval processes running before we start, any other thoughts on a good work around for this?
February 22nd, 2008 at 12:33 pm
Hi Alex,
OK, I’ll have a look at the class again to see what can be changed.
February 22nd, 2008 at 2:51 pm
Alex,
I’ve added in a new method “killInterval()” which you can call prior to loading in a new slide instance, this will kill the interval running, if there is one running. Seems to work OK in the testing I have conducted. The class has a few new methods as well, and now takes the path to your XML as a constructor param, so you can use more than one slideshow in your swf.
February 25th, 2008 at 4:41 pm
Hi Dail! Great work man. Is there a way to link each image to specific url in the non caption version? Thanks!
February 25th, 2008 at 5:28 pm
Josh,
You will simply have to add a onrelease function to either the container clip, or to each image in the movieClip loader init handler. Then I guess you would use (if you provide a specific URL for each image in the XML file) array access, using the p var. So a click would run a getURL(yourListOfURLSArray[p]), or something like that. A bit of work as that functionality is not built in.
March 1st, 2008 at 3:46 pm
var slide:simpleSlideCaptions = new simpleSlideCaptions(”your_movieClip_name”, “someXML.xml”);
this is not working. it gives Type mismatch error all the time
March 1st, 2008 at 4:24 pm
var slide:simpleSlideCaptions = new simpleSlideCaptions(this, XMLFIle);
Take out the quotes around the movieClip name.. So it looks like this; slide2 = new simpleSlideCaptions(slide2_mc, “images2.xml”);
March 1st, 2008 at 4:36 pm
ok now it works but it does not fit to my mc, it expands from the mc. how can i fit it to my mc? for example my images are 750*200 pixels and i made the container mc 750*200 too. but the image starts from the vertical center of the mc.
March 1st, 2008 at 4:42 pm
Check your registration point in your movieClip that you are loading the slides into. The slides will position themselves based off that movieClips registration point. You want it to be at the top left, or 0, 0.
March 3rd, 2008 at 2:15 am
ok now it works but there i found a new bug. when i set the order to random in xml file. the images comes randomly but the captions are not. it always showing the first images caption for all the images.
March 3rd, 2008 at 2:26 am
and also in the ordered mode the captions are displaying as ;
for the first image it display the second images caption,
for the second image it displays the third images caption etc…
March 3rd, 2008 at 10:30 am
strange, I’ll look into it.
OK, found the error and fixed it. It should be fixed for both ordered and random captions display now.
March 3rd, 2008 at 12:58 pm
no not yet, now it shows the caption bar without any text.
March 3rd, 2008 at 1:41 pm
Strange, I added in another fix. Its working fine when I test it here. Try it again….
March 3rd, 2008 at 2:08 pm
what is the modified file? this?
http://www.blog.noponies.com/wp-content/uploads/2008/03/simple_cross_class_v15.zip
March 3rd, 2008 at 2:29 pm
Yep, that and the Class As in the post above.
March 3rd, 2008 at 2:34 pm
can you please share your demo file with the sources ,cause i cant get it work
March 3rd, 2008 at 2:45 pm
it gives me now;
The name of this class, ’simpleSlideCaptions’, conflicts with the name of another class that was loaded, ’simpleSlideCaptions’.
March 3rd, 2008 at 2:48 pm
The source files are all there. If you are looking at the demo online, make sure you clear your browsers cache, for it to load in any changes to the XML
March 3rd, 2008 at 2:50 pm
Odd,
Here is how it works with two instances of the slideshow – timeline code..
var slide:simpleSlideCaptions = new simpleSlideCaptions(this, “images.xml”);
//load in a slideshow with a button click
var slide2:simpleSlideCaptions
slide2_mc.onRelease = function(){
if(slide2!=undefined){
slide2.killInterval()
}
slide2 = new simpleSlideCaptions(slide2_mc, “images2.xml”);
}
March 27th, 2008 at 6:26 pm
Quick question. Where in the As do I move the caption text field?
March 28th, 2008 at 6:04 pm
Jen,
captionsHolder._y = holder_mc._y+holder_mc._height-captionsHolder.captionsHolderBg._height;//bottom align text//adjust here if needed pos of text
Adjust that line of AS
April 8th, 2008 at 10:01 pm
Hi Dail,
I have a similar problem with Alex but more complicated. I’m working on a flash website where there are many swf movies used together. There is an index.swf which loads a swf movie in level10 for each category (events, contact, profile, etc). Then, each level10 movie loads 1 or more swf movies using the xml slide show.
Unfortunately, if you change the level10 movie and get back you can see “jumps” in slide show. Tne gallery movies are nested in a level10 movie and the level10 movie in turn is loaded in the index.swf.
I’ve uploaded an example at http://www.g4vr.com/files/dev_test.zip
I know that I have use the kill interval function but my case is more complicated as I have nested swfs. Maybe a clear interval on start is the solution. Any thoughts on a good work around for this?
keep up the good work
George
April 9th, 2008 at 1:06 am
George,
Interesting. Have you simply tried changing XML files for each section?
You can try to clear the interval on load. That may help. Timers in AS2 like to hang around however. If I get a chance I’ll look at your file. But I’m snowed under at the moment.
May 5th, 2008 at 1:46 pm
Hi Dail
thanks for this nice cross fader
But can you explaine me how can add a link to the image itself rather than
reference links in the cdata tags?
May 7th, 2008 at 6:27 pm
I’m not very advanced in actionscript. What is the best way, if at all, to begin to incorporate buttons or a controller for the slideshow?
Thanks!
May 28th, 2008 at 8:14 am
I was wondering where in the script I can change to make the images not repeat until after all the images have been displayed (eg. in a pool of 10 images, no repeats until the 11th image, then again at the 20th). Thanx in advance.
June 28th, 2008 at 12:47 pm
I am still learning actionscript so I was wondering is it possible to apply a Mask to this slideshow?
I want to play the slideshow within a masked area. Is this possible?
June 28th, 2008 at 2:10 pm
Kenet,
I don’t see why not. Give it a go.
July 2nd, 2008 at 2:01 am
Thanks for sharing this really handy great slideshow! It’s working for me with the exception that the fonts are not displaying as intended. I see only a very small device font with wide gaps bewteen words. So far i have tried adding a new Font embedded in the Library, and changed the .as file accordingly – but same result. Am using PC, Flash CS3. Thanks for any tips!
July 15th, 2008 at 8:55 am
Hi
I tried the class in my application and it works great….
Since I do not know in advance the size of the images I am loading through the xml, I want to use a “movie_clip_fit” method after I load the images and, so I think, before the tween.
When I use a MovieClipFit command there is a “jump” in the display.
Maybe I am putting it in the wrong place ???
This is how U implemented it :
private function loadSlides() {
//sequential loading of images
holder_mc.createEmptyMovieClip(”bg_loader”,2);
slideLoader.loadClip(bgImages[p],holder_mc.bg_loader);
MovieClipFit.fit(holder_mc.bg_loader,some_width,some_height);
p++;
if (p == bgImages.length) {
p = 0;
}
}
I am not using the randon option. and not the caption options so I dont need the getUniqueNum function.
Thanks for a hint….
Eli
August 30th, 2008 at 5:32 am
This is absolutely fantastic! Thank you, that certainly deserves a Donation.
September 10th, 2008 at 9:04 am
Does anyone know if this can be made to work with transparent PNGs? Fantastic work. Thanks.
September 10th, 2008 at 3:32 pm
This is great and (I think) just what I need. Thanks. But I have a ActionScript newbie question:
I would like to combine 2 slideshows running side by side, running independent intervals and imgaes. I set this up with 2 different XML files and 2 separate instances of the MCs and modified the AS to point to them but how do I get them to point to separate XML files. Seems like it should be easy…
September 11th, 2008 at 12:40 am
BrotherEye,
I’m not sure. I’ve never tried it. I don’t see why it would not work though.
Cyn,
simpleSlideCaptions(slideTargets:MovieClip, xmlData:String)
Just pass in the two different XML files to the class constructor.
September 11th, 2008 at 8:47 am
Got it! This is awesome. Thanks for your help.
October 9th, 2008 at 12:09 pm
Hi Dale
Thanks so much for all the tutorials you’ve put online – sooo helpful!! I love no ponies
I really like this slide show, just one problem I’m experiencing:
I’ve made a website that when the user clicks each navigation link, it loads in each page/swf externally, in to the main interface.
I’ve put this slide show in the “About Us” page/swf. It works beautifully until I view another page, and then view “About Us” again, in the same sitting, the interval doesn’t seem to clear or be cancelled, and I’ve tried using your “killInterval()” function but doesn’t seem to work the same way as having two slide shows on one page?
There will be a 2nd slide show on another page of the site too, but I’d like to be able to clear the intervals of these in a way that allows for viewing the slideshow pages over and over without the intervals overlapping.
Let me know if this doesn’t make sense
Thank you! much appreciated!
T
December 6th, 2008 at 12:27 pm
Hi Dale
Forgot to say thanks for fixing the setInterval stuff and a really nice slideshow and code – many thanks again
Alex
December 19th, 2008 at 8:23 am
Hi there!
Excellent work! I’m learning Actionscript and your site has been so very helpful. Thank you!
Is it possible to place another text field above the caption, like a title field?
Also, I moved the text box around a bit and am using an html font instead of the embedded font and the text doesn’t fade out smoothly. Do you think it might be because of the html text?
Thank you so much!
December 23rd, 2008 at 9:14 pm
Tira,
Sure, just follow how the description field works, duplicating it, but for your title.
Alpha fading embedded text can look a little funky, not much you can do about that really.
January 15th, 2009 at 2:50 pm
Is there a way to add static elements over the images. For example if you wanted to add a frame to the movie or a logo over the top? I tried to add the elements to a layer on-top of the actionscript layer but that didn’t work.
Thanks.
January 15th, 2009 at 2:58 pm
oh … never mind … i just loaded an external movie with all the “frame and logo” stuff. Just loaded it to level999. Works great.