Produced by KelbyOne

Animation Using the New Adobe Edge

Tom Green demonstrates the abilities of Adobe Edge, a new web motion and design tool. In this tutorial series, Tom creates an animation based on the logo.

Download a free trial of Adobe’s Edge software from

Download the images to follow along with these tutorials by clicking here

Part 1

Open Edge, import the background image and some of the animation elements from the folder provided.

Part 2

Get everything moving with keyframes, the mark, the playhead, and some easing.

Part 3

Continue creating the animation by keyframing location, opacity, rotation and easing.


  • Christine says:

    why does the A bounce but the L does not bounce? they’re coming from the same place…

  • Tom Green says:

    The simple answer is because I did not add the easeOutBounce transition to the L.

  • Neil says:

    Hello Tom,
    Thanks for the info, very good tutorial. When can we hope to have the remainder?

    Kind Regards

  • Roberto says:

    I can be pretty dense sometimes, so forgive me if the answer to my question is obvious to everyone else, but what does Edge give me that Flash doesn’t? Frankly, Edge looks like a dumbed-down version of Flash.

  • JohnW says:

    To be honest, I would agree with Roberto: I can’t see anyone wanting to use something that outputs stuff that Flash was doing back in the days of version 1 or 2.

    Don’t forget the end user doesn’t care about the technology that goes into an animation – they just won’t be interested, and that applies to people that pay for websites and applications to be built.