A Review of Layers

While the focus of this book is to learn how to get your files web-ready, let’s take a moment to compare this Timeline panel and its frames with the video timeline presented in Photoshop CC.

Open the scene6_timeline_example.fla file to follow along. You will use similar files for the Hot Glass Tango website in Chapter 24.

The Animate timeline is a combination of the Timeline and Layers panels that you see in Photoshop, but they are not separate. They interact with whatever is on the stage. If you need to hide or store something off the stage, save it as a symbol (graphic, movie, button), audio, or component in the library, and only place it on the stage in the correct timeline frames when required.

Layers appear like stacks of filmstrips stacked on top of each other, which is to give the feeling of depth. They can also keep organized the sections that appear above or below.

For example, a character might be standing outdoors or, in Hot Glass Tango, inside a glass studio. In this case, the letters and his final project, the cobalt glass vase, are in the forefront; the male character is behind the letters holding the pipe that is attached to the glass that he is expanding. Behind him is a type of glass-heating furnace, also known as glory hole, and behind that is the colorful background. If you go in that order, you find the background to be the lowest visible layer. Refer to Figure 21-3. Note when you open this file you may receive a warning that it contains camera effects click OK to open the file.

New Layers

Layers can be created by selecting the layer and pressing the New Layer icon in the upper left of the Timeline panel. You can also remove a selected layer by clicking the Trash icon. Refer to Figure 21-4.

Folders

As in Photoshop CC, layers can be organized into folders by clicking the Folder icon. For example, you may have more than one sound layer, or you want to group the letters and vase together as a set, as seen in Figure 21-5. To keep them organized, you create a folder, name it, and then drag them into a folder. You can expand and collapse that folder to save space.

For my example, I kept them separate because there are not a lot of layers in the file, but you can practice creating a folder, as seen in Figure 21-5. Just make sure to keep the layers in the folder in the same order as shown here. Then you can drag the files out of the folder and delete the folder. Just don’t delete the layers.

Hide and Show Layers and Folder

As with Photoshop CC, you can hide or show layers and folders by turning the Eye icon off or on. When on, there is a dot under the Eye icon; and when off, it is an X, as seen in Figure 21-6.

This is good when you are checking to see what kind of objects are behind the current layer or for scrubbing the timeline with the playhead to compare movements between two layers, as you will see shortly.

Lock Layers and Folders

You can also lock the layer using the Lock icon if you don’t want the object on that layer to move while moving other objects on another layer. Lock can also affect the folder and all the layers within can be locked when a folder lock is selected. Refer to Figure 21-7.

Layer Outlines

The rectangular icon next to the Camera icon allows you to show all layers as outlines, or you can select a layer and only show it in outlines by clicking the colored square. This is only a preview so that you can view movement on all layers; it does not appear like this in the final animation. Refer to Figure 21-8.

The shapes show up in the outline color that matches their layer color. Refer to Figure 21-9.

Click the Outline icon in the layer again to remove the outline color and return it to the state shown in Figure 21-2.

Advanced Layer Settings

The icons in the upper left of the timeline are the new setting for Advanced layers in CC 2019 as seen in Figure 21-10 some are currently on, off or unavailable. This depends on if you are working with AS3 or HTML5 FLA file. Figure 21-10.

This is an advanced layer setting like camera, parenting and layer depth are used in certain types of animations where you are trying to create a camera zoom, a flying toward or away motion for 2D visuals, or locking on to a horizon point with the camera. As you approach different objects that are at varying distances, you arrive at some faster than others. You can see examples of this at https://helpx.adobe.com/ca/animate/using/timeline-layers.html and https://helpx.adobe.com/animate/using/working-with-camera-in-animate-cc.html#parallax-effect .

For this project, other than the camera layer, I left the layer depth setting off, but look at Spinning_advanced_layers.fla where layer depth has been added. In your own project, if you click the first time, you may receive the alert seen in Figure 21-11.

