Compose an Animated HTML5 Greeting
- 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
This chapter will build on everything you’ve learned so far, but we’ll take things in a different direction from previous projects by authoring content that runs natively in the browser without the need for Flash Player. We’ll also delve deeper into aspects of the Library and symbols while introducing some new tools.
Video 4.1 Project Overview
This project involves the traditional web-based greeting card (Figure 4.1), but with a twist: the client wants you to design the card in such a way that it can be accessed via a web browser on a desktop, mobile device, or other similar means. In other words, since the browser-based Flash Player is widely available only on desktop browsers, in order to hit mobile targets we’ll need to deploy using a native HTML5 target. Luckily, Adobe Animate CC includes a number of target-platform document types suited specifically to this task.
)
Figure 4.1 The completed web-based greeting card that you’ll produce with Animate CC in this chapter
Creating a New HTML5 Canvas Document
ACA Objective 4.1
Content created in Animate CC can now to be published directly to a number of modern HTML5 formats, including Canvas and WebGL. The primary document type that allows this publish target is HTML5 Canvas. When creating content using this publish target, Animate CC leverages the CreateJS JavaScript libraries to output an entire animation or interactive project for the HTML5 canvas element.
- Video 4.2 Creating a New HTML5 Canvas Document
Setting up the project document
The first thing you’ll do is create a new document. On the Welcome screen, or via File > New in the application menu, choose HTML5 Canvas as your document type.
Animate CC opens a new document, which initially will look exactly the same as the documents we’ve already worked with. You should note a number of differences, however:
First, notice that in the General tab of the New Document dialog box, the name of the file is appended with the (Canvas) qualifier (Figure 4.2). This lets you know that you’re working in that particular document type. ActionScript-based projects have no such qualifier.
Figure 4.2 The New Document dialog box
There are a couple of tools in the Tools panel that are disabled, including the 3D Rotation tool (
) and the 3D Translation tool (
).- If you select the Text tool (
), you’ll notice that you can only choose Dynamic Text. The other two text types are disabled. - When viewing Document Properties, you’ll see that a lot of options under the Publish area are disabled because they pertain only to ActionScript-based projects.
)
Otherwise, creating and animating content targeting HTML5 Canvas should be nearly identical to what you have already encountered.
Preparing the Stage and timeline
Before creating any assets in the greeting card project, you’ll do some work on configuring the Stage and other project fundamentals.
In the Properties panel (Figure 4.3), set the Stage width to 550 pixels and the height to 400 pixels. This is the normal Animate CC default, so there may not be anything to change depending on your preferences.
Figure 4.3 Configuring the Stage in the Properties panel
- Make sure FPS is set to a value of 24 and choose a background color that suits you. I choose black most of the time, but in this project you’ll be drawing a background anyhow, so it doesn’t matter much.
- Moving on to the timeline, rename the present layer BG. This is where you will draw your project background.
Use the New Layer button (
) to create an additional layer and name it Frame (Figure 4.4). This layer will contain assets that make up the basic background elements of your project.
Figure 4.4 Frame layer added
Save the document in a location that makes sense to you.
Even though you’re using a different document type in this project, Animate CC treats the file the same way, even saving it in the same FLA file format.
){kind=link}
){kind=link}