Self-contained Animate CC Canvas Output

[bionicgirlny]

Hi guys,

we have publishers that require a self-contained html file, meaning no external scripts, images, css...

Everything would be already taken care of especially with the publishing option (of a canvas document) to have JS included inside the HTML file, however I am not sure how I would be solving for changing image references in the JS to data URI:

1. lib.ssMetadata = [

                                {name:"Concept1_atlas_P_", frames: [[428,1004,72,72],[0,1004,426,64],[0,0,600,500],[0,502,600,500],[0,1070,56,56]]},

                                {name:"Concept1_atlas_NP_", frames: [[0,0,600,500],[602,0,300,250],[0,502,600,500]]}

];

and everytime its' referenced like so:

this.spriteSheet = ss["K8DM37_ConceptFunctionality_atlas_P_"];

this.spriteSheet = ss["K8DM37_ConceptFunctionality_atlas_NP_"];

Can someone please advise? Thanks!

[ClayUUID]

Even if you manage to convert all your images to URIs (which will increase their storage size by 30%), you'll still need the CreateJS runtime. Whether you include it or access it from a CDN, it's not going to be self-contained.

[bionicgirlny]

Hey Clay,

the data URIs actually compress quite well, since they will be g-zipped that's not my concern. Why wouldn't the html be self-contained if the scripts are minified and included in the html?

My main concern however is how to edit the published file in order to include the data URIs properly. I tried swapping in the data URI for each sprite - for example 'data URI xyz' for 'Concept1_atlas_NP_.png', but it's not displaying the images giving me a "from origin 'null' has been blocked by CORS policy: Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers in preflight response." error.

Flash Pro - HTML5 Canvas: How create all in one HTML file?

[ClayUUID]

bionicgirlny  wrote

Why wouldn't the html be self-contained if the scripts are minified and included in the html?

When you publish a Canvas project, by default a JS file named createjs-2015.11.26.min.js (or similar) is created, or linked to a CDN. I suppose it's possible to manually copy everything from this file into your HTML document, though that sounds like a rather large nuisance.

[bionicgirlny]

Yeah I could just overwrite it and add in the minified Create JS or perhaps set that in the publishing template. However, the main issue is to have the image src replaced with data URIs. 😞

I tried replacing the main src images with the data URIs respectively, but the images aren't showing. Getting the following console error where the data URIs are: "from origin 'null' has been blocked by CORS policy: Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers in preflight response."

[bionicgirlny]

CORRECTION for original post above, should be:

this.spriteSheet = ss["Concept1_atlas_P_"];

this.spriteSheet = ss["Concept1__atlas_NP_"];

[bionicgirlny · Accepted solution]

This should work: https://medium.com/@davidwallin/how-to-get-ads-created-in-adobe-animate-cc-to-work-on-doubleclick-fo...

[bionicgirlny]

Theoretically the above instructions should be working, but they are not for me. Anyway to change it so it doesn't display as the "correct answer"? Anyone could advice as to how to proceed when the output is images combined to Sprites and using the latest Animate CC (2019)? Thanks!