• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

gotoAndStop() and event listeners issue on HTML5 Canvas project

Community Beginner ,
Mar 07, 2017 Mar 07, 2017

Copy link to clipboard

Copied

Here's the project for you to download: buttons.fla - Google Drive​.

I'm using Animate CC 2015.2.0.66. Probable issue happens on code line 50 in the main actions layer.

The project

I have some movieclips with a very simple animation inside. I've added event listeners to them, to control mouseover, mouseout and click events. On click, a popup window appears with some info. I remove the event listeners, so users won't be able to interact with the buttons while the window is above them. An "x" button in the corner closes the window. I put the event listeners back so you can click on another button. Pretty basic.

The issue

The problem happens when I use gotoAndStop() to "reset" the clicked button's state. Frame number 10 is where the over animation starts inside the movieclip. Since "frame numbers in EaselJS start at 0 instead of 1", I've used  button.gotoAndStop(9), but that will cause all buttons to stop working. That means no over, out or click states. If I use instead button.gotoAndStop(10), the buttons work just fine, but then they¡re one frame ahead in their animation.

Any idea why this happens? Thanks.

Views

2.1K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Mar 07, 2017 Mar 07, 2017

Somehow your code seems to be leaning hard against some severe edge case behaviors of CreateJS. I managed to get it to break/work just by inserting some console.log() statements.

So of all things, the fading of the content clip to 0 is what's breaking it. Also, there's a pretty bad issue of over state thrashing when you roll over the faces from the bottom. And the mouse cursor was still changing to a hand when mousing over the faces behind the content clip. And if you move the cursor over a face

...

Votes

Translate

Translate
Community Expert ,
Mar 07, 2017 Mar 07, 2017

Copy link to clipboard

Copied

with html5/canvas you must explicitly reference the parent:

this.button.gotoAndStop(etc)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 07, 2017 Mar 07, 2017

Copy link to clipboard

Copied

Yeah, I actually have a global variable called root, so I can access the objects on the stage. If it makes it easier, here's the main code. There are five buttons on stage, as well as a movieclip called "content":

stage.enableMouseOver();

//VARIABLES

var root = this;

var number = 1;

//FUNCTIONS

function init (){

  for (var i = 1; i <= 5; i++){

  root["button"+i].number = i;

  root["button"+i].cursor = "pointer";

  }

  root.content.close.cursor = "pointer";

  root.content.scaleX = root.content.scaleY = root.content.alpha = 0;

  activateButtons();

}

function activateButtons (){

  for (var i = 1; i <= 5; i++){

  root["button"+i].addEventListener("mouseover", buttonOver);

  root["button"+i].addEventListener("mouseout", buttonOut);

  root["button"+i].addEventListener("click", buttonClick);

  }

}

function deactivateButtons (){

  for (var i = 1; i <= 5; i++){

  root["button"+i].removeEventListener("mouseover", buttonOver);

  root["button"+i].removeEventListener("mouseout", buttonOut);

  root["button"+i].removeEventListener("click", buttonClick);

  }

}

function showContent (n){

  number = n;

  root.content.gotoAndStop(number-1);

  root.content.close.addEventListener("click", hideContent);

  createjs.Tween.get(root.content).to({scaleX:1, scaleY:1, alpha:1}, 500, createjs.Ease.quartOut);

  deactivateButtons();

}

function hideContent (){

  //Change value to 9 and buttons will stop working. Change it to 10 and they'll work.

  //gotoAndPlay will also make the buttons stop working. Why??

  root["button"+number].gotoAndStop(9);

  //

  root.content.close.removeEventListener("click", hideContent);

  createjs.Tween.get(root.content).to({scaleX:0, scaleY:0, alpha:0}, 500, createjs.Ease.quartOut).call(activateButtons);

}

//EVENTS

function buttonOver (e){

  e.currentTarget.gotoAndPlay("over");

}

function buttonOut (e){

  e.currentTarget.gotoAndPlay("out");

}

function buttonClick (e){

  showContent(e.currentTarget.number);

}

//EXECS

init();

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 07, 2017 Mar 07, 2017

Copy link to clipboard

Copied

Somehow your code seems to be leaning hard against some severe edge case behaviors of CreateJS. I managed to get it to break/work just by inserting some console.log() statements.

So of all things, the fading of the content clip to 0 is what's breaking it. Also, there's a pretty bad issue of over state thrashing when you roll over the faces from the bottom. And the mouse cursor was still changing to a hand when mousing over the faces behind the content clip. And if you move the cursor over a face while the content clip is still fading out it doesn't react until you move away from it then move back.

Well, here's the fixed code:

stage.enableMouseOver();

//VARIABLES

var root = this;

var lastClicked = 0;

//FUNCTIONS

function init() {

    var btn;

    for (var i = 1; i <= 5; i++) {

        btn = root["button" + i];

        btn.number = i;

        btn.mouseChildren = false;

        btn.addEventListener("mouseover", buttonOver);

        btn.addEventListener("mouseout", buttonOut);

    }

    root.content.scaleX = root.content.scaleY = 0.5;

    root.content.alpha = 0.01;

    activateButtons();

}

