Setting effects with ActionScript in Flex

The following example shows how you can set effects on a Flex Image control using ActionScript by setting the showEffect and hideEffect effects using the setStyle() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/27/setting-effects-with-actionscript-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.effects.easing.*;

            private function init():void {
                img.setStyle("showEffect", rotate);
                img.setStyle("hideEffect", fade);
            }
        ]]>
    </mx:Script>

    <mx:Fade id="fade" />
    <mx:Rotate id="rotate"
            angleFrom="-180"
            angleTo="0"
            easingFunction="Elastic.easeInOut"
            duration="2000" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="visible:">
                <mx:ToggleButtonBar id="toggleButtonBar"
                        itemClick="img.visible = event.item.data;">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:Object label="Show" data="true" />
                            <mx:Object label="Hide" data="false" />
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ToggleButtonBar>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Image id="img"
            source="@Embed('assets/flashplayer_icon.jpg')"
            width="100"
            height="100" />

</mx:Application>

View source is enabled in the following example.

Or, you can also create the effect using ActionScript instead of MXML, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/27/setting-effects-with-actionscript-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.effects.easing.*;
            import mx.effects.Fade;
            import mx.effects.Rotate;

            private var fade:Fade;
            private var rotate:Rotate;

            private function init():void {
                // Fade effect
                fade = new Fade();
                // Rotate effect
                rotate = new Rotate();
                rotate.angleFrom = -180;
                rotate.angleTo = 0;
                rotate.easingFunction = Elastic.easeInOut;
                rotate.duration = 2000;

                img.setStyle("showEffect", rotate);
                img.setStyle("hideEffect", fade);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="visible:">
                <mx:ToggleButtonBar id="toggleButtonBar"
                        itemClick="img.visible = event.item.data;">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:Object label="Show" data="true" />
                            <mx:Object label="Hide" data="false" />
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ToggleButtonBar>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Image id="img"
            source="@Embed('assets/flashplayer_icon.jpg')"
            width="100"
            height="100" />

</mx:Application>

View source is enabled in the following example.

Tagged as: hideEffect, showEffect