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属性来定义，但是放大缩小的比例就很难自定义了，以上的脚本就实现了图片与外面容器大小相当的填充效果。