If you do not want to use Advanced Layers, click NO. Click Yes to activate the advanced layers which includes camera effects for layers, layer parenting and the layer depth option. Note that your layer names in the Timeline panel may alter slightly with an added underscore ( _ ) for names with a spaces so that they can work with the Layer Depth panel and other advanced settings.

Layer Depth Panel

Any shape that is on a layer turns into a symbol so that you can work with Z-depth or the camera layer, as you will look at later.

When you work with the Layer Depth panel, make sure your layers are unlocked in the Timeline panel so that you can move the selected layer depth up or down on the right preview. Refer to Figure 21-12.

The depth can be adjusted for that frame or those frames collectively outside or within a folder. Refer to Figure 21-13.

Moving the depth upward causes the symbol on that layer to grow or move forward (negative number); moving the depth downward causes the symbol to shrink or move backward (positive number) away from the viewer. Refer to Figure 21-14.

This adds keyframes to the motion tween, depending on where you are in the timeline. Depending on the depth at each keyframe, it will appear as though symbols that were once behind on one layer are now moving in front of another symbol on another layer.

If you find that you do not want to use this feature, on a specific layer's keyframe then while on that keyframe reset it back to 0. Refer to Figure 21-15.

Doing this deactivates the layer depth and reverts some items back to symbols that no longer shrink, grow, and move behind and in front of one another (Z-depth), as well as those effects attached to the camera layer. You can activate them again, but be aware that some settings may have altered if you make changes after reactivating. Other advanced settings that can interact with Layer depth and camera in an Action Script 3.0 FLA include the new Layer parenting. While not included in the examples, Refer to Figure 21-16 to see what this advanced feature looks like. You can learn more at https://helpx.adobe.com/ca/animate/using/timeline-layers.html#Layerparenting .

Whether you plan to use advanced layers or not, make sure that you save you objects as symbols (as you saw in Chapter 20) before beginning your animation project.

Layer Types

As in Photoshop CC, there are several types of layers.

You can adjust the type of layer by double-clicking the Layer icon or right-click the layer and choose Properties from the pop-up menu. For the Mac, Ctrl-click and select Properties. This brings up the Layer Properties dialog box for that layer. Refer to Figure 21-17.

You can also choose a different outline color and a layer height from the properties; this increases the size of the layer in the timeline by 100%, 200% or 300%, so it is easier to select, but it has nothing to do with layer order or how a symbol on the layer appears on the stage.

You cannot choose this option in the Layer Properties dialog box by double-clicking it. You will find most options, including switching the layer type to normal, are inactive; however, if you have the advanced layers on, you can then attach the camera to it using a Link icon. Refer to Figures 21-21 and 21-22.

This causes the camera and the objects to be more in sync with each other or locked on. The layer properties attached to the camera is checked. Refer to Figure 21-22.

Frames Types

There are several distinct types of animation frames that can be created within an animation. They often relate to the layer type that was chosen.

You can add frames by clicking the spot you want to insert the frame, and either choosing from the Insert ➤ Timeline and choosing a frame type, or right-clicking the spot and choosing from the pop-up menu. Refer to Figure 21-33.

You can create a frame-by-frame animation by right-clicking a long frame and choosing to convert to Frame-By-Frame Animation and then an option from the side list. Refer to Figure 21-37.

The Custom option allows you to choose your own divisions, such as every fifth frame. Refer to Figure 21-38.

• Frames with content: If there are multiple frames in one section that contain content and no movement, they are dark gray and start with a solid dot and end with a rectangular outline. It may be one long keyframe throughout the animation or broken by another keyframe that contains a different symbol on the stage. Refer to Figure 21-39.

Tweens

The following describes the types of tweens.

• Classic tween : The frame shows up purple with an arrow. This indicates movement of a shape or symbol from one spot to the next keyframe, which in this case is static. For a Classic tween to act like a Motion tween it requires a guide layer. And the tween becomes guided. HTML5 Canvas’s Output panel recommends using Classic tweens for simple movements, but at publication, it knows how to convert a basic Motion tween into a Classic tween when required for the animation to run smoothly. Refer to Figure 21-40.

