Controlling Images with Bones
In Chapter 26, “Creating and Binding Bones,” we’ll show you how you can use bones to control the objects on a vector layer, but bones can also be used to control image layers. There are two distinct ways to use bones with images.
Making a Bone Control an Image Layer
The first way to use bones with image layers is to bind the bones to the entire image layer so that the movement and rotation of the bone works to move and rotate the layer. This method works when creating a character from various drawn and scanned body parts. If you locate the layer’s origin at the rotation point of the body part, then you can use the Layer Rotate tool to rotate the body part, such as an arm, relative to the rest of the body.
The Winsor character that was the default in Anime Studio 5 is a good example of this. If you drag the Time Slider to frame 0, then you can see several of the bone-controlled body parts separated from one another, as shown in Figure 22.8. Notice in the Layers palette how the various body parts are all image layers.
Note
The Winsor character is still available in the Anime Studio 5 Content folder in the Library.
Using Bones to Warp Images
If bones cross the middle of the image layer, then the resulting image can be distorted as the bones are moved. The key to getting this distortion is to enable the Warp Using Bones option in the Image panel of the Layer Settings dialog box. When this option is enabled, the image will warp to match the movement of the controlling bones.
One type of animation that has become popular on the Web using this method is the Jib-Jab style of animation. To animate in this style, you simply need to split the desired image into separate files that can be loaded and animated independently.
Tip
If you save the foreground images as PNG files, then you can save the image with the option of making the background color transparent. This allows the background to be visible.
To create a Jib-Jab style of animation, follow these steps:
Select the File, New menu command (Ctrl/Cmd+N) to create a new blank project.
Click the New Layer button in the Layers palette and select the Image option from the pop-up menu. In the File dialog box that opens, select the Background.jpg file from the Chapter 22 folder on the CD. Add two more image layers and load the Head.png and the Trunk.png files into these new layers. Make sure the head image layer is the top layer in the Layers palette.
Select each of the image layers and scale its size to match the other image layers with the Scale Layer tool (2) and then move them into position with the Translate Layer tool (1).
Select the Set Origin tool (0) and move the origin for the head image layer to the base of the elephant’s neck. Move the origin of the elephant’s trunk to the base of its trunk.
Click the New Layer button in the Layers palette and select the Bone option from the pop-up menu. Then drag and drop the Trunk.png and the Head.png image layers onto the new bone layer. Select the bone layer and with the Add Bone tool (A), create a single bone for the elephant’s head that runs from the elephant’s neck to its tusks. Then create three additional bones that run the length of the elephant’s trunk. If the bones are created in succession, the trunk bones will be parented automatically to the head bone, causing the trunk to move with the head.
Select the Trunk.png layer in the Layers palette and open the Layer Settings dialog box. In the Image panel, enable the Warp Using Bones option and close the dialog box.
With the bone layer selected, drag the Time Slider in the Timeline palette to frame 6 and select the Manipulate Bones tool (Z); then drag the tips of the head bone upward. Then drag the tip of the last trunk bone forward.
Drag the Time slider to frame 12 and move the elephant’s bones again. Repeat for frames 18, 24, and 30. Notice how the elephant’s trunk warps as the bones are moved but the elephant’s head remains undistorted.
Click the Play button (Spacebar) to see the resulting motion, as shown in Figure 22.9.
