Create Interactive HTML5 Animations with Adobe Edge Animate
4.5 (50 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.
5,108 students enrolled
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.5 (50 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.
5,108 students enrolled
Created by Jeff Batt
Last updated 2/2015
English
Price: Free
Includes:
  • 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
Requirements
  • Some basic Javascript will help
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.

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
50 Lectures
05:25:07
+
Introduction
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
05:24

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
12:09
+
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
06:20

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
08:12
+
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
13:40

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
09:37

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
07:05

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
01:54
+
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
02:35

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
05:54
+
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
10:32

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
03:13
+
Animation
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
12:42

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
04:43

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

Using the Pin Tool to Animate
05:48

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
04:41

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
08:56

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

Animation Challenge
01:45

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

Challenge Review
02:52
+
Timeline Controls
2 Lectures 14:57

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

Looping Your Timeline
04:15

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
10:42
+
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
11:49

Creating a Button Symbol
13:32

Button Challenge
00:28

Exporting and Importing Symbols
02:02
+
Building Responsive Projects and Coding within Edge Animate
6 Lectures 48:41
Formatting and Updating Text Fields Through Code
06:38

Responsive projects
07:32

Hiding and Showing Stage Objects
06:51

Updating CSS values through code
08:39

Adding responsive code on the CompositionReady event
02:18

Using the different code windows
16:43
+
Using Edge Animate Code Hints
4 Lectures 18:44
Playback and timeline control hints
06:12

Open link code hints
05:19

Hide and show code hints
03:41

Saving your code snippets for later use
03:32
4 More Sections
About the Instructor
Jeff Batt
4.5 Average rating
324 Reviews
9,554 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.