Skip to main content
CharlesCaptain
CharlesCaptain
Participating Frequently
December 29, 2020
Question

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

  • December 29, 2020
  • 4 replies
  • 822 views

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:

 

 

 

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:

 

 

 

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.

    This topic has been closed for replies.

    4 replies

    CharlesCaptain
    CharlesCaptainAuthor
    Participating Frequently
    December 31, 2020

    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:

     

     

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

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    January 1, 2021

    you're welcome.

    CharlesCaptain
    CharlesCaptainAuthor
    Participating Frequently
    December 31, 2020

    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."

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    December 31, 2020

    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.

    CharlesCaptain
    CharlesCaptainAuthor
    Participating Frequently
    December 30, 2020

    These are my publish settings.

    I tried exporting images as a spritesheet instead, but then it failed to load anything at all.

     

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    December 29, 2020

    use web fonts only.

    CharlesCaptain
    CharlesCaptainAuthor
    Participating Frequently
    December 30, 2020

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

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    December 30, 2020

    no, web fonts != web safe fonts.

     

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

     

     

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

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices