Drawing the Flowerpot
VIDEO 4.7
Drawing the Flowerpot
Now that you’ve defined the static background elements for your greeting, you can begin work on the more complex, animated objects.
Creating and modifying a vector rectangle shape
You’ll begin by drawing a simple flowerpot.
Create a new layer and name it Flower.
With this layer selected, select the Rectangle tool (
). Don’t select the Rectangle Primitive tool because in order for the shape to appear similar to the form of a flowerpot, you’ll need to manipulate the shape. VIDEO 4.8Shaping with the Selection Tool
Draw a square about 120px by 120px. It doesn’t have to be exact, and the color choices don’t matter at this point. You don’t have to include any stroke for this square.
Select the Selection tool (
).With nothing selected, hover the cursor along the top edge of your rectangle shape. Notice how the cursor changes to include a small arc. This indicates that you can bend the paths that define your shape by pulling and pushing the edges.
Pull down slightly on the top of the square to form a nice dip (Figure 4.13). This is the top of your flowerpot.
Figure 4.13 Manipulating the shape
You need to create the inside of the flowerpot as well. Select the Oval tool (
), activate Object Drawing Mode (
), and draw an oval that matches the arc and size of the flowerpot top. The color you use should be a dark brown (#4B2500) since this portion of the flowerpot will be in shadow. Don’t apply any stroke to this object.Using the Subselection tool (
), select the bottom-left anchor point of your shape.With the point selected, use the arrow keys on your keyboard to nudge the point over a few pixels, creating a taper in your flowerpot. Perform a similar action on the other side.
To finish the flowerpot shape, select the Selection tool again and pull down the bottom of the shape slightly to give a little more perspective to the flowerpot, very similar to the modification you made to the top (Figure 4.14).
Figure 4.14 Choose a dark brown for the inside of the flowerpot.
Applying colors and gradients
ACA Objective 2.5
VIDEO 4.9
Using Gradients
Gradients in Animate CC always start as either centered radial gradients or horizontal linear gradients. You use the Gradient Transform tool (
) to recenter, rotate, or stretch a gradient. It’s very similar to the Free Transform tool, but it affects only how the gradient is displayed. Access the Gradient Transform tool by clicking and holding the Free Transform tool icon (
) in the Tools panel.
Use the Selection tool to select the flowerpot shape.
Open the Swatches panel and choose Linear Gradient from the color type menu.
By default, you’ll see a gradient that runs from pure white to complete black.
Change this to run from a slightly lighter brown (#824000) to a slightly darker brown (#582C00) (Figure 4.15). Gradients often look best when there’s a subtle change across the gradient.
Figure 4.15 The settings you choose in the Color dialog box should match the ones shown here.
If you want to preserve this color definition as a reusable swatch, click the Add To Swatches button to make it selectable from any Swatches panel within Animate CC. You can now select the flowerpot shape and easily apply the recently created swatch to the fill by using the color picker in the Properties panel.
Now that the gradient swatch is applied, you can use the Gradient Transform tool to adjust how the linear gradient appears on the flowerpot shape. When an object with a gradient applied is selected using this tool, you can adjust the rotation, center point, width, and more.
ABOUT TAGGED SWATCHES
A recent addition to Animate CC is the concept of tagged swatches. This allows you to choose a swatch from the Swatches panel and transform it into a tagged swatch by clicking the Convert To A Tagged Swatch icon (
) below the swatches grid. Tagged swatches differ from other swatches in that a small white tag appears in the lower right of a tagged swatch.
When you have a number of shapes using the tagged swatch, you can easily update the swatch and the changes will automatically cascade across all objects using that tagged swatch.
Convert to a graphic symbol
ACA Objective 2.4
VIDEO 4.10
Creating a Graphic Symbol
Symbols, at their most basic level, serve as containers for artwork. They come in three varieties, each with unique characteristics that allow them to be used for animation and interaction. Keep in mind that although Animate CC refers to “ converting” elements to symbols, you’re really wrapping the existing elements into symbols. Using symbols will allow nearly any graphical element to become a button, be animated in specific ways, or even be manipulated by code.
Creating a symbol from an existing set of elements is fairly simple. Here’s how.
Select everything on the Flower layer of the timeline and choose Modify > Convert To Symbol.
Once the Convert To Symbol dialog box appears, you’ll be given the option to type in a name for the symbol, select the symbol type, and specify a registration point alignment (Figure 4.16). There’s also an area to access advanced options that are used primarily for linkage as a class within ActionScript.
Figure 4.16 The Convert To Symbol dialog box
Name the new symbol Flower and choose Graphic from the Type selection box. Click OK.
Once you click OK, the symbol is created and stored within the project library. Additionally, an instance of that symbol remains on the Stage, exactly where the conversion occurred.
)
){kind=link}
){kind=link}
){kind=link}
Types of symbols within Animate CC
You can create three different types of symbols within an Animate CC project: movie clip, graphic, and button. In this project, you’ve created a graphic symbol. The choice of which symbol type to use isn’t always clear, but learning more about each of these symbol types can help you choose the one that will work in your interactive media application.
Movie Clip Symbols
A movie clip symbol has a timeline that behaves like—but is completely independent of—the main Stage and is the primary symbol used when creating custom functionality within Animate CC. We’ll see this use of movie clip symbols in greater detail during the later chapters. Movie clip symbols can be controlled with ActionScript or JavaScript as well as through timeline manipulation, making them extremely useful for customizing an interface.
Graphic Symbols
Graphic symbols are fairly simple to create, and the operation of the symbol time-line is exactly the same as that of the main timeline. The main purpose of the graphic symbol is to create reusable graphical elements and simple animations in an efficient package.
Button Symbols
Button symbols provide you with a quick and relatively simple way to create a standard interactive media button. These buttons can be created out of nearly any type of artwork, including other symbol instances, and can support a static or normal state, a rollover state, a down state, and a hit state. You construct the artwork for these states using keyframes, but rather than relying on frame numbers, the interface for construction of a button symbol uses Up, Over, Down, and Hit to identify where the keyframes for these states should be placed (Figure 4.17). We’ll see this in detail as we work through the project in Chapter 8.
)
Figure 4.17 The button symbol timeline
The hit state for a button symbol is not visible, but the artwork in the keyframe defines the clickable area of the button symbol. If a button symbol has no hit state, the current keyframe artwork is used to determine the clickable or live area of the button.