Learn the Fundamentals of Adobe Edge Animate

Learn the fundamentals behind using Adobe Edge Animate.
4.4 (7 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
149 students enrolled
Instructed by Tom Green Design / Design Tools
25% off
Take This Course
  • Lectures 56
  • Length 4.5 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 11/2013 English

Course Description

Adobe Edge Animate is a robust motion graphics and interactivity tool designed as a motion graphics tool that allows you to create and deploy motion graphics and interactive projects to the web and DPS publications., In this 5.5-hour course, author and teacher Tom Green shows you what it can do. You’ll learn how to create animations, add moving elements to a static HTML page, how to create and use symbols and add web fonts to your Animate projects. You’ll also see how Animate integrates with Photoshop, Illustrator, and Fireworks and how to use to use the Animate Code panel to add interactivity, looping, and code to your projects. This quick but rich course finisheds up by showing you how to add your Animate compositions to InDesign CS6 projects and even iBooks.

What are the requirements?

  • An Adobe Creative Cloud subscription.

What am I going to get from this course?

  • By the end of this course, you will:
  • Understand the role of Edge Animate in the web motion graphics workflow
  • Create compelling Animate compositions from banner ads to adding Animate compositions to ePub layouuts.
  • Master the Edge Animate interface as you create compelling animations.

Who is the target audience?

  • Web Designers and graphic artists looking to add web motion and interactivity to their projects.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Getting to Know Edge Animate

Welcome to Edge Animate, a new motion graphics tool for the Web. In this video you'll learn what you can do with Edge Animate, see some sample projects, and get a good idea of the potential fun you can have.


The key to a successful Animate composition is an understanding of the workflow. In this video we will walk through the process of creating a composition so you know the basic steps involved.


There is a lot more to creating an Edge Animate composition than simply moving things from here to there. This lesson will walk you through the process of creating a composition that involves motion, tweening, and the use of eases.


In this anatomy lesson we'll move out of the interface and look at the files that are created when you save an Animate project. It is obvious that Edge lives in an HTML5 universe, but it is also a compilation of JavaScript, JQuery, CSS3, JSON, and HTML. In this video we'll look at where these files are located and what they do.

Section 2: The Edge Animate Interface

When you launch Animate, the first screen you will see is the Start screen. You can access many features of the application through this screen, as you'll see in this video.


Animate, like many Adobe products, uses a panel layout for its interface. In this video we will tour the panels and discuss how to customize your workspace.


In this video we'll walk through the menus in Animate with an emphasis on how they can boost your productivity.


Master the Animate timeline and you master Animate. In this lesson we'll dive deep into the Animate timeline, paying particular attention to transition strips, keyframes, managing the timeline, and adding eases. You'll also learn how to change the timeline units from milliseconds to a more manageable increment.


Everything that happens on the Animate timeline is a direct result of changing the properties of a selection. In this lesson you will learn how to move, scale, distort, rotate, and manipulate of other properties of a selection. We'll also look at the Properties panel, which is extremely useful for working with properties.


One of the great features of CSS3 is the ability to manipulate elements on a web page. In this lesson you will learn how Animate allows you to visually manipulate elements. You will also discover the intimate relationship between the Timeline and Elements panels.


Though Animate contains what at first glance appears to be a rudimentary set of tools, upon closer inspection you will discover that this isn't really the case. In this lesson you will see how to create shapes and add text, strokes, and fill colors to objects drawn on the Stage.


One of the more unique features of Animate is the collection of in-app lessons that is installed with the application. In this video you will learn how open the lessons, walk through a particular lesson, and then apply what you have learned to your composition – all without ever leaving Animate.

Section 3: Animation Basics in Edge Animate

Keyframes in Animate define how objects move or change over time. In this video we'll look at keyframes: how to add them, the relationship between the playhead and keyframes, and how to use the Properties panel to create rather drastic changes to selected objects.


Animate is a time-based application. This means that the Animate playhead controls how things change in a composition. In this video you will learn how to control the playhead, use it to set the start and end points of motion, and work with the timeline controls that manage the playhead.


One of the most unique motion graphics tools in the entire Adobe product line up is the Pin, which is found only in Animate. In this lesson you will learn how to use this invaluable tool to create motion or property changes on the Animate timeline.


In the real world, things don't move at a constant speed or stop and start abruptly. In this video you will learn how to use easing to add a degree of reality to objects in motion. You will see how to apply one of the many easing effects in the Easing panel, the difference between ease in and ease out, and how to apply or change an ease to an object's motion.


Hiding or revealing an object on the Stage uses the clipping property of the CSS standard. In this video you will learn how the Clip area of the Properties panel can be used to hide or reveal an element's contents.


Motion or property changes on the timeline are shown through the use of a transitions strip. In this lesson you will see how to move a transition on the timeline, how to decrease or increase a transition's duration, and how to apply the properties in one transition to other elements on the timeline.


n this lesson you will learn not only how to test a composition or effect on the timeline but how to also test the composition in a browser.

Section 4: Advanced animation in Edge Animate

In this lesson you will discover the power of parent/child relationships between elements in the Elements panel. You will learn how to make one element the parent of two others (nesting) and have the properties of the parent apply to the children. You will also see how to apply changes that are independent of the parent to the child objects.


In Edge Animate, symbols enable you to create reusable animations that have their own independent timelines. In this lesson you will learn how to create a symbol, add a symbol to the Animate timeline, and edit a symbol in place. We will then take that one symbol, turn it into a starfield, and manipulate the timing of each star to create twinkling stars in the night sky.


Many video applications (and Flash) allow you to output content as a sequence of PNG images. In this lesson you will learn how to bring that sequence into Animate and use the Display property in the Properties panel to create a "flipbook" animation.


Using CSS sprite sheets for animation in a browser has become quite common in the web design community. In this lesson you will see how to export a Flash symbol containing an animated walk sequence as a sprite sheet that can be used in Edge Animate.


In this lesson you will learn how to put text in motion and how to manipulate text properties in exactly the same way you would manipulate the properties of any other content in Animate.

Section 5: Create Edge Animate Content

Photoshop is the imaging tool of choice for many web motion graphics pros. In this lesson you will learn how to use Photoshop prepare a multilayer PSD image with transparency for import into Edge Animate.


Line art created for Animate must be a scalable vector graphic (SVG) and the best application for creating SVG files is Illustrator. In this lesson you will learn how to use Illustrator to create a fast-loading SVG graphic for Animate.


Adobe Fireworks is a screen-based graphics application that is ideally suited for creating the optimized JPG and PNG images used by Animate. In this lesson you will learn how a multilayer Fireworks document with transparency can be output to a series of PNG images with what seems to be nothing more than a click of the mouse.


Contrary to popular belief, Flash is alive and doing quite well, thank you. In this lesson you will see that there are a variety of ways of outputting Flash timeline animations in formats that can easily be used by Animate.


It is rather fascinating that Animate, in an industry that has embraced the modern browser, uses a preloader technology that is a throwback to the early days of the Web: the lowly animated GIF. In this lesson you will learn how to create a GIF file, import it into Animate, and then use that file as a preloader in an Animate composition.

Section 6: Typography and Edge Animate

Text is a primary communications medium and in this lesson we'll look at the various ways it can be added to an Edge Animate composition. You will learn how to manually enter text, bring in blocks of text, manipulate text blocks to achieve optimum line length, and even create multiple columns of text.


Once text is on the Animate Stage, formatting becomes critical. In this lesson you will learn how to choose a font, change the font color, and use all of the features of the Text area of the Properties panel.


Animate not only uses the fonts from the list in the Text area of the Properties panel, but also can use and display the web fonts available from Google. In this lesson you will learn how to choose a Google web font, add that font to Animate, and format text with it.


One of the great advantages of modern browsers is that they let designers move away from the standard web fonts and actually use custom fonts. In this video you will learn how to choose a font from TypeKit, Adobe's web font service, and how to add that font to your Animate composition.


When Adobe introduced the Edge Tools and Services, one of the major selling points was the inclusion of the web fonts service. In this video you will learn how to incorporate a font from this service into your Animate composition.

Section 7: Adding Interactivity to Edge Animate Compositions

In this lesson we'll look at the various ways of adding or editing code in Edge Animate, including the Code window, where the entire document object model can be edited.


The absolute basics of interactivity can be summed up in the phrase "action, reaction." In this lesson we'll explore this concept by attaching an event to a button and using the Script panel to decide what happens on the Stage when the user does something.


One of the more interesting code features in Edge Animate is the Snippets library. A snippet, as you will learn in this lesson, is a small piece of JavaScript code that can be added to the Code panel with nothing more than a mouse click.


Interactivity is driven by code, and Animate makes the coding process accessible for all skill levels. In this lesson you will see how to create interactive buttons, how triggers and labels work together, and how to use the JavaScript snippets included in Animate. You'll also learn how to add multiple snippets to an element and how to edit a snippet


In this lesson you will learn how to create timeline navigation by adding labels, triggers, and actions to your composition.

Navigating Animate Symbols

Symbols not only provide a powerful productivity boost, they can also be shared and reused in a variety of Animate projects. In this tutorial, inspired by Animate guru Simon Widjaja, you will learn how to create a generic, reusable button component and to write the code that changes the text in that symbol to reflect the symbol's purpose.

Section 8: Animate and the Web

Animate doesn't just create its own standalone motion graphics; it can also open an existing static HTML page and then put elements on that page into motion, as you'll see in this lesson.


One of the nifty features of Edge Animate is that it recognizes that not all users have a modern browser. In this lesson you will learn how to accommodate users of older browsers by taking a screenshot of the page and then creating a "down-level stage" that will appear if, for example, an Internet Explorer 7 user opens a page containing an Animate composition.


It is a fact of internet life that we have no control over a user's bandwidth and, as such, it could take a few seconds for an Animate composition to load into the browser. In this lesson you will learn how to deal with this by adding a preloader to your Animate composition, whether it's one that comes packaged with Animate or one you have created.


The endgame of the Animate process is outputting the composition. In this lesson you'll learn how to choose appropriate publish settings for use on the Web, in an Animate Deployment Package, or in an iBook.


Dreamweaver offers a very simple method of adding your Animate composition to a Dreamweaver document. In this lesson you will learn how to do just that and also what exactly gets added to the Dreamweaver document.


Animate composition can appear on anything from a smartphone or tablet to desktop monitor. In this lesson we will use the responsive web design features of Animate to make a project adjust to the width of the user's viewport.


Adding the Animate runtime to a document is a copy-and-paste process. In this lesson we will add the runtime to an HTML document and then place the Animate composition into an iframe added to a page element.

Section 9: Add a little "Wow" to Animate

this lesson you will see how to add interactive content from Google Maps to your Animate composition. You will discover that there is a lot more to this technique than simply copying and pasting the Google embed code into Animate.

Add YouTube content

Symbols can do a lot more than just provide an independent timeline. In this lesson you will learn how one symbol can be reused many times, how to control symbol playback on the main timeline, and how to create one symbol from many symbols.


When you need a preloader, you can just choose one of those included with Edge Animate, or you can add your own. In this lesson you will learn how to create a countdown timer in Flash CS6, output a Flash symbol as an animated GIF file, and use one of the Common Library items in Fireworks CS6 as an Animate preloader.


Though Animate is not usually considered a drawing tool, it can create some interesting visual effects. In this lesson you will learn how to create a variety of pillow buttons (buttons with gradients that mimic 3D) using the stroke and fill features of a rounded rectangle and the shadow features of the Properties panel.

Section 10: What's new in Edge Animate CC
Animate CC overview
Motion Paths
Add Animate content to Adobe Muse

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Tom Green, Teacher, Lecturer, Tututorialist

Tom has been teaching with the Interactive Multimedia Program at Humber College since 1995. He was appointed to his current full time faculty position in 2004.

Like all faculty in the program, Tom believes his students deserve to be taught by instructors who are regarded as experts in their field and whose knowledge of his subject is current with industry best practice. As such, Tom is the author of over 15 books with Pearson Education and friendsofED. Including such best selling books as Foundation Edge Animate, Foundation Flash CS5 for Designers, Foundation Flash CS3 Video and From After Effects to Flash:Poetry in Motion Graphics . He has also produced several online and DVD video training series for Lynda.com— Up and Running with HTML 5 Video – video2brain, InfiniteSkills and others.

He is also an Adobe Community Professional, a member of Adobe’s Higher Education Leader Program in the Post secondary aread and a member of the Product Advisory Boards for Edge Animate and Edge Reflow at the Adobe Corporation and the Camtasia Studio Advisory Board at TechSmith Corporation.

Tom is also in great demand as a speaker and regularly does presentations at major industry conferences around the world. These conferences include FlashintheCan, Spark Europe, TODCON, FITCHollywood, Adobe Max, Web Design World and Digital Design World. As well, Tom has conducted expert lectures at such Post Secondary institutions as Shenzhen Polytechnic, Rochester Institute of Technology, Pasadena Community College, Central Academy of Fine Arts in Beijing, Ocean University in Shanghai, University of Wisconsin, The Sloan Merlot Consortium, EMMA Foundation Master Classes for Post Secondary students in Hamburg, Germany and Toronto, and Red River Community College in Winnipeg.

Along with these industry efforts , Tom regularly contributes articles and tutorials to Layersmagazine.com, webdesign.tutsplus, the Adobe Design Center and the Adobe Developer Center. As well, Tom is a founding member of one of the largest Adobe User Groups in the world- FlashinTO.

Ready to start learning?
Take This Course