function activateButtons() {

    var btn;

    for (var i = 1; i <= 5; i++) {

        btn = root["button" + i];

        btn.cursor = "pointer";

        btn.addEventListener("click", buttonClick);

    }

}

function deactivateButtons() {

    var btn;

    for (var i = 1; i <= 5; i++) {

        btn = root["button" + i];

        btn.cursor = "auto";

        btn.removeEventListener("click", buttonClick);

    }

}

function showContent(n) {

    lastClicked = n;

    root.content.gotoAndStop(n - 1);

    root.content.close.cursor = "pointer";

    root.content.close.addEventListener("click", hideContent);

    createjs.Tween.get(root.content, {override:true}).to({scaleX:1, scaleY:1, alpha:1}, 500, createjs.Ease.quartOut);

    deactivateButtons();

}

function hideContent() {

    //Change value to 9 and buttons will stop working. Change it to 10 and they'll work.

    //gotoAndPlay will also make the buttons stop working. Why??

    root["button" + lastClicked].gotoAndStop(1);

    root.content.close.cursor = "auto";

    root.content.close.removeEventListener("click", hideContent);

    activateButtons();

    createjs.Tween.get(root.content, {override:true}).to({scaleX:0.5, scaleY:0.5, alpha:0.01}, 500, createjs.Ease.quartOut);

}

//EVENTS

function buttonOver(e) {

    e.currentTarget.gotoAndPlay("over");

}

function buttonOut(e) {

    e.currentTarget.gotoAndPlay("out");

}

function buttonClick(e) {

    showContent(e.currentTarget.number);

}

//EXECS

init();

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 08, 2017 Mar 08, 2017

Copy link to clipboard

Copied

Thank you, ClayUUID​. Yeah, my mouseover states needed some cleanup.

I'm curious, though: is this issue (not being able to tween to 0) happening because of the way I structured my code? If that's the case, I really would love to know a better way.

I'd like to share some insights I've had, just to add to the discussion:

  • So yeah, If your code's not working, try not to tween objects to 0, go for 0.01 instead, it's pretty much the same.
  • I agree to change the variable name "number" to "lastClicked", as "number" is a very generic name and not very informative of what the variable is actually for. Besides, I was already assigning a variable "number" to each button, so it could lead to confusion.
  • Creating a "btn" variable to store the current button in the loop is more efficient, it avoids repetition and prevents you from making potential mistakes along the way. It looks less messy, too.
  • Setting mouseChildren to false will prevent objects inside movieclips to react to the mouse, is that right? In this particular case, the text inside the tooltip appearing on mouseover was causing the mouse to loose scope of the button itself and triggering the mouseout state, resulting in a messy animation.
  • Don't forget to change you cursor to "auto" when your button is not active.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 08, 2017 Mar 08, 2017

Copy link to clipboard

Copied

I have no idea why fading all the way to 0 was causing the problem you had. It's probably a subtle bug in CreateJS, but teasing out a bare-bones test case to submit to Adobe looked like it would be a real challenge. Might be worth submitting as-is anyway.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 08, 2017 Mar 08, 2017

Copy link to clipboard

Copied

fade to zero makes object unresponsive to the mouse.

i didn't read enough to know if that's causing the problem you're seeing.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 08, 2017 Mar 08, 2017

Copy link to clipboard

Copied

It is. Fading to 0.01 fixes it.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 08, 2017 Mar 08, 2017

Copy link to clipboard

Copied

kglad  wrote

fade to zero makes object unresponsive to the mouse.

This issue here is fading to zero causing a completely different, fully visible set of movieclips to become unresponsive.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 08, 2017 Mar 08, 2017

Copy link to clipboard

Copied

I had another version of this project where I faded the movieclips as well. Basically, it's happening to me every time I fade any object to 0.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 08, 2017 Mar 08, 2017

Copy link to clipboard

Copied

I'll try to submit a bug report, but Adobe does not make this easy, only accepting plain text and no attachments.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 08, 2017 Mar 08, 2017

Copy link to clipboard

Copied

Sadly this isn't a bug as such. It's exactly how CreateJS works. It's worth raising issues in github, then the CreateJS team themselves will track the problem. I dare say they already have requests to solve that problem:

CreateJS · GitHub

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 08, 2017 Mar 08, 2017

Copy link to clipboard

Copied

Thanks for the suggestion. I've sent a bug report to Adobe and created an issue on the TweenJS Github space.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 08, 2017 Mar 08, 2017

Copy link to clipboard

Copied

This bug gets even better. In the original FLA, if you remove the face masking from any of the buttons, they all then work correctly.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 08, 2017 Mar 08, 2017

Copy link to clipboard

Copied

LATEST

You're right! So masks are also involved. I'm also still curious as to why the original code worked with the mentioned gotoAndStop(10), and not with gotoAndStop(9). Let's see if the TweenJS team comes up with something on their Github: https://github.com/CreateJS/TweenJS/issues/94.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines