ImageSwap (crossfade) Flex Component

6Dec/088

ImageSwap (crossfade) Flex Component

I needed a component that would work in my slideshow component and give a decent crossfade while letting the user know that something was going on. I used TweenLite for the tweening, and it works pretty well. It dispatches an 'imageLoaded' event when the image swap has completed. I needed this so that the slideshow timer can resume. It pauses when the image starts loading because of various image sizes/connection speeds. Pretty simple, but it is a lot nicer than the harsh transition (or lack of) in the current slideshow.

Source Here.

The ImageSwap (crossfade) Flex Component by Joel Hooks, unless otherwise expressly stated, is licensed under a Creative Commons Attribution 3.0 United States License.

Filed under: components, flex Leave a comment

http://vedovelli.com.br Ved

Very nice! Congrats! Ved
http://www.curiousfind.com Jamie

Thanks for showing how it is done. I had done fade-in/fade-out, but the crossfade is a little tricky.
Seppe

Great module! Thanks a lot!
http://www.edomgroup.com TM

I tried to get this working on my local file system and can’t get any of the images to load up (it just loads forever). I was trying to figure out how you solved the problem where doing an Image.load(sourceName) causes the image to quickly blink (even if the image is cached).

Basically I wrote an incredibly simple crossfader – currentImage and lastImage (which is hidden). Right before the new image is loaded, lastImage loads up currentImage’s image and is displayed on top. currentImage then begins to load the new one and when finished lastImage just fades out.

The issue I’m hitting (and I’ve hit this with other projects as well) is when doing any sort of Image.source or Image.load() to a currently displayed image, there is a very noticeable and annoying blink. It’s not considered the actual image load though since it’s cached. Because of that I don’t think there is any particular event I can listen for and delay showing the image until it is fired.
http://joelhooks.com Joel Hooks

The image isn’t added to the display list until it is loaded at which time I use TweenLite to fade the alpha channel up.

If I am understanding your problem correctly.
http://www.bojinx.com Wael

Nice, I like this.
http://www.ticketpoint.de Flüge

Hello,
your homepage gave me some real good ideas for my next slideshows. Unfortunately, I’m not that good with computers, but I like taking pictures I might have to try out the Flex component myself. And by the way, your photos are great
Hardik Mishra

Hi Joel
its’s really nice stuff
i m new to flex technology and
i have to work on image gallery
is it possible to get source or some kind of tutorial

thanks

« Introspective PureMVC Console Flex Date and Time (datetime) Picker Control »

Building Blocks

ImageSwap (crossfade) Flex Component

Books

Speaking

Kickass Books

Meta