Creating your first rig

You’ll establish your first rig inside a bitmap image.

1. Open the 05Start.fla file and then save it as 05_workingcopy.fla.

   The file contains two bitmap images saved in the Library. The snow_background asset is an image of the snow. The woman asset is an image that has its background removed in Photoshop.

   

2. Drag the snow_background bitmap from the Library panel onto the Stage. Align the bitmap so that X=0 and Y=0 and the bitmap completely covers the Stage.

   

3. Rename the layer background.

4. Insert a new layer above the background layer and name it woman.

   

5. Drag the woman bitmap from the Library panel onto the Stage. Position her in the center of the depression in the snow at about X=97 and Y=133.

   

6. Select the Asset Warp tool .

7. In the Properties panel, under the Tool tab, make sure the Envelope option is turned off, the Create Bones option is turned on, and the Bone Type is set to Hard.

8. Click the woman’s left shoulder.

   Animate creates a mesh over the bitmap and creates a single joint. Your rig is established.

   

   If you use the Selection tool to select the woman, you’ll notice that the mesh goes away, and the object on the Stage is no longer a bitmap and is now called a Warped Bitmap in the Properties panel.

   

   The Warped Bitmap is stored in the Library as WarpedAsset_1. You’ll learn to rename and organize warped assets later in this lesson.

9. Select the Asset Warp tool again and click your first joint to select it. Move your cursor over the woman’s elbow.

   Animate shows a preview of where a bone will be created, based on the position of the cursor.

   

10. Click the woman’s elbow. Animate creates another joint at her elbow, and a bone appears, connecting the first point at her shoulder and the second point at her elbow. Hard bones are shown as elongated triangles, with the fatter base at their origin and the narrower tip at the farthest joint. The first joint becomes a square, indicating that it is the root joint.

    

11. Finally, click the woman’s left wrist.

    Animate creates a third joint with another bone connecting to it. You’ve just completed the first rig for your bitmap.

    

Creating additional bones

Your first set of bones and joints will control the woman’s left arm. Now you’ll create additional bones for your rig for her other limbs.

1. With the Asset Warp tool selected, click an area outside the mesh.

   The last joint of your rig becomes deselected.

   

2. Click the woman’s right shoulder.

   A new joint is created.

   

   In step 1, you needed to click an area outside the mesh to ensure that Animate creates a new joint in step 2 unconnected from a previously selected one. If you were to click the woman’s right shoulder when the joint of her left wrist was still selected, you would create a connecting bone as in the following screenshot (which is something that you do not want!).

   

3. As you did with her left arm, continue creating bones down her right arm by clicking her elbow and her wrist.

   

4. Click an area outside the mesh and build bones inside each of the woman’s legs, with joints at the hips, knees, and ankles.

   

   Your rig is complete! Notice that your bitmap can have multiple bones that are not connected to one another.

Moving your rig

Now for the fun part. With the Asset Warp tool, you get to move the individual joints around to position your graphic for animation.

1. Drag the woman’s left upper arm upward by dragging on the bone between the shoulder and elbow joints.

   

   Her arm rotates upward. The bone is highlighted in orange and the joint at the elbow is highlighted in red.

2. Drag the woman’s left lower arm (her forearm) upward.

   

   Her forearm rotates upward. The bone is highlighted in orange, and the joint at the wrist is highlighted in red.

3. Now try dragging the joint at the woman’s left wrist.

   

   When you move a joint, you can reposition the attached bone by stretching or shortening the bone as well as rotating it. Dragging a bone, as you did in steps 1 and 2, allows only for rotation.

4. Drag the joint at the woman’s left elbow so that she is fully raising her arm above her head.

   Tip

   As you’ll notice, moving the bones of your rig too much will likely result in unnatural distortions as the bitmap gets stretched too far from its original position. When you use the Asset Warp tool on bitmaps, it’s most effective when used with less dramatic or extreme motions.

   

   Note that when you move a joint, any attached joint and bone farther down the chain also move. So when you move the upper arm bone and elbow joint, the forearm bone and wrist joint follow. Another way to describe this relationship is to call the first joint the parent and the connecting one the child. Moving the parent also moves the child.

