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.

Tagged with: Actionscript, Flash, flex