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
English
Curiosity Sale
Current price: $10 Original price: $25 Discount: 60% off
30-Day Money-Back Guarantee
Includes:
  • 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
Requirements
  • A basic knowledge of Actionscript and Flash. Some knowledge of Javascript is helpful.
Description

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
02:17:27
+
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
00:51

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
03:00
+
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
01:12

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

Embedding to a web page
01:44

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

Changing the background color
00:54

This lecture covers the JS equivalent of the trace function 

Using Trace
01:22

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

Understanding Scope
02:22

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
01:40

This lecture covers adding a sound to the library

Loading a sound into the library
00:56

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

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

Adding a sprite to the stage
02:13

Here we cover defining and playing a sound from the libary

Adding a sound
01:25

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
01:31

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

Anchor Points
00:53

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

Animations
02:17

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

Scaling a sprite
02:19

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

Placing sprites in random positions
01:24

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

Clicking on a sprite
03:02

This lecture introduces us to Tweens

Position tweens
02:37

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

Fade tweens
01:19

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

Scale tween
01:19

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

Easing
01:54

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

Tween complete
01:04

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

Combining Tweens
01:56

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

Buttons
02:25

This lecture introduces adding text to the stage.

Adding Text
01:58

This lecture shows how to change the text size and color

Text Size and Color
01:11

No more embedding fonts!

Web Fonts
02:09

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

Fancy Text
01:50

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

Groups
01:57

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
03:00

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

Loop Through Groups
02:13

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

Prefabs
03:51
+
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
01:43

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

Making a virtual timeline
02:14

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

Banner Image Tweens
03:30

Adding in the text needed for the banner

Adding Text
02:47

Just a few final steps and our banner is complete!

Completing the Banner
01:40
+
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
01:45

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

Adding a scrolling background
01:20

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

Adjusting for mobile
01:41

Setting up the animation for our superhero!

Cat animation
01:43

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

Making the Grid
02:04

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

Changing Position
01:54

Setting up the first enemy - The Fireball!

First Enemy - Fireball
01:42

This lecture covers setting up the rest of the enemies

More Enemies Animations
02:17

Making multiple copies of the bad guys

Making Copies
01:31

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

Fine tuning positions
03:20

Adding random bad guys to the stage

Adding the Enemies to the Game
02:14

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

Moving the Enemies
03:10

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

Dispatching the enemies at intervals
02:12

Adding the score to the game.

Adding the Score
01:44

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

Speeding Up!
02:11

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

Checking for Collisions
01:54

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

Cat Fall!
02:18

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

Adding the Game Over Screen
02:30

Adding and decorating a title screen.

Adding a Title Screen
03:11

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

Here we add in the sound effects to the game!

Sound Effects
02:37

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

Background Music
03:11

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

A Browser Bug!
01:06

Wrapping things up!

Conclusion
00:32
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!