Problem with onRollOver Funtion

[goatwarrior]

Hello together,

 

I played a little bit with tweenMax and im really impressed what it can do so far.

But I have little problem and I cant find a answer for it. I have build a navigation that works with a "onRollOver" function.

Inside that Navigation is a button to navigate. But when I rollover the button the navigation thinks this is a "onRollOut" and the navigation moves away.

 

Someone an idea to manage this?

 

Here you can find the Test.FLA to have a look at it.

 

And here is the script so far:

 

import com.greensock.*;
import com.greensock.easing.*;


OverwriteManager.init(1)


fadein = function () {
   TweenMax.to(slider,1.5,{bezier:[{_x:"+72"}], orientToBezier:true, ease:Bounce.easeOut});
TweenMax.to(headline,1.5,{bezier:[{_x:"+72"}], orientToBezier:true, ease:Bounce.easeOut});
TweenMax.to(inhalt,1.5,{bezier:[{_x:"+72"}], orientToBezier:true, ease:Bounce.easeOut});
};

fadeout = function () {
TweenMax.fromTo(slider,0.5,{_x:85},{_x:13});
TweenMax.fromTo(headline,0.5,{_x:316},{_x:244});
TweenMax.fromTo(inhalt,0.5,{_x:509},{_x:437});
}
};

slider.onRollOver = fadein
slider.onRollOut = fadeout

[Carl]

i couldn't open your rar, can you please zip it?

 

it appears your mouse events are applied to slider. when you rollover slider it looks like your slider is moving with that bezier tween.

if this slider moves away from your mouse it will fire the onRollOut.

 

solution: don't put your onRollOver/Out events on objects that are moving.

 

if I get to open your file, I may have better advice, but from just looking at your code, that is what I suspect.

 

Carl

[hugznotthugzkidz]

You can try Senocular's event bubbling class.

 

http://www.senocular.com/flash/source/?id=0.160

 

Sorry, if it's not what you're looking for, but it looks like you have a button within a button problem.

[goatwarrior]

hi,

 

here is the Zip-File

 

it appears your mouse events are applied to slider. when you rollover slider it looks like your slider is moving with that bezier tween.

if this slider moves away from your mouse it will fire the onRollOut.

 

Thats correct, and I couldnt manage the problem yet.

[Carl]

as the hugz said, you have a button in a button. that's not good in any situation.

 

select slider on the stage and set it to behave as a movieclip (right under instance name in properties)

... and get rid of slider's hit frame. it doesn't need one.

[goatwarrior]

Hi everyone,

 

I set the properties from the Slider to behave as a Movieclip. But now the Button inside the Movieclip doesnt work.

Has anybody an idea?

 

I'm getting really frustrated with this thing I'm working a whole week on that Slider and it still doesnt work.

[Carl]

if you were using AS3 you could probably nest your button inside your slider and use the target property of a MOUSE_OVER event to get the button to work with its various states:

http://www.wastedpotential.com/?p=10

 

but with AS2 I don't know how that is possible.

 

in AS2, once you have your parent clip (slider) set up for rollOver rollOut events, those events are going to hinder any child elements (buttonTest) from firing any mouse events.

you could try an onEnterFrame event to detect if the mouse is over the button, but that would be pretty over the top.

 

The only thing I would suggest is getting rid of the slider clip and applying your red-background shape to buttonTest so that buttonTest is one big button, with one big hit area.

 

-----

 

also be careful with using fromTo with rollOver/Out. if the user moves there mouse away from your button while the tweens are still running, and quickly moves it back, all the items will jump to their starting positions and start their tweens again, instead of smoothly continuing from where they are.

 

also also, using relative values "72" can give you some funky behavior when the user does the same quick rollOver/Out action as each item will proceed to move 72 pixels from where it currently is instead of a specific destination. if the user does quick over/out actions your objects will keep moving farther and farther to the right..

[LLCoolGirl]

Hello Carl @ snorkl.tv or anyone who could help

 

in your reply on the a.m. topic you wrote:

 

