Basic Rollover Not Working (after converting to HTML5 Canvas)?

[neal derekl34934377]

I have an old Flash file that has a completely functioning drop down menu that I was attempting to convert to HTML5 Canvas (to get it to eventually work in all modern browsers and devices).

In doing so, I realized that when testing the file, that even the basic button rollover functions aren’t responding. The file itself still appears to have the UP OVER DOWN HIT keyframes that are automatically apart of button elements in Animate, so why is that basic functionality not working when tested?

The files can be downloaded from the below links.

Thanks.

http://solarinkgraphics.com/files/Vrt_FoldOutNavbar_HTML5%20Canvas.fla

http://solarinkgraphics.com/files/Vrt_FoldOutNavbar.fla

[kglad]

did you add

stage.enableMouseOver();

and change all your actionscript to javascript?

[kdmemory · Accepted solution]

Hi Derek

As a first step: All your buttons (HOME, ABOUT ...) have in the Hit frame a movieclip (mButton_inner_MC) which is set to Alpha: 0 in the Properties panel. That can't work in HTML5. You must set them to alpha: 1 at least. But you can just set this to Alpha: 100, the movielip won't be visible anyway but defines the Hit area.

Klaus

[neal derekl34934377]

Changing the Alpha Channels from 0 to 1 brought back the rollover function upon testing in browser.

Awesome.

Now I just have to take the old actionscript code and convert it to javascript somehow?

Any guidance would be awesome.

nickg28 has some snippets that look promising. Will check those out in the coming days.

[Nicktendo28]

Here is how you would write a mouseover in html5 canvas

stage.enableMouseOver();

this.target_mc.targetHit_btn.addEventListener("mouseover", targetOver.bind(this));

this.target_mc.targetHit_btn.addEventListener("mouseout", targetOut.bind(this));

//TARGET

function targetOver() {

this.target_mc.gotoAndStop("on");

};

function targetOut() {

this.target_mc.gotoAndStop("off");

};

[kglad]

you can use .01 if you don’t want the button to visible.

[neal derekl34934377]

Everything is working great now.

I ended up deleting the graphic element from the UP frame, and the button is still functional and rolling over per normal.

Figuring out how to switch over to HTML5 linking was also pretty straight forward with the code snippet usage.

At one point I was having a hard time when every link was taking me to the same page. Until I finally realized that it could have been getting scrambled because every function name was the same fl_ClickToGoToWebPage. It started working correctly again once I differentiated all the function names i.e. fl_ClickToGoToWebPage01, fl_ClickToGoToWebPage02, etc.

But it’s so inconsistent initially, in that the first 3 or 4 links were working correctly, while they had the same function name, but then after the remaining links were placed, it just kept taking me to the same page, no matter the link clicked on. I was going crazy trying to see what was wrong.

In any case, after surviving this I’m well on my way to ensuring my old SWF site is HTML5 compliant.

Thanks all.