We always design our websites with your future success in mind, carefully planning and optimizing all content to ensure maximum visibility and long-term profitability

Convert Flash Game to HTML5 Game Tutorial

Is it possible to convert Flash Game into HTML5 Game tutorial? According to a case study conducted in converting Wordico from flash to the HTML5 Game tutorial, the conversion is possible. How did they do it? Let’s learn how.

Before doing the conversion, you should be aware of the features of the HTML5 Canvas. This helps in the improving your knowledge about the HTML5 game development.

In converting a flash game, it is necessary to create the original game’s version using the vector graphics like gradients, fills, curves and lines. You can also generate objects using the Flash timeline even it has multiple states. But it’s not so like to convert psd to HTML5, but much more difficult.

Expect two kinds of output in converting your game. It is either low resolution (SD) or high resolution (HD). This depends on the game you want to convert if it is built from the DOM or canvas. Resizing the game has different ways and options, but you should not under-estimate the work. Plan it ahead of the time.

  • CreateJS Toolkit

The Wallaby, a conversion tool, was developed by Adobe Labs to convert Flash to HTML5. This is a downloadable extension of Adobe Flash. Just visit the Adobe website and download the tool for free. After downloading, extract the folder to install the Adobe extension. Go to the Flash authoring environment, Window -> Other Panles  -> Toolkit or CreateJS, to access the extension.

Sounds, graphic and animation is exported to the JavaScript files and individual assets. The Canvas for HTML5 is supported by the JavaScript. It doesn’t support the Flash’s build in 3D tools and Actionscript 1.0 to 3.0.

HTML5 Game tutorial

Image credit: flashcollege.blogspot.com

The CreateJS Toolkit does not allow Actionscript to be converted to Javascript. But, it helps you to personally separate the assets and creates timeline animations JavaScript. This is helpful in converting Flash games to HTML5. Furthermore, it is designed to manage productive and flexible workflow to establish fresh projects in the HTML5, while increasing your Flash abilities.

 Steps in Converting Flash Game to HTML5 Tutorial

  • Set up the Flash Pro and open the CreateJS Toolkit Panel.
  • Authoring for Create JS by customizing the text, static content, animation, and labels and timeline scripting.
  • CreateJS output on images and sounds, libs, PlatypusGame.html, and PlatypusGame.js.
  • ​Add interactivity by unchecking the “publish HTML”found in the settings panel. You can also edit the game’s HTML.
  • Setting up the game stage is very easy, just open the GameDev.js in the JavaSrcipt editor file and play on some of its functions.
  • To handle the interaction, insert to the platypuses the “click” event handler.
  • Use the command’s play(), stop() and gotoAndStop () to control and integrate your timeline. Communicate the timeline with the game logic by using the timeline scripting. This enables user to inform with important events.

With the CreateJS libraries and ToolKit for Create JS, you can start creating a simple and fresh HTML5 game. Custom codes were about less than 100 lines so it only shows that his tool provides convenience during the conversion. Also you can try to convert swf toHTML5.

You can still optimize the game and render the graphics quickly. This extends the game making it more fun and exciting.

Use HTML5 game tutorial in your working process and ask assistance from experts if needed!

Comments are closed.