Compose an Animated HTML5 Greeting

This chapter is from the book

Learn Adobe Animate CC for Interactive Media: Adobe Certified Associate Exam Preparation

Learn More Buy

This chapter is from the book

This chapter is from the book 

Learn Adobe Animate CC for Interactive Media: Adobe Certified Associate Exam Preparation

Learn More Buy

Laying Out the Background Elements

• ACA Objective 3.2

Now that you have layers for your frame and background assets, you can create these elements using the shape and drawing tools in Animate CC. You’ll be using some of the vector tools you’re already familiar with, but you’ll also be introduced to the concept of variable-width strokes and the super-cool Paint Brush tool.

Drawing the background

To draw the background to the greeting card project, you’ll use the new Brush Library and the Paint Brush tool in Animate CC.

• Video 4.3 Drawing the Background

1. To begin, lock the Frame layer to ensure that you don’t draw anything in it by mistake.

2. Select the BG layer within the timeline and choose either the Rectangle tool () with Object Drawing Mode enabled or the Rectangle Primitive tool ().

   You’re now ready to draw the background.

3. Click and drag from the top left of the Stage to the bottom right to draw a shape exactly the same size as the Stage: 550x400.
4. You may need to make some adjustments to the size and position of your shape, depending on your snap settings and how steady a hand you have. Do this from the Properties panel with the object selected.

5. If you haven’t done so already, choose a background color for your shape. I’m using #FF9933 in the example shown in Figure 4.5, but you can choose whatever you like.

   

   Figure 4.5 I’m using a black background for my shape.

6. You don’t need any Stroke color for this project, so choose None for the Stroke color. It’s represented in the color picker as the white block with the red diagonal line running through it (Figure 4.6).

   

   Figure 4.6 No stroke color as represented in the Properties panel

Decorating with the Paint Brush tool

Now for some freeform fun! The Paint Brush tool () is a new tool in Animate CC that lets you draw out strokes with vector art attached to them. This allows for massive creative possibilities, whether you’re using built-in brushes from the Brush Library or using custom brushes you created with the Adobe Capture mobile app and shared with Animate CC via the CC Libraries panel.

• Video 4.4 Decorating with Art Brushes

1. To begin, choose the Paint Brush tool from the Tools panel.

   The Paint Brush tool Properties panel opens (Figure 4.7).

   

   Figure 4.7 The Paint Brush tool Properties panel

2. You’ll be drawing these decorative assets in the BG layer, so be sure to enable Object Drawing Mode to prevent shape collisions.

3. Choose Window > Brush Library from the application menu to open the Brush Library.

   In the Brush Library you’ll see a number of categories, which contain a wide variety of prebuilt vector art brushes.

4. Find one you’d like to use and select it.

   It should now show up in the Style area of your Properties panel. You can see in the next figure that I’ve chosen the brush named Chalk – Scribble from the Artistic > Chalk Charcoal category within the Brush Library (Figure 4.8).

   

   Figure 4.8 The Brush Library

   Now it’s time to get creative!

   NOTE

   You can also access the Brush Library directly from the Properties panel by clicking its icon.

5. Using the Paint Brush tool, click and drag around the Stage to generate freeform vector artwork. Don’t make your art too busy...but don’t hold back too much either. Make it interesting.

6. Select a Shape color. In Figure 4.9, I’ve chosen to use something a few steps darker than my background (#A35A12), but there’s no reason you couldn’t use a number of variations in color or even stroke width. You can control all these properties from the Properties panel with the Paint Brush tool selected.

   

   Figure 4.9 The shape color I’ve chosen

7. Once you’re happy with the results, lock the BG layer and unlock the Frame layer for the next step in this project.

Drawing the frame with variable-width strokes

Using variable-width strokes in your project is an easy way to impart a bit of controlled chaos to simple strokes. Animate CC will, in place of a linear stroke, impart a stroke whose width varies at certain points. The best way to grasp the concept is to use it. You’ll create a nice frame for this project and apply a variable-width profile to the frame stroke.

• Video 4.5 Making a Frame

1. Select the Frame layer so that you can draw the object. You may want to ensure all other layers are locked before proceeding.

2. Choose the Rectangle or Rectangle Primitive tool and draw a vector object the exact size of your Stage: 550px by 400px. Use whatever color you like for the stroke (in Figure 4.10, I’m using #336600), and choose a transparent fill.

   

   Figure 4.10 Drawing Object Properties

3. With the object selected, choose a profile from the drop-down in the Properties panel. If something doesn’t look right, select the Width tool from the Tools panel and tweak existing width points or even create new ones.

4. For an additional creative flourish, apply a vector art brush to the variable-width stroke as well. In Figure 4.11, I’m using Artistic > Chalk Charcoal > Chalk – Round from the Brush Library.

   

   Figure 4.11 A little extra creative flourish added with a vector art brush

Grouping the Layers Within a Folder

One of the best things you can do to keep things organized in your timeline is to group layers. You can accomplish this by creating a layer folder for specific sets of layers.

• Video 4.6 Grouping Layers

1. Click the New Folder button below the layer stack on the bottom left of the timeline to create a folder to contain your static background elements.
2. Double-click the folder name and change it to Background.

3. Drag both the BG and Frame layers into the layer folder you just created (Figure 4.12).

   

   Figure 4.12 BG and Frame layers added to the new layer folder

With the folder created, you can now control the lock status, visibility, and outline mode for all layers from the folder itself. You can also collapse and expand the folder by using the small triangle beside the folder icon.