Help with conditions for HTML5 movieclip animations

[murkalurk2099]

I've got a movieclip button on an HTML5 canvas. It has an animation for roll over and roll off that work perfectly. I made animations for a mouse click event so that users can "select" the button, which I can also get to work, except that after the user clicks on the button and the "selection" animation is triggered, if/when the cursor goes off the button, the "roll off" animation is triggered, cancelling the "selection" animation.

The procedure needs to go:

-If rolling over button -> "roll over" animation

-If rolling off button -> "roll off" animation

-If clicking the button -> "selection" animation

-If the button is showing any frames other than the "rollover" animation -> the "roll off" animation is blocked from running

1. stage.enableMouseOver()
3. this.mvc_IndexButton.addEventListener("rollover", SmartRollOver.bind(this));
4. this.mvc_IndexButton.addEventListener("rollout", SmartRollOut.bind(this));
6. function SmartRollOver(){
7.      this.mvc_IndexButton.gotoAndPlay("Over")
8. }
10. function SmartRollOut(){
11.      if(this.currentFrame >= 5 && <= 10){
12.      this.mvc_IndexButton.gotoAndPlay(20-(this.mvc_IndexButton.currentFrame-5));
13. }
14. }
16. mvc_IndexButton.addEventListener("click", SmartSelect.bind(this));
18. function SmartSelect(){
19.      this.mvc_IndexButton.gotoAndPlay("Select")
20. }

There are not many examples that I can find for the HTML5 version of this using a search engine, so I am doing something wrong in the syntax...

I also can't figure out how to debug HTML5 code in Aniamte's Actions panel...

[ClayUUID]

You are exceeding what the built-in buttons are designed to do. Instead of a Button symbol, you'll have to use a movieclip and manually code all the over/out/click events to behave and interact exactly the way you want them to.

I also can't figure out how to debug HTML5 code in Aniamte's Actions panel.

Because HTML5 Canvas documents don't execute in Animate, they execute in your web browser. Use the browser's dev console for debugging.

[murkalurk2099]

It is a movieclip symbol "button", and I am manually coding all of the events. If you look at the GIF, you can see I have all of the animations ready on the movieclip symbol's internal timeline, I am just having trouble with the syntax and logic as examples of what I need to do are hard to find on the web.

Adobe didn't make things easy when they named the program "Animate" since that word pretty much appears in every forum post for anything animated, regardless of whether Adobe's program is being used. I have to wade through a lot of results for html5 buttons coded purely in JavaScript...

[murkalurk2099]

I am having troubles at line 12.

When I run this:

stage.enableMouseOver(30)
this.mvc_IndexButton.addEventListener("rollover", SmartRollOver.bind(this));
this.mvc_IndexButton.addEventListener("rollout", SmartRollOut.bind(this));
function SmartRollOver(){
this.mvc_IndexButton.gotoAndPlay("Over")
}
function SmartRollOut(){
if(currentFrame >= 0 & currentFrame <= 9){
this.mvc_IndexButton.gotoAndPlay(19-(this.mvc_IndexButton.currentFrame-5));
}
}
this.mvc_IndexButton.addEventListener("click", SmartSelect.bind(this));
function SmartSelect(){
this.mvc_IndexButton.gotoAndPlay("Select")
}

The button renders, but the "rolloff" animation doesn't trigger and the "select" animation won't start running until the "rollover" animation is complete. I get this error in the browser console:

Index Button_HTML.js?1563411265584:185 Uncaught ReferenceError: currentFrame is not defined

    at lib.IndexButton_HTML.SmartRollOut (Index Button_HTML.js?1563411265584:185)

    at lib.ani_IndexButton.b._dispatchEvent (createjs-2015.11.26.min.js:12)

    at lib.ani_IndexButton.b.dispatchEvent (createjs-2015.11.26.min.js:12)

    at lib.Stage.b._dispatchMouseEvent (createjs-2015.11.26.min.js:13)

    at lib.Stage.b._testMouseOver (createjs-2015.11.26.min.js:13)

    at createjs-2015.11.26.min.js:13

If I run this:

stage.enableMouseOver(30)
this.mvc_IndexButton.addEventListener("rollover", SmartRollOver.bind(this));
this.mvc_IndexButton.addEventListener("rollout", SmartRollOut.bind(this));
function SmartRollOver(){
this.mvc_IndexButton.gotoAndPlay("Over")
}
function SmartRollOut(){
if(currentFrame >= 0 & <= 9){
this.mvc_IndexButton.gotoAndPlay(19-(this.mvc_IndexButton.currentFrame-5));
}
}
this.mvc_IndexButton.addEventListener("click", SmartSelect.bind(this));
function SmartSelect(){
this.mvc_IndexButton.gotoAndPlay("Select")
}

The page is blank and I get:

Uncaught SyntaxError: Unexpected token <=

Index Button_HTML.html?25656:24 Uncaught ReferenceError: AdobeAn is not defined

    at init (Index Button_HTML.html?25656:24)

    at onload (Index Button_HTML.html?25656:83)

[murkalurk2099]

Ohhh OK... I am starting to understand, every time I use currentFrame I have to reference the movieclip mvc_IndexButton:

stage.enableMouseOver(30)
this.mvc_IndexButton.addEventListener("rollover", SmartRollOver.bind(this));
this.mvc_IndexButton.addEventListener("rollout", SmartRollOut.bind(this));
function SmartRollOver(){
this.mvc_IndexButton.gotoAndPlay("Over")
}
function SmartRollOut(){
if(this.mvc_IndexButton.currentFrame >=1 && this.mvc_IndexButton.currentFrame <=10){
this.mvc_IndexButton.gotoAndPlay(19-(this.mvc_IndexButton.currentFrame-5));
}
}
this.mvc_IndexButton.addEventListener("click", SmartSelect.bind(this));
function SmartSelect(){
this.mvc_IndexButton.gotoAndPlay("Select")
}

Now the problem I am having is that I cannot trigger the "Select" animation until the "Over" animation has completely run!

[JoãoCésar · Accepted solution]

Hi.

I would like to leave here a sample of how you can achieve this kind of interactivity.

JavaScript:

var root = this;
var buttons = root.buttons;
var states =
{
     normal:{start:0, out:1, over:2, select:3, deselect:4},
     toggled:{start:3, out:3, over:3, select:3, deselect:3}
};
root.start = function(e)
{
     stage.off("drawstart", root.drawStart);
     buttons.children.forEach(function(child)
     {
          child.states = states.normal;
          child.mouseChildren = false;
     });
     buttons.on("mouseover", function(e)
     {
          e.target.gotoAndStop(e.target.states.over);
     });
     buttons.on("mouseout", function(e)
     {
          e.target.gotoAndStop(e.target.states.out);
     });
     buttons.on("mousedown", function(e)
     {
          root.toggle(e.target);
     });
};
root.toggle = function(target)
{
     buttons.children.forEach(function(child)
     {
          if (child !== target)
          {
               if (child.currentFrame === child.states.select)
               {
                    child.states = states.normal;
                    child.gotoAndStop(child.states.deselect);
               }
          }
          else
          {
               if (child.currentFrame === child.states.select)
               {
                    child.states = states.normal;
                    child.gotoAndStop(child.states.deselect);
               }
               else
               {
                    child.states = states.toggled;
                    child.gotoAndStop(child.states.select);
               }
          }
     });
};
createjs.Touch.enable(stage);
stage.enableMouseOver();
root.drawStart = stage.on("drawstart", root.start, null, true);

You can place as many children (structured like mine) as you wish inside of this buttons container and everything will work just fine.

FLA download / files:

adobe/animate cc/html5_canvas/toggle_buttons at master · joao-cesar/adobe · GitHub

I hope this helps.

Regards,

JC

[murkalurk2099]

Wow, thanks JoãoCésar, I am new with JavaScript so it will take me a while to figure all this out after consulting some references, but I am here to learn, so I appreciate the information!

[JoãoCésar]

Excellent!

Please let me know if you have any further questions.

Regards,

JC

[murkalurk2099]

Wow, this is way over my head, I'm going to have to learn the entire JavaScript language just to do this project!

Is there a *good* learning resource that specifically focuses on learning JavaScript for use with Animate (basically for coding buttons and menus like what you made)?