Increase height of reflected object

Question

Want to reflect an image, and my code looks like

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       height="500" width="500"
                       creationComplete="init(event)">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[

            import flash.filters.BlurFilter;

            import mx.core.UIComponent;
            import mx.events.FlexEvent;

            private var loader:Loader = new Loader();
            private var picture:BitmapData;

            private var reflection:BitmapData;
            private var reflectionHolder:Bitmap;

            protected function init(event:FlexEvent):void
            {
                loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
                loader.load(new URLRequest("assets/rectangle.png"));
            }

            private function onComplete (event:Event):void
            {
                trace("loaded!");
                var loaderInfo:LoaderInfo = LoaderInfo(event.target);
                picture = new BitmapData(loaderInfo.width, loaderInfo.height, false, 0xFFFFFF);
                picture.draw(loaderInfo.loader);
                img.source=picture;
                trace(picture.height,picture.width);
            }


            private function createReflection():void 
            {
                reflection=new BitmapData(picture.width,picture.height,true,0x00ffffff);

                var flipMatrix:Matrix = new Matrix();
                flipMatrix.rotate(Math.PI);
                flipMatrix.scale( -1, 1 );
                flipMatrix.translate(0, picture.height);

                reflection.draw(picture, flipMatrix);

                for (var i:int = 0; i < picture.height; i++) 
                {
                    var rowFactor:Number = Math.max(0, 1 - (i / picture.height));
                    for (var j:int = 0; j < picture.width; j++) 
                    {
                        var pixelColor:uint = reflection.getPixel32(j,i);
                        var pixelAlpha:uint = pixelColor>>24&0xff;
                        var pixelRGB:uint = pixelColor&0xffffff;
                        var resultAlpha:uint = pixelAlpha*rowFactor;
                        reflection.setPixel32(j, i, resultAlpha << 24 | pixelRGB);
                    }
                }

                reflection.applyFilter(reflection, reflection.rect, new Point(0, 0), new BlurFilter(4, 4, 3));

                reflectionHolder=new Bitmap(reflection);
                reflectionHolder.y=img.y+img.height;
                reflectionHolder.x=img.x;
                reflectionHolder.width = img.width;
                reflectionHolder.height = img.height;

                var uIComponent:UIComponent = new UIComponent();
                uIComponent.addChild(reflectionHolder);
                this.addElement(uIComponent);
            }

            protected function btn_clickHandler(event:MouseEvent):void
            {
                createReflection();
            }
        ]]>
    </fx:Script>
        <s:Group height="100%" width="100%">
            <s:BorderContainer backgroundColor="0x0d0d0d" height="100%" width="100%"/>
            <s:Image id="img" height="100" width="200" />
            <s:Button id="btn" click="btn_clickHandler(event)" />
        </s:Group>
</s:WindowedApplication>

it shows result but the out put was not perfect...

Objective:- Reflected object should be same as the real Object and Have Some Distance From Real Object.

Answer 1

It will be very much code to show in one answer. Actually, I searched my very old archives, and I found my old class for reflection (2009 year). It will create reflection for you, It supports animated objects, and also distance from object to start of reflection. With only 2 lines of code:

var test:Sprite = new Sprite();
test.graphics.beginFill(0x990099);
test.graphics.drawRect(0, 0, 100, 50);
addChild(test);

test.x = test.y = 50;

//Reflection
//test - object that will be reflected
//40 - alpha, 40%
//200 - ratio, max value 0xFF or 255, with 0xFF you will see full object in reflection
//-1 - update frame rate, for animated objects
//0 - some dropoff... actually I don't remember it, don't use it by passing zero, It affects reflection bounds
//10 - distance to the reflection in pixels...
var vars:ReflectVars = new ReflectVars(test, 40, 200, -1, 0, 10);
var reflect:Reflect = new Reflect(vars);

And a result:

if you are interested in the class, I could move it to GitHub.

Answer 2

flipMatrix.translate(0, picture.height);

try changing this to

flipMatrix.translate(0, picture.height + 20);

OR

 reflectionHolder.y=img.y+img.height;

try changing this to

   reflectionHolder.y=img.y+img.height + 20;

for adding space between reflection & real picture