• Motion tween: More advanced than a Classic tween. Symbols using this tween can transform and move along in a variety of ways across the stage. Motion tweens may have multiple keyframes within the motion that show up in the golden area. Refer to Figure 21-41.

You can also use advanced layer settings with a motion tween.

• Shape tween: The morphing of a shape to another. A symbol cannot morph, but it can contain a shape tween. A orange bar with an arrow is used for this tween. While a symbol on a Motion tween can scale in size or rotate, its basic shape cannot alter as it does with a Shape tween. Refer to Figure 21-42.

• Camera tween : A golden color and can contain the Motions tweens of zoom and moving left or right. Refer to Figure 21-43.

• Armature tweens: They are green and contain the main points of movement, called poses. Refer to Figure 21-44.

• 3D tween: This can only be used in ActionScript 3.0 FLA files. With a Motion tween it allows you to work with the 3D tools. Crosshairs appear when you select a keyframe and chose 3D Tween. You’ll look at 3D in Chapter 23 to morph your symbol in the Z-path. You can get out of a 3D tween by selecting the keyframe and unchecking 3D tween. Refer to Figure 21-45.

With any layer that contains a tween, you can right-click it and choose to remove.

Other Frame Types

The following are other frame types.

• Audio frames : Show the audio previewed in the timeline with jagged lines representing the sound. Refer to Figure 21-46.

The sound stops when it reaches the end of the frame in ActionScript 3.0 video; however, in HTML5 Canvas, it may continue to play beyond the frame.

• Comment frames : Labeling frames that are blank frames keeps thoughts organized. For example, knowing which video, sound, or action is playing on the preceding frames. Also, you call a name rather than frame numbers when creating certain complex JavaScript actions on an HTML5 Canvas timeline. The comments can be added when a frame is selected, and then entered into the Frame Properties panel. Refer to Figure 21-47.

• A little red flag appears when a frame is labeled as a name.

• A green // is a comment

• A yellow anchor is an anchor type.

Actions Panel

When a lower case “a” appears in a frame this indicates is there is an action on a frame it can be referenced in the Actions panel as seen in Figure 21-48.

You don’t have to label frames or actions for simple animations; however, the Output panel may report a warning if you do not label frames in certain JavaScript code instances.

Further Information on Frames

Any frame when selected in its entirety can be moved by dragging when the cursor changes to a double-sided arrow to shrink or expand the frame.

Frames can be copied and pasted into other frames or another layer. Alternatively they can be reversed or removed when you choose an option by right-clicking a frame. Refer to Figure 21-49.

They can also be cleared without deletion of the actual layer. You can access these options from either the pop-up menu when you right-click a point in the frame.

Depending on the type of keyframe or tween, different information appears in the Properties menu that you can edit, as you see next.

More Information About Shape Tweening

Unlike Classic and Motion tweens, a Shape tween cannot be made up of symbols. It can be made of primitives, drawing objects, shapes, and grouped shapes, which you saw in Chapter 19.

Sometimes the shape does not morph as you would expect, so to control a complex shape, you need to use your Properties panel as well as Shape hints (Modify ➤ Shape ➤ Add Shape Hint).

You can have up to 26 shape hints, which range from A to Z. They appear as little circles, as seen in Figure 21-50.

The following are some tips about shape hints:

• Hints allow you to mark object points that you want to morph in a specific direction so that the shape tween does not appear as a tangled mess, and each transition remains smooth and recognizable.

• To view them, when you return to the shape, choose View ➤ Show Shape Hints.

• The hints must have a corresponding hint at the end of the tween.

• Shape hints are yellow in a starting keyframe, green in an ending keyframe, and red when not on a curve.

