Increase height of reflected object - actionscript-3

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