Wishlisted Wishlist

Please confirm that you want to add Create Interactive HTML5 Animations with Adobe Edge Animate to your Wishlist.

Add to Wishlist

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 (40 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.
4,322 students enrolled
Created by Jeff Batt
Last updated 2/2015
  • 5.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
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
View Curriculum
  • Some basic Javascript will help

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.

Who is the target audience?
  • Anyone interested in building HTML5 animations
  • Anyone interested in build interactive HTML5
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 50 Lectures Collapse All 50 Lectures 05:25:07
2 Lectures 17:33

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.

Edge Animate Overview

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

Exploring the Adobe Edge Animate UI
Getting Started
2 Lectures 14:32

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

Starting a New Project

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

Adjusting the Stage Properties
Edge Animate Native Tools
4 Lectures 32:16

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.

Using the Shape Tool - Part 1

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

Using the Shape Tool = Part 2

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.

Using the Text Tool

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.

Additional Tools
Edge Animate Panels
2 Lectures 08:29

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.

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.

Library Panel
Working with Images
2 Lectures 13:45

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

PNG Files

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.

SVG Files
7 Lectures 41:27

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.

Using Keyframes to Animate

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

Using the Auto-Transition Feature to Animate

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

Using the Pin Tool to Animate

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

Adding Easing to Your 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.

Copy and Paste Animations and Create Animations with Multiple Keyframes

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

Animation Challenge

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

Challenge Review
Timeline Controls
2 Lectures 14:57

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

Looping Your Timeline

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.

Timeline Labels
Working with Symbols
4 Lectures 27:51

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 and Using Symbols

Creating a Button Symbol

Button Challenge

Exporting and Importing Symbols
Building Responsive Projects and Coding within Edge Animate
6 Lectures 48:41
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
Using Edge Animate Code Hints
4 Lectures 18:44
Playback and timeline control hints

Open link code hints

Hide and show code hints

Saving your code snippets for later use
4 More Sections
About the Instructor
4.4 Average rating
235 Reviews
8,372 Students
7 Courses
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.

Report Abuse