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;




 

 

Edge Animate to Animate CC

I’ve recorded and published a set of three videos walking users through the transition from Edge Animate to Animate CC. These videos cover a number of conceptual comparisons between the applications, including… the differences in timeline, differences in publish targets, and workflow differences.

I’ve embedded the full playlist below, and you will find links and descriptions of individual tutorials following that as well.

Here are the individual video recordings:

Edge Animate to Animate CC: Timeline Methodology

Edge Animate and Animate CC animate content in very different ways. Let’s look at animation workflows using Edge Animates Pin tool, and compare that with the robust tweening system in Animate CC.

Edge Animate to Animate CC: DOM vs. Canvas

While Edge Animate and Animate CC can both output to the native web browser using HTML elements, the way in which they each handle this output differs quite a bit. Let’s have a look at these differences and the advantages Animate CC provides.

Edge Animate to Animate CC: Creative Workflow

Both Edge Animate and Animate CC can employ imported image files within their workflows. Animate CC goes far beyond simple import with deep integration with CC Libraries using CreativeSync technology.

Multi-Symbol Sprite Sheets from Flash Professional CC to Edge Animate CC

The other day I posted about using sprite sheets generated from the 2014 release of Flash Professional CC and using those within Edge Animate CC. It’s an awesome workflow between the two applications and works really, really well.

A reader commented about a number of things – and one of the specific things that was asked revolves around the ability to export/import multiple symbols between the programs. So I set out to see how that worked… (it works amazingly well)

Here’s a video of the entire process!

Flash Professional CC 2014 – Edge Animate Sprite Sheets

Now that the 2014 release of Adobe Creative Cloud is released and available to everyone, I’d like to highlight one of the coolest new workflow enhancements between two of my favourite applications: Flash Professional and Edge Animate!

Flash Professional is a highly flexible asset generation beast. You can use all sorts of internal tools to draw out and animate rich, complex vector assets. Edge Animate does not include a lot of internal tools for asset generation – it relies on other Creative Cloud applications for this task. Flash Professional and Edge Animate make a great pairing due to these facts – as the new release allows us to generate and inject Edge Animate specific sprite sheets.

flashprobunnyFirst, open the FLA document which includes the animation you want to convert to an Edge Animate sprite sheet. Right-click on the symbol within the Library you wish to use and choose Generate Sprite Sheet…

bunnyssThe Generate Sprite Sheet dialog will appear and present us with a bunch of options. Since we are targeting Edge Animate, Adobe has actually built in a preset we can employ here (ad not have to deal with the minutia of sprite sheet generation). Choose Edge Animate as the data format and hit Export to generate the appropriate files.

ssfilesAlongside the original FLA document, we now have both a PNG file and an EAS file. The EAS file is hugely important as this is a data file which instructs Edge Animate to create a new symbol based upon the data extracted from Flash professional.

animateimportInside of our Edge Animate composition, go to the Library and locate the little plus sign next to Symbols. Click on this icon and choose Import Sprite Sheet… from the menu which appears.

easfilecheckedOnce we choose the PNG to import, the Define Sprite Tiles dialog appears. This dialog allows us to define both rows and columns for our sprite sheet – and make other adjustments which we may need to make depending upon the data format of our sprite sheet. However… we don’t need to deal with all that as Flash Professional generated an EAS file for us as well! Be sure and select the Load an EAS file option and the ability to do further edits to the tiles will all become disabled. This is because we have the precise data we need inside the EAS file itself! Hit Import to continue.

newsymbolWe now have a new symbol within our Library which has been generated from our Flash Professional sprite sheet! This is just a normal Edge Animate symbol at this point which can be used on the Timeline, employ Playback Actions, have Filters applied to it, et cetera… Note that since sprite sheets (by their nature) are bitmap images… scaling the symbol will produce visual artifacts.

If you want to use vector-based output from Flash Professional within Edge Animate – have a look at my post about exporting SVG!

sstimelineIf you are curious as to how this was all achieved by Edge Animate – have a look at the symbol timeline to see all of the various keyframes which have been established to modify the clipping properties… revealing only one frame at a time to create this animated content.