Fiziwig's Animator Studio Tutorials

Gary's Anime Studio Experiments is my collection of experiments, in tutorial form, put together while learning how to use Anime Studio. I hope you find them useful.

I'm going to start with the eyes. But before I try adding eyes to the Grimdore character, I'm going to do some experimenting on how to build and rig eyes for motion and blinking. Just to get an idea of where I'm headed with this, take a look at this Flash Animation of the results of this experiment:

There are several things I want the eyes to do. I want the pupil to be able to move side to side and up and down. I want the eyelids to be able to open and close and be able to blink. I want the eyebrows to be expressive and easily movable during animation. All that means that the eyes will have to have shapes, plus bones to control the motion of the shapes. So let's get started.

I started with a new empty project called "grim_eyes.anme". I'm going to build Grimdore's eyes as an independent Anime Studio object and then import the eyes into my character file once they are working properly. That way I avoid the complexities of dealing with working around all the other stuff that's already in my character file. In addition, it means that I will be able to import these same eyes into some other character in the future.

I'm going to build and rig one eye only. Once that is done I will copy and paste a copy of the eye to make a matched pair of eyes. There will be several overlapping shapes involved in the building of the eye, so I'm going to make it a habit right from the start to name every shape so that I can select a shape more easily from the Style window. The shapes, in order from back to front, will be:

I'm not going to try to draw all these overlapping shapes in the same place. Instead, I'm going to draw them spread out a bit around the screen and then move them to their proper positions once they are completed. I will NOT be welding points together. I find it more usefull to leave the shapes disconnected so I can more easily edit them later without affecting any of the other shapes.

I'll begin with the eyeball color shape. This will eventually be filled with white, but for now I'm using a light blue fill so that I can distinquish it from the blank white of the background. The shape will be nothing more than a simple oval as shown below. I've named the shape "Right Eyeball Color". I have also turned off Enable Outline for the shape since we will never actually see the edge of the shape.

The pupil is drawn just above the eyeball color shape. Here I've selected black for the fill color and blue for the outline color. Selecting all the points of the circle with the Select Points tool, I used the Line Width tool to make the outline very thick so that it shows the iris color as shown below.

I made the right upper eyelid by selecting all the points of the eyeball color shape, and copying and pasting. I moved this new shape to the right of the original. Notice that when you copy a shape it also copies the name of the shape, so you will end up with two shapes named "Right Eyeball Color". Select the one on the right and give it the new name "Right Upper Lid". Next, using the Peak tool, change the two side points to peaked points. Next, drag the bottom point up a bit until it forms an eyelid shape as show in the next figure. Then fill the shape with a flesh tone.

The reason I used cut and paste instead of drawing the shape from scratch was to insure that the two side point and the top point matched up the the corresponding points in the eyeball color shape. Notice also that the Enable Outline is still turned off, which is what we want.

Next, repeat the same process to make the right lower lid, and place it just below the upper lid.

