Adobe Animate CC is Here

Adobe Animate CCAdobe Animate CC is is here! What can we expect?

Adobe Animate CC

As many know, for over almost two decades, the main source of animation for the internet was the Flash Player (whether from Adobe or Macromedia). Despite problems over the years with SEO, accessibility and security, it has been a source of animation, rich internet applications, video, and games.

First, I would like to say, there are several options for animation on the web these days, and if you are planning to include animation or advanced interactivity, get to know the strengths a weaknesses of your options. What Adobe Animate CC is currently able to produce will not be a panacea. It is, and always will be, part of a larger set of solution options.

Here’s a short list of available options for animation (some interactive, some not). I will be talking about this list in a post next week.

As has been stated, Adobe Animate is a rebranding of Adobe Flash Pro. Why not just kill it? Why push an older technology that many people feel should be dead? They aren’t. What they are attempting to do is step away from the toxic brand that is “Flash”, so that people will notice the great work they have been doing with HTML5 for many years now.

Adobe Animate CC is the latest version of a mature toolset that lets designers and developers create complex animations, games, and interactive digital art with standards based technologies (HTML and JavaScript).

Here are the important questions…
Will it work on my iPhone? … YES
Will it work on my iPad? … YES
Will it work on Android device? … YES
Will it work on my desktop browser? … If it is less than 6 years old… YES
Is it easy to use? … With what it’s doing, I wouldn’t want to do it any other way.
Is it the best way to animate on the web for all my needs? … NO

In a nutshell, Adobe Animate produces JavaScript to draw into and interact with the HTML5 <canvas> tag. It does not require any plugins, and works in all modern browsers.

There are several tutorials on the internet, but here is a nice, concise one by Lucas Bebber, at the Adobe Dreamweaver Team Blog.  While all of this is great information to know, the biggest take-away from any article on working with the <canvas> tag, is… drawing, animating and interacting with a <canvas> element is tricky and time consuming for anything beyond the very basics… So you should use Adobe Animate CC.

Adobe Animate CC allows you to draw on a stage, using vector tools, or import from Adobe Illustrator to create them. Animate then takes those vector drawings and converts them to JavaScript draw commands for canvas.

Behind the scenes a drawing like this…

JPG image of drawn element from Illustrator

… becomes…