Using rotation angles

Sometimes you’ll want precise control over the angle of a joint. You can enter numerical values for the rotation angle in the Properties panel.

1. Select either the bone in the woman’s right upper arm or the joint at the woman’s right elbow.

   

2. In the Properties panel, under Warp Options, enter the value –132 as the new rotation angle.

   

   Her right arm moves upward at the new angle.

   

3. Select the bone in her right forearm or the joint at her wrist.

   

4. In the Properties panel, under Warp Options, enter the value –87 as the new rotation angle.

   Her right forearm moves upward at the new angle.

   

   Feel free to adjust either of her arms to establish the first position in the animation of the snow angel.

Mesh options

When you’re working with your rig, you may want to see your bitmap more clearly, without the superimposed mesh. You can hide the mesh by deselecting the Mesh option (the eye icon) in the Warp Options section of the Properties panel.

Hiding the mesh allows you to see only the joints and bones of your rig.

The slider to the right of the Mesh option allows you to change the resolution of the mesh over the bitmap. Move the slider to the right to increase the mesh density, or move the slider to the left to decrease the mesh density.

The mesh density determines how coarse or refined the warping of the bitmap over your rig is. For most purposes, you can leave the slider at its default middle position.

Repositioning joints and bones

Use the Edit Rig mode to move joints within a rig without affecting the mesh.

1. With the Selection tool or the Asset Warp tool, right-click your rig and choose Edit Rig.

   

   Animate puts you into a rig editing mode. The rig appears in a different color, indicating that you can reposition it without affecting the underlying mesh or graphic.

   

2. Drag the elbow joint to a new position within your mesh.

   

   The joint and connecting bones move to a new position but do not modify the bitmap.

   Make sure you drag the joint back to its original (correct) position before moving on.

3. Exit rig editing mode by clicking the left-facing arrow at the top of the Stage.

   

   You return to Scene 1.

Removing joints and bones

Use the Delete/Backspace key to remove joints and connecting bones.

1. Select the last joint (in the wrist).

   

2. Press the Delete/Backspace key.

   The selected joint and its connecting bone are removed from the rig.

   

3. Press Cmd/Ctrl+Z to undo your edit to the rig.

4. Select just the bone in the forearm.

5. Press the Delete/Backspace key.

   The selected bone is removed from the rig, but the joint in the wrist remains.

   

   Pressing the Delete/Backspace key on a selected pin deletes the pin as well as the bone associated with it. Pressing it on just a selected bone deletes the bone, leaving the pin as it is.

Reconnecting joints and bones

Use the Option/Alt key to reconnect joints with bones.

1. Select the woman’s right elbow joint with the Asset Warp tool.

2. Hold down the Option/Alt key and click the joint in her right wrist.

   Animate creates a bone between the two joints.

Creating your keyframes

Each keyframe shows your rig in different positions.

1. On the timeline, select frame 40 in both layers and add frames (F5) to extend the amount of time that you see the woman and the background snow.

   

2. Insert a keyframe (F6) in the woman layer at frame 16 and at frame 40.

   

3. Select the keyframe at frame 16.

4. Move the joints of your rig to position the woman’s arms downward so that the arc of her arms traces the depression in the snow.

   

   You won’t be able to move her arms all the way down to her sides without making major distortions to her shoulder, neck, and face since they are connected, so keep the motion modest.

5. Move the joints in her legs so that they are close together.

   

Applying a classic tween

A classic tween between the first and second keyframes and between the second and third keyframes will interpolate the rig positions.

1. Select any frame between the first and second keyframes.

2. Right-click and choose Create Classic Tween.

3. A classic tween is created from the first keyframe to the second keyframe.

   

4. Select any frame between the second and last keyframes.

