Richard Humphreys

Motion in life and web


Demo post 2

Creating a demo post to have more content for wordpress development

Leave a Comment >>

Demo post 1

This is a demo post

Leave a Comment >>

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.

  • Animated GIFs
  • Browser Plugins like Flash Player and Unity Web Player
  • Pure CSS Animation
  • CSS/DOM Animation with JavaScript
  • Video
  • GFY
  • HTML Canvas Animation with JavaScript

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() {

	// Layer 1
	this.shape = new cjs.Shape();"#000000").setStrokeStyle(3)

	this.shape_1 = new cjs.Shape();["#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)

}).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() {

	// Layer 1
	this.shape = new cjs.Shape();"#000000").ss(3).p("AZAtgIAAbDQAAAygjAiQgjAigzAAIxHAAQiUhogpjuQgojpA9l4QBkpjh1mXIUAAAQAzAAAjAjQAjAjAAAygAhMgfQA8n1lXnEIxgAAQgzAAgiAjQgjAjAAAyIAAbDQAAAyAjAiQAiAiAzAAIUGAAQgriMABh3QABheAfh4QAriRAXhXQAqieATiZg");

	this.shape_1 = new cjs.Shape();["#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");

}).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?

  • Animate lets you load and animate raster images, like jpgs and pngs.
  • Let’s you load and control sound.
  • Let’s you export sprite sheets for better performance when vectors are not needed.
  • Supports web fonts through Adobe Typekit.
  • Let’s you “morph” shapes as part of the animation.
  • Has “bones” to control parts that are related to each other (like arm to wrist to hand)
  • Has a well documented JavaScript API (createjs) for developers.
  • Since the files it builds are on web standards, it plays well with existing code bases (like jquery or angular)
  • Exports high quality video that plays the timeline and/or plays based on code.
  • A packaging system for ease of implementation in epub and applications like Adobe Dreamweaver or Muse.
  • …and much more

What doesn’t it do? (yet ?)

  • The HTML export does not yet support imported video.
  • Does not yet support DOM animations (moving HTML elements)
    The underlying javascript does, but the Animate CC application does not yet have a mechanism of creating these.
  • Support for better SEO features and Accessibility are tricky with <canvas>
    (The vast majority of animated features done in any technology are Accessibility nightmares)

None of this includes that you can still make…

  • Classic Flash SWFs (with all their features… and new ones)
  • AIR applications for desktop deployment.
  • Mobile AIR applications for iOS app store or Android Play

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.


Tags: , , ,

Leave a Comment >>

State of Web Animation Part I

A few months back I did a presentation for the Chicago Adobe Users Group that I co-manage. My presentation was one of two that evening. Unfortunately, due to technical difficulties, the first speaker’s presentation was missing the screen share.

His name is Kelly McCormack, and his personal site can be found here.

His presentation was an overview which discussed the many options for modern (post flash player) animation on the web. I’ll be talking about many of these things in upcoming posts. (Things like CSS animation, transforms, transitions, GSAP, etc.)

My presentation was a quick introduction to the html <canvas> tag and particularly to the createjs library, as well as the use of Adobe Flash Pro to produce HTML/canvas based animations. Being that it was only an hour long, it is just a quick overview. I plan to put together a series of smaller, step by step examples for you to learn from.

Here’s the first video (from the AUG presentation).

Leave a Comment >>