(lib.Logo = function() {
this.initialize();

// Layer 1
this.shape = new cjs.Shape();
this.shape.graphics.beginFill().beginStroke("#000000").setStrokeStyle(3)
.moveTo(160,-86.5)
.lineTo(160,86.8)
.curveTo(160,91.8,156.5,95.1)
.curveTo(153,98.5,147.9,98.5)
.lineTo(38.4,98.5)
.curveTo(23.6,88.1,19.5,64.3)
.curveTo(15.5,41,21.7,3.5)
.curveTo(31.7,-57.8,20,-98.5)
.lineTo(147.9,-98.5)
.curveTo(153,-98.5,156.5,-95.1)
.curveTo(160,-91.6,160,-86.5)
.closePath().moveTo(-7.8,-3.2)
.curveTo(-1.7,-53.4,-36,-98.5)
.lineTo(-148.1,-98.5)
.curveTo(-153.1,-98.5,-156.6,-95.1)
.curveTo(-160,-91.6,-160,-86.5)
.lineTo(-160,86.8)
.curveTo(-160,91.8,-156.6,95.1)
.curveTo(-153.2,98.5,-148.1,98.5)
.lineTo(-19.5,98.5)
.curveTo(-23.7,84.5,-23.7,72.7)
.curveTo(-23.6,63.3,-20.4,51.3)
.curveTo(-16.2,36.8,-13.8,28)
.curveTo(-9.6,12.2,-7.8,-3.2)
.closePath();
this.shape.setTransform(160,98.5);

this.shape_1 = new cjs.Shape();
this.shape_1.graphics.beginLinearGradientFill(["#CCE0F4","#C3DCF2","#A9D2EE","#80C2E7","#47ACDE","#1E9CD7","#0075BE","#005B97"],[0,0.063,0.173,0.306,0.467,0.569,0.867,0.996],-142.1,-79.2,127.9,71.4)
.beginStroke()
.moveTo(38.5,98.5)
.curveTo(23.7,88.1,19.6,64.3)
.curveTo(15.6,41.1,21.7,3.5)
.curveTo(31.7,-57.8,20,-98.5)
.lineTo(147.9,-98.5)
.curveTo(153,-98.5,156.5,-95.1)
.curveTo(160,-91.5,160,-86.5)
.lineTo(160,86.8)
.curveTo(160,91.8,156.5,95.1)
.curveTo(153.1,98.5,147.9,98.5)
.closePath()
.moveTo(-148.1,98.5)
.curveTo(-153.1,98.5,-156.5,95.1)
.curveTo(-160,91.8,-160,86.8)
.lineTo(-160,-86.5)
.curveTo(-160,-91.5,-156.5,-95.1)
.curveTo(-153.1,-98.5,-148.1,-98.5)
.lineTo(-36,-98.5)
.curveTo(-1.7,-53.4,-7.8,-3.2)
.curveTo(-9.6,12.3,-13.8,28)
.curveTo(-16.2,36.8,-20.4,51.3)
.curveTo(-23.6,63.2,-23.6,72.7)
.curveTo(-23.7,84.5,-19.5,98.5)
.closePath();
this.shape_1.setTransform(160,98.5);

this.addChild(this.shape_1,this.shape);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(-1.5,-8.2,329.8,206.7);

Animate CC then does one better. It compresses the draw commands to make the file smaller, like so…

(lib.Logo = function() {
this.initialize();

// Layer 1
this.shape = new cjs.Shape();
this.shape.graphics.f().s("#000000").ss(3).p("AZAtgIAAbDQAAAygjAiQgjAigzAAIxHAAQiUhogpjuQgojpA9l4QBkpjh1mXIUAAAQAzAAAjAjQAjAjAAAygAhMgfQA8n1lXnEIxgAAQgzAAgiAjQgjAjAAAyIAAbDQAAAyAjAiQAiAiAzAAIUGAAQgriMABh3QABheAfh4QAriRAXhXQAqieATiZg");
this.shape.setTransform(160,98.5);

this.shape_1 = new cjs.Shape();
this.shape_1.graphics.lf(["#CCE0F4","#C3DCF2","#A9D2EE","#80C2E7","#47ACDE","#1E9CD7","#0075BE","#005B97"],[0,0.063,0.173,0.306,0.467,0.569,0.867,0.996],-142.1,-79.2,127.9,71.4).s().p("AGAPZQiUhogpjuQgojpA9l4QBkpih0mXIT/AAQAzgBAiAjQAkAjgBAyIAAbDQABAzgkAhQgiAigzAAgA3HPZQgzAAgigiQgjghABgzIAA7DQgBgyAjgjQAjgjAyABIRgAAQFYHDg9H2QgSCYgqCdQgYBYgqCRQggB4gBBfQAAB2AqCMg");
this.shape_1.setTransform(160,98.5);

this.addChild(this.shape_1,this.shape);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(-1.5,-8.2,329.8,206.7);

The best part is, a designer does not have to know any of this. Adobe Animate CC does it all for them.

quick example.

Now, I would never suggest using Animate to create a non-interactive, still image like this one. That’s what jpg, png, webp, and svg are for.

Where Animate CC really shines is when things start to move.  While it is possible to animate <canvas> on your own, it is neither easy nor intuitive and visual.  Animate allows you to draw,  animate objects using a timeline, along paths, and morph shapes; all without writing code; and while writing standards based code for you.

Here’s an example of the same graphic as it fades an follows a path across the <canvas>.

So, for this simple example, I animated the earlier graphic, along a curved path and added a button to interact with the animation. The button has a hover effect if you are on a desktop system, and can be activated by touch on a mobile device. All this was done without writing a single line of my own code. Side note… the text has been converted to paths for fidelity of fonts when not using web-safe or webfonts. It took me longer to write this paragraph, than to produce the animation and interaction.

What else can it do?

What doesn’t it do? (yet ?)

None of this includes that you can still make…

Next post, I want to talk about the various pros and cons of the other methods of browser based animations. I will also be posting tutorials on Adobe Animate (as well as videos). Until then, go out and give Adobe Animate a try.

–Rich