Create Interactive HTML5 Animations with Adobe Edge Animate

Explore everything from A-Z about creating HTML5 animations and interactive content within Adobe Edge Animate.
4.3 (32 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.
3,974 students enrolled
Start Learning Now
  • Lectures 50
  • Length 5.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 1/2015 English

Course Description

Adobe Edge Animate lets web designers and developers build interactive HTML animations for web, digital publishing applications, rich media advertising and more, reaching both desktop and mobile browsers because it produces HTML5 content.

Learning how to do full HTML5 and JavaScript programming can be a daunting task unless your able to spend hours learning how to do all the programming by hand. Adobe Edge Animate is like Flash for HTML5. Adobe Edge Animate allows you to quickly build custom web animations and interactive content that can be played on any device.

Students of this course will learn in this session the basics Edge Animate from UI elements to basic animations and how to make your content interactive. This gives the developer a WYSIWYG environment to build custom mobile compatible animations and interactions while still having the flexibility of programming your code by hand. You can even do most of the interactivity without even knowing any code.

What are the requirements?

  • Some basic Javascript will help

What am I going to get from this course?

  • Navigate Adobe Edge Animate Easily
  • Build HTML5 Animations in Edge Animate
  • Build Interactive Content in Edge Animate
  • Build Interactive Content for iBooks and Digital Publishing Suite
  • Publish your HTML5 Content for Web and Mobile
  • Use GreenSock Animations Within Edge Animate

Who is the target audience?

  • Anyone interested in building HTML5 animations
  • Anyone interested in build interactive HTML5

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: Introduction

What is Adobe Edge Animate? What kind of files does Edge Animate produce? In this video we explore what Edge Animate is and how you can get Edge Animate and install Edge Animate on your own computer to start creating HTML5 content.


In this video we explore the different user interface parts of Adobe Edge Animate and how we use these sections during development.

Section 2: Getting Started

In this video we learn how to start a new Adobe Edge Animate project and save the project files for later reference and use.


In this video we learn how to adjust the Adobe Edge Animate stage size to allow for more content or less content.

Section 3: Edge Animate Native Tools

In this video we explore how to use the shape tool to create different shapes and how to manipulate those shapes in various ways to adjust the look/feel of the shape.


In this video we explore how to change colors, add gradients and how to manipulate other properties to our shapes within Adobe Edge Animate.


In this video we explore how to use the text tool within Adobe Edge Animate and the various properties that can be used with the text tool. You will know how to insert text into any Edge Animate project.


In this video we will explore the remaining tools within the Edge Animate tool bar such as the zoom tool, the hand tool and more.

Section 4: Edge Animate Panels

In this video we will explore the elements panel within Adobe Edge Animate, what it is used for and how you can manipulate content on your Edge Animate stage using the elements panel.


In this video we will explore how the library panel is used for storyline media assets such as images, audio files, symbols and video files.

Section 5: Working with Images

In this video we will explore how to use PNG images within your Adobe Edge Animate projects.


In this video we will explore how to use the SVG image type to use images that are vector based and do not distort when enlarged within Edge Animate.

Section 6: Animation

In this video we explore the basics of Edge Animate's animation capabilities and how you can insert manual keyframes and adjust properties to create animations.


In this video we explore how the auto-keyframe and auto-transition features within Edge Animate speed up animation development.


In this video we explore using the Pin tool within Edge Animate to speed up animation development time.


In this video we explore how to add easing to your animations and how this can create realistic effects to your Edge Animate animations.


In this video we will explore how you can copy and paste animations from one object to another and how you can insert and use multiple keyframes to create more complex animations.


In this video I explore what your challenge is going to be for the animation section.


In this video we explore what how the challenge was completed so you can compare your results.

Section 7: Timeline Controls

In this video we explore how you can loop your animations for various effects.


In this video we explore how labels on your timeline can come in handy for organizing animation sections and how you can use them to jump to certain points in your timeline.

Section 8: Working with Symbols

Learn how to create and use symbols within Adobe Edge Animate. Symbols can have nested timelines that allow you easily update multiple uses of symbols with one change. Symbols can also be used as buttons that can be shared with other projects.

Creating a Button Symbol
Button Challenge
Exporting and Importing Symbols
Section 9: Building Responsive Projects and Coding within Edge Animate
Formatting and Updating Text Fields Through Code
Responsive projects
Hiding and Showing Stage Objects
Updating CSS values through code
Adding responsive code on the CompositionReady event
Using the different code windows
Section 10: Using Edge Animate Code Hints
Playback and timeline control hints
Open link code hints
Hide and show code hints
Saving your code snippets for later use
Section 11: Coding within Edge Animate
Referencing and object on the stage
What is a variable?
Working with local variables
Getting and setting global variables
Conditional coding: if and else statements
Challenge: Variables
Solution: Variables
Challenge: If statements
Solution: If statements
Section 12: Working with Older Browsers
*NEW* Edge Animate Older Browser Compatibility
*NEW* Adding a Pre-loader
Section 13: Publish Settings
*NEW* Web Settings
*NEW* Animate Development Package (OAM)
*NEW* iBooks or OS X
Section 14: Conclusion
You're not done yet. More to come...

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Jeff Batt, Head Trainer at Learning Dojo

Jeff has 10+ years experience in the digital learning and media industry. Currently he CEO and Head Trainer/Sensei at Learning Dojo, a company dedicated to training you to become a software ninja in a variety of software eLearning and web related. Jeff has also been the Product Development Manager for eLearning Brothers with responsibility for the design, development, and management over their world-class digital learning templates library building templates in Storyline, Studio ’13, Captivate, Adobe Edge Animate, Lectora, HTML5, Flash and more. Prior to his work at eLearning Brothers, Jeff was the Design & Professional Services Manager for CallidusCloud’s online eLearning authoring tool Litmos Author. Jeff is a regular conference speaker and industry leader regarding eLearning technologies such as TinCan API (xAPI), Articulate Storyline, Adobe Edge Animate, Captivate, Camtasia, HTML 5, and Flash.

Ready to start learning?
Start Learning Now