Adobe has the Edge! (HTML5 Animations Made Easy)

Adobe has the Edge! (HTML5 Animations Made Easy)

22:05 15 January in Adobe Edge Animate


The past few days I have been trying to recreate a Flash eLearning Course into HTML5 using Adobe Edge. As we all know, Flash seems to be less and less of a solution for mobile devices, so I have been on a personal quest to find a solution that would work for some of my clients.

I have been testing out many different HTML5 animation tools like Adobe Edge, Tumult Hype and Google’s Swiffy¬†which will convert Flash into HTML5 content right inside of Flash.

All these seem exciting but my greatest feeling so far is all these options are still far from what Flash can do. However, the world seems to be going the way of HTML5 so I figured I would stay ahead of the game and learn all that I could about HTML5.

This blog will share what I find out about the different tools as I learn and explore these tools I will share what I like and dislike about the tools. I will also be creating some comprehensive tutorials on how to use all the different tools to help people make an informed decision. As I learn I plan on updating blog posts and adding content so pay attention to updates below.

From what I have been able to use so far of Adobe Edge, I have been fairly impressed with what it can do and am excited to see it grow as a tool. I first learned Tumult Hype which is also a HTML 5 animator and have been really happy with it. It is Mac-based only but has some pretty awesome features which I will review at a later point.

Edge has some features that make it stand out a little more in my opinion. Here are just some of the things that gives Adobe Edge the edge over other HTML 5 editors.

1. Easing – While Tumult has easing capabilities they seem harder to find than they do in Edge. Also Edge has more choices for easing. Take a look at this screen shot for the easing options in Edge.

Edge Easing Capabilties

List of Adobe Edge easing capabilities.

Now to be fair, let’s compare this to Hype’s easing choices. I am hoping Hype will come out with more easing presets.

Tumult Hype's easing choices

Tumult Hype Easing

Don’t get me wrong, I love working with Hype but Adobe seems to have the edge on easing. One thing I did notice is they use jQuery for their animations.

2. Time Span for Animations – One thing that I have already grown to love in Adobe Edge is the timeline span. This allows you to select a certain area of the timeline your animation will take place in.

Adobe Edge timeline span

One reason I love this is I can move the bottom arrow to where I want the timing to end and move the red playhead to where I will be changing the animation and it will automatically add two key frames one at the end of that span and one at the beginning. The red playhead will animate where I move the object to and the other will be where I had the object before I moved it. Seems to speed up animations tremendously.

3. Color Timelines – Although this seems to be a small thing I think it helps when animating along the timeline. I wish Flash had this feature. Instead of all your layers and animations being the same color blue like it does in Flash, Edge will automatically add different colors to each layer. This makes it easier to read layers.

Adobe Edge Timeline

So not only can you easily see within your timeline but you can quickly match up your animations to the color on the left hand side within the layer.

Those are just some quick things I thought I would share. There are many features I will share as I learn them. While all tools have their own advantages, I am still hoping a tool comes out for HTML5 that allows you to time things to audio. Adobe does mention in their FAQs that will come down the line, but I am feeling the need for it now.

I will be doing a full review later as well as full training on Adobe Edge that you will be able to access at no cost. I will also be reviewing Tumult Hype and it’s advantages compared to Adobe Edge, which does have some different advantages over Edge.

Be Sociable, Share!

Jeff Batt
  • Arjan 10:49h, 09 January Reply

    Hi, I found your blog posting while trying to decide which to use, Edge or Hype. I am particularly interested in your comment about the timeline span in Edge… I can’t seem to get that working… Where do you get the bottom arrow from? In my version 1.0.1. there is none.
    Keep up the good work!

Post A Comment