[flexcoders] Component Distortion

[app.developer]

If I have a custom component (MXML file) I wish to distort in the 
main application, why would the following example not work?  All I'm 
getting is a white trapezoid, not a red vbox which I'm trying to 
distort.

This is based off the distortion example found here
http://www.rubenswieringa.com/code/as3/flex/DistortImage/source/index.
html

I understand and can replicate distorting an image, but a component 
is mucking me up.



-------Main Application-----------
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; 
        layout="absolute" xmlns:comp="comps.*" creationComplete="init
()">

<mx:Script>
        <![CDATA[
                import mx.controls.Alert;
                import mx.utils.ObjectUtil;
                import mx.containers.VBox;
                import comps.tester;
                import mx.core.UIComponent;
                import org.flashsandy.display.*;

                
                public var holdBMD:Bitmap;
                public var tl:Point = new Point(10,20);
                public var tr:Point = new Point(50,20);
                public var bl:Point = new Point(10,80);
                public var br:Point = new Point(50,100);
                private var distortion:DistortImage = new DistortImage
(500, 375, 3, 3);
                
                private var myTest:tester = new tester;
        
                private function init():void
                {
                        myTest.x = 150;
                        //this.addChild(myTest);
                        holdBMD = new Bitmap( getUIComponentBitmapData
( myTest ) );
                        //Alert.show(ObjectUtil.toString
(holdBMD.bitmapData));
                  distortion.setTransform(this.myBox.graphics, 
                                    this.holdBMD.bitmapData, 
                                    tl, 
                                    tr, 
                                    br, 
                                    bl);
        }
        
            
        private function getUIComponentBitmapData( target : 
UIComponent ) : BitmapData
        { 
            var bd : BitmapData = new BitmapData( target.width, 
target.height );
            var m : Matrix = new Matrix();
            bd.draw( target, m );
            return bd;  
        }

                        
                        
                ]]>
</mx:Script>
        <mx:HBox x="10" y="50" width="790" height="338" id="myBox" 
borderStyle="solid" borderThickness="6"/>

</mx:Application>






-----Tester.MXML (component) ----------
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"; width="200" 
height="150" backgroundColor="#FF0000">
        <mx:Text text="Test Me"/>
</mx:VBox>






Thx for your assistance.

Precia