also be careful with using fromTo with rollOver/Out. if the user moves there mouse away from your button while the tweens are still running, and quickly moves it back, all the items will jump to their starting positions and start their tweens again, instead of smoothly continuing from where they are.

 

also also, using relative values "72" can give you some funky behavior when the user does the same quick rollOver/Out action as each item will proceed to move 72 pixels from where it currently is instead of a specific destination. if the user does quick over/out actions your objects will keep moving farther and farther to the right..

 

 

So what then is the solution? In my following code I have to make the trick with onComplete --> out function. If I didn't, then the mc jumps further and further as you wrote. But still the whole stuff doesn't work fine. When I roll out during the tween is still running, then rollOut is of course not registered. Is there an elegant way to solve this?

 

Thanx in advance for your help!

 

right_arrow.buttonMode = true;
right_arrow.mouseChildren = false;
right_arrow.addEventListener(MouseEvent.ROLL_OVER, btn_over);


function btn_over(e:MouseEvent):void
{
e.currentTarget.removeEventListener(MouseEvent.ROLL_OVER, btn_over);

var tl:TimelineLite = new TimelineLite({onComplete:out});
tl.append(TweenLite.to(e.currentTarget, 0.8, { x:"+50", scaleX:2.5, scaleY:2.5, ease:Elastic.easeOut }) );
tl.append(TweenLite.to(e.currentTarget, 0.5, { x:"-50", scaleX:2, scaleY:2, ease:Elastic.easeOut }),-0.3 ); 
}

function out():void
{
right_arrow.addEventListener(MouseEvent.ROLL_OUT, btn_out);
}

function btn_out(e:MouseEvent):void
{
e.currentTarget.removeEventListener(MouseEvent.ROLL_OUT, btn_out);
e.currentTarget.addEventListener(MouseEvent.ROLL_OVER, btn_over);
}

[Carl]

So what then is the solution? In my following code I have to make the trick with onComplete --> out function. If I didn't, then the mc jumps further and further as you wrote

 

if relative values are causing problems, use absolute values.

 

if the mouse leaving the "hit area" of a button/mc causes a rollOut to happen because you are moving the button away from the mouse with a tween then

 

1) increase the hit area of the button by adding and invisible/alpha:0 shape to the button

 

2) place an invisible/alpha:0 shape on top of the button that is moving called something like invisible_mc, and when you rollOver invisible_mc have the right arrow btn move but the invisible_mc stay stationary. you can even have the invisible_mc grow to cover the button for the duration of it's tween.

 

-----

 

what you are trying to achieve is unfortunately contradictory to the normal behavior of buttons. if a button moves away from the mouse it is going to fire a ROLL_OUT event. Any sort of solution is going to appear to be a little hacky and not entirely elegant. I think you have a good thing going actually with removing the roll_out listener and stuff, just see if you can use absolute values instead of relative.

[jamiejefferson]

I would follow Carl's advice to use an invisible hit box if there is a chance the button will move out from underneath the mouse. You may also find the following code works easier than trying to add/remove event listeners on every event.

 

right_arrow.buttonMode = true;
right_arrow.mouseChildren = false;
right_arrow.addEventListener(MouseEvent.ROLL_OVER, btn_over);
right_arrow.addEventListener(MouseEvent.ROLL_OUT, btn_out);

var tl:TimelineLite = new TimelineLite({paused:true});
tl.append(TweenLite.to(right_arrow, 0.8, { x:right_arrow.x+50, scaleX:2.5, scaleY:2.5, ease:Elastic.easeOut }) );
tl.append(TweenLite.to(right_arrow, 0.5, { x:right_arrow.x, scaleX:2, scaleY:2, ease:Elastic.easeOut }),-0.3 ); 

function btn_over(e:MouseEvent):void
{
  tl.play();
}

function btn_out(e:MouseEvent):void
{
  tl.reverse();
}

[LLCoolGirl]

Thank you for your quick responses.

 

I tried out your code Jamie, but it doesn't work, even with invisible button. Tweening didn't get fired or just sometime. And if I hovered the mouse very quickly many times on the inv_btn, the tweening happens as many times as the mouse was over!! Putting

 

