Tutorial 3 - Fills and Outlines

Introduction

This tutorial follows on the previous one, and teaches you how to add colors and styles to the objects that were drawn in the last tutorial. You can either continue with the project you created in Tutorial 2, or you can open a file provided for you named Tutorial2. This file can be found in the Tutorials subfolder within the main Moho folder.

In Moho, visible objects are made up of fills and outlines. All the drawings you made in the previous tutorial are invisible as far as Moho is concerned. You can see the curves you drew while running Moho, but if you were to output the project to an image or movie file, all you would see is empty space. The purpose of the fill editing mode is to define what shapes should be filled or outlined, and with what colors and styles.

Creating Fills

In the main Moho window, click the Fill tab near the upeer left corner to switch Moho into Fill mode.

In the Layer palette, click the Hills layer to make it active for editing.

Now click the Fill tool , and pick the Edit->Select All command. The background hills should highlight to indicate that they've been chosen to be filled, as shown below:

However, they haven't actually been filled yet. The highlighting shows you what's ready to be filled - when it looks right and you're ready to fill the shape, activate the fill by pressing the spacebar on your keyboard.

After creating the fill, the Style palette will display the settings for the fill: its color, its line width and color, and the styles used to display it. For this fill, click the fill color box and set the color to brown, set the edge width slider to 1, and choose 'Gradient' from the Fill pop-up menu.

Click the details button to the right of the pop-up menu to customize the gradient. Set the starting color to brown and the ending color to green as shown below:

You can see the result of this fill by selecting File->Render. A window will appear, displaying the final output of the project so far. Close the window when you're done.

More Complex Fills

Now we'll do a more complex fill shape. Click the "Clouds" layer in the layer palette to activate the cloud layer. Choose Edit->Select None (or press the enter key) to make sure nothing is selected. Now pick the Fill tool . In the main window, click and drag a rectangle around all the points in the left cloud. If you miss some points, you can either try again, or choose Edit->Select Connected to select the rest of the cloud.

When you let go of the mouse, the entire left cloud should be selected, and should look like this:

Now the highlighting looks correct, so press the spacebar to activate this fill. The default fill color is white, which works for a cloud, so there's no need to modify the fill parameters, but we do want to create an outline around this cloud. To do this, switch to the Outline tool . Using the outline tool, drag a rectangle around the entire left cloud again. The highlighted outline should look like this:

Press the spacebar to activate the outline. In the Style palette, select 'Sketchy' from the Line pop-up menu. Now would be a good time to select the File->Render command to see what your final result looks like.

Follow the same instructions on the second cloud, using the Fill and Outline tools to define its shape. When you have the second cloud done, try rendering the project again too see what it looks like in full detail.

Moving On

Finally, to finish up, select the Tree layer from the Layer palette. Use the same techniques for the clouds to fill in the treetop. The tree is a bit more complex than the clouds - if you used the Fill tool to drag a rectangle around the treetop, you'd probably also select the upper part of the trunk - this would make the highlighted fill shape look incorrect. But there's an easier way to select the treetop. Using the Fill tool, just click on the edge of the treetop as shown below, and the whole object will be selected.

When you have the treetop selected, hit the spacebar. In the Style palette, pick a nice leafy green as the fill color. Next, create an outline for the treetop using the Outline tool. Set the "Edge width" of the treetop's outline to be 4, nice and thick - you'll see why next.

Choose File->Render to see how the treetop looks. Notice how the ends of line segments look kind of squared off and blocky. We'll fix that using Moho's variable line width feature. Press Enter to de-select all points. Now, using the Line Thickness tool , click on each of the points at the end of a line segment. Choose File->Render again, and notice how the endpoints are now nicely tapered. This feature isn't limited to endpoints - experiment with using it on other points along a curve. Also, try dragging the Line Thickness tool back and forth to make lines thinner or thicker.

The last shape is the tree trunk. Create a fill for that shape, again using the Fill tool and clicking on the outline of the trunk to select it. Give the trunk a brown color. Finally, create an outline for the trunk.

Render the project. You probably noticed that the trunk seems to be on the outside of the tree. If we thought ahead a bit when we filled in the shapes, we probably would have created the trunk before the treetop, so that the treetop was on top. However, this is a tutorial and you're supposed to learn something here, so we'll learn how to fix it. Pick the Select Shape tool from the toolbar. Click on the tree trunk to select it (it should highlight with a checkerboard). Click the Lower button in the toolbar (or press the down arrow on your keyboard) a few times until the trunk moves behind the treetop. Next, click the outline of the trunk to select it. Again, click the Lower button until the trunk's outline disappears behind the treetop, but not behind the trunk itself.

OK, now everything should be fixed. Render the project to make sure everything's correct. For more information about Moho's fill mode, and detailed descriptions of all the fill tools, the Creating Fills chapter is a complete reference. The next tutorial will move into the Bone editing mode, and you'll learn how to set up some animation controls to make things move.