Flex 图片自动播放与图片拉伸

最近，做了个小部件，但是被一些小问题纠缠不清，现在拿出来与大家分享。

先看源代码：

<mx:Parallel id="pe">
<mx:Fade id="fe" alphaFrom="0" alphaTo="0.8" duration="600" />
<mx:Blur id="be" blurXFrom="50" blurXTo="0" blurYFrom="50" blurYTo="0" duration="600" />
</mx:Parallel>

<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.EffectEvent;
import flash.events.MouseEvent;

[Bindable]
[Embed(source="1.jpg")]
private var imgClass1:Class;
[Bindable]
[Embed(source="2.jpg")]
private var imgClass2:Class;
[Bindable]
[Embed(source="3.jpg")]
private var imgClass3:Class;
[Bindable]
[Embed(source="4.jpg")]
private var imgClass4:Class;
[Bindable]
[Embed(source="5.jpg")]
private var imgClass5:Class;
[Bindable]
[Embed(source="6.jpg")]
private var imgClass6:Class;

private var imgArray:ArrayCollection;

private var t:Timer = new Timer(3000);
private var index:int = 0;

public function init():void{

imgArray = new ArrayCollection();
imgArray.addItem(imgClass1);
imgArray.addItem(imgClass2);
imgArray.addItem(imgClass3);
imgArray.addItem(imgClass4);
imgArray.addItem(imgClass5);
imgArray.addItem(imgClass6);

img.scaleX = 2;
img.scaleY = 1;
img.source = imgArray[index] as Class;
img.addEventListener(MouseEvent.ROLL_OVER,stopPlay);
img.addEventListener(MouseEvent.ROLL_OUT,countinuePlay);
t.addEventListener(TimerEvent.TIMER,autoPlay);
t.start();
}

public function completeEvent(event:Event):void {

Bitmap(event.target.content).smoothing = true;
img.content.width = thumbnailContainer.width;
img.content.height = thumbnailContainer.height;
}

//每次完成载入，就对图片进行重新的大小定义

public function autoPlay(event:TimerEvent):void{
index++;
if(index > imgArray.length - 1) index=0;
img.source = imgArray[index];
}

public function stopPlay(event:MouseEvent):void{
t.stop();
}

public function countinuePlay(event:MouseEvent):void{
t.start();
}


public function remove(event:EffectEvent):void{
event.effectInstance.reverse();
event.effectInstance.play();
}

]]>
</mx:Script>

<mx:Canvas id="thumbnailContainer" width="529" height="191" y="0" x="0">
<mx:Image width="100%" height="100%" id="img" completeEffect="pe"
maintainAspectRatio="false" scaleContent="true" complete="completeEvent(event)" x="0" y="0"/>
</mx:Canvas>

Flex image组件中有一个scaleContent属性，可使载入的图片按比例放大缩小，当然也可以使用scaleX与scaleY属性来定义，但是放大缩小的比例就很难自定义了，以上的脚本就实现了图片与外面容器大小相当的填充效果。