HTML5 rollover isn't working

[CBecker]

I have an HTML5 canvas animation in Adobe Animate and I've created some code to control the timeline (initial stop and gotoAndPlay functions so that the animation plays and loops when the mouse is over it) and I have some buttons that should use those functions on rollover but the functionality doesn't seem to be working when testing the published HTML.

Here's a temporary link of the published file: http://beckerstudio.com/test-HTML5/HomeIcon_02.html

The code I'm using is a follows:

Frame 1 (I want the initial state of the animation to be paused)

this.btn_overlay.addEventListener("mouseover", fl_btn_play);

function fl_btn_play()

{

  this.gotoAndPlay("playme");

}

this.stop();

Frame 2 (Frame label of "playme")

Frame 48 (Frame that begins the loop - label = "loopme")

Frame 133: End of initial run of the animation

this.btn_overlay_loop.addEventListener("mouseover", fl_btn_play);

function fl_btn_play()

{

  this.gotoAndPlay("loopme");

}

Frame 196: End of animation if we don't loop

this.stop();

this.btn_overlay_playagain.addEventListener("mouseover", fl_playagain);

function fl_playagain()

{

  this.gotoAndPlay("playme");

}

---- end of Animation code ----

Link to FLA file: http://beckerstudio.com/test-HTML5/HomeIcon_02.fla​

I feel like I'm a noobie and perhaps I am with HTML5 in Animate but I've used Flash since version 1. I'm able to get the functionality to work in AS3 but not in HTML5. I would appreciate any assistance!

Thanks, Chris

[kglad]

i don't see enableMouseOver:

stage.enableMouseOver(20);

[CBecker]

Thanks Kglad.

I've added that into the 1st frame's script.

Frame 1:

stage.enableMouseOver(20);

this.btn_overlay.addEventListener("mouseover", fl_btn_play);

function fl_btn_play()

{

  this.gotoAndPlay("playme");

}

this.stop();

-------------

Unfortunately, no change. The functionality still doesn't act like I would expect.

[kglad]

your losing context/scope in your listener function.  try:

stage.enableMouseOver(20);

this.btn_overlay.addEventListener("mouseover", fl_btn_play.bind(this));

function fl_btn_play()

{

this.gotoAndPlay("playme");

}

this.stop();

[CBecker]

Hi Kglad,

This helped somewhat. The animation plays now but the rollovers don't work.

Should I target the stage when saying play, instead of this?

So like this?

this.btn_overlay.addEventListener("mouseover", fl_btn_play.bind(this));

function fl_btn_play()

{

stage.gotoAndPlay("playme");

}

this.stop();

[ClayUUID]

No don't use stage. If you want to globally reference the root timeline, use exportRoot.

If you drop a this.gotoAndPlay("playme"); in the same frame that assigns the event listener, as a test, does it work?

[CBecker]

I do not know how to use exportRoot and I'm not necessarily affecting the animations from the HTML page or external JS.

I did drop that code into another frame (49) and it does go back to that frame. So the code works correctly. It just isn't being kicked off by a mouse rollover for some reason.

[kglad]

if you have a moveiclip button that you want to direct to its 'playme' frame, you can use (among many different ways to do this):

stage.enableMouseOver(20);

this.btn_overlay.addEventListener("mouseover", fl_btn_play.bind(this));

function fl_btn_play()

{

this.btn_overly.gotoAndPlay("playme");

}

this.stop();

[just.emma]

Try this; it will start out stopped and then the animation will start playing once you roll over the overlay button.

this.stop();

this.btn_overlay.addEventListener("mouseover", fl_btn_play.bind(this));

function fl_btn_play()

{

  this.gotoAndPlay("playme");

}

I opened up your fla to test it, and this works fine.  You don't even need to enable mouseover because it's a button symbol, and that code will automatically be added to your HTML file any time you have a button symbol in your fla file.

[CBecker]

Thanks everyone. It's getting closer.

I used Just.emma's code and the animation successfully begins stopped and then when I rollover it, it begins to play.

this.stop();

this.btn_overlay.addEventListener("mouseover", fl_btn_playme.bind(this));

function fl_btn_playme()

