Flash slide show source

Hey Todd, quick ?: what's your recommendation for optimal fps? I see you're using 30 in this one.

I stick to 30fps for general work, since that's pretty close to television frame rate.

Wow, thanks! What amazing timing, I just figured out that I needed to do something like this about 2 minutes before your post! You're a star...

Great! I'm a beginning flash developer and am really going to use this to learn from... Thanks much!

Awesome! Can't wait till exams are over to try this one out :D

man I just finished doing something like this. damn. oh well here's to downloading and seeing how you did it.

Dominey = The Bomb :-)

Yo this shit is hype!

Just what I was looking for.

Thanks a million.

So funny, I just wrote something very similar 2 weeks ago. (Slideshow, load external jpgs, xml settings) I really could have used this to help through the tough parts. Oh well. Just a reminder to those who use this.. make sure your jpgs are NOT progressive. I was using jpgs from years ago and wasted a good couple hours figuring out what the hell was wrong.

Great site by the way. Harland sucks.

Thank you, Todd. I admire your work and style, and often show it to my students as a definition of what being adept at both HTML and Flash is.

I always wondered about how that piece worked, too. :)

What a piece of art. Great job. Can I distribute it in my blog too? Just email me.

Very neat. Thanks - I've been doodling with Ming since the weekend, and am now trying to wrap your ActionScript bits in PHP to make it into a class. ;)

Thanks for this, your an inspiration! I have to get my act together and learn more flash/actionscript. I've had "Actionscripting: Advanced Training From the Source" for nearly a year now without going through the book! Just so busy ... but you my friend have inspired me. I have advanced knowledge of programming with javascript so I already have a leg up, I think.

Dan Rubin's comment rules - Todd, you're the bomb !

Wow, very nice. I need to do something like this for a client next month. Thank you for posting the source!

Thanks Todd ;-) I've implemented it already on my own site to display some photos from a recent trip to Prague. Let me know if you want some kind of credit for use of the Flash script.

Really nice implementation Phil. :) Looks great.

Great tool!
My apologies for my ignorance (with Flash).

Q: How can I include (PHP) in a document and view the movie? ...currently the document as stand-alone displays the movie. However, when I include in a page, I get blank.

Thankx in advance,
Arthur

Fantastic stuff, just what I was looking for. It is great that you share your work, it is damn frustrating trying to work things through by hitting F1!

I have taken your code and added some pics of my own. Works great in Flash and the preview window of Dreamweaver, for some reason (speaking of frustration) it will not play in browser. I am trying to incoporate it in an ASP page. I just get black window where movie should be.

All associate files are in webroot and as I said the placeholder shows movie in Dreamweaver preview.

I guess I will work it out after a few hours - if you or anyone else could help that would be great!

Sounds similar to Arthur's problem.

"I just get black window where movie should be."

Two suggestions:

1 -- Make sure your jpgs are NOT saved as progressive jpgs. Flash cannot load them. Your jpgs must be saved without this option (as most are).

2 -- The directory path could be wrong in the xml. Depending on your setup, you may need to include a slash. As in... "/images/test.jpg" instead of "images/test.jpg".

Hi Todd,

My scenario, direct path to the file works fine. Once I include in a page (with correct path) I get blank.

Q: Could it be 'allowScriptAccess="sameDomain"' and 'value="sameDomain"' issue?

Thankx in advance,
Arthur

Wow. I've spent the last week trying to get this working on a site I'm building, and when I finally got it working on Friday, it was too slow to load (my swf was about 34k compressed).

I was using a MX 2004 'loader' component and I think that was causing the bloat (man, those components seem pretty heavy). I sat down tonight to try and optimize my code/file, and just before I started, I checked my NetNewsWire Subs....

Thank Goodness I did! 1-friggin'-'k'! Fantastic - I didn't know whether to laugh or cry....

Thanks a lot for your generosity on this one Todd! (Just wish it was a week earlier! ;) )

/* update */

I changes it to javascript/document.write, like your PGA site. And it WORKS perfectly!!

Thankx for sharing your knowledge...

Cheers,
Arthur

Thanks very much and long life to the open source

Todd, I wish I had seen this a few days ago. This site has something similar - http://www.airtightinteractive.com/simpleviewer/ and I have implemented it on my first "gallery". I can't wait to try yours out!

This is great, thanks for shareing.

Thanks, I might be using this in the future, awesome to see that there are still people who don't minc sharing.. :)

Man, where were you a couple of weeks back... I made a huge investment in time creating a flash image rotator for the main alienware.com homepage. I have mine loading in swfs as name value pairs off of the HTML embedding script. (check the source code). I wanted to do it in XML but did not have time. Will check out your code and maybe implement some of it in my script... The biggest problem i faced was with the links that are embeded in the SWFs, if a user was to click during the fadein of a new swf or if an swf did not have a link, then the user clicks would take them to a random url. I had to dynamically disable the links as fades take place.

I love your blog... keep it up...

very nice todd. i did something similar a few months back. i've got an example of it's features here, with the source and straight stand-alone linked off here (Tour App). with the right configuration you could do the same thing, but it's got a whole lot of features in it for masking, moving, panning, text, etc. the audio in it is a complete hack though.

Thanks, I need to start getting more in depth in flash, and appreciate the source code.

This is what I love about this community...wonderful people who like to share.

Thank you Todd ; )

Just want to add my thanks as well.

Open Source = Good Things :-) you've inspired me to work harder and share what I learn.

Danke!

C'est fantastique! Been looking for open source flash galleries all week, and coming up dry. Most are too complicated.. I mean "feature rich". Yours is nice and simple with the classy cross-fade; a perfect platform from which to build.

Muchas gracias compadre.
j

I don't want to bash the commenters out here, but this doesn't seem all that great.

Yes, it does the whole xml thing and it has a fader in it, but to me it does not deserve such praise.

It seems that more akward when reading alot of great people saying that flash is bad, don't use it and all that. Now those same people are rejoycing about such a small piece of code? Hmm...

I know some great flash coders that can do such wondeful things, but never get any praise like this. They get turned down by sementic preachers, telling that flash is 99% bad.

I know that alot of coders like to share their code. Look at www.bit-101.com and it's forums, or www.levitated.net , nothing but sharing going on there. now THATt's a great community.

Are people just too lazy to search? Learn? Yes, if you don't know something you'll hit F1. If you can't do it yourself, or stuck in a rut, you can ask someone via a forum or whatnot. I am sure that they will help you if you state your problem clearly.

About the only people who'll want an out-of-the-box solution, are breezer chicks and guys with thier balls still lodged somewhere inbetween their intestine.

Is it just me noticing this, or am I completely wrong and utterly stupid and in need of a restraining jacket? You tell me. I just don't like this two-faced situation.

Dude, some of like eating fancy food at restaurants because them fancy chefs can work magic with foods whose names we can't even pronounce. Now we could attempt to make the same thing in our small kitchen and come up with a Big Mac™ instead of filet mignon. The chef here has made something for us and decided to not only give us the recipe, but the ingredients, and put it all in a pan. We just need to bake for a few minutes and it will be as good as his. We are free to add salt, pepper and/or any other seasonings as necessary.

Chill!

Thanks for posting this! I'm trying to add another level to this by adding a pixel text description below each photo. The pixel text will change (but not fade) as each photo changes. Also, the text must match the correct photo if "Random" is selected for the display order. Can anyone here solve this? I've been working on it for about 4 hours and no luck yet. If you can solve the problem and enhance what is already offered here, please post the source. Thanks!!!

go here steve. i've posted a mod to handle text labels (requires changing out some as and added a prop to the xml). bit-101 posts on the board as well as brandon hall on occassion. most of us are "former" wh members. again great work todd. i may keep playing with it to add more transition types while trying to keep it simple.

"I don’t want to bash the commenters out here, but this doesn’t seem all that great."

