Highlighted

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

Contributor ,
May 13, 2019

Copy link to clipboard

Copied

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

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

TOPICS
Discussions

Views

335

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Contributor ,
May 13, 2019

Copy link to clipboard

Copied

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

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

TOPICS
Discussions

Views

336

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 13, 2019 0
Adobe Community Professional ,
May 14, 2019

Copy link to clipboard

Copied

did you add

stage.enableMouseOver();

and change all your actionscript to javascript?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 14, 2019 0
Advocate ,
May 15, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 15, 2019 1
Contributor ,
May 16, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 16, 2019 0
Adobe Community Professional ,
May 15, 2019

Copy link to clipboard

Copied

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

};

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 15, 2019 1
Adobe Community Professional ,
May 16, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 16, 2019 0
Contributor ,
May 16, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 16, 2019 0