"Jumpy" button, any solutions?

[TheMightyMac]

Hi, I wanted to see if anyone has a solution for this because I can't seem to find it anywhere...I created a button that when you roll over it moves tweens up and when you roll out it returns to it's original position (it also has a color transform on the rollover which is working fine). The problem is when you roll in/out at the bottom of the button it jumps up and down and doesn't stop. I know why it's doing it but I can't seem to find a way to stop it. I also want to add a drop down menu to this button but with this problem I don't see how I can. Thanks in advance for any suggestions.

[TheMightyMac]

Hey, thought it would be a good idea to just post the fla file so you can see exactly what's happening.

[Carl]

yeah, when your object moves away from the mouse, that will trigger the ROLL_OUT.

the solution in most cases is just to create a hit area that doesn't move while the btn is moving.

 

in your file I added an invisible button called "hit" to your home button.

 

the general idea is that hit has ROLL_OVER/OUT listeners that trigger tweens that move your orange rectangle and text.

 

here is a code sample:

home_btn.hit.addEventListener(MouseEvent.MOUSE_OVER, homeOver);	


function homeOver (event:MouseEvent): void
{
TweenLite.to(home_btn.btn, .3, {y:-5, ease:Back.easeOut});
}

 

***note in the fla when creating this new movie clip which contains a "hit" area separate from the object that's moving... I changed the registration point on "Button_mc" so that the y values in the tween were easier to understand and adjust.

[TheMightyMac]

Awesome, thanks Carl! I'll take a look and try an example on my own.

[TheMightyMac]

Hey Carl I can't open the fla you attached. I'm running Flash CS3, I wonder if that's the problem...

[Carl]

yeah, it was saved out as CS4.

 

CS3 version attached

[Benjamin Waller]

Hi Carl,

Was interested to know more about the tint property you have used in your example here on the Orange button mc. I wasn't able to see a change when I altered the amount of tint? Was the tint supposed to change here because I can't see any ? and I'm sure I'm not colour blind. hehe

 

	TweenMax.to(orangeBtn_mc, .3, {colorTransform:{tint:0xffff66, tintAmount:0.25}});

 

love your work ! Keep it up.

Cheers,

Ben.

[Carl]

thanks Ben.

 

i just looked at my file again. had no idea that tint code was in there! that was already inside the button that you gave me and I must have overlooked it.

 

to get the tint effect to work, just get rid of all the code inside the Button_mc symbol and alter your functions on frame 1 of the main timeline:

 

function homeOver (event:MouseEvent): void
{
	trace("homeOver");
TweenLite.to(home_btn.btn, .3, {y:-5, ease:Back.easeOut});
TweenMax.to(home_btn.btn, .3, {colorTransform:{tint:0xffff66, tintAmount:0.25}});
}

function homeOut (event:MouseEvent): void
{
TweenLite.to(home_btn.btn, .3, {y:0, ease:Back.easeOut});
TweenMax.to(home_btn.btn, .3, {removeTint:true});
}

 

edit since both tweens in both functions have the same duration you could also combine all the properties into ONE Tween

 

TweenMax.to(home_btn.btn, .3, {y:-5, ease:Back.easeOut, colorTransform:{tint:0xffff66, tintAmount:0.25}});

[Benjamin Waller]

Hi again,

Is this the correct way to activate the colourTransform Plugin. It's not working for me and I'm getting the following message in the output panel.

Scene 1, Layer 'AS', Frame 1, Line 5 1120: Access of undefined property TweenPlugin.

 

 

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.ColorTransformPlugin;

TweenPlugin.activate(ColorTransformPlugin);

 

Ben.

[TheMightyMac]

Ben, looking back to when I created the original file I didn't import or activate any plugins, I believe it is packaged with the TweenMax. Try removing those lines of code.

 

Carl, I added the color transform coded like you mentioned and now everything works great! The reason why embedded the color transform inside the button is it kept changing everything in the mc to that color. How is it that it's not doing that now with your code?

 

Thanks again for all your help!

[Carl]

i think the tint is still happening, its just hard to see it applied to the white text.

 

what you could do is make the gradient-rectangle its own symbol inside your button and only tint it all by itself so that the text doesn't get effected at all.