We help IT Professionals succeed at work.

Animate a Movieclip in AS3 with Tweener by MouseOver and MouseOut

Hori76
Hori76 asked
on
Medium Priority
2,407 Views
Last Modified: 2013-11-11
I have 4 buttons, when I roll over a button it needs to fade-in a text on stage. When I roll-out it needs to fade out the text.
I did the fade-in and fade-out with the tweener class, but it only works 1 time, after that, the instance of the text stays on stage and doesn't fade-out anymore.

I don't want to do this with the timeline in the MovieClip, because I need more control over the MovieClip.

This is the script I already have, like I said, it only works once. Can someone tell me what I'm doing wrong?
nav.zwembaden.addEventListener(MouseEvent.MOUSE_OVER, zwembaden_MOUSEOVER);
nav.zwembaden.addEventListener(MouseEvent.MOUSE_OUT, zwembaden_MOUSEOUT);
 
function zwembaden_MOUSEOVER(e:MouseEvent):void
{
	var mcLink:MovieClip = new mc_links();
	mcLink.linktext.text = "ZWEMBADEN";
	mcLink.name = "mcLink_zwembaden";
	addChild(mcLink);
	mcLink.alpha = 0;
	mcLink.blendMode = BlendMode.LAYER;
	Tweener.addTween(mcLink, {alpha:1, time:1, transition:"easeInSine"});
}
 
function zwembaden_MOUSEOUT(e:MouseEvent):void
{
	Tweener.addTween(getChildByName("mcLink_zwembaden"), {alpha:0, time:1, transition:"easeInSine"});
        //stage.removeChild(stage.getChildByName("mcLink_zwembaden"));
}

Open in new window

Comment
Watch Question

Hi there,

after reading your script I must make a few remarks.

You are trying to achieve a rollover/out effect using the Tweener, this is perfectly good logic. But in the MOUSE_OVER script you are constantly adding instances of mc_links to the movieclip. In you're MOUSEOUT script you have tried to remove that child again (possibly  in an attempt to make let the script work the way you intent it to...)

This is not the way to go add this sort of thing. May I suggest you do this:

Add the text field to the button outside of the MOUSEOVER code , and set it's alpha to 0 ; In the MOUSEOVER script use the event.currentTarget feature to set it's alpa to 1 (using a Tween ) . This way you will be able to set the same MOUSE_OVER and MOUSE_OUT function to other buttons as well !

Have a look at the code below, It's basically the same as yours but the text field is created outside of the MOUSEOVER function.

Notice the use of e.currentTarget ; This might not return the desired result immediately, maybe you should write e.currentTarget.mcLink_zwembaden (I don't know the exact structure of your movieclips).

Hope this helps, if it works out, enjoy your swim !

regards,
DM
nav.zwembaden.addEventListener(MouseEvent.MOUSE_OVER, zwembaden_MOUSEOVER);
nav.zwembaden.addEventListener(MouseEvent.MOUSE_OUT, zwembaden_MOUSEOUT);
 
var mcLink:MovieClip = new mc_links();
mcLink.linktext.text = "ZWEMBADEN";
mcLink.name = "mcLink_zwembaden";
addChild(mcLink);
mcLink.alpha = 0;
mcLink.blendMode = BlendMode.LAYER;
 
function zwembaden_MOUSEOVER(e:MouseEvent):void
{ 
        Tweener.addTween(e.currentTarget, {alpha:1, time:1, transition:"easeInSine"});
}
 
function zwembaden_MOUSEOUT(e:MouseEvent):void
{
        Tweener.addTween(e.currentTarget, {alpha:0, time:1, transition:"easeInSine"});
        //stage.removeChild(stage.getChildByName("mcLink_zwembaden"));
}

Open in new window

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
Thanks, just what I was looking for!
Unfortunately it's not my swimming pool... :)

function zwembaden_MOUSEOVER(e:MouseEvent):void
{ 
        Tweener.addTween(mcLink, {alpha:1, time:1, transition:"easeInSine"});
}
 
function zwembaden_MOUSEOUT(e:MouseEvent):void
{
        Tweener.addTween(mcLink, {alpha:0, time:1, transition:"easeInSine"});
}

Open in new window

Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.