Publishing Your Project for HTML5 Canvas
ACA Objective 1.4 ACA Objective 5.2
VIDEO 4.24
Publishing for HTML5 Canvas
Publishing for HTML5 Canvas is a bit more straightforward than publishing for Flash Player, simply because you have fewer publish settings to set. When publishing for HTML5 Canvas, in place of a single SWF file, you’ll have a number of different files that must all be kept together for the project to run. The number of files you have depends on the file types used in the project and your publish settings. The primary file among these is a JavaScript file (with the .js extension).
Publish Settings
You can access the Publish Settings for HTML5 Canvas in the same manner you do when targeting Flash Player. With nothing in your project selected, the Properties panel displays document properties.
In the Publish area of the panel, click the Publish Settings button to open the Publish Settings dialog box.
On the left side of the Publish Settings dialog box, you’ll see a column where you can select JavaScript/HTML under the Publish heading. Make sure this check box is selected.
Whenever you’re ready, click Publish.
The settings for the JavaScript/HTML Publish option are separated into four tabs. We’ll look at each one individually.
Basic
The basic options mainly have to do with where the files are saved and how the presentation is configured (Figure 4.50).
Output Name: This first section allows customization of the output file, asking you to specify the filename and directory for the output.
Loop Timeline: You have the option of looping the timeline or stopping it at the final frame.
Figure 4.50 The Publish Settings Basic tab
Include Hidden Layers: This incorporates any hidden layers into the published content.
Center Stage: Centers the stage in the HTML view horizontally, vertically, or both.
Make Responsive: Will scale the project down by width, height, or both, if the HTML viewport (the portion of the browser where HTML is rendered) is too small.
Scale To Fill Visible Area: This option becomes available if you select Make Responsive. It also allows the presentation to scale up in order to fit the HTML viewport if it is larger than the project. You can choose Fit In View or Stretch To Fit, but the latter can distort the proportions of the project.
Include Preloader: Allows the use of a default animated loader to display as the project content is loaded. You can also browse to choose your own animated GIF to use as a preloader if you do not like the default.
Export Assets: If you use any images or sounds in your project, choose the folders where you want them to be saved. You can also specify the folder for the published CreateJS files if you don’t select the Hosted Libraries option on the Advanced tab.
)
Advanced
The Advanced tab includes template controls and deals mostly with JavaScript handling in your project (Figure 4.51). Many of these settings are beyond the scope of this book, but here are the ones that are important to know:
){kind=link}
Overwrite HTML File On Publish: This option will allow you to manage whether or not any previously published HTML file for the project is overwritten by subsequent publish actions. If you edit the HTML outside of Animate CC, you probably want to deselect this option or you’ll lose your customizations.
Include JavaScript In HTML: When this option is selected, the JavaScript produced will be written within your HTML file instead of being written to a standalone JavaScript file. One less file to deal with.
Figure 4.51 The Publish Settings > Advanced tab
Spritesheet
If you’re including bitmap images in your project, you can also export them all to a single spritesheet and modify the spritesheet settings using this tab (Figure 4.52).
){kind=link}
Combine Image Assets Into Spritesheets: If this is deselected, images will not be packaged into spritesheets.
Format: You can choose the formats you’d like to export any spritesheets as: PNG, JPEG, or BOTH.
Format Settings: These become available depending on your format selection. They allow you to define compression and other format-specific file properties for these image types.
Figure 4.52 The Publish Settings > Spritesheet tab
Web Fonts
This is only needed when using Typekit web fonts and dynamic text fields. When using Typekit, you need to let the service know which web domain name (josephlabrecque.com, for example) to allow the font delivery. This tab provides the mechanism to do that (Figure 4.53). If you’re using Google web fonts, that step is not necessary.
)
Figure 4.53 The Publish Settings > Web Fonts tab