Problem with using a JPG graphic inside a nested Movie Clip in an HTML5 canvas document

Community Beginner ,
May 06, 2022 May 06, 2022

Copy link to clipboard

Copied

Hi,

I'm having issues when using a JPG file inside a nested movie clip.

 

Here are some context:

 

  • I am working with an HTML5 canvas document. 
  • The movie clip is an instance that is being targeted with mouse-over script. I've confirmed that the script is all good.. no problems there.
  • Nesting structure of the JPG inside the movie clip is: movie clip > graphic> jpg
  • I also have some simple stop() script on a few frames of the movie clip time line
  • I have some classic tweening applied to the graphic symbol (JPG's parent) inside the movie clip

 

Details about issue:

  • When I test movie within Animate, everything is ok... no errors in browser, everything works
  • When I open the HTML file outside of animate is when I'm experiencing the issue... the browser is blank

 

Troubleshooting I have done:

  • when I remove the movie clip, and place an instance of the JPG anywhere on the stage, there are no problems
  • when I replace the JPG within the nested movie clip with a shape, there are no problems

 

Any idea why this is happening, and how I can fix it? Thanks in advance!

 

Cheers

TOPICS
Other

Views

77

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 ,
May 06, 2022 May 06, 2022

Copy link to clipboard

Copied

The problem is usually that you are publishing a spritesheet, and for local playback that can have security issues. Either upload your test to a server somewhere, or go into publish settings and turn off the spritesheet options. Doing that will then create image files instead of a spritesheet, and those don't have the same security issues. For your final publish, that will be uploaded to a server, you could switch back to using spritesheets.

 

In publish settings, JavaScript/HTML, look for the Export Image assets section, and change the Export as: to be Image Assets.

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 ,
May 06, 2022 May 06, 2022

Copy link to clipboard

Copied

Thanks for the reply.

So I changed the publish settings of images to Image Assets, and I'm able to see the content in the browser when I open the HTML file locally. But I'm still getting erros related to security issue in the browser (see attached screenshot).

 

Does this mean that the issue is only related to opening the HTML file locally, and that there is no real functional issue with the content? (Again, when I test the movie within Animate, it works as it should)

 

 

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 ,
May 06, 2022 May 06, 2022

Copy link to clipboard

Copied

The published version should work ok if it's on a server.

You could try going into Publish Settings/HTML/JS, and uncheck the Hosted Libraries box. That will then make local versions of the CreateJS libraries, that may not have security issues.

Other than that, I'm not sure what would be causing the remain errors.

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 ,
May 06, 2022 May 06, 2022

Copy link to clipboard

Copied

LATEST

I tried publishing without Hosted Libraries and the content won't even be visible in the browser.

Will test it on an actual server when it's published online and go from there.

Thanks for the tips.

 

 

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