Search This Blog


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="" layout="absolute"
import mx.controls.Alert;
private var family1 : Class;
private var family3 : Class;
private var family4 : Class;
private var family6 : Class;
private var family5 : Class;
private var family7 : Class;
private var timer:Timer;
private function init():void {
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 {
//"HI timer");
if (!timer.running) {
private function stopTimer():void {
if (timer.running) {
<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 showEffect="{ReallySlowWipe}">
<mx:Image source="{family3}" width="100%" />
<mx:Canvas width="100%" height="100%" showEffect="{SlowWipe}">
<mx:Image source="{family4}" width="100%" />
<mx:Canvas width="100%" height="100%" showEffect="{ReallySlowWipe}" >
<mx:Image source="{family5}" width="100%" />
<mx:Canvas width="100%" height="100%" showEffect="{SlowWipe}">
<mx:Image source="{family6}" width="100%" />
<mx:Canvas width="100%" height="100%" showEffect="{ReallySlowWipe}">
<mx:Image source="{family7}" width="100%" />

No comments: