Collage FX Studio
PhotoMagic Studio
Photo Card Workshop
Magic Animator

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>




Comment: 1 | Read times: -
siva[2012-06-23 08:05 AM | del]
super please gave download option
Announce commentary
Your name
Content
Validation code Code