Linking Buttons to Frames in an HTML5 Canvas Animation

[anthonyr91087089]

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

}

[Colin Holgate]

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]

Hey Colin,

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

[Nicktendo28]

Did you give the button an instance name?

[anthonyr91087089]

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?

[anthonyr91087089 · Accepted solution]

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.

[garyw17808373]

Hi Anthony,

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

Regards

Gary

[garyw17808373]

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ésar]

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

[garyw17808373]

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

[JoãoCésar]

This is great, Gary!

It's nice the references are helpful.

About the buttons, I don't really understand what you were not able to achieve. Can you give me an example so I can test it?

And the limitations you are facing are not really related to Flash/Animate. It's because even though Animate is a very powerful tool, when it outputs content to HTML5, like any other software, it has to respect all the standards of the languange and browsers. So some things like filters won't just work the way they used to.

[garyw17808373]

I amended my test example and got it to work, so will need to put it back to what it was before sending over, however, I will try and do this when I can for you.

As far as I can ascertain, the issue is  (according to my tests) I can no longer use imported png shapes (that have been converted into symbols) as buttons. Simple as that. The first one always works, if another is created with a new instance or indeed a new png shape is imported, converted to symbol etc and then given an instance, it breaks.

Does that make sense?

I understand there are limitations and I know certain filters will no longer work, but the above issue is a basic problem. I can only imagine that because we now have spritesheets, that it is causing some kind of issue there.

[JoãoCésar]

Hi.

Thank you for the feedback.

I run a test here and I noticed something.

Differently from buttons that use regular Animate shapes, buttons that only use bitmaps won't work if you don't define a area in the hit frame. Only when I put a bitmap in there that they become functional.

Here is my test in case you wanna to see:

FLA download:

animate_cc_html5_bitmap_buttons.zip - Google Drive

Hopefully it can shed some light on the problem.

Regards,

JC

[garyw17808373]

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

[default0pfhkwr9jt2s]

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