Flash to Html5
5.0 (3 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.
467 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Flash to Html5 to your Wishlist.

Add to Wishlist

Flash to Html5

Use your existing knowledge in a new way
5.0 (3 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.
467 students enrolled
Created by William Clarkson
Last updated 4/2017
Curiosity Sale
Current price: $10 Original price: $25 Discount: 60% off
30-Day Money-Back Guarantee
  • 2.5 hours on-demand video
  • 7 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Know the basics of the Phaser Html5 library
  • Be able to put together Html5 banners
  • Be able to build their own Html5 games
View Curriculum
  • A basic knowledge of Actionscript and Flash. Some knowledge of Javascript is helpful.

For more than a decade Flash dominated in the world of internet game development. The rise of mobile changed all that. With this course, I will show you how to leverage the knowledge you learned in flash by applying it in a new way with Html5 using the Phaser library. Once with Flash, we were able to build once and publish everywhere, and now we can again! This course will match specific Flash tasks, like adding images to the library and stage, with the Html5 equivalents. We will then take the newfound knowledge and apply it to more building banners and games with code that will work equally well from laptop to smartphone! My goal is to help you learn to use your existing skills to make awesome Html5 content!

Who is the target audience?
  • This course is for Flash Developers who wish to transition to HTML5
Students Who Viewed This Course Also Viewed
Curriculum For This Course
68 Lectures
Setting up your Development Environment for HTML5
4 Lectures 05:08

This lecture contains a short overview of what we be covering in this course.

Preview 00:33

Let's go over some of the tools needed to write html5 code. Unlike Flash you can get everything you need free!

The tools needed

This lecture will show you how to set up the Xammp server on your computer. Setting up a local server saves a lot of time for development.

Set up a local server
Basic concepts
33 Lectures 01:06:19

Let's look at setting up the Html5 canvas, the equivalent to Flash's stage. 

Preview 05:41

The three main functions that will help you to build your Html5 content.

State Functions

Let me show you how to place your Html5 content anywhere on the page. 

Embedding to a web page

This lecture shows you how to change the background color of the stage.

Changing the background color

This lecture covers the JS equivalent of the trace function 

Using Trace

Here we cover role of scope in Phaser, which is a little stricter than it was in Flash.

Understanding Scope

Phaser has a virtual library similar to the one we used in Flash. Here we cover adding in an image.

Loading an image into the library

This lecture covers adding a sound to the library

Loading a sound into the library

This lecture covers adding a sprite sheet to the library. Sprite sheets can define animations and will take the place of movieclips.

Loading a sprite sheet into the library

Here we cover adding a sprite to the stage. The equivalent of addChild in Flash 

Adding a sprite to the stage

Here we cover defining and playing a sound from the libary

Adding a sound

One of the reasons I chose to work in Phaser is how many Flash properties transfer over. This lecture covers some of those simulaties. 

Preview 01:34

This lecture covers placing a sprite in the center of the screen.

Centering a sprite

This lecture covers anchor points. They take the place of the registration points found in Flash.

Anchor Points

Here we set up an animations inside a sprite using a sprite sheet from the library. Animations take the places of MovieClips.


This lecture covers the differences in scaling sprites between Flash and Phaser

Scaling a sprite

This lecture shows you how to quickly place a sprite in a random location.

Placing sprites in random positions

This lecture covers how to set an event listener on a sprite.

Clicking on a sprite

This lecture introduces us to Tweens

Position tweens

This lecture shows how we can use different properties in tweens such as alpha.

Fade tweens

Because scaling works differently in Phaser, there is a small trick to using scaling with tweens, and we cover that here.

Scale tween

Easing a tween in Phaser is very similar to Flash, but we have a few more options.


This lecture shows you how to add a tween complete event listener to your tweens.

Tween complete

Unlike Flash you can write one tween for multiple properties. This is a very nice feature.

Combining Tweens

This lecture shows how to code a button from a sprite sheet.


This lecture introduces adding text to the stage.

Adding Text

This lecture shows how to change the text size and color

Text Size and Color

No more embedding fonts!

Web Fonts

This lecture covers how to make fancy text with the web fonts we loaded in the last lecture.

Fancy Text

Groups are a very powerful feature in Phaser. This lecture introduces them.


This lecture shows how to use a group to create multiple instances of the same sprite. Very useful for putting bad guys into games!

Creating Multiple Items

This lecture shows how to loop through all the sprites in a group and update their properties.

Loop Through Groups

This lecture shows how to use Prefabs, in much the same way that we used sprite classes in Flash.

Making Banners
6 Lectures 12:39

Now that we've got the basics, let manually convert a Flash Banner to Html5

Preview 00:45

Adding in the banner's images

Adding Images

This lecture will show you how to make a virtual timeline to help turn timeline animations to Html5 code.

Making a virtual timeline

Now that the images are loaded, let's make them move!

Banner Image Tweens

Adding in the text needed for the banner

Adding Text

Just a few final steps and our banner is complete!

Completing the Banner
Supercat Game
25 Lectures 53:21

Here's the fun part! Using our new Phaser knowledge to build a game!

Preview 00:43

Getting everything set up for the game!

Setting up the game

Let's add in a scrolling background. Much easier in Phaser!

Adding a scrolling background

Because mobile devices vary in size we need to adjust our game to fit.

Adjusting for mobile

Setting up the animation for our superhero!

Cat animation

This lecture covers how to handle positioning when we are unsure of the size of the stage.

Making the Grid

This lecture covers changing the position of the main character when the stage is clicked. 

Changing Position

Setting up the first enemy - The Fireball!

First Enemy - Fireball

This lecture covers setting up the rest of the enemies

More Enemies Animations

Making multiple copies of the bad guys

Making Copies

This lecture covers adjusting the position of the enemies based on a ratio of screen size.

Fine tuning positions

Adding random bad guys to the stage

Adding the Enemies to the Game

This lecture shows you how to move the enemies by looping through the group

Moving the Enemies

Let's look at how to space the sprites out so they come at regular intervals.

Dispatching the enemies at intervals

Adding the score to the game.

Adding the Score

Make the game more challenging by speeding up as we go along.

Speeding Up!

So far our cat has been rolling along without any problems, but time to detect collisions!

Checking for Collisions

Let's add some animation with a tween when our cat is hit!

Cat Fall!

Here we cover adding a new state for our game over screen.

Adding the Game Over Screen

Adding and decorating a title screen.

Adding a Title Screen

Before we add sounds we need to give the player a way to turn on and off the sounds and music. We can make a toggle button out of a sprite sheet.

Toggle Buttons

Here we add in the sound effects to the game!

Sound Effects

Our game is almost complete! Let's just add in the background music and make it loop!

Background Music

An annoying little browser bug that you should be aware of. 

A Browser Bug!

Wrapping things up!

About the Instructor
William Clarkson
4.3 Average rating
63 Reviews
1,821 Students
2 Courses
Game Developer at Gaia Online

I've been a coder since I was a kid and I've always loved making games. As I got older that got into serious application programming as well, but games have always been my passion. I've been working professionally as a programmer for the last 15 years. I've worked all around the US, and a few years in Asia, for companies from around the globe. I've estimated I've made over 300 games in my career, and I'm nowhere near done!