Editing the Flower Graphic Symbol
Symbols provide Animate CC projects with reusable elements that can be placed on the Stage as instances multiple times without recreating artwork. This approach can drastically reduce file sizes and can also simplify editing a layout by minimizing the number of graphic elements required to produce an interactive media project.
Explaining symbols and instances
ACA Objective 2.4
VIDEO 4.11
Editing Symbols and Symbol Instances
When a symbol is created, it resides in the project library. The symbol acts as a blueprint to instruct Animate CC on how to construct an instance of that symbol.
Instances are representations of the symbol that exist on the Stage and timeline. When you drag a symbol from the Library panel to the Stage, you’re creating an instance of that symbol. You can have multiple instances of a single symbol on the Stage (Figure 4.18). If you edit the symbol, all the instances will change as well.
)
Figure 4.18 You can have multiple instances of a symbol on the Stage.
This feature can be effective for making changes globally in an Animate CC project. However, it can also be frustrating if you want each instance to be slightly different.
Fortunately, symbol instances can be more than exact copies of the original symbol definition in the Library panel. You can modify the individual properties of each instance using the Properties panel or tools such as the Transformation tool. These property changes affect only the selected instance, not the original symbol definition.
Embedding additional symbols and elements within a symbol definition can also provide a means of customizing each instance using code. A common application is to include a dynamic text field within a symbol definition. With some simple programming, you can alter the content of this text field at the instance level. The nesting can get a bit complicated, but having only a single element in the library can make it worth the trouble if you ever need to make global changes.
Differences between movie clip symbols and graphic symbols
Movie clip and graphic symbols look very similar in the Animate CC authoring environment, but big differences between them exist. The first has to do with the synchronization between the symbol timeline and the main movie timeline.
A graphic symbol is linked to the main timeline, whereas a movie clip symbol is an independent object whose timeline runs independently of the main timeline. If the main timeline is changing frames, so is the graphic symbol. If the main timeline is paused, the graphic symbol (which is linked frame by frame) is paused too. The movie clip timeline isn’t bound to the main timeline and runs completely independently.
Another difference involves the use of ActionScript and JavaScript. Using code, you can access and control movie clip instances through the instance name assigned in the Properties panel. The graphic symbol has no option to assign an instance name and is not accessible via code as an object (Figure 4.19).
Figure 4.19 The Properties panel with a graphic symbol instance selected
A performance difference exists as well. Graphic symbols require less processing. Even with this advantage, many interactive media developers make nearly every object a movie clip, just to increase the flexibility of the use of the object, though animators often prefer graphic symbols for the ability to specify the presented frame being shown at any time via the Properties panel.
Editing the flower symbol
VIDEO 4.12
Preparing the Symbol
You can edit symbols by double-clicking any instance of the symbol on the Stage or double-clicking the symbol within the Library panel.
Double-click the symbol instance you created to edit it in place.
When the symbol opens, notice that a breadcrumb trail showing the hierarchy of the object shows up in the top-left corner of the Stage. You can leave the editing mode by clicking the scene name in this breadcrumb trail (Figure 4.20).
Figure 4.20 Clicking Scene 1 in the bread-crumb trail will return you to the main timeline.
Now that you’re operating within the symbol, notice that the symbol itself has its own timeline. In an Animate document, each symbol, no matter the type, has its own timeline. This allows for a great range of creative possibilities.
The next thing you’ll do is to manage this internal timeline a bit better. Because you already have a number of objects within this symbol, you can place each of them on its own layer.
Select all the objects on the Stage either by dragging a selection rectangle around them with the Selection tool or by giving the Stage focus and using the Select All shortcut, Cmd+A (macOS) or Ctrl+A (Windows).
With all of your elements selected, right-click them and choose Distribute To Layers from the menu (Figure 4.21).
Figure 4.21 Choosing Distribute To Layers
This takes each object and creates a new layer for it and then empties the previous layer of all selected content. The original layer is empty, as indicated by a blank keyframe.
Delete the original, now empty layer, by selecting it and clicking the Delete Layer icon (
) beneath the layer stack in the timeline.Both the flowerpot shape and the darker, inner pot shape should now be on separate layers.
Rename the main pot shape pot, and rename the layer representing the inner, backside of the flowerpot potback.
Ensure the topmost layer is pot and that potback is directly beneath it. Lock these layers before moving on.
)
)
Drawing a flower stalk
VIDEO 4.13
Drawing the Stalk
For the stalk of the flower, you’ll create a simple shape with the Brush tool (
) so that it isn’t completely straight and appears a bit more natural. The Brush tool is a freeform tool that draws shapes composed of fill alone.
Create a new layer and name it stalk.
Place this layer between the pot and potback layers by dragging the new layer into position (Figure 4.22). Now the order from top to bottom should be pot, stalk, and potback.
Figure 4.22 Place the Stalk layer in the middle of the layer stack.
Select the Brush tool (
) and look at the Properties panel.Choose a nice green color (#32CC32) for your fill and look to the Brush Shape area of the panel to see the brush size and shape options. Select a round brush and bump the size way up to a value of 14 or so for a thick stalk.
Keep Object Drawing Mode off for now. Since we are drawing the stalk shapes on their own layer, we do not need to worry about interaction with the other elements.
Draw the primary stalk beginning behind the shape on the pot layer and extending up. If you like, you can draw a straight shape by holding down the Shift key as you draw, though it may look more natural if you freehand it. You may wish to adjust the Smoothing value to assist in getting the desired look—a value of 75 works pretty well for this. The stalk, when complete, should measure about 230px in height (Figure 4.23).
Figure 4.23 Set stalk parameters in the Properties panel.
)
)
){kind=link}
Before moving on, we need to define some secondary stalks on either side of the primary stalk that was just drawn.
Select the Brush tool again and reduce the Size value to 10.
Move down a third of the way from the top and draw out a stalk emerging from the left side.
Go another third down and draw another stalk emerging from the right.
You will now have drawn a long, primary stalk for the flower, which includes two branching stalks on either side (Figure 4.24). Don’t worry if things look unnatural at this point; we’ll be able to pose all of the stalk elements more naturally with inverse kinematics!
){kind=link}
Figure 4.24 The fully realized stalk shape