• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Embed Multiple Animate CC Interactive Graphics on a Webpage

Explorer ,
May 04, 2017 May 04, 2017

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:

https://info.townsendsecurity.com/-temporary-slug-4c959389-129d-4ac5-a54b-3ceaad299e76?hs_preview=DA...

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!

Views

3.4K

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

correct answers 1 Correct answer

Explorer , Jul 28, 2017 Jul 28, 2017

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.

Votes

Translate

Translate
LEGEND ,
May 04, 2017 May 04, 2017

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.

Votes

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
Explorer ,
May 04, 2017 May 04, 2017

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:

https://info.townsendsecurity.com/-temporary-slug-4c959389-129d-4ac5-a54b-3ceaad299e76?hs_preview=DA... 

Thanks!

Votes

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
Explorer ,
May 05, 2017 May 05, 2017

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.

Votes

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
Explorer ,
Jul 28, 2017 Jul 28, 2017

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.

Votes

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
LEGEND ,
Jul 28, 2017 Jul 28, 2017

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.

Votes

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
Explorer ,
Jul 28, 2017 Jul 28, 2017

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!

Votes

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
LEGEND ,
Jul 30, 2017 Jul 30, 2017

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

<embed> - HTML | MDN

Votes

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
Explorer ,
Jul 31, 2017 Jul 31, 2017

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.

Votes

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 Employee ,
Aug 08, 2017 Aug 08, 2017

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.

Votes

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
Explorer ,
Aug 08, 2017 Aug 08, 2017

Copy link to clipboard

Copied

How about integrating into WordPress? 

Votes

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
Participant ,
Aug 28, 2018 Aug 28, 2018

Copy link to clipboard

Copied

LATEST

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

Votes

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