Create HTML5 Games Using Adobe Animate

Name: Create HTML5 Games Using Adobe Animate
Rating: 4.1 (135 reviews)

Make resolution independent HTML5 games using Adobe Animate CC

Created byNicholas Lever

Last updated 12/2024

English

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.

Coding Exercises

This course includes our updated coding exercises so you can practice your skills as you learn.

Course content

8 sections • 38 lectures • 3h 32m total length

Welcome to the course0:16
Note about using latest version of Animate0:09
JavaScript in 12 Easy Lessons - e-book0:28
Introduction1:20
A short introduction to the course.
An overview of the Adobe Animate IDE4:25
A short overview of the main features of the Adobe Animate interface.

Using downloaded assets4:14
Character Rigging with the Bone Tool6:51
Using the Bone Tool to create a character that can be easily animated.
Creating a walk cycle for a boned character5:30
How to create a walk cycle for a boned character.
Tweening9:34
Tweening using classic and motion techniques. Including handling easing.
MovieClips or Graphics4:10
When to use Graphics, MovieClips and Buttons.

Publishing7: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.
Using GitHub3:51
Using simple goto commands10:35
In this video we look at adding code for the first time. Initially just using Animate and the action panel.
Adding an button on click event4:29
We look at how you can add an on click event to a Animate Button.
Adding a master Game controller class5:37
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.
Working with sounds6:52
How to work with sounds. Including linkages, looping, volume and panning control.
The CreateJS website3:27
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.
Controlling a MovieClip
What have you learned?

Step 1: Creating the assets and setting up the code7:52
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 2: Moving the ball and adding scoring14:15
In step 2 of creating a pong game we move the ball, including checking the walls and bouncing off them.
Step 3: Hit testing, lives and new game panel8:11
Step 4: Adding a character2:39
Adding eye-candy to the game using an animated character.
What have you learned?

Overview of Space Cowboy9:28
Controlling the user character8:38
Endlessly scrolling backgrounds3:24
Controlling the Pod and the running Rikon7:32
Controlling the digging Rikon10:06
Controlling the alien6:30
Firing bullets6:15
Handling the user interface5:21
Finishing up. Exporting as texture, using WebFonts and adding sound effects9:06
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.

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

Create HTML5 Games Using Adobe Animate

What you'll learn

Explore related topics

Coding Exercises

Course content

Introduction5 lectures • 7min

Drawing with Adobe Animate3 lectures • 16min

Animating with Adobe Animate5 lectures • 30min

Adding interactivity7 lectures • 43min

Developing a game step by step4 lectures • 33min

A more complex example9 lectures • 1hr 6min

Using a physics engine3 lectures • 14min

Conclusion2 lectures • 3min

Requirements

Description

Who this course is for: