Flex中Image控件设置complete效果

以下的例子展示如何通过使用Mxml,css或者CS设置completeEffect属性来为Image控件增加一个complete效果。

<?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[

            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"

            completeEffect="Fade"

            maintainAspectRatio="true"

            width="100%"

            height="100%" />



</mx:Application>

或者用AS实现（1）

<?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>


（2）
 
<?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"

        initialize="init();">



    <mx:Script>

        <![CDATA[

            import mx.containers.ApplicationControlBar;

            import mx.controls.Button;

            import mx.controls.Image;

            import mx.effects.*;



            private var button:Button;

            private var image:Image;



            private function init():void {

                button = new Button();

                button.label = "Load Image";

                button.addEventListener(MouseEvent.CLICK, button_click);



                var appControlBar:ApplicationControlBar;

                appControlBar = new ApplicationControlBar();

                appControlBar.dock = true;

                appControlBar.addChild(button);

                Application.application.addChildAt(appControlBar, 0);



                image = new Image();

                image.maintainAspectRatio = true;

                image.percentWidth = 100;

                image.percentHeight = 100;

                image.setStyle("completeEffect", Fade);

                addChild(image);

            }



            private function button_click(evt:MouseEvent):void {

                image.load("assets/Fx.png");

            }

        ]]>

    </mx:Script>



</mx:Application>



本文转自：http://blog.chinaunix.net/u/21684/showart_1079438.html