5. Right-click and choose Create Classic Tween.

   A classic tween is created from the second keyframe to the last keyframe.

   Tip

   As with any classic tweens, you can also make changes to the scale, rotation, position, or color effect of your warped object and Animate will interpolate those changes between keyframes. If you want to move your entire rig, for example, use the Selection tool to move the warped object to a new location on the Stage. To change the scale or rotation, use the Free Transform tool.

   

   Tip

   You can modify your rig even after a tween has been added so long as the Propagate option is enabled for the Asset Warp tool. If, for example, you add or remove a joint from your rig in one keyframe, that change will be reflected, or propagated, in all the keyframes for the integrity of the tween to be maintained.

   Animate creates a smooth motion between keyframes to move your rig and the bitmap image.

6. Choose the Loop Playback option and extend the brackets to include all frames, from 1 to 40. Play the animation to see the looping snow angel being created by the woman’s arm and leg motions.

Adding a drop shadow effect

To make the animation look more integrated into the snowy background, you’ll add a drop shadow filter.

1. Select the first keyframe at frame 1 of the woman layer.

2. In the Properties panel, in the Filters section, click the Add Filter button and choose Drop Shadow.

   

   A Drop Shadow filter is added to the objects in the woman layer.

3. Change the settings for the Drop Shadow filter. For Blur X and Blur Y, enter 20. For Distance, enter 10. For Strength, enter 75%.

   

   The settings create a softer shadow under the woman for a greater sense of depth and make her appear to be on top of the snow.

   

   On the timeline, the keyframe appears white, indicating that a filter has been applied.

   

4. In the Filters section of the Properties panel, click the options in the upper-right corner and choose Copy All Filters.

   

   The Drop Shadow filter and all its settings are copied.

5. Select the second keyframe at frame 16.

6. In the Filters section of the Properties panel, click the options in the upper-right corner and choose Paste Filters.

   

   The Drop Shadow filter, including all its settings from the first keyframe, is pasted into the second keyframe.

7. Select the third keyframe at frame 40 and paste the filter into the third keyframe.

   All three keyframes contain the same Drop Shadow filter.

   

Renaming and grouping warped assets

In the Library panel, you can manage your warped assets by renaming them and by organizing them in folders, just as you can with symbols and imported assets.

1. In the Library panel, double-click the warped asset named WarpedAsset_1, or right-click and choose Rename.

2. Enter snow_angel as the new name. Press Return (macOS) or Enter (Windows) to accept the modification.

   

3. Click the New Folder symbol at the bottom of the Library panel.

   A new folder is created in the Library panel.

4. Enter warped_assets as the name of the new folder. Press Return/Enter to accept the modification.

   

5. Drag the snow_angel warped object into the new folder.

   

   Keeping your Library panel organized will keep your workflow efficient and save you future headaches.

Editing the snow_angel warped object

Imagine the creative director wants you to change the color of the woman’s pants even though all the animation work has been completed. Fortunately, you can make minor changes to a warped object without having to redo the rigging or tweening process.

1. In the Library panel, double-click the snow_angel warped object, or right-click and choose Edit.

   

   Animate warns you to limit your modifications to minor changes that don’t alter the image’s dimensions or position.

   

2. Click OK.

   You enter asset warp editing mode. The graphic appears on the Stage, but the rig is absent.

   

   This mode is different from rig editing mode, which you learned about previously. In this editing mode (accessed through the Library), you make modifications to the graphic. In rig editing mode (accessed by right-clicking the rig itself on the Stage), you make modifications to the rig without altering the graphic.

3. Right-click the graphic on the Stage and choose Edit With Adobe Photoshop 2023, or choose Edit With and choose Photoshop in the dialog box that appears.

   

   Photoshop opens, and opens the bitmap file of the woman in snow pants.

   

4. Make simple changes to the photo color (Image > Adjustments > Hue/Saturation or Color Balance). Depending on your skill with Photoshop, you can first make a selection to just target the woman’s snow pants.

   

5. Save the changes to the image in Photoshop (Cmd/Ctrl+S).

