Creating online games with Flash / Flash Games

Creating online games with Flash

Recently had the chance to play with the new HTML5 Canvas features in Adobe Flash Professional CC. As a long time Flash developer, it’s exciting to create HTML5 content directly inside the workspace I know and love. In my journey to discover the differences in using Flash Professional CC to create interactive content in JavaScript rather than ActionScript, I decided to have some fun with it and create an interactive jigsaw puzzle.

The latest update to Flash Professional CC includes support for the new HTML5 Canvas document type. You can either convert an ActionScript 3.0 FLA file to a Canvas document, or start with a Canvas document and build from scratch. This article is an overview of key concepts for building HTML5 content from scratch and converting Flash content to HTML5 content.fig3 Along the way, you can explore example files based on a classic Flash jigsaw puzzle project (see Figure 1).

Note: When working in a Canvas document, features that are not supported (such as the 3D Transform tool) are disabled, and the Actions panel becomes a JavaScript editor (complete with built-in support for CreateJS).

fig4Figure 1. The Flash jigsaw puzzle project converted from ActionScript to HTML 5 (click to interact with the sample)

Understanding the new HTML5 Canvas features

Before diving into an HTML5 Canvas project, it will help to review the new HTML5 support features in Flash Professional CC. The first thing to note is that HTML5 Canvas is a new document type. When you create an HTML5 Canvas document, the user interface updates in Flash. Features that are not supported are disabled, while other features supported only in JavaScript are enabled.

fig7The workspace also supports converting an existing ActionScript 3.0 file to an HTML5 Canvas file. If you convert an ActionScript 3.0 file to an HTML5 Canvas file, Flash Professional CC attempts to bring everything forward. However, some elements do not directly map to HTML5 (including 3D transformations, some filter features, and ActionScript 3.0 code).

Check out Video 1, and the sections that follow for an overview of what to expect.

Video 1. Understanding Flash Professional CC HTML5 Canvas features

Before you get started

If you'd like to deconstruct the project or follow along with the tutorial, be sure to download the project files and install the Adobe tools you’ll need.

  1. Download and install the free trial of Adobe Flash Professional CC and Adobe Illustrator CC if you haven’t already done so. You can use your Creative Cloud membership to download and install these products.
fig8 fig10 fig9 fig11

You might also like

Make Games Online - ChallengeYou
Make Games Online - ChallengeYou
How to make a flash game like PONG (AS3)
How to make a flash game like PONG (AS3)

My two cents

by -

What kind of games do your kids play? fancy 3D stuff (call of duty 4, bioshock, etc) or online flash games?
for general internet surfing and online kids' games, get something affordable that has:
- any Intel Core 2 Duo processor
- Windows XP Home
- 1GB RAM or more, DDR2-667 or DDR2-800
- DVD burner drive or combo drive
- 250GB and up hard drive, SATA II
- 128 or 256 MB video card, like the GeForce 8300-8600
check out the Dell Inspiron series

Pupil's BAFTA bid pride  — Blackpool Gazette
James's 'Soot and Smog' game sees the player roam around Victorian London aiming to raise funds to help their sick sister by completing various challenges, while different facts about that era of history flash up on the screen.

Adobe Flash Player 12 Is All Set to Provide Hassle Free Internet Browsing ..  — The Fuse Joplin
Another key feature that makes installing this flash player the preferred choice of millions of people all over the world is that it is available for free. Adobe Flash Player 12 is ..

NRL to act on “illegal” betting  — Fox Sports
Following a two-month investigation, the NRL's Integrity Unit is close to determining their findings after auditing the betting records of registered players and officials from the NRL, NSW Cup and under-20s Holden Cup competition.