Using Matrix and Transform Class in Flex

We often need to rotate an image in both desktop application and web application. This example shows how to rotate a image with Matrix class and Transform class in Flex:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical" backgroundColor="#E0E0E0">

    <mx:Script>
        <![CDATA[
         
            private function degree2Radian(degree:Number):Number {
                return (degree * (Math.PI / 180));
            }

                private function RotateImage(DispObj:DisplayObject):void {
             
    var q:Number  = degree2Radian(slider.value);
    var centerX:Number = demoImage.width / 2;
    var centerY:Number = demoImage.height /2;
    var m:Matrix = new Matrix();
    m.translate(-1 * centerX, -1 * centerY);
    m.rotate(q);
    m.translate(centerX, centerY);      
    DispObj.transform.matrix = m;
                var t:Transform = new Transform(DispObj);
                t.matrix = m;
                DispObj.transform = t;
            }

            private function resetImage(DispObj:DisplayObject):void {
              
                slider.value = 0;
                RotateImage(DispObj);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain" backgroundColor="#E0E0E0">
            <mx:FormItem label="Rotate Degree:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="360"
                        value="0"
                        liveDragging="true"
                        snapInterval="1"
                        change="RotateImage(demoImage);" />
            </mx:FormItem>
            <mx:FormItem>
                <mx:Button label="Reset"
                        click="resetImage(demoImage);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Image id="demoImage"
            source="@Embed('images/demo.jpg')"
            scaleContent="true"
            maintainAspectRatio="true"           
            width="400"
            height="400" />

</mx:Application>