How to create and publish an HTML5 Canvas document

>>[Hemanth Sharma] Hi, everyone.

This is Hemanth Sharma.

In this video I am going to talk about a new feature in Adobe Flash Pro CC, exporting and creating content based on HTML5 Canvas.

You can now natively author and publish HTML5 Canvas content from within Flash Pro CC.

That means using the same tools, functionalities, and timeline you're used to, you can now easily produce HTML5 content.

Yes, this means you can now write JavaScript natively in Flash Pro and make use of all its code hinting and syntax highlighting capabilities towards writing good JavaScript.

Not just writing new JavaScript-based HTML5 web content, but you can now easily convert your existing ActionScript-based content to an HTML5 Canvas document.

To showcase this, I'll show you a simple game prototype created in pure ActionScript, Hungry Hero.

This is a basic content containing 2 screens and an initial interaction a game needs to have.

This is an FLA file that was initially created for publishing a SWF file.

To make this document an HTML5 Canvas document, there are 2 ways.

One, copy all the layers from the original FLA file to a new HTML5 Canvas document; or two, use the JSFL script available on the Commands menu, which will do the copying for you.

I will use the JSFL script available on the Commands menu.

I click on the Convert to HTML5 Canvas from AS3 document formats.

This basically creates a new FLA document with the content pre-created from the old Flash document.

I can now save this as a new document.

Once I do, as you can see, in the Properties panel it now says HTML5 Canvas Document.

Accordingly, you can now see that the Publish Settings have also changed to JavaScript or HTML.

As you can see in this screen, Flash Pro CC uses CreateJS open source library to support HTML5 Canvas content.

Also, you can customize the different folder locations of the exported HTML5 content.

Now that my game is converted, when I open the Actions panel, the most basic thing to notice is that the ActionScript 3 code is commented throughout.

I will now need to spend a little time writing similar code in JavaScript.

Thanks to CreateJS library, writing my code is as simple as writing ActionScript 3.

So I start with the JavaScript.

In the 60th frame I will use the CreateJS syntax and start translating each line— this.stop in place of stop.

I'll add an event listener for the click event of both Play and About buttons by writing this.playBtn.addEventListener ("click", playClick.bind(this)); I'll copy and paste this.

I'll change the instance name to aboutBtn then write fl_clickToGoToWebPage.

After I spend 2 minutes of my time translating the code in all the frames, now I am ready to publish this game.

All I need to do now is to go to Control menu and choose Test.

There you go.

My game is successfully running in the browser inside the HTML5 Canvas.

As you can see, all the mouse interactions I have coded work perfectly well.

You probably have to spend not weeks, not days, but hours or even just minutes on your existing projects while migrating.

Now let's understand what happens in the background when you convert an AS3 document to an HTML5 Canvas document.

Flash Pro CC creates a new HTML5 Canvas document.

It copies all the layers, symbols, and library items to the new HTML5 Canvas document.

It then applies defaults to the unsupported features, sub-features, or feature-properties.

It creates separate FLA files for each scene.

When you publish an HTML5 Canvas document, Flash Pro uses the Canvas API and translates objects on the stage to their Canvas counterparts.

When you convert an AS3 document to an HTML5 Canvas document, do not forget to read through the warnings in the Output panel.

These warnings help you understand what changes were made during the content conversion.

If you go back to your file system and observe, you will now have the .html file that contains the Canvas.

You will also see a .js file that will contain all the CreateJS code written by Flash Pro CC along with the JavaScript code you wrote.

You will also see an images folder containing all the visual assets of your game and finally, any sounds you might have in the sounds folder, as mentioned in your Publish Settings.

You also can start creating HTML5 Canvas-based content from scratch for all your new projects by navigating to File, New, and then choosing HTML5 Canvas in the Type section.

Please note that some features that are within Flash are not supported in HTML5 Canvas document.

This is because not all features within Flash have their counterparts in the Canvas API.

Some instances where you will get affected while converting existing content are when you copy layers or symbols from traditional Flash AS3 documents to HTML5 Canvas documents, unsupported content is simply removed or converted to its supported defaults.

The workspace changes itself to provide you with tools that are only supported for the output you are working on.

For example, while working on multiple documents, when you switch from Flash AS3 document to HTML5 Canvas document, with an unsupported tool or option selected you will notice that Flash Pro CC shows an indication that it is not supported for the document type.

ActionScript components are removed and any AS3 code is commented out.

Any 3D transformations within the AS3 document are removed while migrating to HTML5 Canvas document.

Overlay blend mode is defaulted to Normal as it is not supported.

Dotted lines are defaulted to solid lines, videos are removed, and HTML5 Canvas documents do not support multiple scenes.

Well, that's all there is to it.

I hope you are as excited as I am to start creating wonderful HTML5 content.

Thanks for watching.