Rollover Hand Cursor Doesn't Work

[Guest]

Hi Adobe,

I keep having glitchy pointer cursor issues where it's there, it's not there, it's there, it's not there.

I have a basic empty button rollover called CLICK for clicktag and it works fine but the pointer cursor keeps turning off. It'll like flicker and then turn off. If I republish the thing 100 times it finally stays...and then it goes off again. What the heck is the solution?

Here's my first frame code for reference:

var frequency = 100;

stage.update();

stage.enableMouseOver();

myLocalTimeline = this;

this.CLICK.addEventListener("mouseover", fl_MouseOverHandler);

function fl_MouseOverHandler() {

myLocalTimeline.CTA.gotoAndStop(1);

}

this.CLICK.addEventListener("mouseout", fl_MouseOutHandler);

function fl_MouseOutHandler() {

myLocalTimeline.CTA.gotoAndStop(2);

}

this.CLICK.addEventListener("click", fl_MouseClickHandler);

function fl_MouseClickHandler() {

window.open("http://www.website.com", "_blank");

}

Still it doesn't work. If anybody has overcome this issue or has any suggestions, I'm all ears. Cuz I'm ready to sum up that Animate is just jenky.

Thanks for reading.

[JoãoCésar]

Hi.

It usually happens because a custom hit area isn't defined so the whole button will be tested when checking mouse interactions. The problem is if your button contains text fields, gaps, and animations, for example, the chances of not having a pixel under the cursor is way bigger.

If you are using the default button symbol, make sure to have only a single shape in the "hit" frame.

[Guest]

Hi Joao,

It's currently a empty (light transparent blue) button symbol. As plain as it gets. Do I need to add something else to it so Animate understands it's a button? It's like the hand symbol flickers on at the edge then reverts to the arrow once on top of the button.

[Nicktendo28]

Link the .fla if you can so we can troubleshoot it for you.

[Guest]

Sure thing, it's wrapped up in a zip though:

http://axiom-media.com/work/aXiom/160x600.zip

[JoãoCésar]

Thanks.

Some things:

- I'm not getting the mouse over problems you described;

- The 'myLocalTimeline.CTA' object doesn't exist and this is causing errors;

- I think you don't need the stage.update() call because Animate/CreateJS already to this;

- If your frequency var refers to the mouse over frequency, please notice that the maximum acceptable value is 50.

Can you take a look a these?

Regards.

[Guest]

Hi Joao,

Thanks for the help. If you're not seeing the problem, that's a good thing. That's what's driving me nuts is it's there, it's not there.

The CTA is there, it's just hidden because I need the code to attach to it first frame. I edited the code per your request and still the hand cursor doesn't show up.

It 's odd if you're not seeing the problem. I'm thinking the scope of the issue is somehow outside what we're doing, you know? If we both have the same code and are seeing different things, that's strange.

[JoãoCésar]

The browser console outputs that there's no object called CTA.

Maybe the errors are causing the hovering problem. I'm saying this because a single problematic piece of code can affect another part of the code that is doing good.

Always check the browser console to see if there isn't any problem.

[Guest]

Totally, yeah I know. This stuff is stricter than it used to be. I'll make sure to see what I can figure out using google inspect.

Thanks Joao!

[Nicktendo28]

I am not sure why you have the CTA in there. But I took it out and the rollover started to work.

myLocalTimeline.gotoAndStop(2);

[Nicktendo28]

Copy and paste this code in and it should work now.

stage.enableMouseOver();

myLocalTimeline = this;

this.CLICK.addEventListener("mouseover", fl_MouseOverHandler);

function fl_MouseOverHandler() {

myLocalTimeline.gotoAndStop(1);

}

this.CLICK.addEventListener("mouseout", fl_MouseOutHandler);

function fl_MouseOutHandler() {

myLocalTimeline.gotoAndPlay(1);

}

this.CLICK.addEventListener("click", fl_MouseClickHandler);

function fl_MouseClickHandler() {

window.open("http://www.axiom-media.com", "_blank");

}

[Guest]

Hi nickg28,

What's tricky is I can' show you my work. It's copyright protected. I tried to show a stripped out version of the unit, but I need the main timeline, so I can't use that code.

I'll have to re-visit this later today or in the week I think. I'm just to busy. Fortunately, it seems others are not having that problem. My work hasn't said anything so...

Anyways, thanks for the help guys!

[albertd9194959]

Hi there,

Your using an Animate button symbol and a mouseover event listener simultaneously, this is the cause of the weirdness.

They are conflicting as the button symbol has default mouse state listeners, even if you don't populate it with over/down/hit keyframes.

Convert the button into a movie clip and you wont have that issue.

The next issue is that the mouseover eventlister actually picks up the gap between the stroke and the fill, so you need to add an extra layer behind the graphic to fill the gap.

Regards,

[Guest]

Strange, I convert the button to movieclip and make alterations and still there's no hand cursor.

I change it back to a button symbol, now it works. ?? Some kind of overlap I suppose, what happens last ends up at the bottom of the script?

That's good logic as to why I'm having conflicting symbols/responses. I can't seem to get movieclips to work as buttons though. It gets tangled. I can't remember what I did to get a clicktag to work weeks ago, but the rollover response was incredibly slow. So I did this that and the other and finally I got something to work. Kind of an enigma, really.

The button works (for now). I will have to look into movieclip buttons more later I suppose. I tried that frequency jazz with no avail. It didn't matter on my end. I will have to investigate further.

Thanks albertd9194959, that helps clarify some things for sure.

p.s. whats even more odd is that now ALL of my units buttons rollovers work after editing one units button/movieclip. Animate = jenky and bizarre. glad it works now (just don't touch anything!)

[albertd9194959 · Accepted solution]

HI There,

You need to add the cursor change manually now.

stage.canvas.style.cursor = "wait";

HTML DOM Style cursor Property

So on mouse over, change it to a hand, then on mouse out change it back to default.

frequency i usually set to 25, the higher the number the more responsive it is, so it may be your setting is just too high.

Regards,