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.
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.
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.