<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    creationComplete="onCreationComplete()" xmlns:display="flash.display.*">
    
    <mx:Script>
        <![CDATA[
            
            private var leftMatrix:Matrix;
            private var rightMatrix:Matrix;
            
            private function onCreationComplete():void {
                //grab the entire bitmap data for the canvas
                var canvasBitmapData:BitmapData = new BitmapData( 100, 100 );
                var m:Matrix = new Matrix();
                canvasBitmapData.draw( canvas, m );
                
                var leftBitmapData:BitmapData = new BitmapData( 50, 100 );
                leftBitmapData.copyPixels( canvasBitmapData, new Rectangle( 0, 0, 50, 100), new Point(0,0) );
                var leftBitmap:Bitmap = new Bitmap( leftBitmapData );
                leftImage.source = leftBitmap;
                
                var rightBitmapData:BitmapData = new BitmapData( 50, 100 );
                rightBitmapData.copyPixels( canvasBitmapData, new Rectangle( 50, 0, 50, 100), new Point(0,0) );
                var rightBitmap:Bitmap = new Bitmap( rightBitmapData );
                rightImage.source = rightBitmap;
            }
            
            private function doSlide( event:Event ):void {
                var rightMatrix:Matrix = new Matrix( 1, 0, 0, 1, 0, amount.value * 100 );
                rightImage.transform.matrix = rightMatrix;
                
                var leftMatrix:Matrix = new Matrix( 1, Math.atan( (amount.value * 100) / 50 ), 0, 1, 0, 0 );
                leftImage.transform.matrix = leftMatrix; 
            }
            
        ]]>
    </mx:Script>
    <mx:Canvas id="canvas" width="100" height="100" x="10" y="10" backgroundColor="0x2222FF" />
    
    <mx:Canvas id="left" width="50" height="100" x="200" y="10">
        <mx:Image id="leftImage" width="50" height="100" />
    </mx:Canvas>
    <mx:Canvas id="right" width="50" height="100" x="250" y="10">
        <mx:Image id="rightImage" width="50" height="100" />
    </mx:Canvas>
    
    <mx:HSlider id="amount" minimum="-1" maximum="2" value="0"  x="347" y="10" change="doSlide( event )" liveDragging="true"/>
    
</mx:Application>