This tutorial will guide you through the process to create a basic image navigator like the one below.

Click here to download the Image Navigator MXML.

First create an XML variable as shown below (a future tutorial will describe how you can import an external version of this xml). The XML stores the image location and the name of the image (add/change these values to be your own images). Add the code below to the script part of your MXML.

public var picXML:XML = <images>
<image>
	<url>http://www.trumpetmouth.com.au/imagerotator/image1.jpg</url>
	<name>Image One</name>
</image>
<image>
	<url>http://www.trumpetmouth.com.au/imagerotator/image2.jpg</url>
	<name>Image Two</name>
</image>
<image>
	<url>http://www.trumpetmouth.com.au/imagerotator/image3.jpg</url>
	<name>Image Three</name>
</image>        							        							
</images>;

Next create the GUI (Graphical User Interface). In this example I have used a vertical box (VBox) and a horizontal box (HBox) for the layout of the application. The VBox contains the Image and the HBox. The HBox contains the navigation buttons and the image label. Add the code below to your MXML (place it below the closing tag of the Script area.

<mx:VBox>
	<mx:Image id="imageView" source="{xmlCol[imageNumber].children()[0]}">
	</mx:Image>
	<mx:HBox width="100%"  horizontalAlign="center">
		<mx:Button click="previousImage()" label="&lt;&lt;">	
		</mx:Button>
		<mx:Label id="imageText" text="{xmlCol[imageNumber].children()[1]}">
			
		</mx:Label>
		<mx:Button click="nextImage()" label="&gt;&gt;">	
		</mx:Button>			
	</mx:HBox>	
</mx:VBox>

As you can see the click action for each of the buttons calls the two functions 'nextImage' and 'previousImage' respectively (the functions are described later). The public variable imageNumber has been created to keep track of the image being viewed. Add the following line to the top of the script part of your MXML.

public var imageNumber:int = 0;

Next, set up an XMLListCollection based on the images XML. This will allow the application to access methods and properties associated with a collection. In our example the XMLListCollection allows us to get the number of images in the collection using the length property. First an XMLList needs to be created from the XML and then an XMLListCollection should be created as in the code below. Paste this code into the script area of your MXML application.

public var xmlList:XMLList = new XMLList(picXML.children());
public var xmlCol:XMLListCollection = new XMLListCollection(xmlList);
public var numberOfImages:int =  xmlCol.length;

The 'previousImage' function checks to see if the current value of imageNumber is greater than zero. This is to prevent the viewer from accessing an undefined image. If the image number does not meet this criteria, imageNumber is set to be the last image. Next the source of the image is set to be the XML value of the URL (defined as the first child element in the XMLListCollection for the image indexed by imageNumber). Similarly, the image description is set to be the second child element for that image.

The 'nextImage' code follows the same principal, except that this time the condition is the opposite ie. increment if the imageNumber is less than the number of images and set to zero if this condition is not true.

public function previousImage():void{
	if( imageNumber > 0 ){
		imageNumber--;        		
	}else{
		imageNumber = numberOfImages-1;
	}
	imageView.source = xmlCol[imageNumber].children()[0];
	imageText.text = xmlCol[imageNumber].children()[1];
}	

public function nextImage():void{
	if( numberOfImages-1 > imageNumber ){
		imageNumber++;        		
	}else{
		imageNumber = 0;
	}
	imageView.source = xmlCol[imageNumber].children()[0];
	imageText.text = xmlCol[imageNumber].children()[1];
} 

Compile this code using Flex Builder or using the command line compiler (provided by Adobe for license free use). You now have a working image navigator! This concept can be easily re-created to be an automatic image rotator by using a timer and incrementing the imageNumber after a number of seconds has passed.

Click here to download the Image Navigator MXML.