Animate Actionscript -> HTML5 canvas woes

[Elsino]

Hello everybody!

I really hope that I can pick the brains of people much smarter than myself to try and get me out of my little head scratcher!

My problem is that flash/actionscript is dying and with browsers now turning it off as standard its going to affect a large portion of my website.

So I really need to convert all my AS3 to HTML5.

Now... I am trying to cut as many corners as possible without having to redo the whole thing, so I copy pasted all the layers into a new HTML5 Canvas and have proceeded to configure the code so that it is HTML5 friendly. they are fairly simple little animations, purely mouseover and click, this on AS3 was done mostly by creating loads of buttons; for example:

a circle button b1, when over highlights an area of information on a table nearby, when clicked follows the code:

this.b1.addEventListener("click", fl_MouseClickHandler2.bind(this));

function fl_MouseClickHandler2()

{

    window.open("THE URL");

}

now, it does come up with a warning saying bitmaps and buttons having some kind of security issue, but it all completely works in the tests run through Animate.

I thought i'd succeeded, but now its all fallen down and gone wrong.

I've published it on Animate and uploaded both the HTML and the JS to the website, switched the information on the web so it loads the new HTML page instead of the old SWF file... and it doesn't work. Infact it would be more accurate to say it might work, but all I can see is a blank white screen, when inspecting the element it tells me that its there, the JS file is linked, all the information is there... but its not showing.

If I just double click on the HTML file on my MAC it opens up no trouble in a browser and everything works, so somewhere, somehow, its getting lost.

Maybe a simple open of the HTML page as a link is whats causing it to break? Although I feel like somehow the images aren't being linked, and I wouldn't have the slightest idea of how to fix that.

I've added a snapshot picture in a hope to help explain what i've got, it'd be amazing if its a really easy fix, although I do fear the answer may be that the old buttons are not the way to go, and i'm going to have to manually code the hover and click in HTML, I really don't want to spend hours doing that if smart people tell me it isn't necessary!

I really appreciate any and all help in advance, and if you require any more information please let me know.

Thanks,

Peter

[ClayUUID]

Have you tried opening the developer console to see if there are any error messages?

[Elsino]

Hi Clay,

Thanks for the reply,

I did look at that section and it had a red block, but the information means nothing to me, i've added a screenshot below.

[Elsino]

Not sure if it will help, but Animate CC gives this warning when publishing:

WARNINGS:
** 7 Bitmaps packed successfully into 1 spritesheet(s).
Frame numbers in EaselJS start at 0 instead of 1. For example, this affects gotoAndStop and gotoAndPlay calls. (96)
Content with both Bitmaps and Buttons may generate local security errors in some browsers if run from the local file system.

i'm still trying different publish settings, testing to see what changes occur if any to warnings given on console or Animate.

So far nothing has fixed it, but i'll continue trying.

[Elsino]

First breakthrough has been not including the spritesheet, it now all works correctly, aside from the fact that none of the pictures are present,

I've tried just uploading the pictures onto the websites file location, but that hasn't seemed to make them all show up... still testing various other methods whatever I can think up.  Any input would be appreciated!

[nadyan91011047]

Hi, did you ever figure out how to fix this issue? I'm currently experiencing this same problem.