Build an Automatic Slideshow with Flex

This Flex tutorial will show you how to build a slideshow that will change the images automatically with a special appearance effect.

View DemoDownload Source

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>

20 thoughts on “Build an Automatic Slideshow with Flex

  1. David

    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.

  2. Sam

    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?

  3. Pingback: tutoriale dla adobe flex i photoshop | web-tutoriale.pl

  4. flexbeginner

    hey sam,
    actually it will not displaying images because not able to translate the path of image.

  5. Mishti

    Hi,
    Thanks a lot. It works, but the only thing Iris effect. can u please elaborate the same?

    Cheers!

  6. Tds

    That was Coolest and the Easiest one Available in the World …
    Its Easy ..
    Good Work

  7. Siraj

    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

  8. FlexStarter

    line 6 in the code gives error :

    Description Resource Path Location Type
    Could not resolve to a component implementation. Main.mxml /FirstApp/src line 6 Flex Problem

    Also no pics are displayed but that is evident when the initiation can not be done.

    what can be the problem for the above err ?

Leave a Reply

Your email address will not be published. Required fields are marked *