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