How can I create a reflection effect with bitmap images in Flex?

Question

I'm looking for a simple, clean and memory-efficient way to create and apply a reflection effect (you know the one, popularized by the famed iPhone UI) to the bitmap images I've loaded into a Flex app at runtime. The source images will be of varying types (JPGs, PNGs, etc.), but an acceptable solution can assume each image is already loaded and being stored as BitmapData.

What I'd like to be able to do is apply, optionally, a reflection effect to some views of the BitmapData, but still keep the source BitmapData intact, since not all views of it will require the reflection effect. Insights greatly appreciated! Thanks in advance.

Answer 1

Hi there,

You can use this class:

http://code.google.com/p/cay/source/browse/trunk/as3/cl/cay/effects/Reflejo.as

It's probably not perfect, but at least will give you a quick start. Then update & modify to your needs if you fancy.

HTH

Answer 2

Possibly an easier way, but offhand I'd say just display a second copy of the image inverted and made transparent:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    creationComplete="onCC()">
    <mx:Script>
     <![CDATA[
      private function onCC():void {
       var m:Matrix = new Matrix(1,0,0,-1,flipImage.transform.matrix.tx, flipImage.transform.matrix.ty + flipImage.height);
       flipImage.transform.matrix = m;
       flipImage.alpha = 0.3;
      }
     ]]>
    </mx:Script>
    <mx:VBox verticalGap="0">
     <mx:Image source="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"&gt;

     </mx:Image>
     <mx:Image id="flipImage" source="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"&gt;

     </mx:Image>
    </mx:VBox>
</mx:Application>

Answer 3

You can always use scaleX = -1;

this will flip your image horizontally. but it flips using the left side as axle, so you have to adjust the x position of the image to be image.x = image.x + image.widht;

Answer 4

Chet Haase posted the answer I was looking for, with accompanying source code and demo video. Hope it helps others looking for a flexible solution.