In the Fill mode for vector layers, you take the drawings you created in Draw mode, and you tell
Moho which areas should be filled with color, where outlines should be placed, and what fill and
line styles to use.
The drawings created in Draw mode are only guides. As far as Moho is concerned, they're
invisible and they won't show up in the final rendered output. That's where Fill mode comes in.
Draw mode defines the shape of objects, while Fill mode defines the appearance
of those objects. Of course, you're always free to switch back and forth between any of Moho's
editing modes at any time.
To define a region to be filled, you must first select all the points along its boundary. That's
what defines a fill region - the set of points along its outer edge. We'll see some examples
later. You can also create outlines in Fill mode. Outlines are less restrictive than fills - an
outline is not a set of points along an outer boundary. Instead, an outline can be any set of
points you choose. The curve segments between these selected points will form the outline.
Fills and outlines are stacked on top of each other in the order you create them. This
determines which fill or outline will be visible when two or more overlap. There are tools that
allow you to change the stacking order of fills and outlines, but you'll learn that you can
save yourself a lot of time by planning ahead and creating fills in the proper order to begin
with.
Fill Tools
The following tools are available in Fill mode.
Select Shape
This tool is used to select an existing shape - either a fill or an outline. Just click on the
desired shape and it will be selected. At that point, you can press the <delete> or
<backspace> keys to delete the shape, adjust its properties in the
Style Palette,
or change its stacking order using the fill modifiers described below.
Delete Shape
Using this tool, click on a fill or outline to delete it from the project. Remember, in Moho,
the shape of an object is separate from its appearance. If you use this tool to
delete a fill, the underlying points and curves will remain. If you want to delete those as
well, go back to Draw mode to work with the points and curves.
Fill
The Fill tool is used to select a region to be filled with color. It operates exactly like the
Select Points tool described in the
Draw Mode
chapter. Using the fill tool, select all the points that form the outer border of the shape
you wish to fill. A highlighted checkerboard will show you the extent of the region you are
creating. When you have the desired region selected, press the spacebar to actually define a
fill shape from the selected region. The
Style Palette
can now be used to choose the fill's color and style.
The picture below shows a selection in progress using the Fill tool. Note that the circle on
the left is not highlighted because its border points are not all selected. The checkerboard
area indicates the region that would be filled if the user hit the spacebar at this particular
moment.
Outline
The Outline tool works just like the Fill tool, except that instead of defining a region to
fill with color, it defines a set of lines to be drawn. As with the Fill tool, the selected
outline is highlighted in thick red lines, and you must press the spacebar when the desired
outline is selected to activate it. The
Style Palette
can now be used to choose the outline's color and style.
The picture below shows a selection in progress using the Outline tool. Outlines don't have the
same requirement that fills do - any group of selected points can form an outline. The
highlighted curve segments in this picture indicate the outline that would be created if the
user hit the spacebar at this particular moment.
Select Points
The Select Points tool operates exactly like the Select Points tool described in the
Draw Mode chapter. This tool is also available in Fill mode in
case you want to adjust the line thickness through multiple points, using the Line Thickness
tool (below).
Line Thickness
The Line Thickness tool is used to adjust the width of a line as it passes through a
particular point. Using this tool, you can create lines that taper at the ends, get thinner
in the middle, or change width several times along their length. To use it, just click on
the point you want to adjust, and drag the mouse left and right to adjust line thickness.
(Be sure you first either set up an outline through the point, or a fill shape with a non-zero
line width - otherwise this tool won't do you much good.) You can adjust more than one point
at a time by selecting multiple points with the Select Points tool above.
Fill Modifiers
The following buttons operate on the currently selected fill or outline shape. Just click
on one of them to modify a shape.
Lower Shape
Click this button to lower a shape in the stacking order. This will move it behind the next lower
shape. The stacking order only applies to shapes within the same layer - all shapes in a layer
will appear above any lower layers and behind any upper ones, regardless of stacking order. Note
that if there is no shape overlapping the selected one, you may not see any change when this
button is clicked, even though the shape gets moved lower.
Raise Shape
Click this button to raise a shape in the stacking order.
Note: the up and down arrow keys are handy keyboard shortcuts for the Raise and Lower Shape tools. Just
press these keys to raise and lower the selected shape. If you hold the shift key down when using the
arrow keys, the selected shape will be moved to the very top or bottom of the layer's stacking order.
Complex Fill Shapes
When creating fills, Moho tries to be clever and ignore selected parts that can't possibly be
part of the outline of a fill, such as points on dead-end curves. However, there are times when
Moho needs a little help from you. As an example, take the shape below:
To fill this shape with color, your first thought might be to select the entire group of points.
Unfortunately, you would get a fill like this, which probably isn't what you wanted:
The reason for this is that a fill is defined by the points along its boundary. In this case,
it's not obvious to Moho which boundary you intended. Many times, Moho can figure it out and
provide you with the fill you were after, but in a case like this, you have to be more specific
about what points are the boundary of the shape. The definition of a fill hasn't changed -
but sometimes your intentions aren't as obvious to Moho as they are to you. The following
selection contains only the boundary points of the desired fill region:
Here's another example of a fill based on the same set of curves:
Remember, when a fill doesn't look right, make sure that you've only selected the points
along the fill's boundary, and nothing else.
Compound Fills
Remember how a fill is defined: a fill is defined by the set of points along its boundary.
With that in mind, let's talk about fills with holes. To create a fill shape with one or more
holes inside it, just select the points along the edge of the hole as well as the points on
the outer boundary. The picture below shows a selection made with the Fill tool. If only the
four points of the rectangle had been selected, then the fill shape would have been a solid
rectangle. However, by selecting the interior curves as well, we can create a shape with holes
in it - it's simply a matter of defining more boundaries for the fill.
The next picture shows a small variation on the one above. In this case, there's a smaller
circle inside the first one. The rule is the same - we've just added more boundary curves to
this fill.
There's no limit to the kinds of shapes you can create this way. By adding more boundary
curves, you can create more and more complex fills - feel free to experiment.
A Trick: Using Two Fills Instead of One
Sometimes you may want to create an object with parts that overlap in complex ways. Consider the
image below:
After the discussion about stacking order, is the red ring in front of or behind the blue one?
Well, the answer isn't so simple. There is no way two objects could be arranged this way with
simple stacking. (If Moho were a 3D program, things would be very different.) The red ring is
in fact two objects - one behind the blue ring, and one in front of it. The next image shows
the same object, but colored differently so that the two parts of the red ring stand out.
It takes a little more work to set up an object when you have to split it into two (or more)
parts, but sometimes it's the only way to achieve a certain effect. The picture below shows
the project in a Moho window, so that you can see the arrangement of points and curves. Note
how the red ring has some extra curves set up so that it can be split into two fills.
This technique is also useful in animation, for when you want an object to bend backwards and
overlap itself. Normally, this would cause the fill that defined the object to get seriously
distorted, or even to break holes in itself. However, by building the object out of two or more
parts and stacking them properly, you can achieve this type of effect with no problem.