- Illustrating how to publish HTML5 Canvas project with Flash CC.
In a few simple steps you can create an HTML5 animation from a mature animation and illustration tool
This article assumes that you have a basic knowledge of Adobe Flash CC. If not, please have a look at the links I have provided at the end of this article. It may also help to have some knowledge of the CreateJS libraries, which the exported HTML5 content relies on.
Our first goal is to get a better understanding of what is being generated by Flash CC. I have to admit the first time I saw the “ToolKit for CreateJS” export Flash assets into HTML5 canvas from Flash Pro CS6, I was blown away. I couldn’t believe what I just witnessed: a complex vector animation which spanned hundreds of frames, exported in the blink of an eye. It looked exactly like a SWF. It was so cool – but what I was really amazed at was the sheer speed of this export tool. It didn’t take seconds, it took milliseconds!
Here is an example of what I saw upon opening the exported code:
this.shape = new cjs.Shape(); this.shape.graphics.f("#000000").s().p("An1H1QjPjQgBklQABklDPjPQDRjREkABQElgBDRDRQDPDPABElQgBEljPDQQjRDRklAAQkkAAjRjRg"); this.shape.setTransform(260,218);
EaselJS export via FlashCC. (Compact Shapes)
Yikes! What does this mean?!? How does this black magic work? And most importantly, how can I use any of this?
Well I can sum most of these questions with… You don’t need to know everything that gets exported to take advantage of the exported code. What you see above is not even necessary to fully understand, but actually quite simple to read once you get the hang of the EaselJS drawing API. This just shows the creation of a Shape that gets a fill color with an empty stroke. The encoded string is series of drawing instructions for a complex path – which is intended to be compact, and not legible. In fact it uses the handy “Tiny API” methods that EaselJS supports to make it even more compact. So you get a pass for not remembering how to do it manually. If you really want to see what is going on, you can actually toggle the un-compacted instructions using the publish settings.
this.shape = new cjs.Shape(); this.shape.graphics.beginFill("#000000").beginStroke().moveTo(-50.2,50.2).curveTo(-71,29.4,-71,0).curveTo(-71,-29.4,-50.2,-50.2).curveTo(-29.4,-71,0,-71).curveTo(29.4,-71,50.2,-50.2).curveTo(71,-29.4,71,0).curveTo(71,29.4,50.2,50.2).curveTo(29.4,71,0,71).curveTo(-29.4,71,-50.2,50.2).closePath(); this.shape.setTransform(260,218);
EaselJS export via Flash CC. (Uncompacted Shapes)
The following is a bare-bone example of how to publish an HTML5 Canvas document with Flash CC in 4 simple steps.
Step 1: Setting up your file
Create a new HTML5 Canvas with the default settings and save it. In this demo, I am using the name “BallTest.fla”.
Step 2: Create a simple MovieClip instance
Create a new MovieClip symbol called “MyBall”, and draw a simple circle. Right click on your selected graphic and select convert to a symbol.
Step 3: Publish Settings
This step is optional, but recommended. Have a look at the “Publish Settings” (under the file menu) to ensure everything will export as intended. Most of this can be left with the default values, but it is good to know what control you have over the exported code.
- Output File is the path where your files will be generated. Defaults to the location of FLA.
- Loop timeline allows for the looping of timelines when checked. Checked by default.
- Publish HTML generates the HTML page each time files is published. This will overwrite any additions made to HTML file. Checked by default. It is a good idea to turn this off if you modify the HTML page source manually, otherwise it may be overwritten.
- Asset Export Options specifies the default locations for assets (images, sounds, CreateJS libs). When unchecked, these assets are not exported from the FLA.
- Hosted libraries determines if the CreateJS libraries on the hosted CDN are used instead of local versions. If unchecked, each library will be added to project directory when publishing.
- Include Hidden Layers toggles if hidden layers will be included when publishing.
- Compact Shapes determines vector instruction are published in a compact form (see above), or more readable instructions.
- Multiframe bounds makes exported symbols have an array of visual bounds for each frame, or only a single bounds for each shape. Note: This will increase publish times.
Now we are ready to Publish!
Press the publish button (if you closed the dialog, you can use File » Publish or F12). Alternatively you can publish your project by using the cmd+Enter keyboard shortcut (or ctrl+Enter for Windows users), which all Flash developers should be familiar with.
Note: The directory your FLA is stored in is where your Canvas example will be exported to. You can change this location by clicking the browse button “ … “ in the publish settings. It is important to save your document, or this will be in a temporary directory that you might not be able to find easily.
Step 4: Inspecting the output
Now that we have successfully published our simple example, let’s have a look at what has been generated.
You’ll notice 2 important files created relative to your FLA.
- The HTML file
- A simple HTML file that imports all required CreateJS libraries relevant to your exported project (unneeded libraries such as PreloadJS for images, or SoundJS for audio are omitted if you don’t use those features).
Stageinstance, which points to the HTML5 Canvas element in the DOM.
- An instance of the root timeline is created and defined as the
- Finally, the Ticker class is used to set up an update loop, that will update your stage at the framerate defined in the FLA.
- All the generated information from the FLA is included in a properties object, which defines your library settings (framerate, assets that need preloading, background color, etc).
newkeyword to create instances of the symbols within the library, and then add them to the display list on the stage. We will talk about this more in the Part 2 of the article series.
- A class with the same name as your FLA (in this case “BallTest”) is available as well, which is a container object that holds all instances that have been placed on the root timeline of your FLA. This will become the
exportRootin the published HTML.
Where to go from here
That’s it! A bare-bones straight forward example on how to publishing HTML5 Canvas with Flash CC. In less than four steps you can create an HTML5 animation from a mature animation and illustration tool. Obviously this is not the most complex example, but should give you a decent idea of what is going on when publishing to Canvas.
For more information on Creating and publishing an HTML5 Canvas document visit Flash Professional Help.
For more information and documentation on the CreateJS libraries visit the CreateJS website.
Stay tuned for part 2, where I show you how to work with the exported code.