Skip to main content
anthonyr91087089
anthonyr91087089
Inspiring
March 15, 2017
Answered

Linking Buttons to Frames in an HTML5 Canvas Animation

  • March 15, 2017
  • 6 replies
  • 5156 views

I have an animation that I've created with an HTML5 Canvas, and I have 3 active buttons, that when clicked should link to the respective frame where the new section starts. The end of each section has a Stop Script on it.

When I add a script to the buttons, and then publish the video, the buttons don't work.

I'm using a script provided for HTML5 Canvases:

this.button_1.addEventListener("click", fl_ClickToGoToAndPlayFromFrame.bind(this));

function fl_ClickToGoToAndPlayFromFrame()

{

  this.gotoAndPlay(89);

}

This topic has been closed for replies.
Correct answer anthonyr91087089

I was able to figure this out. For some reason my buttons were corrupted, so even though they were labeled correctly, and had the right script on them, they weren't producing the desired output.

I ended up deleting the buttons, and recreating from scratch. This fixed my issue. Thanks again guys.

6 replies

D
default0pfhkwr9jt2s
Participant
March 16, 2021

This fixed my issue as well. Crazy that something so simple messes everything up.

 

 

G
garyw17808373
Participating Frequently
September 7, 2018

Hi.

Yes, this was the exact problem. I've spent a longtime using movieclips as buttons by adding actionscript to instances. I had changed my thinking and was using a button but didn't have a hit area. If I move the graphic into the hit area.... IT WORKS!

So we can no longer use movieclips as buttons basically if we wish to produce html5 canvas. I'd say that's problem solved. Thanks for your time on this. Really appreciate it.

Regards

Gary

    G
    garyw17808373
    Participating Frequently
    September 6, 2018

    Hi Anthony.

    Apologies for jumping on the back of this but I'm trying to build a similar thing here for a client but I just can't seem to get more than one button working on the timeline at any one time and it's driving me insane. I used to use Actionscript a lot but not to any great degree only controlling timelines and movie clips, but am becoming increasingly frustrating that this does not convert to HTML Canvas well. In fact, it loses most functionality.

    I've read reports on other support sites that multiple buttons trying to control a movie clip is not something we can do in this way anymore, (in the same way we would have built Actionscript functionality into a flash swf project), and that actually it makes more sense to custom write javascript to control it. One would question... so what exactly is the point of Animate if I can't rely on it writing solid javascript? I understand javascript a little to read it but writing it from scratch I find difficult as I've not had enough experience with it.

    Having stumbled upon this thread, I'm intrigued as to how you got this to work as it sounds like I've done something simliar to you, yet I just can't get it to work.

    To explain, I have a three quarter view of an illustrated warehouse split into 5 rooms. For each of those rooms, there is an overlaid button, that when clicked, jumps to a different part of the timeline. I've tried this on the main timeline and I've tried targetting a timeline within a movie clip on a single frame in the movie, and no matter what I try, I simply can't get it to work. All of my buttons have different instances and they all use identical code to what you have shown above.

    Please help before my rather nice Apple iMac ends up in multiple pieces.

    Regards

    Gary

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    September 6, 2018

    Hi, Gary.

    Please check if these two threads can help you:

    https://forums.adobe.com/message/10601268 (don't forget to download the FLA)

    https://forums.adobe.com/message/10603495#10603495 (general tips)

    They both have important info about essencial concepts like navigation and references.

    Please tell us if these are helpful.

    Regards,

    JC

    G
    garyw17808373
    Participating Frequently
    September 6, 2018

    Hi Joe,

    Many thanks for the links - they are very helpful, especially for the next stages of my project that are a little more intricate, so I thank you kindly.

    Re the issue I was having. It was an even easier fix... I actually (for the 5th time) deleted my buttons and started again. Only... instead of using the original buttons I had created in photoshop as transparent pngs, I decided to create graphics within Animate. My original buttons were imported pngs that matched the shapes of the areas I wanted to focus in on. I've recreated all buttons again using pure animate graphics and it works exactly how I wanted. Imported png's were continually corrupting (it will only ever allow one interactive button only).

    This is a big bug in the software in my opinion, that a button can become corrupt in such a way and only moments after giving you hope by allowing the first one to work perfectly. Flash was always helpful in allowing us to create buttons from any shape, any imported image, but this seems to have become problematic over time.

    Stumbling on this thread has at last lifted the weight from my shoulders and I can continue to develop my project now with happy clients!

    Thanks to you and also to Anthony who prompted me to find another way of debugging my project!

    Regards

    Gary

    anthonyr91087089
    anthonyr91087089AuthorCorrect answer
    Inspiring
    March 28, 2017

    I was able to figure this out. For some reason my buttons were corrupted, so even though they were labeled correctly, and had the right script on them, they weren't producing the desired output.

    I ended up deleting the buttons, and recreating from scratch. This fixed my issue. Thanks again guys.

      G
      garyw17808373
      Participating Frequently
      September 6, 2018

      Hi Anthony,

      In the end, this fixed my issue too! Thanks for figuring it out!

      Regards

      Gary

      N
      Community Expert
      Nick GioiaCommunity Expert
      Community Expert
      March 16, 2017

      Did you give the button an instance name?

      anthonyr91087089
      anthonyr91087089Author
      Inspiring
      March 16, 2017

      Hey Nick,

      I've had suspicion that this may be the issue - I could of swore I gave each button a different instance name.

      I've just checked again, and the buttons did not have instance names. I have updated the instance names, but the buttons are still not working. Any other thoughts?

      Colin Holgate
      Colin Holgate
      Inspiring
      March 15, 2017

      In your browser there should be developer tools, and you can look at the error console. If something is going wrong it should be shown there.

      anthonyr91087089
      anthonyr91087089Author
      Inspiring
      March 16, 2017

      Hey Colin,

      This is definitely something that I've already checked - It is not throwing any errors in the console.

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