Highlighted

Self-contained Animate CC Canvas Output

Explorer ,
Dec 13, 2018

Copy link to clipboard

Copied

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!

TOPICS
Discussions

Views

257

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

Self-contained Animate CC Canvas Output

Explorer ,
Dec 13, 2018

Copy link to clipboard

Copied

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!

TOPICS
Discussions

Views

258

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
Dec 13, 2018 0
Adobe Community Professional ,
Dec 13, 2018

Copy link to clipboard

Copied

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.

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...
Dec 13, 2018 0
Explorer ,
Dec 13, 2018

Copy link to clipboard

Copied

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?

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...
Dec 13, 2018 0
Adobe Community Professional ,
Dec 13, 2018

Copy link to clipboard

Copied

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.

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...
Dec 13, 2018 0
Explorer ,
Dec 13, 2018

Copy link to clipboard

Copied

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

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...
Dec 13, 2018 0
Explorer ,
Dec 13, 2018

Copy link to clipboard

Copied

CORRECTION for original post above, should be:

this.spriteSheet = ss["Concept1_atlas_P_"];

this.spriteSheet = ss["Concept1__atlas_NP_"];

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...
Dec 13, 2018 0
Explorer ,
Dec 13, 2018

Copy link to clipboard

Copied

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...
Dec 13, 2018 0
Explorer ,
Dec 13, 2018

Copy link to clipboard

Copied

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!

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...
Dec 13, 2018 0