{

  this.gotoAndPlay("playme");

}

I figured I would use the similar code for the other 2 frames (1st for looping and the last for starting over if the mouse isn't on rollover state).

this.btn_overlay_loop.addEventListener("mouseover", fl_btn_playloop.bind(this));

function fl_btn_playloop()

{

  this.gotoAndPlay("loopme");

}

this.stop();

this.btn_overlay_playagain.addEventListener("mouseover", fl_playagain.bind(this));

function fl_playagain()

{

  this.gotoAndPlay("playme");

}

------------

The animation is still not correct because it continues to play as if these 2 functions aren't even being seen. And then stops on the last frame and rolling over it, doesn't kick it off to the beginning of the animation again.

Updated test: http://beckerstudio.com/test-HTML5/HomeIcon_03.html

Updated source FLA: http://beckerstudio.com/test-HTML5/HomeIcon_03.fla

[kglad]

is there a difference between the code i suggested in message 3 that failed and the code in message 8 that you said works?

[CBecker]

The only difference was adding "bind(this)" after the function call in the first lines.

I'm confused why this is so complicated. This seems like very simple functionality - at least it was for AS2/AS3. I've also searched in FAQ's and helps but nothing to help with this simple functionality. Should I be structuring this differently? Like should I put the animation within a MovieClip and set a variable based on the "mouseover" state? I did try using a variable before, but that didn't work so I'm really scratching my head why this is such a challenge.

Please understand I'm not frustrated with the forum help, I'm frustrated with myself and the lack of portability from AS2/3 to HTML5.

Sorry for the rant.

[kglad]

that's in message 3.

in fact, i put it in bold font so you wouldn't miss it.

[CBecker]

Sorry Kglad, I did see the bold font and did use your original code but as I said, it wasn't totally successful. Your code in the 3rd message had the line, "stage.enableMouseOver(20);" at the beginning and used my "stop()" at the end.

Just.emma's code didn't have the "stage.enableMouseOver(20);" but instead had the "stop();" at the beginning.

Your "bind(this)" helped me get forward.

I'm assuming putting the "stop();" at the beginning is what helped most. Is that correct?

I'm not sure why the placement of "stop();" is all that important but that appears to be so. I'm used to AS2/3 where it doesn't seem to affect things like this.

I appreciate your help.

[kglad]

you're welcome.

p.s. i don't see any code in this thread that used stop() instead of this.stop().  but it's ok.  i'm just not seeing what you're seeing.

[CBecker]

Hi Kglad,

I quoted it wrong (I used shorthand) - we've always been using this.stop(). The only difference I saw between your sample code and that of Just.emma was the placement of this.stop() at the beginning vs. at the end.

Unfortunately we're still not finished as the looping and the restarting of the animation isn't happening.

[CBecker]

Can anyone else assist with this? Perhaps share some code of their own that does the following?

• Stopped animation at the beginning
• Animation plays on rollover
• Animation loops if the mouse is still over the stage area
• Animation stops if the mouse is not over the stage area

Any help would be greatly appreciated.

I'll pay for code if it's a fair price.

[ClayUUID · Accepted solution]

Look, you're making this way too complicated. Don't constantly bop the same button on and off the stage, that's just asking for the sort of trouble you're having. In fact, you don't need any button at all. Just delete your button layer entirely, then put this in the first frame:

this.stop();

_root = this; // global alias to root timeline

_root.mouseOver = false;

_root.logoStopped = true;

stage.enableMouseOver(25); // required only if no button instances used

stage.on("mouseover", stageMouseOver);

stage.on("mouseout", stageMouseOut);

function stageMouseOver() {

    _root.mouseOver = true;

    if (_root.logoStopped) {

        _root.logoStopped = false;

        _root.gotoAndPlay("playme");

    }

}

function stageMouseOut() {

    _root.mouseOver = false;

}

Then at the end of your loop section:

if (_root.mouseOver) {

    this.gotoAndPlay("loopme");

}

Then on the last frame:

this.stop();

_root.logoStopped = true;

[CBecker]

That is so much better!

Works perfectly. I knew there had to be a much easier way to do this than how I was doing it.

Thanks so much Clay.