Build an Automatic Slideshow with Flex
November 15th, 2009 in Flex | 18 CommentsThis 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
May 24th, 2010
hey thanks for this.
Jun 17th, 2010
Hi,
Thanks a lot. It works, but the only thing Iris effect. can u please elaborate the same?
Cheers!
Aug 10th, 2010
Thanks a lot … i get to know about timer class and its functionality
Nov 11th, 2010
Nice Work
Nov 17th, 2010
hey thank you.. it works fine, any possibly sample code using E4X or JSON.. thx!!
Jun 3rd, 2011
That was Coolest and the Easiest one Available in the World …
Its Easy ..
Good Work
Jul 13th, 2011
Good One. Helps me a lot.
Aug 16th, 2011
it works fine. Thx~
Nov 12th, 2011
Hi
Actually this is my code, i tried to add the slideshow , actually where to add this script? please help me
Home
About Us
Services
Process
Contact Us