Publishing Your Project for HTML5 Canvas
ACA Objective 1.4
ACA Objective 5.2
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.
Whenever you’re ready, click Publish.
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.
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.
Figure 4.51 The Publish Settings > Advanced tab
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).
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
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