<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/29/setting-a-complete-effect-on-an-image-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

            private function init():void {
                image.setStyle("completeEffect", Fade);
            }

            private function button_click(evt:MouseEvent):void {
                image.load("assets/Fx.png");
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="button"
                label="Load Image"
                click="button_click(event);" />
    </mx:ApplicationControlBar>

    <mx:Image id="image"
            maintainAspectRatio="true"
            width="100%"
            height="100%"
            initialize="init();" />

</mx:Application>