var tl:TimelineLite = new TimelineLite();

 

outside the btn_over-function was good, but I had to put the

 

tl.append(TweenLite ...

 

inside btn_over-funtion, otherwise nothing would happen.

 

Because it didn't work, I changed the code and only using TweenLite w/o TimelineLite. Now it works great. Here's the very simple code:

 

hitarea.buttonMode = true;
inv_btn.mouseChildren = false;
inv_btn.addEventListener(MouseEvent.ROLL_OVER, btn_over);
inv_btn.addEventListener(MouseEvent.ROLL_OUT, btn_out);

function btn_over(e:MouseEvent):void
{
	TweenLite.to(right_arrow, 0.8, { x:right_arrow.x+50, scaleX:2.5, scaleY:2.5, ease:Elastic.easeOut });
}

function btn_out(e:MouseEvent):void
{
TweenLite.to(right_arrow, 0.5, { x:right_arrow.x, scaleX:2, scaleY:2, ease:Elastic.easeOut });
}

 

PS: And yes, Carl, relative Number caused problems in this case. And the inv_btn (normally I always use inv_btn ) is also the solution. But one last thing. You misunderstood the problem I had with "Roll_out not registered". When the tweening is still running, and I go out with the mouse, the btn expected me to go out "once again" as soon as the tweening has ended. That means: if I go back on the btn, no "roll_over" happens until I go out and NOW the "roll_out" has been fired out. So I had to wait until the tweening ends and then go out off btn, or have to go over btn twice in order to fire out "roll_over"-event :/

[jamiejefferson]

Here's a test file I created for you to consider. http://www.2shared.com/file/R2gmUZq7/test.html

 

As far as I can tell your new code will have the same problem with relative values as before, as right_arrow.x+50 will be relative to the position right_arrow is at when either ROLL_OVER or ROLL_OUT is triggered. You can see this demonstrated in the first arrow in the attached file. The second arrow uses this same method but stores the original position of the right_arrow so it can be animated with absolute values.

 

There was a problem with my previous 'Timeline' code, as I was confused about how you wanted the animations to look (kinda wrote it on the spot without any testing). Having the -0.3 offset in the timeline was causing some problems. The third arrow in the example has a fixed version representing this method.

 

Hopefully some of this will apply to your project.

 

 

But one last thing. You misunderstood the problem I had with "Roll_out not registered". When the tweening is still running, and I go out with the mouse, the btn expected me to go out "once again" as soon as the tweening has ended. That means: if I go back on the btn, no "roll_over" happens until I go out and NOW the "roll_out" has been fired out. So I had to wait until the tweening ends and then go out off btn, or have to go over btn twice in order to fire out "roll_over"-event :/

If you follow the chain of event adding / removing you had for hovering buttons:

 

addListener(ROLL_OVER), // 1 event listener active

trigger ROLL_OVER event, // 1 event listener active

removeListener(ROLL_OVER), // 0 event listeners active

wait for animation to finish, // 0 event listeners active

addListener(ROLL_OUT), // 1 event listeners active

trigger ROLL_OUT event, // 1 event listeners active

removeListener(ROLL_OUT), // 0 event listeners active

back to start.

 

If any of the ROLL_OVER / ROLL_OUT events that you would like to respond to occurred during times when there were no listeners active, or when only the alternate listener was active, then you're going to see effects like that. Dynamically changing event listeners, especially for MouseEvents, is always going to cause trouble from my experience. I would definitely recommend setting up event listeners once and leaving them active until the buttons they are attached to are no longer required. In fact, you might even consider using a single set of event listeners on the stage, and basing any further action on the target of that event.

[LLCoolGirl]

You spare no effort to help me, so thank you so much, Jamie.

 

I must admit, the code I posted was not complete as I left out:

 

var pos_old:Number = hitarea.right_arrow.x;

var pos_new:Number = hitarea.right_arrow.x+50;

 

Thought it wouldn't make any difference and didn't check it out 'cause I'm used to initiate the vars outside. So arrow_2 was my choice