The final shape for the eye itself (we'll build the eyebrow later) is the outline shape. Again cut and paste the eyeball color shape and move it off to the left. Rename this new shape "Right Outline". Turn OFF the Enable Fill, turn ON the Enable Outline, and select an outline color of black. Select the left and right points only, and click on the Peak tool to change them to sharp corners. Next, select the top point, and using the Line Width tool, pull the width to make a nice plump line. Selecting the lower point, use Line Width to pull this out, but not quite as drastically as the upper outline. Finally, drag the top and bottom points toward the middle to create a pleasant eye-like shape. Your main window should now look something like this:

If you haven't already done so, rename the "Layer 1" to "Eyes". Then click on the new layer button and add a bone layer. Name this layer "Eye Bones" and drag the Eyes layer up into the bone layer. Double click the bone layer and in the Bones tab, select the option for "Region Binding". Off the the left of the pupil, draw a new bone pointing down. If you use the Manipulate Bone tool now you will see that the whole layer rotates around the bone. This is not what we want at all. We want to very precisely choose what this bone will control. The first thing we must do, therefore, is to un-bind everything from this bone. Go to the Eyes layer and using the Select Points tool, select every single point of every shape on the whole layer. Then go to the menu under "Bone" and click on "Release Points". This unhooks every point from the bone. Now if you try the Manipulate Bones tool you will see that the bone controls nothing at all.

We want this bone to control the up-down and side-to-side movement of the pupil. Begin by selecting this bone so that it is highlighted. Next, select the Eyes layer and grab the Bind Points tool. Using the Bind Points tool, select all four points of the pupil and hit the space bar. Now if you try Manipulate Bones you will see that only the pupil moves when the bone is moved. This is exacly what we need.

So far we have done everything with the timeline set to frame 0. You will notice that in frame 0 when you manipulate a bone it can only be turned, not moved. If you grab the Translate Bone tool and try to move the bone around, the points that are bound to that bone will NOT move with the bone. However, if you go to the timeline and click on frame 1, you will then see that the Translate Bone tool moves both the bone and the points that are bound to the bone. It is this tool that we will use to animate the up-dow and side-to-side motion of the pupil.

The next bone we will add is to control blinking. Specifically, the upper eyelid and upper outline. Be sure you are back on frame 0! Use the Select Bone tool and click on a blank space to select NO bone. This new bone must not have a parent. Off to the right of the shapes, draw a horizontal bone pointing to the right. This bone will only control two points. Select the new bone and then select the Eyes layer. Using the Bind Points tool, select the very top point of the outline shape, and the lower center point of the upper eyelid shape, as shown below. Then hit the space bar to bind the points.

Again, if you test the binding by using the manipulate bone tool you will see the two shapes get pulled and distorted as your rotate the bone. However, if you go to frame one and use the Translate Bone tool to move the bone straight up and down, you will see the eye outline open and close in response to the bone movement. Now select no bone again, and add another bone below the first one. Repeat the above steps to bind this bone to the lower eyelid and lower outline shape. (Are you back on frame 0?)

These two eyelid bones now need to be tied together. Select the upper eyelid bone, and in the name box below the menu bar, give this bone the name "Upper Lid". We don't need to say "Right" upper lid, because this bone will eventually control both eyes at the same time. Now select the lower lid bone and open the Bone Constraints panel. What we want is not to control the rotation, because we won't be rotating this bone, but to control the sliding motion only. In the slot for "Position Control Bone" pick "Upper Lid". Following that are two number boxes. The first controls the strength of side-to-side motion. Since we want both eyelids to track side-to-side motion the same, leave that set to 1. The second box is up and down motion. Here we want the lower lid to move up when the upper lid moves down and vice versa. In other words, we want the lower lid to do the opposite of the upper lid. To do that, put -1 in the control strength. Now go to frame 1 and try using the Translate Bone tool on the upper lid bone to see that when the upper lid is closed, the lower lid closes too. Notice also that when you move the bone a bit to the right or left it creates a sort of turning effect on the outline.

Now we are ready to assemble the pieces of the eye. Be sure the Auto Weld Option is turned OFF. Go to the Eyes layer and select the points of the Outline shape. Using Translate Points, drag them over onto the Eyeball Color shape, lining up the left and right side points. Repeat this process with the upper eyelid, and then the lower eyelid. You should end up with something like this:

Notice the two problems circled in red. The lower lid sticks up above the outline leaving a sliver of flesh color on the eyeball. Grab that point and move it down until the edge of the eyelid is completely hidden behind the outline. The other problem is that the eyeball color shape is not completely hidden beind the eyelid shape as it needs to be. We can solve that problem by changing the side points to peak points. Note that when working on points that are on top of each other, you can better see what you are doing if you magnify the view and then pull the points slightly apart. After making your change, pull the points back together. You might also check the top and bottom points of the eyelids and maybe pull them up just a fraction to be sure the eyeball color is completely covered.

Now that we have one eye working, we only need to copy and paste the eye parts to make a second eye. Be sure you are on frame 0 before proceeding. If you have been testing the animations in frame one, also be sure to select the Eyes layer and click on the Menu Item Animation > Clear Animation From Layer. Select all the points except for the pupil, and hit ctl-C, then ctl-V to paste a copy. Then move the copy to the right a bit. For each bone, use the Bind Points tool to add the corresponding points of the copied eye to the correct bones.

Renaming the copied shapes can be tricky. When you copy and paste a shape it copies the name as well, but when you select a shape by name from the drop-down list, it picks the first shape with that name. In other words, if I select the second "Right Upper Lid", it will still select the first occrance of that shape name. What you need to do is select each name in turn from the list, temporarily put "-" in front of the name, hit return, and then again select the second "Right Upper Lid" and rename it to "Left Upper Lid". Then select the name with the extra dash and remove the dash from the name. It's a pain, but it's the only way to rename layers that have the same name. What Anime Studio should do is give copy-pasted shapes a distinct name by putting something like "[2]" after the name when you paste it. But alas, it does not. Your main window should now look like this:

Before adding the eyebrows, I'd like to be sure that the eyes are lined up accurately, so I need a grid in the main window. Unfortunately, I'm using Basic Anime Studio, not the Pro version, I have to make my own grid. Below is the grid I made. You can copy this png image and import it to an image layer in Anime Studio and use it in place of a built-in grid.

I won't go into quite so much detail on drawing and rigging the eyebrows. If you've followed the steps up until now you should be able to figure it out from the pictures. Two things to note: The eyebrows are going to pivot in the middle, so place the pivot of the bone in the middle of the eyebrow. Second, the two eyebrows need to move in unison, but in opposite directions. Make the right eyebrow (the one on your left) be a named bone and the left eyebrow use that named bone as its Angle Control Bone. Just make the control value -1 so the movement will be in the opposite direction.

Finally, use the Offset Bone tool to move the pupil and eyebrows to their proper place for animation. You can download the complete Anime Studio file here.

And here, just for fun, is the new set of eyes imported into the Grimdore character file. I'll get into the details of importing the eyes in the next session, when I will work on completing Grimdore's face and hair.