Skip to main content
CBecker
CBecker
Inspiring
February 8, 2017
Answered

HTML5 rollover isn't working

  • February 8, 2017
  • 2 replies
  • 3103 views

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

This topic has been closed for replies.
Correct answer ClayUUID

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.


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;

2 replies

just.emma
just.emma
Inspiring
February 8, 2017

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
CBeckerAuthor
Inspiring
February 8, 2017

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
Community Expert
kgladCommunity Expert
Community Expert
February 8, 2017

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

kglad
Community Expert
kgladCommunity Expert
Community Expert
February 8, 2017

i don't see enableMouseOver:

stage.enableMouseOver(20);

CBecker
CBeckerAuthor
Inspiring
February 8, 2017

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
Community Expert
kgladCommunity Expert
Community Expert
February 8, 2017

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();

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices