How to skew a image in Flex

There are different ways to move, rotate, scale and skew  an image in Flex. The first way should be to simply change the rotation, scaleX, and scaleY properties of the display object. This may be fine for simple applications but for more complex applications you will want to use Matrix class manipulate these properties. Here is the code shows how to skew a image with Matrix class.

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

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

            private function skewImage(DispObj:DisplayObject):void {
                var m:Matrix = DispObj.transform.matrix;
                m.b = Math.tan(degree2Radian(sliderY.value));
                m.c = Math.tan(degree2Radian(sliderX.value));

                var t:Transform = new Transform(DispObj);
                t.matrix = m;

                DispObj.transform = t;
            }

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

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain" backgroundColor="#E0E0E0">
            <mx:FormItem label="skew X:">
                <mx:HSlider id="sliderX"
                        minimum="-30"
                        maximum="30"
                        value="0"
                        liveDragging="true"
                        snapInterval="1"
                        change="skewImage(demoImage);" />
            </mx:FormItem>
            <mx:FormItem label="skew Y:">
                <mx:HSlider id="sliderY"
                        minimum="-30"
                        maximum="30"
                        value="0"
                        liveDragging="true"
                        snapInterval="1"
                        change="skewImage(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="200"
            height="200" />

</mx:Application>