Edge Animate to Animate CC: Responsive Scaling and Positioning

I’ve received a lot of inquiries by Edge Animate users as to how to make items responsive within Animate CC. So many, in fact, that I decided to produce a number of demonstration projects, record some video on each one, and write this little article.

responsiveanimate

First, I’ll just emphasize that the way Edge Animate handles things like element scaling and sizing is very DOM-oriented… because it works within the very narrow focus of the browser DOM. Animate CC is platform-agnostic (not specifically an HTML tool) and works differently in terms of targeting a single element when targeting HTML5 Canvas (the canvas DOM element). So a lot of things like media queries and such, as employed by the Edge suite, go out the window.

However – being able to scale and reposition elements within an Animate CC HTML5 Canvas document is absolutely possible. The main difference is that you’ll have to write some JavaScript to accomplish this as there are currently no GUI elements in Animate CC to make it a visual task. In the days when Animate CC (as Flash Professional) only output to SWF, I used to dynamically scale and reposition elements across the document at runtime in many of my projects – especially regarding things like video players and other size-variable modules that would exist as embedded web content. It was all done through a little code and worked great – even before browser-based responsive DOM was even a thing!

Here is a video demonstration of 3 different scaling methods based upon browser window resize using Animate CC HTML5 Canvas output:

Considering that Animate CC has a fully extensible SDK for creating custom publish formats… and that SnapSVG Animator (one of the most popular) actually does output an SVG DOM… there is really no reason why Animate CC cannot, in the future, output an HTML DOM as well. Though I have no knowledge of any plans like that at the current time (which means nothing except that I don’t know).

In the end – Edge Animate and Animate CC have very different ways of working with content. Edge Animate was very restrictive (HTML5 DOM only) and Animate CC is completely agnostic in regard to platform (Flash Player, AIR, iOS, Android, HD Video, WebGL, HTML5 Canvas, Windows, OS X, GAF, Away, SnapSVG, et cetera) providing huge amounts of creative freedom not possible in Edge Animate. That said, there are other tools like Dreamweaver, Muse, and the like which do responsive DOM focused stuff today… and these are not going anywhere.

You can download the 3 FLA files used in the video with all the code you need:

Here are standalone code examples if you would rather reference these in stead of downloading the FLA files above!

Responsive scaling while respecting aspect ratio

/* 

responsive scale code as expressed by @davegamez 

*/


var page_body = document.getElementsByTagName("body")[0];
page_body.style.backgroundColor = "#3C0600";
page_body.style.overflow = "hidden";
page_body.style.position = "fixed";

var page_canvas = document.getElementsByTagName("canvas")[0];
stageWidth = page_canvas.width;
stageHeight = page_canvas.height;

var viewport = document.querySelector('meta[name=viewport]');
var viewportContent = 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0';

if (viewport === null) {
 var head = document.getElementsByTagName('head')[0];
 viewport = document.createElement('meta');
 viewport.setAttribute('name', 'viewport');
 head.appendChild(viewport);
}

viewport.setAttribute('content', viewportContent);

function onResize() {
 var widthToHeight = stageWidth / stageHeight;
 var newWidth = window.innerWidth;
 var newHeight = window.innerHeight;
 var newWidthToHeight = newWidth / newHeight;
 //
 if (newWidthToHeight > widthToHeight) {
 newWidth = newHeight * widthToHeight;
 page_canvas.style.height = newHeight + "px";
 page_canvas.style.width = newWidth + "px";
 } else {
 newHeight = newWidth / widthToHeight;
 page_canvas.style.height = newHeight + "px";
 page_canvas.style.width = newWidth + "px";
 }
 scale = newWidthToHeight / widthToHeight;
 stage.width = newWidth;
 stage.height = newHeight;
 page_canvas.style.marginTop = ((window.innerHeight - newHeight) / 2) + "px";
 page_canvas.style.marginLeft = ((window.innerWidth - newWidth) / 2) + "px";
}

window.onresize = function () {
 onResize();
}

onResize();

Responsive scaling ignoring aspect ratio

/* 

responsive scale code as expressed by @davegamez 
and modified by @josephLabrecque 

*/


var page_body = document.getElementsByTagName("body")[0];
page_body.style.backgroundColor = "#3C0600";
page_body.style.overflow = "hidden";
page_body.style.position = "fixed";

