AS3 单击按钮/mc 时显示和隐藏影片剪辑/图像

Question

我想做这样的http://www.bakedbymelissa.com/checkout/CustomizerCreator.aspx

现在我有正方形（square1,square2,square3,square4）作为纸杯蛋糕和圆圈（circle1,circle2,circle3,circle4）作为按钮。如果我点击circle1，square1 应该会出现等等。 AS 有一个单独的层，形状都在一个层中。我将正方形放在彼此的顶部，但问题是，当我单击按钮时，正方形会显示出来，但实际上看不到它，因为它位于其上方的正方形下方。你如何做到这一点，以使相应的方块出现，而前一个出现的方块消失？您知道的任何可以解决问题的替代方法都可以。

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."); 
 }; 
}  

//感谢fruitbeard的代码。

Answer 1

我认为在您的代码中，您忘记了淡出当前方块，然后淡入新方块。

看看这段代码：

// 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;
}  

你可以看到这段代码在here工作。

希望对你有帮助。