Flex中Image控件设置complete效果

最新推荐文章于 2019-02-26 17:33:09 发布

转载最新推荐文章于 2019-02-26 17:33:09 发布 · 2.7k 阅读

文章标签：

#image #flex #button #application #function #import

Flex 专栏收录该内容

188 篇文章

订阅专栏

本文介绍如何在Flex中为Image控件设置加载完成后的淡入效果。提供了三种方法：使用MXML设置completeEffect属性；在ActionScript中设置样式；以及完全使用ActionScript创建控件并设置效果。

以下的例子展示如何通过使用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