Copy link to clipboard
Copied
Hey All,
A week or so ago I successfully embedded an interactive graphic I created in Animate CC. I have created my second one but just can't quite figure out how to edit the head code to accommodate two. I have created a test page:
Below is the head code. I added the 2nd script source for the other graphic. I know that I also need to create other unique identifiers within the head and body code, but that is where my knowledge runs short.
<!-- write your code here -->
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="https://downloads.townsendsecurity.com/misc/KMS_Flowchart_Interactive.js"></script>
<script src="https://downloads.townsendsecurity.com/misc/Asymmetric_Flowchart_Interactive.js"></script>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init1() {
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
images = images||{};
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
function handleComplete(evt) {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
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.KMS_Flowchart_Interactive();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.enableMouseOver();
//Registers the "tick" event listener.
fnStartAnimation = function() {
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 canvas_div = document.querySelector("#animation_container_width");
iw = canvas_div.offsetWidth; ih = iw;
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;
}
}
makeResponsive(true,'width',true,1);
fnStartAnimation();
}
I saw that BenPleysier helped with a similar issue back in September of 2016, He did a good job answering it successfully but I was not quite able to follow in how to create all the unique identifiers.
Thanks for your help!
The problem with putting each animation in an iframe is iframes don't work / render properly on iphones. Would love to a see a more modern / elegant way to have multiple animations on one page... that worked on mobile devices. The other threads that discuss possible solutions are from 2014 and the code Animate CC generates now is different than then and those solutions don't seem to cross over that easily.
Copy link to clipboard
Copied
Whenever this question comes up I always recommend just sticking each one in an iframe. It sandboxes each movie, and saves you having to manually muck about with each movie's namespaces.
Copy link to clipboard
Copied
Thanks for that. I remember that I tried iframe when embedding the first interactive graphic but ran into difficulty when I could not make it responsive. The CMS that I a using forces me to add a width and height and html5 only allows pixels as a value (no percentages). So I can easily add it via iframe, but no joy making it look good on anything other than a desktop. Any thoughts?
I did an an iframe example to the bottom of the test page:
Thanks!
Copy link to clipboard
Copied
I was able to figure out the issue. I was able to edit my CSS Stylesheet so that the width on iframe was 100%, thus making it responsive. Thanks for kicking this one around with me.
Copy link to clipboard
Copied
The problem with putting each animation in an iframe is iframes don't work / render properly on iphones. Would love to a see a more modern / elegant way to have multiple animations on one page... that worked on mobile devices. The other threads that discuss possible solutions are from 2014 and the code Animate CC generates now is different than then and those solutions don't seem to cross over that easily.
Copy link to clipboard
Copied
Orbit-Monkey wrote
The problem with putting each animation in an iframe is iframes don't work / render properly on iphones.
Can you reference any proof of this assertion?
Iframes ARE the modern/elegant way to embed sandboxed content in a web page. If there's a problem, sounds like it's with the iPhone's dated/clunky browser.
Copy link to clipboard
Copied
You are correct, <iframe> was the issue. No matter what I did, iPhones would not render the <iframe> content to scale. I actually was able to overcome the challenge by using <embed>. Worked perfectly!
Copy link to clipboard
Copied
KenMafli wrote
I actually was able to overcome the challenge by using <embed>. Worked perfectly!
Ahem...
"Note: There is currently an implementation difference between browsers. While Blink (Chrome, Opera) will display the content of HTML resource, Firefox displays a generic message saying the content needs a plug-in (see bug 1237963). It is recommended to use the <object> or <iframe> element."
Copy link to clipboard
Copied
Well in my case I used the embed and css screen queries to show a different animation on mobile vs desktop... That solved my issue... But I can see there still needs to be a complete /proper method to have two or more animations on a page.
Copy link to clipboard
Copied
One of the easiest ways to do this is to upload Animate files onto CC libraries and use them in other web building Applications like Muse or Dreamweaver, by simply dragging and dropping them from CC libraries.
Copy link to clipboard
Copied
How about integrating into WordPress?
Copy link to clipboard
Copied
I saw that BenPleysier helped with a similar issue back in September of 2016, He did a good job answering it successfully but I was not quite able to follow in how to create all the unique identifiers.
Could you show the post? Thanks