Well, I would actually agree. It's simple, without a lot of fuss, mathematical brilliance, or whiz-bang dynamic functionality. But that wasn't the point. I intentionally kept this light, and thus easily extensible, so that Flash developers with less experience wouldn't have to swim through a mountain of ActionScript to figure out the core mechanics. With this, I *hoped* that others could extend it and customize it to fit their own needs. Which...it would appear has already happened.

mosquito...

Thanks much for the lightning fast response... I'll check this out this evening after work. Thanks again!

Wow, that is FUNtastic (which according to the Daily Show means 'F%#@ing Fantastic'). Thanks so much for making this available! I must say that the PGA site is amazing; I am a somewhat avid golf fan and have enjoyed the site in the past. Great work and cheers for the source.

-ian

OK... it's working great with the text. Exactly what I was looking for, Thanks again. I'm working to modify the text attributes and have modified the code to the following but no dice... any ideas?

// label
xPos = 5;
yPos = 350;
this.createEmptyMovieClip("mc_label",3);
mc_label.createTextField("clip_label",0,xPos,yPos,300,20);
myTextFormat = new TextFormat();
myTextFormat.font = Arial;
myTextFormat.size = 16;
clip_label.setNewTextFormat(myTextFormat);

this is good stuff. I love how light it is.

question:
how could this be modified to not play the slideshow and use navigation to go FWD/BACK (if not random) or even have x-number of buttons to go to each picture?

it's not hard to do, you'd just have to change the handled when the xml loads, and add two buttons to step through the array of images.

this is great! esp. for a non-flasher like me :)

i wonder... how hard would it be to put in an 'optional' attribute on the XML image tag for something like a 'link' ?

just curious, cuz that would be pretty useful.

great implementation of flash without taking up so much bandwitdh.

one question though is the image size set in the actionscript?

i don't have flash and am trying to implement this with some of my images which need to stretch accross the whole page and was just curious.

thanks again for posting this todd

one question though is the image size set in the actionscript?

No, it is set in the FLA. If you have Flash, or know someone with it, all you'd have to do is open the FLA, change the movie dimensions to the pixel w/h of your photos, and publish a new swf.

i wonder… how hard would it be to put in an ‘optional’ attribute on the XML image tag for something like a ‘link’ ?

Not hard at all, as others in this thread have pointed out. You could easily put a 'caption="text"' attribute in the xml nodes, create a variable for that text when the xml is parsed, and then apply the string to a text field.

Excuse my lack of knowledge pertaining to Flash, but is it possible for the .swf to read in a .cfm or .php file in which an xml type structure would be dynamically created by looping over a list, array or query object, or does it have to be an .xml file?
I am looking to implement this on a site where each page would have it's own slideshow but the .swf file is used only once.
BTW: Great peice of code, much better than the other offerings I have come across.

yes you can hit a .php file. there is a catch though.. if you hit say myXML.php and then on the next page hit the same php file, then flash will pull the file out of your browser cache, as opposed to the server. so if it's a random collection, then throwing a "dummy" random value via a query string eliminates the problem.

Okay, what am I doing wrong? This is EXACTLY what I've been looking for -- very light-weight, no frills, just cycle through pictures. And it includes the SOURCE!

Unfortunately, whenever I try to actually use it on my site, the pictures are showing up at about 40% their expected size. The slideshow width/height is set to what I want, but the images show up in the upper-left corner of the slideshow shrunk down to 40% of that. Is there some little setting that I've missed?

(Sorry, I hate asking for support for FREE software, but I'm stumped.) :-(

Wally, there are two spots in the html file where the size of the flash object is set, make sure to update both of those places, or it will still appear shrunken.

i have added this flash show to my photo gallery site (click on the View Slideshow link):

http://www.ryanaustin.com/Galleries/default.asp?FolderID=20

the only thing that wasn't accounted for on this script, is that if you have a mix of vertical and horizontal pictures, you end up seeing the previous picture behind the new one. I am trying to crack this in the actionscript, but haven't figured it out yet.

Good work Todd on this!

Very nice, thanks a bucnh! :-) Its small, sexy and easy to implement. Just how we like it ;-)