var page_canvas = document.getElementsByTagName("canvas")[0];
stageWidth = page_canvas.width;
stageHeight = page_canvas.height;

var viewport = document.querySelector('meta[name=viewport]');
var viewportContent = 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0';

if (viewport === null) {
 var head = document.getElementsByTagName('head')[0];
 viewport = document.createElement('meta');
 viewport.setAttribute('name', 'viewport');
 head.appendChild(viewport);
}

viewport.setAttribute('content', viewportContent);

function onResize() {
 var newWidth = window.innerWidth;
 var newHeight = window.innerHeight;
 page_canvas.style.height = newHeight + "px";
 page_canvas.style.width = newWidth + "px";
 stage.width = newWidth;
 stage.height = newHeight;
}

window.onresize = function () {
 onResize();
}

onResize();

Responsive repositioning of elements

var r = this;
var w = stage.canvas.width;
var h = stage.canvas.height;

r.an0.x = w/2;
r.an0.y = h/2;

r.an1.x = 40;
r.an1.y = 40;

r.an2.x = w - 40;
r.an2.y = 40;

r.an3.x = 40;
r.an3.y = h-40;

r.an4.x = w-40;
r.an4.y = h-40;




 

 

18 thoughts on “Edge Animate to Animate CC: Responsive Scaling and Positioning”

  1. Hello Joseph,

    thanks for your tutorial.

    There is something I do not understand. I have installed Animate CC 2015 and tried your example “responsive.fla”, what is output is rasterized, it is vector content still if blown up it gets jagged. Am I missing something? Do I have a version problem?
    My build is 15.1.0.210

    1. I had the same problem today. Importing outlines from Illustrator, that Animate turned into raster image, which didn’t work on a large screen when scaled to more than 100%.
      I made the fla quit big and set a halfsize max-width and height on my #canvas style, so it wouldn’t get to blurry on large screens. The best solution I could think of, but I sure miss Flash…

  2. (Thank you SO much for this, you’re saving my life) But, I’m having the same problem as the other two posters using the first of your scaling techniques. What I would rather happen is for the size of my canvas to size down smaller indefinitely with the browser window, but for it to reach a max size once the browser is scaled up, to preserve my graphics.
    Any suggestions on how to set the max size for your canvas?

    1. Good suggestion! Yes, you could always check to see something like…

      if(newHeight <= 500) { //then scale up }else{ //do nothing }

      I'm not entirely sure why the content looks as though it is raster when blown up a great deal. Which is why I haven't commented on it yet! Hopefully Adobe comes out with a good solution to this sort of thing... but I *believe* it to be because we are scaling canvas content which has already been rendered at a certain size. Again... not entirely sure what the solution would be yet.

      1. Hello. Thanks for the exmaple!
        But looks like the 2d context size didn’t change so the result looks rasterized.
        I am using the responsive2.fla and I modified the last 2 lines of the function onResize() to something like this:
        stage.canvas.width = newWidth;
        stage.canvas.height = newHeight;
        And the context seems to fit the canvas size now. But still I don’t think Animate CC scales any content base on the new size at all.
        Is it possible to manually scale all the shapes in the onResize function? Like this guy did with his circle using create.js:
        http://stackoverflow.com/questions/28449202/how-should-i-create-a-responsive-canvas-with-createjs-to-adapt-different-mobile

        1. Yes, of course – you can always reposition and rescale. That is related to the third technique I go over and is what I often do when exporting interfaces for Flash Player content.

  3. Hello Joseph,
    Thanks for your tutorial!
    How can I modify your script if I want my canvas to be fullscreen, not responsive and centering horizontally and vertically when resizing the page like a video-background (background-position: center center;background-size: contain;).
    Thanks for your answer!

  4. Hi Joseph,

    first of all thanks for your tutorials/videos; they have helped me a lot so far. But i still have a question to which i hope you have the answer.

    What i want to accomplish is to have an element (site-menu) sticked to the lefthand side of the browser which doesn’t scall when adjusting the browser size. I only want to have the element stay sticked to the left but stay vertically centered.

    I have used the new option in Animate and have checked the center stage vertically option. When testing it in the browser, it works exactly like i want to. But when i export it to an oam file and place that in my Muse project, the menu just stays put.

    Do you perhaps know how to make this work?

    Thanks a lot and already best wishes for 2018!
    Richard

    1. Hi Richard. I’d think the best way to handle different behaviours would be to just adjust position, width, and height of various elements through code that modifies these properties as needed.

      I don’t know much about the OAM format or Muse.

  5. Hi man,
    Very helpful, thanks, but I only want to make one thing that i used to do long time ago in AS3:

    I want to resize the whole canvas and rearrange movieclips accordingly, let’s say I want to keep a close button to the right while resizing.

  6. New canvas 1 width x 1 height, timeline 2 frames,
    //Acction
    var w = window.innerWidth;
    var h = window.innerHeight;
    var canvas = document.getElementById(“canvas”);
    canvas.setAttribute(“width”, w);
    canvas.setAttribute(“height”, h);
    canvas.style.width = w + “px”;
    canvas.style.height = h + “px”;

    //New movieClip “prueba_mc” 100 width x 100 height
    this.prueba_mc.scaleX = 0. + w / 100;
    this.prueba_mc.x = 0;
    this.prueba_mc.y = 0;

    //deeavid david…. deeavid@hotmail.com

  7. Thanks for this great blog post. I am having troubles still though with responsive scaling of an embedded youtube video. The canvas scales, but the youtube videos do not. This is the HTML 5 code for the actions on the page, which displays three separate videos:

    this.stop();

    mkYouTube = function(id, x, y, w, h, src, allow) {

    var f = document.createElement(“iframe”);

    f.id = id;

    f.allow = allow;

    f.frameBorder = “0”;

    f.setAttribute(“allowfullscreen”, “”)

    f.style.cssText = “position:absolute; left:” + x + “px; top:” + y + “px; width:” + w + “px; height:” + h + “px;”;

    f.src = src;

    canvas.parentNode.appendChild(f);

    }

    mkYouTube(“myvid”, 335, 280, 280, 157, “https://player.vimeo.com/video/131846920”, “autoplay; encrypted-media”);
    mkYouTube(“myvid2”, 635, 280, 280, 157, “https://www.youtube.com/embed/Fihx2Ypf4HY”, “autoplay; encrypted-media”);
    mkYouTube(“myvid3”, 935, 280, 280, 157, “https://www.youtube.com/embed/nEv8kx4fluc”, “autoplay; encrypted-media”);

    Let me know if you have any clues as to how I could make these embedded youtube videos responsive using code within Animate.
    Many thanks

  8. Hi So came here from youtube to download the three .fla files (can’t believe in 2019 I’m using “flash” again! how the world turns!) But everything is fine until I try to publish your “responsive3.fla” it just won’t. . . “respond”? Meaning the canvas CROPS the logos without moving them into the canvas area and resizing. Is there something I’m missing, some setting I’m not using in the publish? I checked the code back to what you have here and everything checks out. I tried it in chrome, safari, firefox. When I resize the canvas and re-publish it just changes the dimensions but still crops the elements (the logos) Help? I am trying to teach myself how to build responsive web banners and so far you’re the closest to unlocking the mystery as I have found. Thanks

    1. Animate has changed so much since these were created – I’d imagine the code just needs to be updated somewhat. In the publish settings, for instance, there were no ‘responsive’ publish options at the time that video was recorded :o

  9. Programs used: Adobe Animate CC and Dreamweaver CC. Your code works beautifully when testing in Animate, but Dreamweaver rejects it. Following the file I downloaded from your blog, I used the Javascript/HTML publish settings, used and not used the Make responsive setting: both (what a joke because it doesn’t respond in either direction with or without your AS code), and found several videos of how to incorporate the javascript into the and the canvas into the . The animation was pushed to the right and did not respond no matter what I did. I am reduced to using the OAM format and creating 3 different sizes. Still doesn’t work well because the css height code must be included in the div or the animation doesn’t show. Until the next animation size is reached, the animation centers vertically within the set css height. (I tried centering only horizontally in Animate to force the animation to the top of the div–made no difference). I had to include a width of 100% in the object code just so it would respond at least horizontally. Too bad that doesn’t work for the height. Because you have a better understanding (understatement) of how to make this work, I was wondering, if I beg incessantly, if you could create another video of how to incorporate this into Dreamweaver. You know, when you have the time. If you haven’t already done so. It’s the last piece of the puzzle and, so far, the piece isn’t fitting. I will visit your blog often and look forward to learning more. Thank you.

Leave a Reply to Michael Cancel Reply

Your email address will not be published. Required fields are marked *