HTML5 Canvas button code snips are not working...

[pxSpectrum]

I have been using animate since it was flash 4.  I've built a ton of apps, movies, modules, etc using it w/ AS1,2 &3 until Apple killed it.  Since then I have only used flash via AS3 for certain desktop style projects or for video transitition because I like the simplicity of it for video.

I am in the process of building something new to relive the old flash days by creating a book meets games meet movies experience.  I decided yo go with HTML5 as it can run in a browser for any device which for my proof of concept I need this.  I am thinking I may have just wasted 2 weeks working on this for nothing because the Button logic is not working at all no matter what.  At first I thought that the html 5 canvas logic for button code would work in the swf, but I was wring and breaks the swf file.  So, I started to publish it as an html 5 canvas page and view in a browser... I still can't get these buttons to work even using the Animate Code Snippets!!! In the past I found that sometimes starting over with a flash file would work without changing anything.

I spun up a new fresh canvas project to test the buttins again... sure enough the buttons litterally do nothing.  I have used movie clips, symbols, and actual buttons with a single element with the same results.  I hope I can use movie clips because I want to animate my buttons without using a movie clip inside a button.

Here's the code snippet Animate provided, and this is located on the frame where the button loads on the screen as this is where Animate put it.  Yes, the button has an instance name, and I even tried using a frame label instead of the frame #249.  I use to always put my button calls on frame 1, does this matter today?

-----

this.skipIntro_btn.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_2.bind(this));

function fl_ClickToGoToAndPlayFromFrame_2()
{
this.gotoAndPlay(249);
alert("Mouse clicked");
}

------

Any help would be greatly appreciated as I'm not familar with JS enough as I skipped it for JQuery for my html/css work.

Thanks.

E

[JoãoCésar]

Hi.

Your code seems to be correct.

Does your timeline have 250 frames? Also, is the alert being displayed?

In HTML5 documents, the first frame index is 0. So if you want to go to the 2nd frame, you would write like this.gotoAndPlay(1).

Can you confirm these infos?

Regards,

JC

[pxSpectrum]

Thank JC...

Yes it has about 800 frames just as a test on purpose to test this whole thing.  There will multiple MCs in which the app will be mostly 10 frames or less (1 if I can make it work) once I can get it to work where the MCs will house all the frames.

On frame 250 I have a move clip go away as a test on this.  I know about JS starting at zero which is why I set it up this way to test the buttons.  The button doesn't even gove the alert which is why I am wondering what is going on.  The layer in which the button is the second from the top with only Actions being the top frame so I know the button isn't hidden by anything else.  Its really confusing me as to why nothing is working.

I am also using the most recent version of animate 21.0.1 in CC on Mac OS in case this makes difference.

Thanks Again,

Eric

[pxSpectrum]

I tested an alert on the frame with the button which works fine, but not the button.  I am only tested this on a local volume preview rather than "localhost".  Do I need to be on "localhost"?  I'm asking as I am getting errors going like crazy on the console "Uncaught An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images. (createjs.min.js:13 ) this stopped at 3481 instances of the error."

[pxSpectrum · Accepted solution]

I figured it out.  It's been so long since I used buttons in Animate. I forgot the hit area needed to be a single fill shape rather than using the same frame for all 4 states.

[JoãoCésar]

Hi.

Great!

Glad you were able to find the solution.

The Hit frame is not always required. It is possible that a button works only using the artworks in the other frames.

But if it worked for you, that's what matters.

Regards,

JC