Is there some way to keep the script from looping? I've set loop to false in the HTML, but it's not stopping it. I've tried dinking inside the .fla to tell it to stop when it reaches the final image in a sequential list (which is all I'll be using), but it either then fails to run at all or fails to stop looping.

Either way, many thanks for this. Despite the bizarre complaints of the anonymous guy above, this is much appreciated by most.

"Is there some way to keep the script from looping?"

Good idea. I included a new attribute to control looping (when in sequential mode) and updated the zip with the new stuff. Re-download if interested.

I would like to preface this with, todd great program and thanks for do so much already.

I was just wondering if it is possible to have one static image that goes over the top of the slideshow, like in a corner or something that would always stay the same as the underlying images changed.

Thanks again

This is a great feature and makes any website look dynamic, thanks for all your hard work.

But one question: I made the .fla to 120x120 and I made my images 120x120 non-progressive, yet all I get is the black box. It works if I open slideshow.html, but not on the page I put the object code into. All images are in the correct directory. I have rechecked everything, yet nothing. I probably have overlooked a minor detail.

Jason

Just import the image into the flash doc, convert it to a movie clip and give it an instance name. then in the actions for layer A, under:

this.createEmptyMovieClip("loader2_mc",1,{_x:0,_y:0});

put:

_root.yourMovieClipName.swapDepths(1000);

I got it to work fine that way, but as I'm not a flash guy, someone else probably has a much better way. =)

Todd. Awesome. Thanks for sharing your work.

Daniel, thanks for sharing your bit too. I played with putting a shaded border over the images forever before I saw your post. Everything I tried was still covered by the images.

Hey Todd.
Thanks for sharing your insight and knowledge. I have a question about the how the images were being tracked. Granted this is the scaled down version, but I noticeD on your PGA Championship site that you stop the time interval when you "TAKE A TOUR" and are able to load different image by selecting the hole no. Is this just loading the images from your image folder or is this referencing the images from an array or the xml file? I would love to know how this was achieved. I especially like how it picks up from the current hole when you "CLOSE TOUR."

Well thanks again, and great work!
--Currie

Thanks for distributing your work! You wrote that your code is a "free download". Does that mean I can use it anyway I want. I'd like to use it for a small corporate website.

"You wrote that your code is a “free download”. Does that mean I can use it anyway I want. I’d like to use it for a small corporate website."

Yes, you can use it any way you want, with one request -- drop me an email when you launch something that uses the Flash source. I'd simply be interested to see how other people use the source to fit their needs.

I don't want to rain on the parade, as I think this is an extremely well done effect. But, has anyone else had trouble with the images not showing up in AOL's browser? Before everyone jumps up to correctly point out that AOL is built on IE, let me remind you that whereas this is true, they *do* take images through a extra round of compression before sending them to the client. For some reason imported jpgs will sometimes not render in Flash within the AOL browser. I have tried to get around this by setting the jpgs to generic file extension, and setting the MIME type on the server to something generic (I think this is the recommended solution), but this still doesn't seem to work.

Interestingly, Todd's Open Championship version doesn't render on my AOL testing platform (AOL 8.0/Win98) either. I wonder if it's just my testing enviroment, or if it's general. Can someone check it on browsercam or something? I'm not sure how else to fix this, or if in fact there *is* a fix. This is extremely annoying, as AOL is still extremely prevalent.

Tim

Thank you. It is very kind of you to share your hard work with us.

Great flash program. I've been looking for this for some 2 years. Is there any way for the flash to pick a random image from a set? And can it fade to black before fading into a picture?

Thanks for your generosity by sharing this program.

Thanks very much for this. I've just started playing around with Flash and coming from a programming background, I love this approach.

I do have one question, though:

How would I have to change the actionscript so that the first image loads immediately, without any fade-in time? Is that possible? If not, is there an easy way to generate some simple background text as a kind of pre-loader?

Again, thanks for all your help.

