Getting started with Edge Animate

Default avatar.
March 25, 2013
Getting started with Edge Animate.

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.

Sam Piggott

Sam Piggott is a young digital designer and self-confessed jack-of-all-trades from London, UK. When he's not designing/coding/drinking copious amounts of coffee, Sam loves learning new software and air-drumming to whatever's on Spotify. Follow him on twitter @Sam_Piggott.

Read Next

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…

How to Write World-Beating Web Content

Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…

Exciting New Tools for Designers, April 2024

Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…

How Web Designers Can Stay Relevant in the Age of AI

The digital landscape is evolving rapidly. With the advent of AI, every sector is witnessing a revolution, including…

14 Top UX Tools for Designers in 2024

User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…

What Negative Effects Does a Bad Website Design Have On My Business?

Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…

3 Essential Design Trends, April 2024

Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…

How to Plan Your First Successful Website

Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…

15 Best New Fonts, March 2024

Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…