Flex Tutorials 17-Animation and Embedding Images in Adobe Flex

Copy some pictures in your src/assets folder and write the code as follows
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="startTimer()">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
[Bindable]
[Embed(source='/assets/houseImages/1.jpg')]
private var family1 : Class;
[Bindable]
[Embed(source='/assets/houseImages/2.jpg')]
private var family3 : Class;
[Bindable]
[Embed(source='/assets/houseImages/3.jpg')]
private var family4 : Class;
[Bindable]
[Embed(source='/assets/houseImages/4.jpg')]
private var family6 : Class;
[Bindable]
[Embed(source='/assets/houseImages/5.jpg')]
private var family5 : Class;
[Bindable]
[Embed(source='/assets/houseImages/6.jpg')]
private var family7 : Class;
//timer
private var timer:Timer;
private function init():void {
//mx.controls.Alert.show("HI");
timer = new Timer(2000); /* 1000ms == 1second */
timer.addEventListener(TimerEvent.TIMER, onTimer);
}
private function onTimer(evt:TimerEvent):void {
var idx:uint = imageViewStackComp.selectedIndex;
var max:uint = imageViewStackComp.numChildren;
var newIdx:uint = ++idx % max;
imageViewStackComp.selectedIndex = newIdx;
}
private function startTimer():void {
//mx.controls.Alert.show("HI timer");
if (!timer.running) {
timer.start();
}
}
private function stopTimer():void {
if (timer.running) {
timer.stop();
}
}
]]>
</mx:Script>
<mx:WipeLeft id="SlowWipe" duration="200"/>
<mx:WipeRight id="ReallySlowWipe" duration="200"/>
<mx:ViewStack id="imageViewStackComp" width="100%"
creationComplete="init()" >
<mx:Canvas showEffect="{SlowWipe}">
<mx:Image source="{family1}" width="100%" />
</mx:Canvas>
<mx:Canvas showEffect="{ReallySlowWipe}">
<mx:Image source="{family3}" width="100%" />
</mx:Canvas>
<mx:Canvas width="100%" height="100%" showEffect="{SlowWipe}">
<mx:Image source="{family4}" width="100%" />
</mx:Canvas>
<mx:Canvas width="100%" height="100%" showEffect="{ReallySlowWipe}" >
<mx:Image source="{family5}" width="100%" />
</mx:Canvas>
<mx:Canvas width="100%" height="100%" showEffect="{SlowWipe}">
<mx:Image source="{family6}" width="100%" />
</mx:Canvas>
<mx:Canvas width="100%" height="100%" showEffect="{ReallySlowWipe}">
<mx:Image source="{family7}" width="100%" />
</mx:Canvas>
</mx:ViewStack>
</mx:Application>