AS3 Show and hide movieclip/image when button/mc is clicked

Question

I want to make something like this http://www.bakedbymelissa.com/checkout/CustomizerCreator.aspx

for now I have squares(square1,square2,square3,square4) as cupcakes and circles(circle1,circle2,circle3,circle4) as the buttons. If I click circle1, square1 should appear and so on. The AS has a separate layer and the shapes are all in one layer. I placed the squares on top of each other but the problem is, when I click the buttons, the square shows up but it can't really be seen cuz it's beneath the square on top of it. How do you do it so that the corresponding square appears and the previous square that appeared, disappears? Any alternatives that you know that does the trick is fine.

my stage looks like this

AS3:

import flash.display.MovieClip; 
import flash.events.Event;  
import flash.events.MouseEvent;  

import fl.transitions.Tween;  
import fl.transitions.TweenEvent;  
import fl.transitions.easing.*;  

var fadeIn:Tween; 

var thisCircle:MovieClip; 
var thisSquare:MovieClip; 

var circles:Array = new Array(circle1,circle2,circle3,circle4); 
var squares:Array = new Array(square1,square2,square3,square4); 

for(var i:Number = 0; i < circles.length; i++) 
{ 
 thisCircle = circles[i]; 
 thisCircle.buttonMode = true; 
 thisCircle.id = i; 
 thisCircle.addEventListener(MouseEvent.CLICK, doFadeIn); 

 thisSquare = squares[i]; 
 thisSquare.alpha = 0; 
} 

function doFadeIn(e:MouseEvent):void  
{ 
 e.currentTarget.mouseEnabled = false; 
 trace(e.currentTarget.name + " is disabled while " + squares[e.currentTarget.id].name + " tweens in."); 
 fadeIn = new Tween(squares[e.currentTarget.id],"alpha",None.easeNone,0,1,2.5,true);  
 fadeIn.addEventListener(TweenEvent.MOTION_FINISH,enableButton(e.currentTarget));  
}  

function enableButton(thisButton:Object):Function 
{ 
 return function(e:TweenEvent):void 
 { 
    thisButton.mouseEnabled = true; 
    trace(e.target.obj.name + " has finished fading in, "+ thisButton.name + " is now enabled again."); 
 }; 
}  

//credits to fruitbeard for the code.

Answer 1

I think that in your code you have forgot to fade out the current square and then fade in the new one.

Take a look on this code :

// to indicate the index of current active circle/square
var current:int = 0;
var fadeIn:Tween, fadeOut:Tween; 

var thisCircle:MovieClip; 
var thisSquare:MovieClip; 

var circles:Array = new Array(circle1, circle2, circle3, circle4); 
var squares:Array = new Array(square1, square2, square3, square4); 

for(var i:Number = 0; i < circles.length; i++) 
{ 
    thisCircle = circles[i]; 
    thisCircle.buttonMode = true; 
    thisCircle.id = i; 
    thisCircle.addEventListener(MouseEvent.CLICK, doFadeIn); 

    // keep the first square as visible
    if(i != current){
        thisSquare = squares[i]; 
        thisSquare.alpha = 0; 
    }
} 

function doFadeIn(e:MouseEvent):void  
{ 
    // if our button is the active one, exit
    if(current == e.currentTarget.id) return;

    // fade out current square
    fadeOut = new Tween(squares[current], "alpha", None.easeNone, 1, 0, 2.5, true);     

    // fade in the new active square
    fadeIn = new Tween(squares[e.currentTarget.id], "alpha", None.easeNone, 0, 1, 2.5, true);  

    current = e.currentTarget.id;
}  

You can see this code working here.

I hope this can help you.