Flex中Image控件设置complete效果

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

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

文章标签：

#Flex #Adobe #XML #Blog #CSS

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

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