6. Return to Animate. In Animate, click the left-pointing arrow above the Stage to exit editing mode and return to Scene 1.

   The warped asset in Animate reflects all the changes you made to it in Photoshop.

   

   The creative director should be happy with your revision. (You don’t need to let them know how easy it was to make in Animate!)

Creating a branching rig

A branching rig is one in which a single joint can connect to multiple joints and bones, much like a human pelvis branches into two legs. Moving the pelvis (the parent) moves the joints and bones in the legs (the children). In this task, you’ll create a branching rig in a vector shape of a weightlifter.

1. Save your 05_workingcopy.fla file and close it. You will not need it for the remainder of this lesson.

2. Open the 05Start_weightlifter.fla file in the 05Start folder and save it as 05_workingcopy_weightlifter.

   The file contains a drawing of a weightlifter, composed of different colored fills. The shapes are in frame 1 of a single layer called weightlifter.

   

3. Select the Asset Warp tool and click the weightlifter graphic on the Stage.

   The whole shape becomes selected.

   

4. Click the top of the weightlifter’s chest.

   A mesh is applied to the selected shape, and a single joint is created.

   

5. Click the weightlifter’s abdomen, just below his belt, to create a second joint with a bone connecting the two joints.

   

6. Continue building the bones down the weightlifter’s right leg with joints in his knee, ankle, and foot.

   

7. Click the joint in the abdomen to select it.

   Note

   A joint can have multiple children but not multiple parents.

   

   New bones will be created from the currently selected joint.

8. Click the weightlifter’s left hip, knee, ankle, and foot.

   Animate creates bones that branch from the hip.

   

9. Click your first joint at the top of his chest. This parent joint is square and is also known as the root joint.

   

10. Click the weightlifter’s outstretched left arm to create joints and connecting bones. Create joints at the shoulder, elbow, and fist.

    

    Your finished rig should look similar to the following screenshot. Don’t worry about adding joints to his other arm. You’ll do that later.

    

Freezing joints

To prevent a joint from moving from its position on the Stage, use the Freeze Joint option in the Warp Options section of the Properties panel.

1. If you drag the rig in the weightlifter from the root joint (the square joint in his chest), the entire rig, and therefore the entire mesh, moves.

   

2. Move the rig back to its original position.

3. Select the joint in one of his ankles.

   

4. In the Warp Options section of the Properties panel, select Freeze Joint.

   

   The selected joint becomes a large blue circle to indicate it is a frozen joint.

   

5. Select the other ankle joint and choose Freeze Joint in the Properties panel.

   Both joints are frozen and are fixed to the Stage.

   

   Now when you drag the root joint of the rig, the entire mesh moves except the two ankle joints, keeping the weightlifter’s feet in place.

   Note

   You cannot select multiple joints to change their warp option preferences. Only single selections are possible.

   

Using soft bones for flexible connections

In the previous task, you froze the weightlifter’s ankle joints so that as his body moved downward, his legs became compressed. That effect happens when you use hard bones, the default bone type in the Asset Warp tool. Hard bones allow you to elongate and compress the mesh. An alternative option, soft bones, keeps the mesh from being compressed. See the sidebar “Hard, soft, and Flexi bones” for additional details.

In this task, you’ll modify the bones in the weightlifter’s legs from hard to soft bones.

1. Select the weightlifter’s right ankle joint.

   

2. In the Warp Options section of the Properties panel, change the Bone Type from Hard to Soft.

   

   The connecting bone becomes a soft bone, indicated by its shape. Soft bones are thin and rectangular, while hard bones are shown as triangular.

   

3. Select the other ankle joint and change the Bone Type from Hard to Soft.

   

4. Move the parent joint of the mesh downward.

   

   Because the ankle joints are frozen, the mesh has nowhere to go as you move the rig downward. Rather than being compressed, the mesh bends in a flexible manner. It’s not entirely natural, but in the next series of tasks to animate the weightlifter, you’ll move the rig in a more natural position by dragging the other joints.

