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.

Creative Commons License
The ImageSwap (crossfade) Flex Component by Joel Hooks, unless otherwise expressly stated, is licensed under a Creative Commons Attribution 3.0 United States License.
  • https://vedovelli.com.br Ved

    Very nice! Congrats! Ved

  • https://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!

  • https://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.

  • https://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.

  • https://www.bojinx.com Wael

    Nice, I like this.

  • https://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