Development
Game Development
Adobe Animate
Create HTML5 Games Using Adobe Animate
4.0 (59 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
348 students enrolled

Create HTML5 Games Using Adobe Animate

Make resolution independent HTML5 games using Adobe Animate CC
4.0 (59 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
348 students enrolled
Created by Nicholas Lever
Last updated 9/2019
English
English [Auto-generated]
Preview this course
Create HTML5 Games Using Adobe Animate
Current price: $23.99 Original price: $34.99 Discount: 31% off
5 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 3.5 hours on-demand video
  • 1 article
  • 1 downloadable resource
  • 1 coding exercise
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Create great looking games that do not lose any crispness if taken from mobile phone size to large screen TV.
  • Learn how to draw with Adobe Animate.
  • Learn how to animate with Adobe Animate.
  • Learn how to add interactivity to the output of a Adobe Animate animation.
  • Learn how to easily add physics to your games using Matterjs.
  • Pep up your Javascript skills with the latest ES6 syntax. It's easier to use.
Course content
Expand all 35 lectures 03:27:41
+ – Introduction
3 lectures 05:52
Welcome to the course
00:07

A short introduction to the course.

Introduction
Preview 01:20

A short overview of the main features of the Adobe Animate interface.

An overview of the Adobe Animate IDE
04:25
+ – Drawing with Adobe Animate
3 lectures 16:24

Introducing drawing and the importance of using layers.

Layers, the timeline and sketching using the Brush Tool
06:07

How to edit a line created with the line tool.

Using the Line Tool
06:11
Object drawing mode
04:06
+ – Animating with Adobe Animate
5 lectures 30:19
Using downloaded assets
Preview 04:14

Using the Bone Tool to create a character that can be easily animated.

Character Rigging with the Bone Tool
Preview 06:51

How to create a walk cycle for a boned character.

Creating a walk cycle for a boned character
05:30

Tweening using classic and motion techniques. Including handling easing.

Tweening
09:34

When to use Graphics, MovieClips and Buttons.

MovieClips or Graphics
04:10
+ – Adding interactivity
6 lectures 38:40

To view your animation in a browser you need to use publish in Animate. This video explains how to do this and the various options available.

Publishing
07:40

In this video we look at adding code for the first time. Initially just using Animate and the action panel.

Using simple goto commands
Preview 10:35

We look at how you can add an on click event to a Animate Button.

Adding an button on click event
04:29

As the code get's more complex it is advisable to use external files in this video we look at adding a ES6 class file to control the content.

Adding a master Game controller class
05:37

How to work with sounds. Including linkages, looping, volume and panning control.

Working with sounds
Preview 06:52

HTML5 Canvas exports from Adobe Animate CC use the CreateJS libraries to display the content. The CreateJS website is a very useful resource when creating games that use this pipeline. In this video we take a quick look at what is available.

The CreateJS website
03:27
Controlling a MovieClip
1 question
What have you learned?
5 questions
+ – Developing a game step by step
4 lectures 32:57

Introduction to creating a simple game using Adobe Animate. First we use the event 'press move' to allow the user to drag the bat with either a mouse or a touch event.

Step 1: Creating the assets and setting up the code
07:52

In step 2 of creating a pong game we move the ball, including checking the walls and bouncing off them.

Step 2: Moving the ball and adding scoring
Preview 14:15
Step 3: Hit testing, lives and new game panel
08:11

Adding eye-candy to the game using an animated character.

Step 4: Adding a character
02:39
What have you learned?
3 questions
+ – A more complex example
9 lectures 01:06:20
Overview of Space Cowboy
09:28
Controlling the user character
Preview 08:38
Endlessly scrolling backgrounds
03:24
Controlling the Pod and the running Rikon
07:32
Controlling the digging Rikon
10:06
Controlling the alien
06:30
Firing bullets
06:15
Handling the user interface
05:21

To complete our game we massively improve the performance by exporting as a texture. We add WebFonts so a user sees the same looking text as we do and we add sound effects using the techniques we learnt in section 4.

Finishing up. Exporting as texture, using WebFonts and adding sound effects
09:06
+ – Using a physics engine
3 lectures 14:23
Introducing the Matter.js physics engine
00:55
Creating a simple Matter.js example
08:32
A simple example that uses physics
04:56
What have you learned?
5 questions
+ – Conclusion
2 lectures 02:45
Top ten key points when creating a HTML5 game with Adobe Animate CC
02:03
Bonus Lecture
00:42
Requirements
  • You'll need Adobe Animate CC
  • Knowledge of basic Javascript
Description

Just a few years ago nearly all browser based games used Adobe Flash. This all changed when Steve Jobs refused to allow the Flash player in the iOS Safari browser and at the same time HTML5 introduced the Canvas with an api to allow fast sprite animations. Most developers have moved away from Adobe Flash, but Adobe Flash in its latest incarnation Adobe Animate can output content that is completely HTML5 compliant. What is more it is resolution independent, so when the output is resized it still looks great. Adobe Animate is targeted mainly at non interactive content. But there is nothing to stop the developer from using the output and some Javascript to create great looking HTML5 games.

The author has created Flash games for clients including the Mars Corporation, BBC, Johnson & Johnson and Deloittes. He is also the author of two books about using Flash for game development. In this course he shows how users familiar with Flash can use their existing skills to create great HTML5 games and takes developers unfamiliar with Adobe Animate through the details of using the drawing tools and animation tools to create the assets that will be used in a game. We also look at how it is possible to get free vector based graphics that can then be animated and used in a game.

Then the course takes the student through all the steps to create a simple game before moving onto a more complex example with a user interface and sound effects.

Having completed the course you will be able to control animations created in Adobe Animate using Javascript. Allowing you to create just about any game and you will even be shown how to add a physics engine to create games that use complex physics calculations to control the movement.

So what are you waiting for? Sign up now and start using this terrific tool to create some fantastic games. With a 30 day money back guarantee you have nothing to lose.

Who this course is for:
  • Developers wanting to understand how to use Adobe Animate CC.
  • Developers who want to create resolution independent HTML5 games.
  • Developers wanting to use a highly sophisticated development tool to create great content.
  • Developers wanting to add animation to their HTML5 games.
  • Developers wanting to learn tricks of game development from someone who has created hundreds of games.
  • Ex-Flash developers wanting to use their skills to create HTML5 games