Highlighted

Muse won't show my embedded HTML but Indesign will?

New Here ,
Apr 17, 2018

Copy link to clipboard

Copied

I insert some HTML into muse and when I export the whole thing as HTML it gives me a blank screen

but when I do the exact same thing in InDesign the exported HTML works.

here is the HTML i've been embedding

<!DOCTYPE html>

<!--

NOTES:

1. All tokens are represented by '$' sign in the template.

2. You can write your code only wherever mentioned.

3. All occurrences of existing tokens will be replaced by their appropriate values.

4. Blank lines will be removed automatically.

5. Remove unnecessary comments before creating your template.

-->

<html>

<head>

<meta charset="UTF-8">

<meta name="authoring-tool" content="Adobe_Animate_CC">

<title>SurveyPdiffStart</title>

<!-- write your code here -->

<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

<script src="http://www.appstate.edu/~williamsjn3/SurveyPdiffStart.js"></script>

<script>

var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;

function init() {

canvas = document.getElementById("canvas");

anim_container = document.getElementById("animation_container");

dom_overlay_container = document.getElementById("dom_overlay_container");

var comp=AdobeAn.getComposition("13B5ADFB69AC424590DC3988AA44256E");

var lib=comp.getLibrary();

var loader = new createjs.LoadQueue(false);

loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});

loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});

var lib=comp.getLibrary();

loader.loadManifest(lib.properties.manifest);

}

function handleFileLoad(evt, comp) {

var images=comp.getImages();

if (evt && (evt.item.type == "image")) { images[evt.item.id] = evt.result; }

}

function handleComplete(evt,comp) {

//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.

var lib=comp.getLibrary();

var ss=comp.getSpriteSheet();

var queue = evt.target;

var ssMetadata = lib.ssMetadata;

for(i=0; i<ssMetadata.length; i++) {

ss[ssMetadata.name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata.name)], "frames": ssMetadata.frames} )

}

exportRoot = new lib.SurveyPdiffStart();

stage = new lib.Stage(canvas);

stage.enableMouseOver();

//Registers the "tick" event listener.

fnStartAnimation = function() {

stage.addChild(exportRoot);

createjs.Ticker.setFPS(lib.properties.fps);

createjs.Ticker.addEventListener("tick", stage);

}    

//Code to support hidpi screens and responsive scaling.

function makeResponsive(isResp, respDim, isScale, scaleType) {

var lastW, lastH, lastS=1;

window.addEventListener('resize', resizeCanvas);

resizeCanvas();

function resizeCanvas() {

var w = lib.properties.width, h = lib.properties.height;

var iw = window.innerWidth, ih=window.innerHeight;

var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;

if(isResp) {               

if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {                   

sRatio = lastS;               

}

else if(!isScale) {

if(iw<w || ih<h)

sRatio = Math.min(xRatio, yRatio);

}

else if(scaleType==1) {

sRatio = Math.min(xRatio, yRatio);

}

else if(scaleType==2) {

sRatio = Math.max(xRatio, yRatio);

}

}

canvas.width = w*pRatio*sRatio;

canvas.height = h*pRatio*sRatio;

canvas.style.width = dom_overlay_container.style.width = anim_container.style.width =  w*sRatio+'px';

canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio+'px';

stage.scaleX = pRatio*sRatio;

stage.scaleY = pRatio*sRatio;

lastW = iw; lastH = ih; lastS = sRatio;           

stage.tickOnUpdate = false;           

stage.update();           

stage.tickOnUpdate = true;

}

}

makeResponsive(false,'both',false,1);

AdobeAn.compositionLoaded(lib.properties.id);

fnStartAnimation();

}

</script>

<!-- write your code here -->

</head>

<body onload="init();" style="margin:0px;">

<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1550px; height:900px">

<canvas id="canvas" width="1550" height="900" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>

<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1550px; height:900px; position: absolute; left: 0px; top: 0px; display: block;">

</div>

</div>

</body>

</html>

Most Valuable Participant
Correct answer by Ussnorway | Most Valuable Participant

I think you missed the point but here is the code posted online if you want to try and iframe it

SurveyPdiffStart

Views

218

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

Muse won't show my embedded HTML but Indesign will?

New Here ,
Apr 17, 2018

Copy link to clipboard

Copied

I insert some HTML into muse and when I export the whole thing as HTML it gives me a blank screen

but when I do the exact same thing in InDesign the exported HTML works.

here is the HTML i've been embedding

<!DOCTYPE html>

<!--

NOTES:

1. All tokens are represented by '$' sign in the template.

2. You can write your code only wherever mentioned.

3. All occurrences of existing tokens will be replaced by their appropriate values.

