Button unclickable until visible

[birds4]

I have a new project where I have many keyframes, each with a little animation. The user clicks a button to advance to the next frame, but I want the button to be invisible and unclickable until the animation on each frame has finished playing.

 

Currently, it looks something like this (just an example):

 

var tl1:TimelineLite = new TimelineLite();

tl1.append(TweenLite.from(mc1, 0.5, {alpha:0}));
tl1.append(TweenLite.from(mc2, 2, {alpha:0}));

 

After this, I want the button to be visible, so I added this:

 

tl1.append(TweenLite.from(btn_next, 0.01, {alpha:0}));

btn_next.addEventListener(MouseEvent.MOUSE_UP,buttonPressed);
function buttonPressed(event:MouseEvent){
nextFrame()
}

 

But I noticed it is still clickable when invisible, and I would like for it to be unclickable.

 

Might be an easy solution, but what do I know?

 

Thanks in advance!

[Carl]

To make a button hidden and not clickable, you will need to set the visible property to false.

 

Fortunately the autoAlpha plugin will tween the alpha to 0 and set the visible property to false when done.

 

Try

 

//at top of your file import and activate autoAlpha
import com.greensock.plugins.*;
TweenPlugin.activate([AutoAlphaPlugin]);

//in your timeline use:
tl1.append(TweenLite.from(btn_next, 0.01, {autoAlpha:0}));

 

For more info see the plugin explorer http://www.greensock.com/tweenmax

 

and/or see this tutorial:

http://www.snorkl.tv...s-of-tweenlite/

[pixeldroid]

FWIW, another useful property in an application like this is .mouseEnabled, which can be used to toggle the mouse responsiveness of an object. This can be useful if you have a mouseDown state.

[birds4]

Oh, thanks! I used the AutoAlpha plugin for movie clips before, but not for buttons. Now I know.

 

Thanks again!