• For best results when tweening shapes, follow these guidelines: In complex shape tweening, create intermediate shapes and tween them instead of just defining a starting and ending shape. Shape tweening is a lot like using the blend tool in Illustrator CC, you can use this tool to create your transitory shapes and then break these symbols apart in animate to use as your transition shapes.

• Make sure that shape hints are logical; for example, if you’re using three shape hints for a triangle, they must be in the same order on the original triangle and on the triangle shape to be tweened. The order cannot be ABC in the first keyframe and then ACB in the second.

• Shape hints work best if you place them beginning at the top-left corner of the shape and move counterclockwise.

• You can right-click a shape hint to remove it. Or choose Modify ➤ Shape ➤ Remove All Hints.

Shape Tween Easing

You can create advanced tween movements in the Tweening tab in the Properties panel when a frame containing the Motion tween is selected. Refer to Figure 21-51.

Ease in (–) or Ease out (+)?

Easing adds a gradual speed up or slow down to an animation’s beginning or end.

You can choose from several different preset eases. Then you must double-click in the middle box to apply it to your frame and Movie Clip symbol. Refer to Figure 21-52.

• Classic ease: Allows you to set your own intensity, while ease in or out has other settings you can choose from when you double-click the options, as seen in Figure 21-52.

• Custom ease: Clicking the Word or Pencil icons allows you to create, save, and apply your own custom ease. You can preview it with the Play and Stop buttons. Refer to Figure 21-53.

  

• Blend: Set to distributive or angular using the drop-down menu in Figure 21-51.

Classic Tween Easing

Classic tweens have a similar layout to Shape tweens in the Properties menu; however, this time, you are working with a symbol and not a shape. Refer to Figure 21-54.

Remember Classic tweens need a guide layer and a guided layer, or they’ll just move in a straight direction. You are affecting the guided layer that the symbol is on.

As before with shape, you can choose all properties or each property separately. Each property separately allows you to add different easings to your symbol in the frames, such as the position, rotation, scale, color, and any filters that were applied. Refer to Figure 21-55.

Motion and Camera Tween Easing

The Motion tween and Camera tween both involve motion and can have varying Motion tweens settings that appear in the Properties menu. Refer to Figure 21-56.

They allow you to create complex tween movements very easily. Both of their Property panels are identical, since both involve the movement of symbols.

As before, you can set the ease in the Properties menu; however, to set a custom or preset ease you need to look in a different location in the timeline, which you will in a moment.

Like with the Classic tween you can set the times of the rotation and the direction clockwise and counter-clockwise, but you can also additionally rotate in degrees. You also can orient to Path and Sync graphic symbols in the Options tab.

To adjust the easing, double-click the frame of any of these tweens motion or camera (or right-click and choose Refine tween) and you will see within the layer added settings that you can manipulate to create custom easing and symbol movement. Refer to Figures 21-57 and 21-58.

The X and Y indicate where on the stage the symbol is moving. X controls the horizontal and Y the vertical movements. By moving the control or anchor points, you can change which frame the movements happen on, and isolate and keyframe movement you want to alter. To collapse the layer, double-click the frame or right-click and uncheck refine tween from the pop-up menu.

If you shrink or enlarge your symbol that can be controlled as well in the same manner in the Transform section. X controls the width and Y the height of the symbol. Refer to Figure 21-59.

You can also add additional points to the graph, trash/remove points, or expand the graph to view it better.

Clicking the Add Ease icon reveals many ease options to choose from, so make sure to experiment. Refer to Figure 21-60.

Clicking the triangles reveals more suboptions.

Remember that if you add an ease here, it may affect or reset the ease that was added in the Properties panel.

Zoom in by percentage if you need to adjust the easing and direction more accurately. Refer to Figure 21-61.

Motion Presets Panel

If you don’t like any of the motions of the symbols that you created on the stage, you can use the Motion Presets panel. You can use the choices that are provided by Animate CC (in the Default Presets folder), and then customize them to make your own custom presets. You can preview them in the Motion Presets panel. Refer to Figure 21-62.

