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 greeting you’ll create in this chapter
Creating a New HTML5 Canvas Document
ACA Objective 1.4 ACA Objective 2.1
VIDEO 4.2
Creating a New HTML5 Canvas Document
Content created in Animate CC can 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.
Setting up the project document
The first thing you’ll do is create a new document by doing one of the following:
On the Welcome screen, select HTML5 Canvas as your document type.
Choose File > New to open the New Document dialog box (Figure 4.2). In the Type list, select HTML5 Canvas.
Figure 4.2 The New Document dialog box
)
Animate CC opens a new document, which initially looks 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. This lets you know that you’re working in that particular document type. ActionScript-based projects have no such qualifier.
A couple of tools in the Tools panel are disabled: the 3D Rotation tool (
) and the 3D Translation tool (
).If you select the Text tool (
), you’ll notice that you can only choose Static Text or Dynamic Text. Input text Type is 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, I’ll select a cheery orange color instead. You’ll be drawing a background anyhow, so it doesn’t matter all that 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}