Navigation

Getting started with Edge Animate

By Sam Piggott | Resources, Web Design | Mar 25, 2013

In this tutorial, we’ll be getting started with Adobe’s new animation tool, Adobe Edge Animate. Edge Animate harnesses the power of HTML5 animation, and allows the user to create dynamic, exciting web-based animations in a quick, easy and fun way, using a user-friendly timeline-based interface as opposed to blocks of daunting code.

In our first video for Edge Animate, “Getting Started”, we’ll be constructing our first animated banner. You’ll learn the basics of becoming familiar with Edge’s interface, as well as the following handy techniques to get you started on creating your own animations: using the key framing tools to bring your text and images to life; harness animation easing techniques to accelerate your elements on and off screen; grouping separate objects as an element, then animating them at the same time; we’ll also use actions to create a clickable button that takes your visitor to your desired page.

Once you’re finished, you’ll be able to apply these techniques to your own creations, allowing you to produce your own dynamic web elements.

 

Have you tried Adobe Edge Animate? How useful did you find it? Let us know in the comments.

Share this post
Comments (no login required)
  • http://www.facebook.com/brolsta10 Bryan Rolstad

    how does your mouse move so fast? hahaa

  • stacey

    Thanks for sharing, I have downloaded edge, but have not had the chance to “play” with it yet. now I’m super excited too!

    • http://twitter.com/Sam_Piggott Sam Piggott

      Hey Stacey! You’re right to be excited; Edge is fantastic! The great thing is that there’s so much more to learn from it; you’ll have to show me what you end up creating!

      Good luck!

  • steve w

    Not a competitor to Flash! With the exception of video Apple killed Flash a while back. I think it’s ironic to see people get all googly-eyed over technology that was in place with Flash many years ago. Too bad Adobe couldn’t address the security concerns because it still blows the doors off any of these Canvas tricks.

  • http://www.facebook.com/bigwigtom Thomas Puckett

    I find this program much more intuitive than Flash. I wouldn’t say it’s a Flash killer because, frankly, Flash is already dead… or at least on life-support. But I expect big things from Edge as the program begins to mature. This is my first attempt at a relatively complex animation using the program: http://edgetest03.businesscatalyst.com/index.html

    • http://twitter.com/Sam_Piggott Sam Piggott

      Thomas – I agree with you that Flash is certainly on its last legs. I think until the majority of flash banner advertisements phase out, and browsers develop to support HTML5/CSS3 animation (IE6-8 still trailing, I believe), Flash will still be used in production.

      Your example, by the way; fantastic use of Edge’s font support, and love the animation. Great work! :)

      • http://www.facebook.com/bigwigtom Thomas Puckett

        Thanks Sam!!

  • Roger Kokos

    Good and clear tutorial, thanks for sharing