how to replace the images in flex 3? - apache-flex

Question

In my flex application, i am maintaining 5 images. When user clicks on 'next' button, it should display one image say 'image1'. If that button clicked again, then image1 should replace with image2 and so on. I am basically following 'image.visible' method. But images are displaying side by side. I think it is not the correct procedure. Any alternative? Thanks in advance
here is my code. I kept all my images and buttons in mx:panel. Even i used x and y positions which are not working.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel
title = 'Learn and Test your Knowledge'
height = '80%'
paddingBottom = '10' paddingTop = '10'
paddingLeft = '10' paddingRight = '10'
borderAlpha='0.20' fontFamily="Verdana" fontSize="15" color="#F30C32" backgroundImage="#Embed(source='../images/lad.jpg')" width="413" x="139">
<mx:Script>
<![CDATA[
public function nextEvent():void
{
// here i should write next button code
}
]]>
</mx:Script>
<mx:Image source="../images/image1.jpg" visible="true" id="image1" />
<mx:Image source="../images/image3.jpg" visible="true" id="image2"/>
<mx:Image source="../images/image3.jpg" visible="true" id="image3"/>
<mx:Button id="next" visible="false" click="nextEvent()">
</mx:Button>

Answer 1

The best way is to use only one image component if you are only ever showing one image. You can create an array or vector with the embedded images and reference that to change the source property on the image component. Here is an example: (the code below will work with any layout/container)
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Image id="image" click="imageClick()" source="{new images[0]()}" />
<mx:Script>
<![CDATA[
[Embed(source="assets/1.png")]
private var image1:Class;
[Embed(source="assets/2.png")]
private var image2:Class;
[Embed(source="assets/3.png")]
private var image3:Class;
private var images:Array = [image1, image2, image3];
private var imageIndex:uint = 0;
protected function imageClick():void
{
imageIndex++;
if(imageIndex == images.length) imageIndex = 0;
image.source = new images[imageIndex]();
}
]]>
</mx:Script>
</mx:Canvas>

Answer 2

Specify the x and y position of images as same and play around with their visibility.It ll definitely work.

Answer 3

ViewStack is my option it fits very well in this occasion.
At a time it shows only one component, for next action it will automatically override previous content by its new component.
<mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%">
<mx:Canvas id="one" click="myViewStack.selectedChild=two;">
<mx:Image source="assets/1.png" />
</mx:Canvas>
<mx:Canvas id="two" click="myViewStack.selectedChild=three;">
<mx:Image source="assets/2.png" />
</mx:Canvas>
<mx:Canvas id="three" click="myViewStack.selectedChild=four;">
<mx:Image source="assets/3.png" />
</mx:Canvas>
<mx:Canvas id="four" click="myViewStack.selectedChild=five;">
<mx:Image source="assets/4.png" />
</mx:Canvas>
<mx:Canvas id="five" click="myViewStack.selectedChild=one;">
<mx:Image source="assets/5.png" />
</mx:Canvas>
</mx:ViewStack>