Select your symbol on the stage and click Apply in the panel. You will receive a warning that this will override the old motions. Click OK to override the old setting. To undo, you need to select Edit ➤ Undo right away to revert to your original settings.

Bone Tool and Armature Easing

You will look at some examples of Bone tool movement in Chapter 24; for now, just review the figures in the book so that you get a basic idea of the tool that uses what is known as IK, or inverse kinematics , where joints or bones are chained in a parent-child relationship and move along with the connected bone as a puppet or a marionette moves. Refer to Figure 21-65.

This can be used to create natural movements for joints in the body. As you can see in Figure 21-66, when Bone tools are applied, a normal layer becomes an armature layer.

It is like a Motion tween in some ways, but there are distinct differences.

Bones can be two symbols that move on common joints. Refer to Figure 21-67.

They can also be multiple joints added to a shape within a symbol.

The Bone tool is probably one of the most complicated tools in Animate CC. It requires many hours of practice to master.

To create your bones or body parts, you need to design them in Illustrator CC. Refer to Figure 21-68.

Then when all the symbols are on the stage use the Bone tool to drag and connect your joints. All the joints are on the one armature layer and not separate layers. Once you have joined all the armature symbols, you cannot add or paste additional symbols to the armature layer. You must add the new symbol to a new layer, and then use the Bone tool to connect it to become part of the armature layer.

Joints can be modified with the Selection tool (V) and mouse drag Alt/Option or Ctrl keys and Modify ➤ Arrange to move the armature symbols forwards and backwards so they overlap correctly.

Moving around the bones can be done using the parent/child arrows in the Properties menu. Refer to Figure 21-70.

Joint movement can also be constrained at each point (IK Bone) so that the movement is more realistic, such as the knee or arm joint only moving in one direction, or pinned to the stage to keep the bone from moving. The Free Transform tool (Q) allows you to adjust the location points of the IK bones on each shape when you select the point on the symbol.

Not all shapes have to have joints. You can create your own joints in a straight or single bone-shape, like an animal tail, a snake, or a flower stalk. Refer to Figure 21-71 and the flower_stock.fla and flower_stock.html files.

On the timeline, you can copy and insert poses after keyframes are created when you right- click a frame. Refer to Figure 21-72.

When you create a nested animation like the stock that contains the armature on a shape. The symbol on the stage will not animate when you scrub the keyframe across the timeline. It is unfortunate that you can’t preview nested animations to get the movements in sync. So, make sure that when you publish your HTML5 Canvas file or video the first time to observe where you may need to adjust the animation as I have done, so that each of my keyframes are in sync with the nested armature. Refer to Figure 21-73.

You see more about exporting in Chapter 22.

The Bind Tool

By default, the control points of a shape are connected to the bone that is nearest to them. You can use the Bind tool (M) to edit the connections between individual bones and the shape control points. Refer to Figure 21-74.

In this way, you can control how the stroke distorts when each bone moves for better results. This technique is useful when the stroke of a shape does not distort as you want when the armature moves, as you can see in the flower stock example.

The Spring and Damping easing in the Properties panel control how the bones will ease. Refer to Figure 21-75.

The easing options can be accessed in the Type drop-down menu. They range from slow to fastest.

In the Options tab, you can control the armature style to be wire, solid (default), line, or none. Refer to Figure 21-76.

Unlike other motion layers, the armature layer does not allow you to control advanced settings when you double-click it. So, you must control the settings for each bone in the Properties panel for location, rotation, and translation.

How the bone bounces and wobbles is controlled in the Spring tab with the Strength and Damping options. Refer to Figure 21-77.

For more information on working on the Bone tool, make sure to review Adobe Animate CC Classroom in a Book by Russell Chum and to visit https://helpx.adobe.com/animate/using/bone-tool-animation.html . You might also find the short article, “Mysteries of the Bone Tool” by Joseph Labrecque to be helpful (see https://theblog.adobe.com/mysteries-of-the-bone-tool/ ).