4. Blank lines will be removed automatically.

5. Remove unnecessary comments before creating your template.

-->

<html>

<head>

<meta charset="UTF-8">

<meta name="authoring-tool" content="Adobe_Animate_CC">

<title>SurveyPdiffStart</title>

<!-- write your code here -->

<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

<script src="http://www.appstate.edu/~williamsjn3/SurveyPdiffStart.js"></script>

<script>

var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;

function init() {

canvas = document.getElementById("canvas");

anim_container = document.getElementById("animation_container");

dom_overlay_container = document.getElementById("dom_overlay_container");

var comp=AdobeAn.getComposition("13B5ADFB69AC424590DC3988AA44256E");

var lib=comp.getLibrary();

var loader = new createjs.LoadQueue(false);

loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});

loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});

var lib=comp.getLibrary();

loader.loadManifest(lib.properties.manifest);

}

function handleFileLoad(evt, comp) {

var images=comp.getImages();

if (evt && (evt.item.type == "image")) { images[evt.item.id] = evt.result; }

}

function handleComplete(evt,comp) {

//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.

var lib=comp.getLibrary();

var ss=comp.getSpriteSheet();

var queue = evt.target;

var ssMetadata = lib.ssMetadata;

for(i=0; i<ssMetadata.length; i++) {

ss[ssMetadata.name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata.name)], "frames": ssMetadata.frames} )

}

exportRoot = new lib.SurveyPdiffStart();

stage = new lib.Stage(canvas);

stage.enableMouseOver();

//Registers the "tick" event listener.

fnStartAnimation = function() {

stage.addChild(exportRoot);

createjs.Ticker.setFPS(lib.properties.fps);

createjs.Ticker.addEventListener("tick", stage);

}    

//Code to support hidpi screens and responsive scaling.

function makeResponsive(isResp, respDim, isScale, scaleType) {

var lastW, lastH, lastS=1;

window.addEventListener('resize', resizeCanvas);

resizeCanvas();

function resizeCanvas() {

var w = lib.properties.width, h = lib.properties.height;

var iw = window.innerWidth, ih=window.innerHeight;

var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;

if(isResp) {               

if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {                   

sRatio = lastS;               

}

else if(!isScale) {

if(iw<w || ih<h)

sRatio = Math.min(xRatio, yRatio);

}

else if(scaleType==1) {

sRatio = Math.min(xRatio, yRatio);

}

else if(scaleType==2) {

sRatio = Math.max(xRatio, yRatio);

}

}

canvas.width = w*pRatio*sRatio;

canvas.height = h*pRatio*sRatio;

canvas.style.width = dom_overlay_container.style.width = anim_container.style.width =  w*sRatio+'px';

canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio+'px';

stage.scaleX = pRatio*sRatio;

stage.scaleY = pRatio*sRatio;

lastW = iw; lastH = ih; lastS = sRatio;           

stage.tickOnUpdate = false;           

stage.update();           

stage.tickOnUpdate = true;

}

}

makeResponsive(false,'both',false,1);

AdobeAn.compositionLoaded(lib.properties.id);

fnStartAnimation();

}

</script>

<!-- write your code here -->

</head>

<body onload="init();" style="margin:0px;">

<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1550px; height:900px">

<canvas id="canvas" width="1550" height="900" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>

<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1550px; height:900px; position: absolute; left: 0px; top: 0px; display: block;">

</div>

</div>

</body>

</html>

Most Valuable Participant
Correct answer by Ussnorway | Most Valuable Participant

I think you missed the point but here is the code posted online if you want to try and iframe it

SurveyPdiffStart

Views

219

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
Apr 17, 2018 0
Apr 20, 2018

Copy link to clipboard

Copied

Hey Joey12Williams,

Looking at the code it looks like extracted from  Adobe Animate CC, and Muse won't have the capacity to parse such a big code.

Instead, you could have simply export your animate as an OAM file and same could be used in Muse!

Let us know what exactly you are trying to achieve so we can suggest you any better alternatives.

Regards,

Ankush

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...
Apr 20, 2018 0
New Here ,
Apr 20, 2018

Copy link to clipboard

Copied

You're right it was extracted from Animate CC, good eye!

Maybe it is too big... also I can't export it as an OAM because I needed to add an HTML table to the animate file by editing the script.

I think I'm just going to publish my animate file online then iframe it onto muse. thanks though!

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...
Apr 20, 2018 0
Most Valuable Participant ,
Apr 21, 2018

Copy link to clipboard

Copied

I think you missed the point but here is the code posted online if you want to try and iframe it

SurveyPdiffStart

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...
Apr 21, 2018 0