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.
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
...Copy link to clipboard
Copied
with html5/canvas you must explicitly reference the parent:
this.button.gotoAndStop(etc)
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();
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();
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:
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.
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.
Copy link to clipboard
Copied
It is. Fading to 0.01 fixes it.
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.
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.
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.
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:
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.
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.
Copy link to clipboard
Copied
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.