Flex | Flash | Air | AS3
Build an Automatic Slideshow with Flex
November 15th, 2009 in FlexThis Flex tutorial will show you how to build a slideshow that will change the images automatically with a special appearance effect.
1. Create a new flex project named Slideshow, set the name of the main MXML application file to Main.mxml and set its layout to vertical.
2. First add an Image component and give it an id of “img”. Everything else will happen in the Script section.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:Image id="img"/> </mx:Application>
3. Add a Script section.
Create 2 variables, one as an array that contains the pictures and the other that keeps track of the image that will be displayed.
Put your image files inside an assets folder.
<mx:Script> <![CDATA[ private var pictures : Array = ["ali1.jpg","ali2.jpg","ali3.jpg","ali4.jpg"]; private var index:int = 0; ]]> </mx:Script>
4. Create an init() function that will be called for the creationComplete event of the Application.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" creationComplete="init()">
In the init() function, load the first picture and increment the index variable. Next declare a Timer variable and add its event listener that will be handled by the changeImage function.
private function init():void{
img.load("assets/"+pictures[0]);
index ++;
var timer:Timer = new Timer(5000);
timer.addEventListener(TimerEvent.TIMER,changeImage);
timer.start();
}
5. In the changeImage function we simply load the next image and increment the index variable if the array’s limit hasn’t been reached.
private function changeImage(e:TimerEvent):void{
img.load("assets/"+pictures[index]);
if(index<pictures.length -1)
index++;
else
index=0;
}
6. So far if you test your app, all should work fine but to make it more special we will add an Iris effect to the image’s appearance.
private function init():void{
img.setStyle("completeEffect",Iris);
img.load("assets/"+pictures[0]);
index ++;
var timer:Timer = new Timer(5000);
timer.addEventListener(TimerEvent.TIMER,changeImage);
timer.start();
}
7. Here’s the final code, run your application to test it.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
verticalAlign="middle"
backgroundGradientAlphas="[1.0, 1.0]"
backgroundGradientColors="[#17043B, #000000]"
creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.effects.Iris;
private var pictures : Array = ["ali1.jpg","ali2.jpg","ali3.jpg","ali4.jpg"];
private var index:int = 0;
private function init():void{
img.setStyle("completeEffect",Iris);
img.load("assets/"+pictures[0]);
index ++;
var timer:Timer = new Timer(5000);
timer.addEventListener(TimerEvent.TIMER,changeImage);
timer.start();
}
private function changeImage(e:TimerEvent):void{
img.load("assets/"+pictures[index]);
if(index<pictures.length -1)
index++;
else
index=0;
}
]]>
</mx:Script>
<mx:Image id="img"/>
</mx:Application>
Nov 17th, 2009
i can’t do that ,my demo just display one picture!!!
Nov 17th, 2009
oh i can do that!thank you!
Nov 17th, 2009
I love how this came out literally a day after I finished my first ever flex slideshow which was also my first ever flex project that is actually in use.
Dec 14th, 2009
hi, i tried to download this project and tried to run it in flex builder, it doesnt show anything, i mean when i run it i can only see an image icon without any pictures…is there a solution?
Dec 17th, 2009
[...] jak zrobić automatyczny slideshow [...]
Jan 7th, 2010
welcome
Jan 8th, 2010
Thank you!
Feb 22nd, 2010
hey sam,
actually it will not displaying images because not able to translate the path of image.
Feb 27th, 2010
i just want to apply xml data with httpservice is it possible?please tell me