5. Move the rig back to its original position before moving on to the next task.

Hard, soft, and Flexi bones

Which one do you pick? Rigs can be made of hard, soft, or Flexi bones, and you can mix and match them within the same warped asset, depending on the needs of your rig. You can also change them at any time.

What’s the difference between these bones? Hard bones appear as triangles that are thicker at their parent joint and thinner at their child joint. Soft bones appear as straight rods of uniform thickness, and Flexi bones can appear as curved rods.

Different bone types change the mesh of the warped asset differently. In a hard bone, if you were to move two joints closer together, the mesh would squash and shorten.

On the other hand, soft bones will attempt to preserve the volume of the mesh as you move the joints of the rig. If you were to move the two joints closer together, the mesh would compensate and bulge outward. Soft bones have the potential to distort the mesh more naturally, but their behavior can also be more unpredictable.

Flexi bones are the latest addition to Animate. Flexi bones allow you to create curved bones with Bezier handles. Instead of clicking to position each joint in a rig, you drag to pull out handles to create your curves. You can not only move and rotate joints, but also change the curvature of each bone for more precise control.

Animating your weightlifter

With the modifications to your rig for soft bones and frozen joints, you’re now ready to animate your character.

1. Create new keyframes at frame 15 and frame 30 on your timeline.

   

   The first and last keyframes (frames 1 and 30) will remain identical, with the weightlifter in his full upright position. You will modify the rig in the middle keyframe, at frame 15.

2. Move your playhead on the timeline to frame 15.

3. With the Asset Warp tool, move the root joint downward.

   

4. Move the knee joints outward so that the weightlifter’s legs bend naturally.

   

5. On the timeline, insert a classic tween in between frames 1 and 15 and in between frames 15 and 30.

   

6. Select the Loop option for playback on the timeline, and move the first and last brackets to encompass all your frames. Play the animation to see your weightlifter in action!

   

Isolating joints

Fine-tuning your animation means positioning your rig exactly how you want it. Double-clicking a joint isolates the positioning of only that selected joint without affecting its child bones.

1. Turn off the Loop Playback option.

2. Move your playhead on the timeline to frame 15.

3. With the Asset Warp tool, select the joint in the weightlifter’s left hip.

4. Move the joint slightly outward.

   

   The joint moves and all its child bones follow.

5. Double-click the joint.

   The child bone of the selected joint becomes pale yellow, indicating that the selected joint is now isolated. You can move the joint without affecting any of its child bones.

   

6. Move the left hip joint.

   Note

   As you move your rig around in the middle keyframe, you may notice the frames on your timeline occasionally flashing. This is an indication that Animate is recalculating the tweening to interpolate the changes between keyframes.

   

   Moving the isolated joint repositions that joint alone.

Adding more bones

You’ll add bones to the weightlifter’s right arm and see how those changes propagate to all the keyframes.

1. Select the first keyframe on your timeline.

2. Choose the Asset Warp tool, and in the Tool tab of the Properties panel, make sure the Propagate Changes option is turned on.

   

   The Propagate Changes option is turned on by default.

3. Select the root joint and create additional joints in the weightlifter’s shoulder, elbow, and fist, just as you did with his other arm.

   

4. Move your playhead on the timeline to the middle keyframe, at frame 15.

   The additions you made to your rig in the first keyframe propagate to the other keyframes to keep the tweens intact.

   

5. Feel free to move the weightlifter’s arms around in the middle keyframe so that his elbows dip down a little as he squats. The additional motion can help provide a sense of weight and realism.

   Note

   Animate propagates both deletions and additions of bones and joints across keyframes.

   

Adding single joints

You’ll add an unconnected joint in the mustache of your weightlifter. As he does his squat, his mustache unfurls.

1. Select the middle keyframe, at frame 15.

2. Choose the Asset Warp tool. Click off the rig to deselect any selection, and then click the tip of one side of his mustache.

   

   A single joint is created at the tip of his mustache, and the change is propagated across the other keyframes.

3. Click off the mesh to deselect the joint and then click the tip of the other side of his mustache.

   

   Another joint is created at the tip of the other side of his mustache. The rigs in your other keyframes also get the additional joint.

   If you are creating multiple joints without connecting bones and you do not want to keep deselecting joints, you can change the options in the Tool tab of the Properties panel. Turn off the Create Bones option to create joints only.

   

4. Move the joints away from the weightlifter’s face to straighten out his mustache.

   

   Animate animates the changes so that his mustache unfurls as he squats with his weights.

   

5. Add an ease-out to your first tween and an ease-in to your second tween to give your motion a little more realism. Feel free to experiment to make the motion your own!

6. Choose Quick Share And Publish > Publish > Animated GIF to export an animated GIF to share on social media.

Fixed and Open Handle modes

When you create single joints in a rig, you can choose whether those joints are Fixed or Open for the Handle mode in the Warp Options section of the Properties panel. This determines how they behave and how they affect the mesh.

For Open Handle mode, which is the default option, you can move the joints to different positions to warp the mesh. In this example, there are three joints in a long rectangle. Moving the middle Open joint upward deforms the rectangle so that it bends.

For the Fixed Handle mode option, you can move the joint position as well as rotate the mesh around the joint. Move your cursor close to the dotted circle around the joint and drag to rotate the mesh.

Adding Flexi bones

Close the 05_workingcopy_weightlifter file and open the 05_Start_snakecharmer.fla file to explore the animation potential of Flexi bones. Save the file as 05_workingcopy_snakecharmer.

1. Examine the project timeline.

   

   The timeline contains multiple layers organized in two folders: a basket_snake folder and a snakecharmer folder. Inside the snakecharmer folder are six layers that have a completed animation of the snakecharmer moving his flute up and down with his head and arms.

   The snake layer contains a vector shape of a snake body. You will use the Asset Warp tool with Flexi bones to animate the snake.

2. Make sure all the layers are locked except for the snake layer. Hide the basket_front layer so that you can see the snake’s entire body.

   

3. Select the Asset Warp tool.

4. In the Tool tab of the Properties panel, make sure Envelope is disabled, Create Bones is enabled, and Bone Type is set to Flexi.

   

5. Click the snake’s body near its base to select it, and then click it again.

   

   Animate converts the vector shape into a warp asset. A mesh appears over the graphic and your first joint is created. If you want Animate to maintain the vector shapes instead of converting the snake into a bitmap, change the preferences in Animate > Preferences.

   

6. Move your pointer up the snake’s body and drag to create the next joint.

   As you drag your pointer, handles appear from the joint and the bone curves in the same direction as the Bezier handles.

   

7. Release your pointer and create the next joint farther up the snake’s body in the same manner, creating curved Flexi bones that follow the curves of the snake.

   

8. Create the last joint in the snake’s head.

   

Animating the snake

The snake will dance to the snakecharmer’s music. You’ll animate its slinky movements by changing the curvature of the Flexi bones in the rig.

1. On the timeline, create a keyframe (F6) at frame 25.

   

   The first keyframe and the last keyframe will be identical so that the animation can loop seamlessly.

2. Create another keyframe (F6) at frame 8.

   

3. With the Asset Warp tool, double-click the first joint from the root joint.

   Note

   Recall that double-clicking a joint allows you to isolate the joint from the rest of the rig to manipulate it.

   

4. Move the joint to the left to shift that portion of the snake’s body.

   

5. Double-click the next joint and move it slightly to the right to shift that portion of the snake’s body.

   

6. Drag the handles of the joint to smooth out the curvature of the snake. Hold the Option/Alt+Shift key to move both sides of the handles together.

   

7. Create another keyframe (F6) at frame 15.

   

8. As you did in the previous keyframe, use the Asset Warp tool to move the joints of the snake and modify the curvature of the Flexi bones with the joint handles. You can follow the positioning and curves in the following image, or you can try your own snake moves.

   

9. Select all the frames between the first keyframe and the last keyframe in the snake layer and choose Create Classic Tween.

   Animate applies a tween between your four keyframes in the snake layer and smoothly interpolates the sinewy movements between keyframes.

   

10. Select the Loop option on the timeline, move the brackets to cover all your frames, and press Return/Enter to preview your animation.

    

11. Watch your snake do its slinky dance to the tune of the snakecharmer’s flute! If you’re not satisfied with the motion, you can always return to any of the keyframes to modify the positioning of the joints or curvature of the Flexi bones in the rig.

    Tip

    You can hold down the Option/Alt key and drag the Flexi bone itself to change its curvature instead of using the Bezier handles at the joints.

Adding the musical notation

The musical notation is a bitmap, which you will place in a separate layer.

1. Unhide the basket_front layer.

2. Insert a new layer and rename it music.

3. Drag the music layer to the bottom of the layer stack.

   

4. In the Library, find the music bitmap and drag it to the Stage in the music layer.

   

5. Use the Free Transform tool to scale the bitmap smaller (about 80%) and move it so that the right edge of the bitmap is hidden under the snakecharmer’s body.

   

Applying the envelope deformer

The envelope deformer is an option in the Asset Warp tool that adds control points around the boundaries of your warp asset.

1. Select the Asset Warp tool.

2. In the Tool tab of the Properties panel, enable the envelope deformer option. Leave Create Bones on and choose Flexi as the Bone Type.

   

3. Click the musical notation bitmap.

   The bitmap becomes a warp asset and a mesh is superimposed on it.

   

   Notice that there are additional control points on the four corner points. Because you chose the envelope deformer option, the additional control points allow you to deform the contours of the graphic.

   If the graphic were not rectangular, Animate would add enough control points to define the contours of your warped asset.

   Note

   You cannot add additional control points to the envelope deformer.

Adding the rig with Flexi bones

A warped asset can just have an envelope deformer without a rig inside it, or it can have both an envelope deformer and a rig. In this example, you’ll add a rig with Flexi bones so that you can create slight curves in the musical notation.

1. With the Bone Type set to Flexi, create a bone from the right side of the music to a point just in front of the snake’s head. Remember to drag when you create the second joint, but keep the handles horizontal so that the bone is straight.

   

2. Continue making bones across the music so that you have three joints and one root joint.

   

Animating the music

You can deform the contours of the graphic and reposition the joints or bones of the rig at the same time.

1. Select the Asset Warp tool.

2. Click the bottom-right corner control point on the envelope deformer.

3. Pull down on the handle that is connected to the corner control point.

   

   The bottom edge of the warped asset bends and deforms the graphic.

4. Move the corner control point upward.

   

5. Move your pointer to the edge of the mesh until a curved line appears near your cursor, indicating you can modify a curve. Pull up on the top edge to deform it.

   

   The top edge deforms. You can either use the handles or push and pull directly with the Asset Warp tool.

6. Reposition the joints and move the handles to create a smooth, wave-like curve for the rig.

   

7. Insert a new keyframe (F6) in the last frame of the music layer.

   

   The last keyframe will remain identical to the first to ensure a smooth loop for the animation.

8. Insert a new keyframe (F6) at frame 13 of the music layer.

   

9. Modify the curve in your rig and/or deform the contours of the warp asset in the keyframe at frame 13. You don’t have to move the control points or handles too far—subtle movements can go a long way, and will also create fewer issues for Animate to tween.

   

10. Select all the frames between the first keyframe and the last keyframe in the music layer and choose Create Classic Tween.

    

    Animate applies a tween between your keyframes in the music layer and creates the undulating musical notation animation.

11. Select the Loop option on the timeline, move the brackets to cover all your frames, and press Return/Enter to preview your animation.

    

    Your animation is complete! The Flexi bones in your rig, combined with the envelope deformations, make possible the fluid, organic motions of the snake and music.

Think of the countless creative ways you can use modern rigging and envelope deformation in your animations!