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

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 re-creating 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

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.

• Video 4.11 Editing Symbols and Symbol Instances

Instances are representations of the symbol that exist on the Stage and timeline. When you drag a symbol from the Library 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 within a 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 within 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 (Figure 4.19). The Graphic symbol has no option to assign an instance name and is not accessible via code as an object.

Figure 4.19 The Properties panel

A performance difference exists as well. Graphic symbols require less processing. Even with this advantage, many interactive media developers make nearly everything Movie Clips, just to increase the flexibility 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

You can edit symbols by double-clicking either any instance of the symbol on the Stage or the symbol within the Library panel.

• Video 4.12 Preparing the Symbol

1. Double-click the symbol instance you created to edit it in place (Figure 4.20).

   

   Figure 4.20 Double-click to edit 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.

   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 amount 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.

   NOTE

   It doesn’t matter if you double-click the symbol within the Library panel or use the edit-in-place option of double-clicking an instance on the Stage. You’re still editing the base symbol—not the individual instance. This means that any changes you make will be made to all instances of that symbol. This doesn’t matter much in this case, since you’ll be using only one instance of this symbol.

2. 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 (Mac OS) or Ctrl+A (Windows).

3. With all of your elements selected, right-click them and choose Distribute to Layers from the drop-down menu that appears (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.

4. Delete the layer by 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.

5. Rename main pot shape pot, and rename the layer representing the inner, backside of the flowerpot potback. Lock these layers before moving on.

Drawing a flower 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.

• Video 4.13 Drawing the Stalk

1. Create a new layer and name it Stalk.

2. Place this layer between the pot and potback layers by clicking and dragging the new layer into position (Figure 4.22).

   

   Figure 4.22 Place the Stalk layer in the middle of the layer stack.

   Now the order from top to bottom should be pot, Stalk, and potback.

3. Select the Brush tool () and look at the Properties panel.
4. Choose a nice green color (#32CC32) for your fill and check 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 for a thick stalk.

5. Draw a stalk beginning behind the pot 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. The stalk, when complete, should measure about 230px in height (Figure 4.23).

   

   Figure 4.23 Set stalk parameters in the Drawing object Properties