Flex中Image控件设置complete效果

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

'; } else { whichEl.style.display = 'none'; sb.innerHTML=' 显示代码'; whichEl.witdh="300px"; } }   隐藏代码

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

查看Demo演示

原创作者： peterd。翻译整理：一路风尘