- Creating a New HTML5 Canvas Document
- Laying Out the Background Elements
- Drawing the Flowerpot
- Editing the Flower Graphic Symbol
- Animating the Flower Stalk with Inverse Kinematics
- Designing and Animating the Flower Head
- Create a Personalized Text Message
- Using JavaScript Code to Stop the Playhead
- Publishing Your Project for HTML5 Canvas
- Challenge!
- Conclusion
This chapter is from the book
This chapter is from the book
This chapter is from the book
Publishing Your Project for HTML5 Canvas
ACA Objective 5.4
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).
Video 4.22 Publishing for HTML5 Canvas
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.
Under the Publish area of the panel, click the Publish Settings button to open the Publish Settings dialog box (Figure 4.39).
Figure 4.39 The Publish Settings dialog box
In the left-hand column in 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. From here, you’re able to choose a number of settings:
- The first section allows customization of the output file, asking you to specify the filename and directory for the output. You also have the options to loop the timeline or overwrite any existing HTML.
- Next are directories for your asset exports. If you use any images or sounds in your project, this is where they’ll be published to. If you’re including images, you can also export them all to a single spritesheet using these settings. There is also a place to specify the directory for the published CreateJS files if you’re not using the content delivery network (CDN).
- With the next option you can define JavaScript namespaces. This is useful when you’re using a number of additional JavaScript libraries as part of your project to avoid conflicts.
HTML5 Canvas also has an Advanced section, which provides the following options:
- Hosted Libraries: Enabling this option means HTML5 Canvas will grab the CreateJS libraries from a remote CDN.
- Include Hidden Layers: This includes any layers hidden using layer control.
- Compact Shapes: Select this option if you want to make shapes as optimized as possible.
- Multiframe bounds: This includes frame bounds properties to objects.
- Convert text to outlines: Selecting this option means HTML5 Canvas will render dynamic text as shapes to preserve fonts.
- When you’re ready, click Publish.
)
- Video 4.23 Converting to WebGL
