Draw Image Reflection in Adobe Flex

Recently, I needed an image reflection effect in Flex. This would not be complicated to achieve for a Loader image object in Flash Actionscript 3 but the more for Flex as everything needs to be a bit more complicated in Flex when it comes to customizing.

Flex Image Reflection

However, there is great reflection class and component available by Ben Stucki that produce an image reflection for standard flex components (and actually keep them up to date by using an enter frame method).

Anyway, there will be two different aspects regarding a Flex Image object if I want to apply this reflection to it:

  • The reflection can only be generated as soon as the whole image content has been completely loaded inside of the Image object.
  • The reflection stays the same all of the time. Thus, there is no need for an enter frame method.

Actually, I came across this blog entry about the creation of an Image reflection in Flex but there are important parts of the code missing, this works only for one image at a time and the example is not working.

So I wrote a Flex component ImageWithReflection that automatically produces the image reflection. Here is the source code and an swf in a zipped Flex Builder project.

Please remember that Ben Stucki put his code under the Creative Commons Attribution 2.5 License and I do so as well for my part. The images in that example are under a non-commercial Creative Commons licence. So be warned not to reuse them for commercial projects.

Cheers.

Posted in Actionscript, Adobe Air, Flash, flex Tagged with: Actionscript, Flash, flex
  • sri

    thanks, gr8 work.

  • is there any way to draw reflection once all page content is completely laid out.
    you suggested making delay(100), but how do i know that`s enough for all components to be loaded. May be there is some event to listen to and then try to draw reflection

  • Hi,

    FYI, the example doesn’t show any refmlection until the initialization in the class ImageWithReflection occurs on the preinitialize event instead of the add one.
    You’d consider update your sources.

    Thank you for the example.

  • thanks eric
    i have updated the sources accordingly.