Create HTML5 Games Using Adobe Animate

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.

• Introduction 06:47

  • 1: Welcome to the course 01:00
  • 2: Introduction Preview 01:21
  • 3: An overview of the Adobe Animate IDE 04:26

• Drawing with Adobe Animate 16:25

  • 4: Layers, the timeline and sketching using the Brush Tool 06:07
  • 5: Using the Line Tool 06:11
  • 6: Object drawing mode 04:07

• Animating with Adobe Animate 30:22

  • 7: Using Downloaded Assets Preview 04:15
  • 8: Character Rigging with the Bone Tool Preview 06:52
  • 9: Creating a walk cycle for a boned character 05:31
  • 10: Tweening 09:34
  • 11: MovieClips or Graphics 04:10

• Adding Interactivity 47:33

  • 12: Publishing 07:41
  • 13: Using github 03:51
  • 14: Using Simple Goto Commands Preview 10:36
  • 15: Adding an button on click event 04:29
  • 16: Adding a master Game controller class 05:37
  • 17: Working with Sounds Preview 06:52
  • 18: The CreateJS website 03:27
  • 19: What have you learned? 05:00

• Developing a Game Step by Step 35:01

  • 20: Step 1: Creating the assets and setting up the code 07:53
  • 21: Step 2: Moving the Ball and Adding Scoring Preview 14:16
  • 22: Step 3: Hit testing, lives and new game panel 08:12
  • 23: Step 4: Adding a character 02:40
  • 24: What have you learned? 02:00

• A More Complex Example 1:06:27

  • 25: Overview of Space Cowboy 09:29
  • 26: Controlling the User Character Preview 08:39
  • 27: Endlessly scrolling backgrounds 03:25
  • 28: Controlling the Pod and the running Rikon 07:32
  • 29: Controlling the digging Rikon 10:07
  • 30: Controlling the alien 06:30
  • 31: Firing bullets 06:16
  • 32: Handling the user interface 05:22
  • 33: Finishing up. Exporting as texture, using WebFonts and adding sound effects 09:07

• Using a Physics Engine 17:25

  • 34: Introducing the Matter.js physics engine 00:56
  • 35: Creating a simple Matter.js example 08:33
  • 36: A simple example that uses physics 04:56
  • 37: What have you learned? 03:00

• Conclusion 02:45

  • 38: Top ten key points when creating a HTML5 game with Adobe Animate CC 02:03
  • 39: Bonus Lecture 00:42

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.

• 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

• You'll need Adobe Animate CC

• Knowledge of basic Javascript

Currently there are no Q&As for this course. Be the first to ask a question.

Reed courses certificate of completion

Digital certificate - Included