Highlighted

Help with conditions for HTML5 movieclip animations

Explorer ,
Jul 17, 2019

Copy link to clipboard

Copied

IndexButtonLoop.gif

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()
  2. this.mvc_IndexButton.addEventListener("rollover", SmartRollOver.bind(this));
  3. this.mvc_IndexButton.addEventListener("rollout", SmartRollOut.bind(this));
  4. function SmartRollOver(){
  5.      this.mvc_IndexButton.gotoAndPlay("Over")
  6. }
  7. function SmartRollOut(){
  8.      if(this.currentFrame >= 5 && <= 10){
  9.      this.mvc_IndexButton.gotoAndPlay(20-(this.mvc_IndexButton.currentFrame-5));
  10. }
  11. }
  12. mvc_IndexButton.addEventListener("click", SmartSelect.bind(this));
  13. function SmartSelect(){
  14.      this.mvc_IndexButton.gotoAndPlay("Select")
  15. }

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...

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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

TOPICS
Discussions

Views

428

Likes

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

Help with conditions for HTML5 movieclip animations

Explorer ,
Jul 17, 2019

Copy link to clipboard

Copied

IndexButtonLoop.gif

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()
  2. this.mvc_IndexButton.addEventListener("rollover", SmartRollOver.bind(this));
  3. this.mvc_IndexButton.addEventListener("rollout", SmartRollOut.bind(this));
  4. function SmartRollOver(){
  5.      this.mvc_IndexButton.gotoAndPlay("Over")
  6. }
  7. function SmartRollOut(){
  8.      if(this.currentFrame >= 5 && <= 10){
  9.      this.mvc_IndexButton.gotoAndPlay(20-(this.mvc_IndexButton.currentFrame-5));
  10. }
  11. }
  12. mvc_IndexButton.addEventListener("click", SmartSelect.bind(this));
  13. function SmartSelect(){
  14.      this.mvc_IndexButton.gotoAndPlay("Select")
  15. }

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...

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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

TOPICS
Discussions

Views

429

Likes

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
Jul 17, 2019 1
Adobe Community Professional ,
Jul 17, 2019

Copy link to clipboard

Copied

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.

Likes

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
Reply
Loading...
Jul 17, 2019 2
Explorer ,
Jul 17, 2019

Copy link to clipboard

Copied

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...

Likes

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
Reply
Loading...
Jul 17, 2019 0
Explorer ,
Jul 17, 2019

Copy link to clipboard

Copied

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)

Likes

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
Reply
Loading...
Jul 17, 2019 0
Explorer ,
Jul 17, 2019

Copy link to clipboard

Copied

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!

Likes

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
Reply
Loading...
Jul 17, 2019 0
Adobe Community Professional ,
Jul 18, 2019

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Jul 18, 2019 2
Explorer ,
Jul 18, 2019

Copy link to clipboard

Copied

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!

Likes

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
Reply
Loading...
Jul 18, 2019 1
Adobe Community Professional ,
Jul 18, 2019

Copy link to clipboard

Copied

Excellent!

Please let me know if you have any further questions.

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Jul 18, 2019 1
Explorer ,
Jul 19, 2019

Copy link to clipboard

Copied

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)?

Likes

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
Reply
Loading...
Jul 19, 2019 0