I am creating a projector movie to play on a computer; however, I would like to load the images on a server. Is there a way to do that?

For example:
in your XML

I would like to use full path like:

It won't load properly because of security reason. Is there a way to get around that?

I am creating a projector movie to play on a computer; however, I would like to load the images on a server. Is there a way to do that?

For example:
in your XML

I would like to use full path like:

It won't load properly because of security reason. Is there a way to get around that?

Hi everyone,

How could this be modified to include "prev, next and autoplay buttons, some examples.

And how to center movieclip on the stage. Thanks.

This is really great. Unfortunetely I'm a Flash novice and I have no idea how to make the entire movie link to another URL. Can anybody help me out?

You can see the rotator in use here:
http://shop.nathansfamous.com/category.asp?cat=hot1

Todd,

Thanks for the great program. I've implemented it on my home page using 95 images, and it does exactly what I needed. I'd originally tried a Java program, but this is so much better in Flash. Thanks again!

Kit Watkins
The Official Website of Kit Watkins

it works great and have a perfect script
thanks

here a suggest: i saw that the script don't take out the old image so if the new is smaller, you see the old in the bottom; and the performance go down if you have many images.

so here a change that can help
(the change i made are before ///////////)

------------------------------------
function loadImages(data_arr, num) {
if (i == undefined || i == 2) {
i = 2;
///////////i2 = 1;
createLoader(i, ///////////i2, data_arr, num);
i = 1;
} else if (i == 1) {
///////////i2 = 2;
createLoader(i, ///////////i2, data_arr, num);
i = 2;
}
}
function createLoader(i, ///////////i2, data_arr, num) {
thisLoader = eval("loader"+i+"_mc");
///////////thisLoader2 = eval("loader"+i2+"_mc");
thisLoader._alpha = 0;
thisLoader.loadMovie(data_arr[num]);
watcher_mc.onEnterFrame = function() {
var picLoaded = thisLoader.getBytesLoaded();
var picBytes = thisLoader.getBytesTotal();
if (isNaN(picBytes) || picBytes=1) {
swapPlace("loader2_mc", 1);
///////////thisLoader.alpha(_global.fadeTime,100);
///////////thisLoader2.alpha(_global.fadeTime,100);
timerInterval = setInterval(imageGen, _global.numPause, data_arr);
delete this.onEnterFrame;
}
};
}
------------------------------------
and in the proto
------------------------------------
MovieClip.prototype.alpha = function(vel, to) {
///////////this._visible=true
this.vel = vel;
this.to = to;
this.alpha_init = this._alpha;
this.onEnterFrame = function() {
updateAfterEvent();
if (this.to != undefined && this.vel != undefined) {
if (this.to>this.alpha_init) {
if (this._alphathis.to) {
this._alpha -= this.vel;
} else {
///////////this._visible=false
this.onEnterFrame = null;
}
}
} else {
}
};
};
------------------------------------

Hey,

Great script.
When I try to make a slide show with images of different sizes, the images overlap and get in the way of each other. I tried to edit the script so that as soon as the next image is displayed, the previous image disappears, but I wasn't able to make it work. Is there an easy way to do this?

Thanks,
Orhan

Hi. Does the slidshow work with flash player 7? Where is the bug. Please anyone, help me!!

Hi. I use this script for a few galleries in one swf. Just calling this function with diferent xml file. I have a strange problem. When I call this function for the first time everything is ok. Then I click the button and go to antoher frame which has no gallery and then very fast back to the frame with gallery. And sometimes the function goes crazy and displays only oneimage or the time and fade is not working. Could someone check this and give some help??? PLEASE. I'm just starting in as:(

Mr. Mosquito or Todd or To Whom it May Concern.

Several people have asked about adding navigation to the code and I for one am still rather lost.

Mosquito wrote, "it’s not hard to do, you’d just have to change the handled when the xml loads, and add two buttons to step through the array of images."

Could you explain what this means, it sounds easy, but I have no idea how to do it?

Thanks so much. Todd thanks for putting this out there for us.