Images are Distorted in when I convert .FLA files to Canvas HTML5 Documents and post on my website

Community Beginner ,
Dec 29, 2020 Dec 29, 2020

Copy link to clipboard

Copied

So, I've been trying to convert all my website's .swf's to HTML5 Canvas, starting with my menu bar.  This file runs as expected when I test it in Animate, but when I upload this through CPanel and visit the address, I get this:

 

 

2020-12-28 (1).png

 

The fonts are running off the sides of the buttons.  

I've designed these buttons with mouseover frames so that you should be able to see my animated characters when you hover over the buttons, but now I'm just seeing bits of symbols, even when the cursor is nowhere near them.  When I do hover, the pictures are showing all distorted, like someone's moved a bunch of anchor points at random:

 

CharlesCaptain_2-1609201429152.png

 

 

Is there some kind of pitfall in exporting Flash content to HTML5 Canvas documents that I don't know about?  Do I need to update my export settings?  Please help; I'd like to have this working before Flash goes down next week.

Views

97

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
community guidelines
Adobe Community Professional ,
Dec 29, 2020 Dec 29, 2020

Copy link to clipboard

Copied

use web fonts only.

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
community guidelines
Community Beginner ,
Dec 30, 2020 Dec 30, 2020

Copy link to clipboard

Copied

Do you mean web safe fonts?  I'm using Blambot FX Pro Light BB, which is a web font.

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
community guidelines
Adobe Community Professional ,
Dec 30, 2020 Dec 30, 2020

Copy link to clipboard

Copied

no, web fonts != web safe fonts.

 

because you're using an adobe font it's possible you're using a web font:

 

tf.png

 

if that's the case, position your textfields based on testing in a browser, not based on appearance in the animate ide.

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
community guidelines
Community Beginner ,
Dec 30, 2020 Dec 30, 2020

Copy link to clipboard

Copied

Okay, that should solve the text issue.  Thank you.
I still have the garbled images to deal with.  I think there's something I'm not getting about the image/bitmap/texture export.  

I am getting this error in the output window:

"Content with both Bitmaps and Buttons may generate local security errors in some browsers if run from the local file system."

Does this have something to do with it?  Do I need to eliminate bitmaps?

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
community guidelines
Adobe Community Professional ,
Dec 30, 2020 Dec 30, 2020

Copy link to clipboard

Copied

probably not.  you can open your browser's developer console to check if there's a loading error (but if there were, you wouldn't see anything).

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
community guidelines
Community Beginner ,
Dec 30, 2020 Dec 30, 2020

Copy link to clipboard

Copied

These are my publish settings.

CharlesCaptain_0-1609333752939.png

I tried exporting images as a spritesheet instead, but then it failed to load anything at 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
community guidelines
Community Beginner ,
Dec 31, 2020 Dec 31, 2020

Copy link to clipboard

Copied

I've determined that there definitely is a problem with my image settings.  The character that appears on one of my buttons uses a saved image.  When that character loads, I get this error message in the developer window:

"Uncaught An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images."

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
community guidelines
Adobe Community Professional ,
Dec 31, 2020 Dec 31, 2020

Copy link to clipboard

Copied

that error is triggered when you're trying to do something more than just display the pixel data.

 

in most cases you can get-around that error by uploading the files to a file server and testing the files on the server.

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
community guidelines
Community Beginner ,
Dec 31, 2020 Dec 31, 2020

Copy link to clipboard

Copied

I have confirmed that it is something to do with plaid pattern on my character's shirt.  I removed said character from the Gallery button, and the menu loads as expected:

 

2020-12-31.png

 

I'll have to figure out a workaround for implementing patterns like this, but this gives me something to work with.  Thanks, everyone.

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
community guidelines
Adobe Community Professional ,
Jan 01, 2021 Jan 01, 2021

Copy link to clipboard

Copied

LATEST

you're welcome.

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
community guidelines