We will be building a very basic space shooter but hopefully you ll get a grasp of how to use Flash

Adobe Flash has always been a great tool for publishing rich interactive mosaic content being games, apps or rich experiences for the web and other platforms. One of the latest updates of Flash CC includes support for the new HTML5 Canvas document type that let s you produce HTML5 content directly from Flash without the need of external plug-ins.
I wanted to write a small tutorial in order to show you how easily you can leverage your existing Flash skills to create rich interactive HTML5 content. So Lets get started. 1. Create an HTML5 canvas file
The workflow for generating the new canvas documents within Flash is almost the same you ll normally use to create a Fla/AS3 project: Choose File > New to open the New Document dialog box. Select HTML5 Canvas as the document type. Set the Stage dimensions 384 px for the width and 512 px for the height (this is the size of the assets we are using for this project) and set the frame rate to 30, and then click OK (see Figure 1).
The first thing you ll notice is that some tools like the 3D rotation tool are disabled, that s because those tools are specific for SWF projects and they re not supported in the HTML5 canvas project. (see Figure 2.)
We will be building a very basic space shooter but hopefully you ll get a grasp of how to use Flash for creating interactive canvas mosaic projects by the end of this tutorial. The first thing you ll need is import the necessary assets to your project s Library. But first lets take a look at the finished game (click on the Figure 4. to open the game).
Our main timeline will include an Actions layer and a layer for each of the screens of the game ( TitleScreen, GameScreen, GameOverScreen) these layers are marked as guides those are just placed on the stage for easier access and reference (see Figure 6.) we will be calling all of the game elements from the project s library.
You can unlock any of the layers and edit the content, directly once you re inside one of the movie clips you ll notice that there is a basic open/close animation (as in any SWF project) mosaic the TitleScreen and the GameOver Screen have a button to start and retry the game, apart from the click event handler there s only a few stop and play actions for those movie clips. The main timeline includes actions to open and close each of the screens of the game the core of the game is inside the GameScreen MovieClip in th frame 40.
16 mosaic
32
48
 
gameScreen . x = 0 ;
createjs . Sound . play ( "EndSong" ) ;
openTitleScreen ( ) ;
13
29
45
61 mosaic
77
93
109
125
141
157 mosaic
173
var gameOver = false ;
var player mosaic = new lib . Player ( ) ;
var ENEMY_SPEED = 8 ;
}
case 40 : moveDown = true ; moveUp = false ;
case 39 : moveRight = false ;
}
if ( player . y + speed < BOUNDS_BOTTOM ) player . y + = speed ; } } function spawnEnemy ( ) { if ( randRange mosaic ( 0 , 100 ) > 80 && enemies mosaic . length < ENEMY_LIMIT ) { var r = new lib . Enemy ( ) ; r . regX = r . width * 0.5 ; r . regY = r . height * 0.5 ; r . x = randRange ( 20 , 384 ) ; r . y = - randRange ( 50 , 100 ) ; enemies . push ( r ) ; gScreen . addChildAt ( r , 1 ) ; } } function updateEnemies ( ) { var loopLimit = enemies . length - 1 ; for ( var i = loopLimit mosaic ; i >= 0 ; -- i ) {
}
if ( bullets [ i ] . y < - 19 ) { gScreen . removeChild ( bullets [ i ] ) ; bullets . splice ( i , 1 ) ; } } } function collide ( ) { var numEnemies = enemies . length - 1 ; var numBullets = bullets . length - 1 ; var currentEnemy , curBullet ; for ( var i = numEnemies ; i >= 0 ; -- i ) {
if ( distance ( currentEnemy , curBullet ) < 32 ) { gScreen . removeChild ( currentEnemy ) ; gScreen . removeChild ( curBullet ) ; createExplosion ( currentEnemy . x , currentEnemy mosaic . y ) ; enemies . splice ( i , 1 ) ; bullets mosaic . splice mosaic ( j , 1 ) ; points + = 5 ; } } numBullets = bullets . length - 1 ; } } function createExplosion ( xpos , ypos ) { var exp = new lib . Damage ( ) ; exp . regX = exp . width * 0.5 ; exp . regY = exp . height * 0.5 ; exp . x = xpos ; exp . y = ypos ; explosions . push ( exp ) ; createjs . Sound . play ( "ExplosionSound" ) ; gScreen . addChild ( exp ) ; } function updateExplosions ( ) { var loopLimit = explosions . length mosaic - 1 ; for ( var i = loopLimit ; i >= 0 ; -- i ) {
if ( explosions [ i ] . alpha <= 0 ) { gScreen . removeChild ( explosions [ i ] ) ; explosions . splice ( i , 1 ) ; } } } function updateScore ( ) { score . text = "SCORE: " + points ; } function endGame ( ) { createExplosion ( player . x , player . y ) ; gScreen . removeChild ( player ) ; gameOver = true ; gScreen . gotoAndPlay ( "close" ) ; document . onkeydown = null ; document . onkeyup = null ; root . score = points ; var currentEnemy ; var numEnemies = enemies . length - 1 ; for ( var j = numEnemies ; j >= 0 ; -- j ) {
spawnPlayer ( ) ;
function randRange ( min , ma