1.

01 A Quick Run-Through
1.02 Drawing Simple Shapes
1.03 Drawing Complex shapes
1.04 Bone Setup
1.05 Animation
2.01 Welding
As you learned in the Quick Start tutorials, Moho features an Auto Weld feature that
automatically welds shapes and segments together when your cursor reaches a point
that you can weld to. However, there are cases where you may want to manually
weld points together.
When drawing in Moho’s vector layers, the concept of “welding” points is very
important. These tutorials will show you examples of how (and why) points can be
welded, and will go on to show you some examples of good and bad welds you can
do in Moho.
When you weld two points together in Moho, Moho really is combining those two
points into one. There are a couple reasons to do this: First, welding the two endpoints
of a curve together creates a closed curve. Second, if two shapes join up at a
particular point, and you want them to remain joined during an animation, then
welding those points together will guarantee that those two shapes will remain joined.

How to Weld Points

There are two ways to weld points in Moho: manually and automatically.

To manually weld two points together with the Transform Points tool, first uncheck the
Auto-weld option for the tool.

Auto-weld option unchecked

Drag one point on top of the other and press the Enter key.
 Before Enter key is pressed (left). After Enter key is pressed (right)

The second method of welding is automatic. For automatic welding to work, be sure
that the Auto-weld checkbox is turned on in the tool options area when the Transform
Points tool is active:

Make sure Auto-weld is on

Using this method, when you drag a curve endpoint on top of another point , the point
turns green when it can be welded automatically. Let go of the mouse to
automatically weld the points together.

Automatic welding

Remember that only a curve endpoint can be automatically welded. However, the
point that it is welded to does not need to be an endpoint.
Automatic welding also works with the Add Point tool. When you add a new point, you
can drag it around as if you were using the Transform Points tool. As long as the new
point you added is a curve endpoint, it can be automatically welded to another point.
If the new point is not an endpoint, you can still weld it to another point manually by
pressing the Enter key when it overlaps another point.

Add Point tool with Auto-weld option on

Besides welding two points together, Moho can weld a point to the middle of a curve
segment. This can be done with either the automatic or manual welding methods.
 Welding to a curve segment

Why to Weld Points

OK, so that covers welding points, but why do you want to weld points again? The main
reason is to create fillable shapes. In order to fill a shape with color, that shape should
be completely closed, either by overlapping lines or by shapes that are welded
together so that there are no gaps in the shape that you want to fill.

A non-closed shape
By welding the two endpoints together, we can create a closed shape that can then
be filled:

A closed shape that can be filled

Examples of Good Welding

Let’s look at some examples of good welding choices. First, the following two points
could be welded to create a single, continuous curve:
 Joining two curves

The next case shows the classic case of welding a curve closed to create a fillable
shape:

Closing a curve
Next, we show a shape made up of several curves. Notice that a closed, fillable shape
does not need to be made up of a single curve. The shape below, after welding, is
made up of three curve segments, but is still closed and can be filled with color:

Joining multiple curves into a single closed shape

The welded and filled shape

 Examples of Bad Welding

Typically, when you weld together two points, one of them should be a curve endpoint.
This isn’t always true, but most often it is. If you find yourself welding together two points
and neither is an endpoint, take a moment to think whether the weld is appropriate.
Here’s an example of a bad choice of welding. Suppose you had the following two
shapes and you were considering welding the pairs of circled points:

Before welding the marked points

Although Moho will let you perform those welds, it isn’t really a good idea. What you
would end up creating is a shape with lots of little holes in it. Along the section of curves
that you welded together are little bubbles that make it impossible to fill the two main
shapes:
 Bad welding

Instead, a better approach is to just move the two shapes closer together without any
welding at all. In this case, welding the two shapes together doesn’t have any benefit.

Fill the shapes without welding them together

Another approach in this situation would be to cut the top shape apart with the Delete
Edge tool and then weld the remaining endpoints to the lower shape. First, cut the top
shape apart:

Cut the redundant curve away

Then, weld the newly-created endpoints onto the lower shape. With this approach you
don’t end up with a double curve all welded together. The resulting shape is much
cleaner and easier to work with:
Weld the new endpoints
 2.02 Drawing Shapes with Holes
Drawing shapes with holes is very easy in Moho, but many new users don’t realize that
this can be done. There’s really no trick at all - just follow the basic rules for creating a
fill.

Reminder of Fill Rules

​

​
As a reminder, let’s consider the rules for creating a fill shape: A fill must be composed
of closed curves that define the border of the shape. So, as an example, below is a
valid fill shape.​

A basic fill shape

 Creating Holes

So a fill shape is defined by the curves on its border. If we want to create a hole, then
all we need to do is create curves that outline the shape of the desired hole(s). Below
we’ve added some extra curves before creating a fill shape:

New curves added

Once you’ve set up curves to define the shape of the hole, all you need to do is select
the outline and the hole(s) using the Create Shape tool. Notice that Moho
automatically identifies the inner curves as borders of holes in the shape. There’s
nothing in particular you have to do, just draw the holes and Moho will know what to
do with them. When you’ve selected all the correct points, press the Create Shape
button along the top to finalize the shape.
 Selected points for filling

Finally, here is the resulting shape. (The Line Width tool was used to narrow the width of
the outline at the corner points.)

The finished shape

Here’s another example of a shape with a hole:

Another shape with a hole
 2.03 Hidden Edges
When drawing more complex objects like faces, you will often run into situations where
you want an outline to only go partway around a shape. There’s an easy way to
accomplish this in Moho.

Start With a Sample File

For this tutorial, we’ll start with a project file that’s almost finished. It’s named Tutorial
2.03 and it’s located in the Tutorials > 2 - Draw subfolder within your custom content
folder. Open this file in Moho and you should see something like this:

Starting point for this tutorial

​
Hidden Edges

The drawing we’re working with could be the beginning of a character’s face. In this
face, the nose and ear are separate shapes from the main head outline. The general
shape looks OK, but where the separate parts join up we don’t want to have lines
separating them. To fix this, activate the Hide Edge tool.​

There are two edges we want to eliminate from this drawing. Click on these two edges
as shown below. If you don’t see an immediate result, try dragging the mouse across
the lines in question to make sure you hit them.

Edges to click on

After clicking on these edges, they should disappear from view, and the result should
be as follows:
 After hiding the edges

The Hide Edge tool works by simply hiding the selected edges of an outline. It does not
affect the underlying curve - the curve is still there, you just can’t see the outline on
that particular section of the curve. Because it works on the outline, and not the curve
itself, be sure you only use the Hide Edge tool after you’ve created the outlines.
Otherwise, with no outline, you would not see the result of hiding some edges.
The other thing to know about the Hide Edge tool is that you can also un-hide edges. If
you change your mind, or hide the wrong edges, just click on a hidden edge to
re-show it.​

Finishing Touches

If you hide the edges of a thicker line, you’ll often end up with abrupt ends to the
outline. You can see this below:
 Blocky curve ends

A nice way to finish off these endpoints is to use the Line Width tool. With this tool, click
on the endpoints to set their width to 0. You can also click and drag to adjust the width
of any other points you choose. After cleaning up the endpoints, you should get a result
like this:

Tapered endpoints
2.04 Varying Line Widths
Moho allows you to change the width of a stroke at any point along the curve. Line
width information is stored as a percentage value, rather than as an absolute value.
You can use varying line widths to create outlined shapes that maintain consistency
when they are bent and animated.

Start With a New Project

Create a new project. In the Style window, select a color that you want to use for the
outline color. Set the width of the stroke to around 100. Use the Add Point tool to draw a
three-point curve. Bend the curve slightly, like an arm.

A simple three-point curve bent like an arm

Switch to the Create Shape tool, and make sure that the line is selected. Then press the
Create Shape button in the toolbar to change the curve to a shape.
Next, switch to the Line Width tool to increase or decrease the width at the points until
you have a shape resembling an arm. Your arm should look similar to the figure shown
below.

The curve reshaped to look like an arm

Now, select the points in the curve again with the Select Points tool, and use the Create
Shape tool to create a second shape with the same curve.
Now you have two strokes that are superimposed directly on top of each other, with
the top shape selected. You can use the top stroke as a fill, but you’ll need to make
some adjustments.

Click to select the new stroke with the Select Shape tool. With the top stroke selected,
change the stroke color to the color that you want to use for the fill of the arm (such as
yellow, shown here).
 Change the color of the top stroke

Reduce the width of the top stroke to a value between 90 and 95 (depending on how
thick you want your “outline” to be). Your project should now look similar to the figure
shown below.

The curve reshaped to look like an arm

Remember that in this method, you are not working with a stroke and a fill. Instead, you
are working with two strokes of different colors that are controlled by the same curve.
Now you can use the variable line width tool to adjust the width of both strokes at the
same time, or make other transformations with the Transform Points tool to reshape or
animate both curves at the same time. This allows you to quickly create character
elements, such as arms or legs, which are easier to animate because they have fewer
points to manipulate.

Line width and transformation changes made on the points or curves affect both
strokes at the same time.
2.05 Shape Ordering
In a Moho vector layer, shapes are ordered from back to front. This ordering determines
which shapes will appear in front of or behind others. This tutorial will show you how to
work with shape ordering.

Start With a Sample File

For this tutorial, we’ll start with a project file that’s almost finished. It’s named Tutorial
2.05 and it’s located in the Tutorials > 2 - Draw subfolder within your custom content
folder. Open this file in Moho, and you should see something like this:

Starting point for this tutorial

As you can see, there are four shapes in this file. By the way they overlap one another,
you can also tell their ordering. From back to front, there is a red shape, a green shape,
a blue shape, and a yellow circle.

Raising and Lowering Shapes

If you want to change the order of some shapes, the first thing you need to do is select
a shape to work with. Using the Select Shape tool, click anywhere on the red shape. It
will become highlighted with a checkerboard to indicate that it is selected. Notice that
you can also see it faintly beneath the other shapes - this is so that you can see the
entire selected shape, even if it is normally obscured by other shapes.

Selected shape highlighted

To raise the shape, press the Up arrow key on your keyboard. Notice that the red shape
has now moved one step up in the layer order, above the green shape:
 Raised shape

Right now, press the enter key to de-select all objects in the layer. The red shape will
switch back to normal to indicate that it is not selected:

De-select the shape

Next, use the Select Shape tool and click on the blue shape to select it. Press the
Down-arrow key twice to lower the blue shape below the red shape, and then
below the green shape:

Lowered blue shape

You can also raise a shape to the top (above all others in that layer) or lower it to the
bottom (behind all others in that layer). Select the green shape and hold down the Shift
key while pressing the Up-arrow key. With a single key press, the green shape moves all
the way to the top of the layer’s shape order.​

Selecting Hidden Shapes

If you now press the enter key, the green shape will be de-selected. Notice that at this
point the yellow circle is behind the green shape, and can’t be seen. You can still see
the curves that make up the yellow circle, but the shape itself, being behind the green
shape, is not visible:
 Hidden yellow circle

Now we want to bring the yellow circle back to the front. Using the Select Shape tool,
click on the yellow circle, even though it’s hidden.
As you may have expected, the green shape gets selected because it is in front:

Selected green shape

Now comes the trick for selecting shapes lower in the ordering. Hold down the Ctrl key
(Windows) or Cmd key (Mac) while pressing the down-arrow key. This tells Moho to pick
the next deeper shape in the layer ordering at the same point you just clicked. The
yellow circle will now be selected. It will be kind of faint to remind you that it is actually
behind other shapes in the layer:

Selected yellow circle

Finally, hold down the Shift key while pressing the up-arrow to bring the yellow circle all
the way to the top of the layer ordering, making it fully visible once again:
Raised yellow circle
2.06 Brushes
Moho allows you to apply brush effects to outlines if you choose. It’s really easy to use
brushes, and this tutorial will show you how.

Draw Some Freehand Curves

Start with a new, blank file in Moho. In the Style window, set the line width value to 16.
Next, activate the Freehand tool. In the tool options area at the top of the main Moho
window, adjust the settings for the Freehand tool to match those shown below:​

•​ Variable Line Width: Use Pen Pressure

•​ Width Variation: 75%

•​ Taper Start: Checked, 20%

•​ Taper End: Checked, 20%

•​ Point Reduction: 50 (default)

 Freehand settings

Draw two or three curvy lines using the Freehand tool in the editing view:
 Freehand curves

Because of the line width set in the Style window, these curves should be rather thick.
The tapering settings in the Freehand options should make the ends of these lines taper
down to narrow points. If you select File > Preview now, the result should look pretty
much like what you see in the editing view:

Rendered curves

Close the rendering window, and use the Select Shape tool to select one of the curves:
 Selected curve

In the Style window, click on the box that currently says No Brush.

No Brush

In the brush dialog that appears, select one of the brush shapes that interests you -
you’ll see a preview of the brush at the bottom of the dialog:
 Brush Dialog (Pro version shown)

Click OK to close the brush dialog, and select File > Preview again. In the rendered
result you can see the applied brush shape:
 Rendered curves

Try applying other brush shapes and Stroke colors to the other curves:

Different brush shapes

(Pro Only) If you notice that your brush effects are not
visible until you render or export your animation, you can
change the display quality to show the effects during
editing. In the lower-right corner of the main Moho
window is the Display Quality popup box. Click this box to
open it. Turn on the Brushes checkbox. This will turn on
brushes in Moho’s editing view.

Displaying brushes while editing requires a lot of

computation and can slow Moho down, so it’s best to use
this as a kind of preview, but not to leave it on all the time.
When you’ve got the brushes how you like them, switch
this display option back off.
Turn on Brushes preview option

Brushes in editing view

2.07 Layer Masking (Pro Only)
This tutorial is more of a show & tell than a hands-on creation of an animation. We will
demonstrate some examples of a powerful feature of Moho - layer masking. Layer
masking can be used for all kinds of effects such as shadows, compositing, depth
effects, transitions, and to simplify certain modeling and animation tasks.

Start With a Sample File

For this tutorial, we’ll start with a project file that’s almost finished. It’s named Tutorial
2.07 and it’s located in the Tutorials > 2 - Drawing subfolder within your custom content
folder. Open this file in Moho, expand the Masking Group layer in the Layers window,
and you should see something like this:

Starting point for this tutorial

This is a simple scene of a wall with a hole broken through it (a jailbreak maybe?). Set
the current time to frame 24, and choose the File > Preview menu command. Notice
how the spotlights spread across the hole as if it were a flat object as shown below:
 Spotlights shining across the hole

To make the spotlights more realistic, we can use Moho’s masking feature. Doubleclick
the Masking Group layer. In the Layer Settings dialog that appears, go to the Masking
tab and set the Group Mask setting to Hide all as shown below and click OK.

Mask setting for the Masking Group layer

In the editing view, you’ll notice that the light no longer appears over the hole. This is
because the masking mode we just set hides the areas of the light that fall within the
area of the hole:
 Everything in the group is hidden

The setting that controls how the mask reacts is found in the next section of the Masking
tab. Double-click the Wall layer to bring up the Layer Settings dialog. In the Masking
tab, notice that the Layer masking value is set to + Add to mask as shown below. Click
OK to exit the Layer Masking tab:

Mask setting for the Wall layer

What we’ve done is tell Moho to add the contents of the Wall layer to the visible region
of all objects in the group. No other layers in the same group will be allowed to draw
outside this visible region (the mask). If you temporarily turn off the Background layer,
you’ll see that there is an actual hole in the wall. Because the wall acts as a mask, the
spotlights cannot draw themselves in this area. You’re welcome to render out the entire
animation as a movie to see the full, animated effect.

The wall acting as a mask

Another Example - Simplified Modeling

Now open the file Tutorial 2.07_2. Take a look at the masking group in this project (in this
case, the masking function is already turned on). In this example, the eyes are used as
a mask, and the eyelids are forced to render themselves only inside the eyes. This
makes it much easier to construct and animate the eyelids, without having to worry
about them spreading outside the eye region - with a mask layer, they can’t.
 Eyes used as a mask

Another Example - Transition Effect

Finally, open the file Tutorial 2.07_3. This project uses a mask layer to cause a text object
to fade into existence. Play back the animation, or export it as a movie, then play back
the movie. In this example, a variation of the masking feature is used: the mask itself
doesn’t have to be visible. In this case, the mask is a rectangle that gradually exposes
the text, but we don’t really want to see the rectangle. To use an invisible mask, the
Mask layer uses the + Add to mask, but keep invisible option in the Masking tab.
Masking text.
 2.08 Styles (Pro Only)
In this tutorial we’ll introduce Moho’s Style feature. A style in Moho is a set of shape
properties, including fill and line color, line width, fill effects, etc. Once you’ve defined a
style, you can apply it to as many shapes as you wish. The benefit to this is that later on
you can easily change the color and appearance of those shapes just by changing a
single style.​

Start With a Sample File

To start off, we’ll take a look at a Moho file that already contains some styles. It’s
named Tutorial 2.08 and it’s located in the Tutorials > 2 - Drawing subfolder within your
custom content folder. Open this file in Moho, and you should see something like this:

Starting point for this tutorial

(Don’t worry that the character is all split apart. This is part of the bone setup described
in another tutorial. If you want to try switching to frame 1, you’ll see that the character
snaps back together. Just be sure to go back to frame 0 before continuing.)
Let’s see what a style is all about. In the Style window, display the Advanced settings by
clicking the Advanced option.
 Click the Advanced checkbox to display more style options.

Select Skin from the Styles popup menu. The Skin style will become selected in the Style
window:
 The skin style selected

Click the Fill color selector to change the Skin fill color. Pick any color you wish. Notice
that the skin color updates instantly on all the body parts of the character, even
though they are separate shapes and in several separate layers. Styles can be used
throughout an entire Moho project, and are not limited to the shapes in a single layer.

Modified skin color

If we look at the Style window, there are three things to notice about the Skin style:
1: The Skin style defines a fill color.
2: The Skin style does not define a line color.
3: The Skin style does not define a line width. Because the Skin style does not define a
line color or width, changing these parameters will not affect the shapes that use this
style.
 Skin style settings

Let’s try a style that does control the properties of a line. Select the Outline style from
the Styles popup menu in the Style window. Notice that this style does define a line
color and width, but does not define a fill color. Change the Line Color to green and
Line Width to 8 as shown below, and assign a brush to the line:
 Modified Outline style

Notice that the Outline style has been applied to all the shapes in the entire character.
Regardless of their other settings (like fill color), all the shapes use the Outline style to
draw their outlines:
 New Outline style

How Styles Are Applied

Now let’s take a look at how styles are created and applied. Create a new Moho
project file. In the Style window, select New from the Styles popup menu.

The Style window will now be editing the values for that style. Give the style a name
(any name), and choose a fill and line color. Finally, set the line width to 8 or so. If you
want to, you can also assign a brush and fill and line effects.
 Creating a new style

Next, create a simple shape in the main window - a circle, rectangle, or text object
would be fine. Make sure that the shape is filled.
 Create a simple shape

The new style in the Styles menu.

If you want to apply a style to any other shape, use the Select Shape tool to click on
your shape to select it. The Style window will update itself to show you the properties of
the selected shape.

Select your style from either the Style 1 or Style 2 popup menu. This tells Moho to apply
that style to the currently selected shape - you should see the properties of your style
applied immediately in Moho’s editing view.

That’s it! As you’ve seen, it’s quite easy to create and apply styles in Moho.
 2.09 Simple 3d Construction (Pro)
Moho is primarily a 2D program, although it does have some 3D tools for positioning the
camera and individual layers. Still, even if you position layers in a 3D landscape and fly
around them with the camera, each vector layer is really just a 2D plane in a 3D space.
While you can’t create 3D objects in the same way that you can in a dedicated 3D
modeling program, Moho does allow you to position and rotate two-dimensional
planes in 3D space and then fly around them. If you need a more complex 3D shape
you can import a 3D object as described in “Tutorial 6.11: Using 3D Models (Pro Only)”.
You can also create 3D objects using a 2D vector shape, as described in “Tutorial 2.10:
3D Shape Design (Pro Only)”.
This tutorial will show you how to build a simple cube in Moho. If you need a more
complex 3D shape, you can import a 3D object file created in a separate 3D modeling
program (described in another tutorial).

Start With a Blank File

​
For this tutorial, start with a new, blank project in Moho. The completed file is also
available for you to examine if you wish. It’s named Tutorial 2.09 and it’s located in the
Tutorials > 2 - Draw subfolder within your custom content folder.​

Creating The Faces

​

The first step is to create the faces of the cube. In the initial, empty layer of your new
project, use the Draw Shape tool to draw a square.
It’s important that the square be precise. Choose the View > Enable Grid command to
turn on the grid. This will help you draw this square.
The square must be centered at the layer origin, must be truly square (not a
rectangle), and should touch the top and bottom of the viewable area exactly. To
draw the square, press the Alt and Shift keys concurrently, and click at the layer origin
point. The Alt key will draw the square outward from the point at which you clicked,
and the Shift key will constrain the rectangle to create a square with four equal sides.
What’s important for this square is that the corners are at (-1, 1), (1, 1), (1, -1), and (-1,
-1) as shown in the following figure.
Don’t worry too much about the coordinates - if you use the grid, center the square at
the origin, and make sure the top and bottom touch the top and bottom of the
viewable area, the corners will be correct.

Start with a square

You can select the Transform Points tool and optionally enter the coordinates for each
point manually in the tool options area.
 You can manually enter coordinates in the Tool Options area

Select the shape with the Select Shape tool. Then fill the square with a color of your
choice and set its line width to 2.
In the Layers window, click the New Layer button. Create a Group layer, name it Cube,
and put the layer with the square inside it. Duplicate the square layer five times and
you should have a setup that looks like this:
 Arranging the layers

Positioning Faces

Select the lowest layer in the group, Layer 1, and make the Transform Layer tool active.
We’re not going to actually use the Transform Layer tool, but making it active allows us
to position a layer numerically. At the top of the main Moho window, in the tool options
area, set the value of X to 0, Y to 0, and Z to 1. This changes the depth of the layer,
bringing it forward toward the camera.

Layer 1 depth setting

Now select Layer 2, and set its X to 0, Y to 0, and Z value to -1. You’ve just positioned
the front and back faces of the cube.

Layer 2 depth setting

The settings get a little more complex from here on out. Select Layer 3, and set its X
value to 1. Y and Z remain at 0.

Layer 3 depth setting

Next, activate the Rotate Layer XY tool. The tool area will reflect the rotation of the
layer around the Y axis. Set the Y Rotation value to 90:

Layer 3 rotated

Next up is Layer 4 - adjust it similarly to Layer 3. With the Transform Layer tool, set X to -1
and Y and Z to 0, and use the Rotate Layer XY tool to set the layer Y Rotation to 90.

Layer 4 Depth Setting

 Layer 4 Rotation Setting

Layer 5 is next - use the Transform Layer tool to set its Y position to 1 and the X and Z
positions to 0. Next, choose the Rotate Layer XY tool and set X Rotation to 90 degrees.

Layer 5 Depth Setting

Layer 5 Rotate Layer XY Setting

Finally, the last layer, Layer 6 - adjust it similarly to Layer 5. Use the Transform Layer tool
to set X and Z to 0, and Y to -1. Then choose the Rotate Layer XY tool and set X Rotation
to 90.

Layer 6 Depth Setting

Layer 6 Rotate Layer XY Setting

At this point the cube is basically finished, but it’s a little too big to see in the
workspace. Use the Transform Layer tool on the Cube group layer to make the entire
thing a bit smaller.
It should look something like this:

The finished cube

Depth Sorting

The final step required to finish the cube is to turn on depth sorting. Double-click the
Cube layer to bring up the Layer Settings dialog. In the Depth Sort tab, turn on the
checkboxes marked Sort layers by depth and Sort by true distance and click OK. The
first checkbox tells Moho to draw the back faces of the cube first, then the front ones.
The second checkbox is a different way of sorting the layers that is mostly used for 3D
constructions like this cube.
Try using the Orbit Workspace tool to view the cube from different angles. It should
appear as a true 3D object.
You could now use the cube in a scene - using the Transform Layer and Rotate Layer
XY tools to position it at an interesting angle, or to move it around during the animation.

The finished cube, with depth sorting

2.10 3D Shape Design (Pro only)
Moho’s 3D Shape Design feature allows you to convert a 2D vector layer into a 3D
object. To demonstrate this, begin with a new project.
Use the Add Point Tool or the Draw Shape tool to create one or more vector shapes in
the layer. Your objects can also include holes. All of the shapes that you create in the
layer will be converted to 3D. Therefore, if you want some of the objects in your scene
to remain two-dimensional, or if you want them to have different 3D properties, you will
need to put them in separate layers.

Start with two 2D shapes in the same layer.

After you create your 2D artwork, open the Layer Settings dialog for that layer. Choose
the 3D Options tab. You will find some options that allow you to choose a 3D
Conversion type. The choices are Extrude, Lathe, and Inflate, which are detailed in the
following sections.

Options for 3D conversion

There are several settings that are common to each of the 3D conversion types. These
options are similar to regular 3D layers, and they affect how the edges and shading
appear in the 3D objects.

Options for Extrude conversion

•​ Edges: Controls which edges should be shown, and whether you want to show
them on Silhouettes, Materials, or Creases. By default, edges are shown for all
three. Uncheck the edges that you do not want to display. When displaying
creases, you can adjust the Threshold setting to control the number of creases that
are displayed. The Edge Extension setting controls how far beyond the edge of the
object that edges will be drawn. Increase the Extension setting to make the objects
look like they have been sketched.
 Edges options

•​ Shading: Choose between None (which gives the object a flat appearance),
Smooth (which gives a smooth, more three-dimensional shaded look), Toon (which
has stepped shading), or Hatched (which shades with a sketched line effect).

•​ Shading Color: To change the shading color of your 3D object, select Hatched
from the Shading drop down menu, double click on the existing shading color and
choose a different color from the color picker.

•​ Shading Density: To change the shading density of your 3D object, select Hatched
from the Shading drop down menu, the input field for the shading density will be
editable, enter a number from 0 to 100. Zero will be less dense whereas 100 will be
more dense.

Extrude Conversions
​
When you choose the Extrude conversion, the 2D object is given a dimension of
thickness: You can observe the thickness by using the Transform Layer tool in the Layer
section of the tool box. You can increase or decrease the thickness of the 3D shape by
adjusting the Thickness setting in the Style window.

Extrude 3D Conversion

When paths are displayed, you can still edit the path to change the shape of the 3D
object, and change its color. You can also add bones to the 3D layer as well.

You can still edit the path to modify the 3D shape.​

Lathe Conversions
​
The Lathe conversion allows you to create a three-dimensional path by drawing a
two-dimensional profile shape that is then projected in a 360 degree circular fashion.
The rotation occurs around the origin point of the shape (represented by the crosshairs
in the workspace area).
The following conditions apply when using lathe conversions:
•​ If the vector shape only has a stroke, the stroke color will be used for the lathe
object, and the outline will be black.

•​ If the vector shape has a fill color, the fill color will be used for the lathe object. The
stroke color will be used for the outline of the lathe object. An example is shown in
the following figure.
 Original filled shape (top); resulting lathed object (bottom)​

Inflate Conversions
​
Inflate is similar to Extrude, except that the edges are rounded, like a pillow. It also
involves more computations than the Extrude option, so you will tend to see better
results after you render it than you will during the preview.

Two inflated shapes on the same layer.

3.01 Bone Binding
The purpose of bones in Moho is to provide high-level objects that are easy to
manipulate in place of moving around lots of individual points. In order for bones to
do their job, vector control points and other objects must first be bound to the bones.
There are three ways to bind objects to bones: automatic binding, manual binding,
and layer binding. This tutorial will show you the difference between the three.

Start With a Sample File

​
For this tutorial, we’ll start with a project file that contains some artwork to get started
with. It’s named Tutorial 3.01 and it’s located in the Tutorials > 3 - Bones subfolder within
your custom content folder. Open this file in Moho, and you should see something like
this:

Starting point for this tutorial

 Automatic Binding
​
The most common method of binding objects to bones is also the easiest - automatic
bone binding. Whenever you draw new artwork in Moho (or import image files as
image layers), those objects are set up for automatic bone binding. All you need to do
is add the bones.

1.​ In the Layers window, click the New Layer button, and select Bone from the popup
menu. Name the new bone layer Arm Bones and press Enter/Return to assign the
name.

Create a new Bone layer (Pro shown)

2.​ Drag the Arm vector layer upward to move it into the bone layer:

Arm layer placed inside a bone layer

Make sure the Arm Bones layer is selected, then activate the Add Bone tool. In the
main editing view, create two bones: the first one starting at the shoulder and ending
at the elbow, and the second starting where the first left off and ending in the hand.
And that’s all it takes for automatic bone binding.

Create two new bones

Use the Manipulate Bones tool to try moving the bones around. The arm will move
with the bones automatically, since it was, well, automatically bound to them.
 Test moving the bones

This arm setup works pretty well as it is, but let’s try to refine it a bit. Double-click the Arm
Bones layer to bring up the Layer Settings dialog. Go to the Bones tab, set the binding
mode to Region binding, and click OK:

Turn on region binding

Flexible binding (the default for new bone layers) uses a method of bone binding
where every bone has some influence over every point in a vector layer. The farther
away a point is from a bone, the less influence that bone has over the point. However,
you can still experience some rubbery movement where a moving arm can cause a
toe to twitch a little bit.

With region binding, on the other hand, every bone has a cutoff radius, outside of
which it will not affect the movement of vector points. This can be used for cleaner
movement, but requires a little extra setup. Now that region binding is in effect,
activate the Bone Strength tool.

Around each bone you will see its region of influence. Vector points are controlled by
the bone(s) whose regions overlap them. If a vector point is not within any region of
influence, it will move with the closest bone. Using the Bone Strength tool, click and
drag on each of the bones to resize its region of influence. The idea is to make the
regions just large enough to contain the body part that the bone is meant to control:
 Resized regions of influence

Don’t worry about the parts of the forearm that are outside the forearm bone’s region
of influence - they will just move with the closest bone, which is in fact the forearm.

​
​
Use the Manipulate Bones tool again to try moving the arm. The movement should be a
little cleaner than it was with flexible binding.

Manual Binding

Manually binding points to bones is a process that exists mostly for compatibility with
older versions of Anime Studio. Automatic binding, combined with bone regions of
influence is the easiest way to work with bones in Moho. However, there may be some
times where you want more control over exactly which bones control which points.
To manually bind the arm points to bones:

1.​ Select the Arm vector layer.

 Arm Vector Layer

2.​ Use the Select Bone tool to select the upper arm bone:

Bind all points to the upper arm

3.​ . Activate the Bind Points tool.

4.​ Drag a rectangle around all the points in the arm to select them, and press the
Enter key to bind the selected points to the selected bone. When you click and
bind points to a bone, you will notice the points in the arm will be colored the
same color as the bone they are bound to. This helps you determine which points
are bound to which bone. In the following figure, all of the points are colored
yellow because they are bound to the arm bone.
 Bind all points to the upper arm

5.​ With the Bind Points tool still active, hold down the Alt key and click on the lower
arm bone to select it. Notice the following:

●​ When you select the lower arm bone, notice that no points are selected.
●​ When you select a bone with the Bind Points tool, the points that are bound to
that bone are also selected. Because there are currently no points bound to the
lower arm bone, no points are selected.
6.​ Drag a selection rectangle around the points in the lower part of the arm, as
shown below. Press the Enter key to bind the selected points to the selected bone:

Select the lower arm bones

You’re done - you have manually bound points to both bones in the arm. Now test it
out with the Manipulate Bones tool.
Although this method does work for binding points to bones, we don’t really
recommend it unless you have a special need to bind specific points to specific bones.
You may have noticed that the arm doesn’t move so smoothly with manual point
binding. This is because the points around the elbow only move with one bone or the
other, and so stretch apart and get distorted. With automatic binding, on the other
hand, the points around the elbow move under the influence of both bones, and so
move more smoothly.
Manual point binding can also be very labor-intensive, especially when your artwork
has lots of control points. Finally, automatic bone binding can be used to warp image
layers, while manual binding can’t - another reason to stick with automatic bone
binding (using either flexible or region binding mode).
 Layer Binding

The last way to bind an object to a bone is to bind an entire layer to a single arm.

7.​ . Make sure the Arm vector layer is still selected and activate the Bind Layer tool.

8.​ Click on the lower arm bone to bind the entire Arm layer to the lower arm bone.

Bind the Arm layer to the lower arm bone

9.​ . Select the Arm Bone layer and use the Manipulate Bones tool to try moving the
bones around. Notice that the entire arm moves rigidly with the lower arm bone -
the entire layer is bound to that one bone.

This isn’t very useful for this particular arm, but binding a layer to a bone is useful when
you want to attach an object to a character. For example, a switch group containing
multiple mouth shapes can be attached to a bone in the head. Or, if you want to
make a character hold an object in its hand, you might bind that object to the
character’s hand bone.

Go Back to Automatic Mode

Let’s undo all of this extra binding and go back to automatic mode.

1.​ Reselect the Arm layer in the Layers window.

2.​ . With the Bind Layer tool, click on some empty space in the editing view -
this tells Moho to not bind the layer to any bone.

3.​ Select the Edit > Select All menu command to select all the vector points.

4.​ Choose the Bone > Flexi-Bind Points menu command to flexibly bind the
points, as they were at the very beginning.

Choose Bone > Flexi-Bind Points to flexibly bind points as originally set in
the beginning.
5.​ Reselect the Arm Bone layer, and use the Manipulate Bones tool if you wish
to confirm that the points are automatically bound again.

The arm under bone control.

3.02 Bone Constraints
This tutorial demonstrates Moho’s bone constraint features. Bone constraints allow you
to define limits on the way bones can move, simplifying your animation work. When
used carefully, bone constraints can let the bone structures do some of the work for
you.

Start With a Sample File

For this tutorial, we’ll start with a project file that’s almost finished. It’s named Tutorial
3.02 and it’s located in the Tutorials > 3 - Bones subfolder within your custom content
folder. Open this file in Moho, and you should see something like this:

Starting point for this tutorial

This file contains two skeleton layers that have no constraints set up. We’re going to
add constraints to these skeletons to show how useful they can be.

Angle Constraints
The first type of bone constraint is angle limits. By limiting the angle that a bone can
rotate, you can prevent arms and legs from bending backwards.

1.​ Make sure the Arm layer is selected.

Select the Arm bone

2.​ . Use the Select Bone tool to select the bone in the Arm as shown below:

Select the lower arm bone

3.​ When the Select Bone tool is active and a bone is selected, the Bone
Constraints popup box will be available in the tool options area of the main
Moho window. Click the Bone Constraints popup to open it.

4.​ Adjust the settings as shown below. Specifically, turn on the Angle
constraints checkbox, and set the min/max angle fields to -10 and 100.
 Set angle constraints

5.​ Click the Close button to close the constraints popup box.

6.​ Set the bone’s name to Forearm in the toolbar options.

Name this bone Forearm

7.​ . Once you’ve set up angle constraints, you can see them in the working
area as two lines around the bone that indicate the minimum and
maximum angles the bone is allowed to rotate between. Try using the
Manipulate Bones tool and move the forearm - notice how Moho doesn’t
allow you to move the bone beyond the minimum and maximum angles
you set up.
 Visual display of angle constraints

Here’s a handy little trick. Often, it can be hard to judge the

correct numerical angles for bone constraints. There’s an easy
way to adjust them if you have a mouse with a scroll wheel. Hold
the mouse over the angle constraint you wish to change (in the
Bone Constraints popup), and roll the mouse wheel up and down.
The angle will change, and the display in the editing view will
update to match. With this method, you can watch the display in
the editing view and not worry so much about the actual
numerical value.

Control Bones

The next type of bone constraint allows one bone to control the motion of another. This
is a way to set up simple automatic animation.
1.​ Use the Select Bone tool to select the small bone above the upper arm:
 Upper forearm bone selected.

2.​ Bring up the Bone Constraints popup again, and select Forearm from the
Angle control bone popup menu (this is why we named it earlier), and
enter the value 0.5 in the angle control field as shown below:

Angle control setup

3.​ We’ll do something similar for the small bone below the upper arm. Select
that bone, and set Forearm as the angle control bone, but this time set the
angle control value to -0.5.

Lower forearm bone selected.

 ​

4.​ . Finally, use the Manipulate Bones tool again to move the forearm. Notice
that now the muscles in the upper arm move automatically - this is what
the Angle Control Bone does - it tells other bones to move automatically
when it moves.

Upper Arm bones move automatically

Bone Locking
The third category of bone constraint is bone locking. When you lock a bone, you’re
telling Moho that you don’t want it to move. Moho will try to keep the bone still by
moving its parents as necessary to keep the bone in place. This isn’t always possible
(depending on what else is happening in the animation), but it is still an extremely useful
feature.
Bone locking is often used to keep a character’s feet from moving around on the
ground. To do this, Moho needs to move the character’s legs automatically. Thus, it
helps to use angle constraints to keep the knees from bending backwards.

Moho Pro offers some target bone features that help keep a
character’s feet in place while moving bones above it. For more
information about using target bones, see “Tutorial 3.06:
Enhanced Bone Features (Pro Only)”.

1.​ Select the Frank w/Skeleton layer in the Layers window.

Select the Frank w/Skeleton layer.

2.​ Use the Select Bone tool to select Frank’s left shin bone as shown:
 Select the left shin

3.​ Now set up angle constraints for this bone. The minimum angle should be
-10, and the maximum should be 120:

Angle constraints for left shin

4.​ Now select the right shin, and set its angle constraints to -120 and 10.
 Angle constraints for right shin

5.​ . Now that the legs are prepared, set the time to frame 24. Use the
Transform Bone tool to drag Frank’s spine bone around a small distance.
Notice that his feet move around and don’t stay in place.
6.​ Choose the Select Bone tool again. Go back to frame 0 and select the left
foot bone:
 Select the left foot

7.​ In the tool options area, turn on the Lock bone checkbox for this bone.
Next, select the right foot bone and turn on Lock bone for it as well.

Lock both foot bones

8.​ . Now that the feet are locked, go back to frame 24, and use the Transform
Bone tool again to drag Frank’s spine around.

9.​ Notice that now Moho tries to keep Frank’s feet locked to the ground. If
you lift Frank too high, his legs will completely straighten out and his feet will
 lift from the ground - there’s really no helping that, the same thing would
happen to you if you were lifted off the ground. You can try rotating the
spine bone too and see how the skeleton reacts.

Locked feet

Bone locking is an animated parameter. You can turn on and off

bone locking as many times as you want during an animation. This
is especially useful when making a character walk - lock a bone
as soon as a foot hits the ground, and unlock it just before the foot
leaves the ground for its next step.
 3.03 Bone Dynamics
Moho’s bone dynamics system can be used to automatically move bones around in
response to higher-level movement. Moho uses a physical simulation of springs to
calculate dynamic bone movement, making it suitable for a wide range of
movements, such as flabby body parts, bouncy hair, waving arms, etc.

Start With a Sample File

For this tutorial, we’ll start with a project file that’s almost finished. It’s named Tutorial
3.03 and it’s located in the Tutorials > 3 - Bones subfolder within your custom content
folder.

1.​ Open the Tutorial 3.03 file in Moho. You should see something like this:

Starting point for this tutorial

2.​ Play back the animation to see what we’re starting with. The entire
structure will tilt side to side and bounce up and down, remaining rigid the
whole time. Only the vertical bone in the center of the skeleton is animated
- all the others move with it because they are its descendants. Rewind the
animation to frame 0 when you’ve seen enough.

3.​ . Use the Select Bone tool to select the top-left bone in the structure as
shown below:
 Select this bone

4.​ In the tool options area at the top of the main Moho window, click the
Bone constraints popup box to open it. In the popup box, turn on the Bone
dynamics check box. This tells Moho to move the selected bone
automatically according to the spring simulation.

Turn on bone dynamics

5.​ Select seven more bones (two in each of the arms), and turn on bone
dynamics for each one.

Here’s a tip: you can leave the Bone constraints popup

box open the whole time, just click on each bone in turn,
then turn on bone dynamics for each one. If the Bone
constraints popup box covers up some of the bones, you
can pan the editing view by dragging with the right
mouse button to expose the hidden bones. At this point,
you should have turned on bone dynamics for every bone
in the structure except the vertical center bone.
 All eight leg bones set

Play back the animation to see the difference. Now as the structure tilts side to side, the
arms will bounce around in response to the movement of the center bone.

Adjusting Spring Parameters

So that shows the basics of how to use bone dynamics. Now let’s take a look at how
you can make adjustments to the bounciness of the springs.

1.​ Select the top-left bone again, and re-open the Bone constraints popup box.
2.​ Below the Bone dynamics checkbox are three parameters that allow you to
fine-tune the effect. Set as follows:

●​ Torque force to 4,

●​ Spring force to 2

●​ Damping force to 2
 Adjusting dynamics parameters for both bones in the top left arm

3.​ Select the bone’s immediate parent (the second bone in the top-left arm), and
apply the same dynamics parameters.

A higher Torque force means that a bone moves more in

response to its parent’s movement, Spring force
determines how quickly it bounces back, and Damping
force controls how quickly a dynamic bone stops moving
(you can think of damping like friction). In this case, a high
torque force means that the bone will move more
strongly.

4.​ Next, select the two bones of the top-right arm (one at a time), and set the bone
dynamics parameters to 2, 2, 5 (Torque, Spring, Damping). These settings will cause
these bones to slow down their dynamic movement quickly - a high damping
value is like making the bone move through a thick fluid.

Settings for top right arm bones

 Set a high damping force on these bones

5.​ Finally, select the two bones of the bottom-left arm (one at a time), and set the
bone dynamics parameters to 2, 4, 1 (Torque, Spring, Damping). The high spring
force will cause this arm to bounce back very quickly.
 Set a high spring force on these bones

6.​ Try playing back the animation again. As you watch the final animation, note the
differences between the four arms. The top-left arm swings in a wide arc because it
has a strong response to the parent bone’s movement. The top right arm’s
movement is subdued because the damping force causes it to slow down more
quickly. The bottom-left arm is very springy, and the bottom-right arm moves in
accordance with the default bone dynamics settings.
 3.04 Character Setup
In this tutorial, you will learn how to set up the bone system for a complex character.
This will involve splitting a character apart, creating bones, adjusting bone strength,
and putting the character back together.

Start With a Sample File and Split Apart the

Character

For this tutorial, we’ll start with a project file that already has the artwork for the
character drawn - you’ll just set up the bones. It’s named Tutorial 3.04 and it’s located
in the Tutorials > 3 - Bones subfolder within your custom content folder.
To begin:

1.​ Open the Tutorials > 3 - Bones > Tutorial 3.04 file in Moho. There are six
vector layers in this project, containing the body parts for this character.
Although all the artwork could be drawn in one vector layer, it is often
easier to draw a character in multiple layers, arranging the body parts from
back to front, as shown below:

Starting point for this tutorial

 Starting point for this tutorial

2.​ In order to make bone setup easier, the first thing to do is split apart the
character. Choose the Edit > Select All menu command. All the points in
the right arm (your right, his left) should be selected.

3.​ . Activate the Transform Points tool and drag the mouse to move the arm
off to the side and up a bit:

Arm moved off to the side

4.​ Select the Head layer, and select all of its points with the Edit > Select All
command. Move all of its points upward.

5.​ Repeat the process for the R Leg, L Leg, and L Arm layers of the character
(skip the Torso layer). Select all points on each of those layers, and move
the body parts away from the center, as shown below:

The reason we split apart the character is so that we can

add bones to each part, while keeping the bones
independent of each other. Later in the tutorial we’ll put
the character back together again.

Body parts split apart

Add Bones
The next step is to add bones.

1.​ Add a new Bone layer to the project. Name the new Bone layer Skeleton.
Move the new Bone layer to the top of the list if necessary.

2.​ Move all the vector layers into the new Skeleton layer, keeping the same
order they are in now:

Move all of the body part layers into the Skeleton bone layer.

3.​ Double-click the Skeleton bone layer to open the Layer Settings palette.
Switch to the Bones tab, and choose the Region Binding mode.

Turn on Region Binding for the Skeleton layer.

4.​ . Using the Add Bone tool, add two bones going up through the torso,
starting with the bottom one:
 Two new bones

5.​ Next, add two bones to one of the arms, starting at the shoulder and going
down.

6.​ Before you add bones to the second arm, use the Select Bone tool to
reselect the upper torso bone. Then switch back to the Add Bone tool to
add two bones to the other arm. This parents the second arm to the upper
torso bone instead of continuing from the first arm.
 Arm bones added

7.​ Use the Select Bone tool to select the lower torso bone. Then, select the
Add Bone tool and add three bones to one leg, starting at the hip and
moving down through the foot. Repeat the process for the other leg,
making sure to reselect the lower torso bone first. The upper leg bones
should be parented to the lower torso bone.
 Leg bones added

8.​ Use the Select Bone tool to select the upper torso bone, and then use the
Add Bone tool to add one bone to the head.

Head bone added

9.​ . The next figure shows the parenting of all the bones. The parenting arrows
point from child bone to parent bone, and can be seen by activating the
Reparent Bone tool:
 All the bones added

Adjust Bone Influence

At this point, feel free to try using the Manipulate Bones tool to see how the bone
system works so far. The body parts should mostly move how you would expect, but not
totally cleanly - the next step is to clean up the bones’ influence.
1.​ Double-click the Skeleton layer in the Layers window to bring up the Layer Settings
dialog.

2.​ Go to the Bones tab and set the binding mode to Region binding:
 Turn on region binding

When region binding is used, bones only move the points that lie
in their region of influence. If a point is overlapped by multiple
regions of influence, it will be affected by all the corresponding
bones. If a point is in no bone’s region of influence, it will move
with the nearest bone.

This is different from flexi-binding, where all bones affect all points.
Flexi-binding can be quicker to set up, but leads to more rubbery
motion, since moving a hand will always cause a little bit of
movement in a foot. Region binding makes separate body parts
truly separate.

3.​ . For region binding to work, you need to adjust the region of influence for
each bone. To do this, activate the Bone Strength tool to display the bones’
regions of influence:

Initial regions of influence

4.​ Using the Bone Strength tool, click and drag on each bone in turn to adjust
its region of influence. The correct adjustment for a region of influence is
generally to surround the points along that section of bone. The most
important regions are at the joints - the knees and elbows and such. Those
are the areas where the regions of two bones overlap, and points will bend
under the control of both bones. For parts like this character’s head, the
region of influence isn’t very important - since there’s just one bone, the
points outside the region of influence will still move with that bone. Here’s
how you should adjust the regions of influence (don’t worry about
matching this exactly, just try to get kind of close): Adjusted regions of
influence.

Adjusted regions of influence

5.​ . Try using the Manipulate Bones tool again to test the bone setup. The
character should move much more cleanly now - when moving an arm, for
example, only that arm should move, and you should see no extra
movement in other body parts.
 Put the Character Back Together

The final step is to reassemble the character.

6.​ . Activate the Offset Bone tool.

7.​ Click and drag on the top bone of each body part to move that part back
into position. When each part is moved back into place, the character
should look as shown in the following figure:

●​ Move each arm by the upper arm bone

●​ Move each leg by the thigh bone

●​ Move the head by its single bone.

 Re-assembled character

Frame 0 is considered the setup frame for bones. When the time is
set to frame 0, the character will still appear split apart (unless
you’re using the Offset Bone or Manipulate Bones tools). However,
at other frames in the animation, the character will be
reassembled according to how you used the Offset Bone tool.

8.​ . Try moving the character around again with the Manipulate Bones tool.
The body parts will still move independently, even though they now
overlap. Because the bones were set up on a split-apart character, that
 character could be re-assembled while still keeping the body parts
independent.

Final character

If you’re interested in taking a look at the final Moho file,

it’s named Tutorial 3.04 Final and it’s located in the
Tutorials > 3 - Bones subfolder within your custom content
folder.
3.05 Flexi-Binding
If you have changed the binding mode for any reason,
you can double-click the Bone group in the Layers
palette, and switch back to Flexible binding in the Binding
Mode section of the tab. See “Bones Tab” in the Moho
Users Manual.

For any layer that is a child of a bone group, you can select a subset of the bones in
the bone group and then choose Bone > Link Bones To Layer. This allows you to isolate
the influence of a set of bones from the rest of the skeleton (such as a Right Arm bone
affecting only the right arm). This reduces the need for you to separate artwork on
Frame 0 and then put it back together again with the Offset Bone tool.
To illustrate how this works, assume you have drawn a character in 2D bitmap or format.
A sample character is included in Tutorial 3.05.moho, which you will find in the Tutorials
> 3 - Bones subfolder within your custom content folder. The various body parts appear
in separate layers in a layered Photoshop file that was imported into Moho.
A bone layer named Gramps appears at the top, and the layers for the different parts
of the character are placed into the Bone layer. Then you use the bone tools to create
a skeleton for the character so that you can animate it. An example for the character
and skeleton are shown in the following figure.
 A layered character and its bones.

If you try to animate this layered character using standard flexi-binding, you find that
the drawing distorts and stretches all the artwork. In previous versions of Moho, you
could break apart the bones and spread the artwork and bones apart, and then use
the Offset Bone tool to put the parts together again, as described in “Tutorial 3.04:
Character Setup”. However, sometimes it can be difficult to set up your character this
way and it may not end up looking the way you want it to look.
 The character distorts when the bones are manipulated.

To set up the project so that the arm artwork is only affected by the arm bones:

1.​ Select the RArm layer in the Layers palette.

2.​ Use the Select Bone tool to select the bones you want to control the arm.

3.​ Choose Bone > Link Bones To Layer.

 Assigning selected bones for Flexi-Binding.

4.​ Repeat the above steps for each of the layers in your character. In other words, in
this example we choose the Head layer and flexi-bind selected bones to it, then
do the same for the Torso, Left Arm, Right Leg, and Left Leg.
Improved bending.
3.06 Enhanced Bone Features (pro)
This tutorial gives an overview of some of the enhanced bone features that you will find
in Moho Pro. For this tutorial, we’ll start with a project file that already has the artwork for
the character drawn and the skeleton is already set up. You’ll just focus on setting up
these new features. The project is located in the Tutorials > 3 - Bones subfolder in your
custom content folder, and it’s named Tutorial 3.06.
Mr. Bean’s skeleton is contained in a bone layer named Mr. Bean.psd. If you expand
this layer you’ll see the artwork for each of the body parts beneath it.
The bones in the skeleton are labeled with generic bone labels. The table below shows
which body parts each bone belongs to. You can optionally rename the bones, but
renaming them will not be necessary for this tutorial. In addition, the table will show the
new features that you will apply to the bone, where applicable.

Label Body Part Feature

B1 Hip Smooth Joint
B2 Head

B3 RUpperArm Smooth Joint

B4 RLowerArm Smooth Joint
B5 RUpperLeg Automatic Scaling, Squash and
Stretch
B6 RLowerLeg Target Bones, Automatic Scaling,
Squash and Stretch
B7 RFoot Independent Angles
B8 LUpperLeg Automatic Scaling, Squash and
Stretch
B9 LLowerLeg Target Bones, Automatic Scaling,
Squash and Stretch
B10 LFoot Independent Angles
B11 LUpperArm Smooth Joint
B12 LLowerArm Smooth Joint
B13 Upper Torso Smooth Joint
RFootTarget -- Target Bones
LFootTarget -- Target Bones

Target Bones

In our first example, you’ll notice that two additional bones are created behind the
character’s feet. These bones are named RFootTarget and LFootTarget, and they serve
as target bones. These bones are not parented to anything. The purpose for these two
target bones is to serve as a target point for each leg to point toward as the character
moves.

Two non-parented bones for the right and left leg targets.

If you press the Play button, you’ll notice that the target bones are already animated
for a walk cycle. All you need to do is set up the legs so that they point to the targets
while your character walks from left to right.
 The target bones are pre-animated for a walk cycle.

To attach the legs to the targets, follow these steps:

1.​ . Select the bone layer (MrBean.psd) from the Layer palette, and then
choose the Select Bone tool from the Bones tools. You don’t have to return
to Frame 0 to assign a bone target, this can be performed on any frame.

2.​ Select bone B6 (the right shin bone) and click the Bone Constraints button
in the options toolbar to open the Bone Constraints window.

3.​ From the Target dropdown menu, choose R Foot Target as the target for the
right shin bone. You’ll notice that the leg will snap in place to point to the
selected target. Leave the Bone Constraints dialog open for the next step.

Assign the R Foot Target bone to the right shin (B6).

4.​ Now select bone B9 (the left shin bone) and repeat the process, this time
choosing L Foot Target from the Target menu. The left leg will snap into
place to follow its target.

5.​ You’ll return to the Bone Constraints dialog later in the next section, but for
now, click Close so that you can preview the results.

6.​ Press the Play button, and now you’ll see that the character’s legs animate
to follow the target bones.

Even if you move the body far away by translating the hip bone (B1), the legs and feet
follow. The shins will still point to the targets even when the character is above the
ground. The targets will remain on the ground.
The Manipulate Bones tool has been enhanced to work with target bones. Normally,
the Manipulate Bones tool works with a chain of bones. When you transform one of the
bones, the other bones in the chain follow it.
If the chain has a target in it, the Manipulate Bones tool can also move a target,
making it easier to create walk cycles. It can also be used to have characters hold on
to objects. If you click and drag the target it will move the target.

Independent Angles

You’ll notice when you preview the results of the targets that the legs now follow those
animated targets quite nicely! However, pay attention to the feet. Normally, if you
move or rotate a parent bone, the child bone moves or rotates with it. And what you
see in your animation is that sometimes the feet poke through the floor, while at other
times the stiffness of the foot makes the walk look unnatural.
The Independent Angle constraint causes a bone to maintain its original angle as its
parent bones are moved. It is a good solution if you want a foot to remain parallel to
the ground as a character bends his thighs or shins. You simply apply the
Independent Angle setting to each foot.
 The legs follow the targets, but the feet are angled unnaturally for a walk.

To set up independent angles on Mr. Bean, proceed as follows:

1.​ Select bone B7 (the right foot bone) and click the Bone Constraints button in the
options toolbar to open the Bone Constraints window.
 ​

Check the Independent Angle option for both feet.

2.​ Check the Independent angle option. You should notice the foot will now return to
its default angle (in other words, the same angle that the foot is in on frame zero).

3.​ Now, select bone B10 (the left foot) and check the Independent angle option for
that foot as well.

4.​ Preview the results again to see how it looks.

 After applying independent angles the feet are parallel to the floor.

Bones that have the independent angle setting are not

locked at that angle, they only rotate independently of
their parents. You can still manually rotate bones that
have independent angles.

Squash and Stretch Scaling and IK Stretching

Normally, when you scale a bone, it scales in one direction. For example, if you
increase the length of a forearm, the height or width of the arm is not affected.
With Squash and Stretch scaling, Moho tries to maintain some volume to the part that is
affected by the bone. If a bone is stretched (lengthened), the width or height is
decreased (squashed). Conversely, if a bone is shortened (squashed), the width or
height of the affected object is increased (stretched).
 Squash and Stretch scaling applied to an arm.

Maximum IK Stretching has to do with bones that are locked or attached to targets.
When a bone chain tries to reach for a target, if the target is too far away, the bones
just point to it in a straight line. But if Maximum IK stretching has a value greater than 1,
the bones can stretch that extra amount to reach the target. So a value of 1.5 means
the bones can stretch 1.5 times their original length in order to reach the target. The
user can always scale bones manually, but this stretching is automatic.
You can use these features quite effectively to create cartoony limbs. In the case of Mr.
Bean, we’ll apply both of these features to his legs. This way, if you raise him off the
ground, his legs will stretch to a certain point (#2 below), and then when that point is
exceeded the feet will raise off the floor (#3 below).
 Squash and Stretch scaling applied to leg bones.

To add Squash and Stretch scaling to Mr. Bean’s legs, follow these steps:

1.​ Select bone B5 (the right upper leg) and click the Bone Constraints button in the
options toolbar to open the Bone Constraints window.

2.​ Check the Squash and Stretch scaling option. Leave the value in the text field set
to%100. This will cause a bone to squash in the opposite direction by the same
amount that an object is stretched.

3.​ Enter a value of %150 in the Maximum IK Stretching field. This will allow his legs to
stretch to one and a half times their size before moving away from the targets.

4.​ Repeat steps 1-3 for the other bones in his legs: B6 (right lower leg), B8 (left upper
leg), and B9 (left lower leg). Then click Close to exit the Bone Constraints dialog.
 Squash and Stretch scaling and Maximum IK Stretching settings for the upper and
lower leg bones.

Smooth Joints

The Bones > Create Smooth Joint for Bone Pair command allows you to select a pair of
bones, and then creates a smooth bend between the two joints. While originally
intended to improve bending on elbow and knee joints, you can also use it in other
areas as well. We will use this on Mr. Bean’s arms, legs, and torso.
To add smooth bending to those areas on Mr. Bean, follow these steps:

1.​ With the Select Bone tool, click to select bone B5 (right upper leg), then Shift+click
to select bone B6 (right lower leg). This is your first bone pair.
2.​ In the Layers palette, select the R Leg layer. This is the part that will be linked to the
two selected bones for smooth bending.

3.​ Choose Bone > Create Smooth Joint for Bone Pair. This completes the first smooth
joint. You have four more to go.

The first bone pair is connected to the RLeg layer.

4.​ For the remaining four smooth joints, repeat steps 1-3 as described previously, using
the following bone pairs and layers:

●​ Select bones B8 (left upper leg) and B9 (left lower leg) and connect them to
the L Leg layer.

●​ Select bones B3 (right upper arm) and B4 (right lower arm) and connect them
to the R Arm layer.

●​ Select bones B11 (left upper arm) and B12 (left lower arm) and connect them
to the L Arm layer.

●​ Select bones B1 (hip) and B13 (upper torso) and connect them to the Body
layer.
5.​ With all the bone pairs connected to their layers, your setup is complete. Play the
project and watch how the character responds to all the new settings. Feel free to
experiment further with the animation that you have completed to learn more
about how you can apply these new features to other characters.
3.07 Animated Bone Targets
When you assign a parent to a bone, Moho takes a snapshot of the parenting at that
state. You can animate a bone that is on top of the parented bone (with
independent angles, for example). But you typically don’t want to animate the bone
that does the parenting because it has a snapshot taken of it and animation
changes to the parent can cause unexpected changes in the animation.
If you’re animating bones by hand, you should avoid animating the bone that another
bone is parented to. Instead, use small bones to isolate the animation as shown in this
example.

To follow this tutorial, you can either continue from the

point at which you left off in Tutorial 3.08, or start with the
Tutorial 3.08 Finished.moho project in your User Content
folder.

1.​ Start with the project that you completed with the previous lesson, or open Tutorial
3.08 Finished.moho, which is located in your User Content folder.

2.​ Select Layer 3 as the current layer, and hide the other layers in the project.

Select the Parenting layer and hide the other layers.

3.​ Scrub through the timeline. You’ll notice at frame 24 that the two outer arms reach
down to the shorter arms in the middle. Then they move up again at Frame 36.

4.​ The two bone chains in the middle are already set up with bone dynamics, which
are used in this tutorial in place of manual animation. The inner bone chains
bounce in a springy manner. The inner left and right bone chains are identical
except that the bone chain on the inner right has a small bone at the bottom. This
 bone will be used for parenting of the inner right bone chain so that you can
understand the advantages of isolating bones in parenting.

The small bone for the inner right bone chain will be used for parenting.

5.​ Move to frame 24. Click the bottom bone in the middle left chain with the Select
Bone tool.

6.​ Now switch to the Reparent Bone tool, and click the top bone in the bone chain at
the farthest left. In this bone chain, the bone dynamics will simulate what will
happen when you try to animate bones that have a parent assigned.

The lower bone in the inner left chain is parented to the top bone in the far left chain.
7.​ Now we’ll work with the set of bones at the right, which have the extra small bone
that we will use for parenting. This small bone will help isolate the animation of the
bone chain from the parenting. While still at Frame 24, select the small bone with
the Select Bone tool.

8.​ Next, switch to the Reparent Bone tool and click the top bone in the bone chain at
the farthest right.

The small bone in the inner right chain is parented to the top bone in the far right
chain.

Play the animation back. You’ll notice that when the animation reaches Frame 24,
where the reparenting took place, there is a sudden change in the angle of the bone
that was reparented in the chain on the left side. This is due to the mathematics in the
physics because it’s getting a sudden surge of springy action. You don’t see this effect
on the chain on the right side because it is isolated by the small bone that was assigned
as the parent. In this case, the small bone gets a sudden change in angle, but it isolates
that change from the bones in the inner right bone chain.
3.08 Animated Bone Parenting (pro)
In this tutorial you’ll work with three chains of bones. There is a ball in a vector layer
which is bound to the top bone in the chain on the left. When you play the animation
you see that the left chain dips down to the floor and the ball follows it. The other two
bone chains bend around toward and away from each other. You’ll reparent the
ball to the other bone chains during the course of this tutorial.

To follow this tutorial, you can either continue from the

point at which you left off in Tutorial 3.07, or start with the
Tutorial 3.07 Finished.moho project in your User Content
folder.

1.​ Open Tutorial 3.07 Finished.moho, located in the Tutorials > 3 - Bones subfolder in
your custom content folder.

2.​ Select the Parenting layer to make it active, and hide the other layers if necessary.

Select the Parenting layer and hide the other layers.

3.​ You will see three chains of bones. There is a ball in a vector layer which is bound to
the top bone in the chain on the left. When you play the animation you see that
the left chain dips down to the floor and the ball follows it. The other two bone
chains bend around toward and away from each other.

4.​ Advance the timeline to frame 24, where the ball is touching the floor. Activate the
Reparent Bone tool. Then click on the background to remove the current bone
parent.
 Click an empty place in the document with the Reparent Bone tool.

5.​ Now advance the timeline further, and you will see that the ball remains on the
ground.

6.​ At frame 48, the middle bone chain reaches the ball. Click the top bone in the
middle bone chain with the Reparent Bone tool to assign it as the parent to the
ball.
 At frame 48, click the top bone in the middle chain.

7.​ Advance the timeline further and you will see the ball attached to the second
bone chain. It starts moving toward the third bone chain at the right of the
scene.Advance to frame 72, where the middle and right bone chains meet.

8.​ At frame 72, click the top bone on the right bone chain with the Reparent Bone
tool to select it for the new parent.
 Click an empty place in the document with the Reparent Bone tool.

9.​ Advance the timeline to Frame 96. Click the background with the Reparent Bone
tool to remove the current parent.

10.​ Play the entire animation. You will find a completed copy of this tutorial saved as
Tutorial 3.08 Finished.moho.
3.09 Isolating Bones from parenting(pro)
This tutorial will give you an overview of how animated bone targets can be configured
in Moho.

1.​ Open Tutorial 3.07.moho, located in the Tutorials > 3 - Bones subfolder in your
custom content folder.

2.​ Click the Targets layer to make it the active layer. Hide the other layers by clicking
the Eye icon if necessary.

Select the Targets layer and hide other layers if necessary.

3.​ You’ll notice two bones labeled Target and Target 2. Scrub through the animation
to see them moving in different cycles. However, there is nothing parented to them
yet.

4.​ Rewind back to the beginning and play through one cycle of the Target bone
(frames 1-24). You’ll notice the Target moves toward Target 2 from frames 1-12, and
returns back to the original point from frames 12-24.

5.​ At Frame 24, switch to the Select Bone tool and click on the “shin” bone. You want
to target this bone to Target. You can do this in one of two ways:

●​ Click the Bone Constraints menu button, and choose the Target from the
Target menu.
 Choosing the target from the Bone Constraints options window.

●​ Or, switch to the Reparent Bone tool. Press the Ctrl (Windows) or Command
(Mac) key while you click on the Target bone. A target icon will appear on
the bone.

Ctrl/Command click the Target bone with the Reparent Bone tool.
6.​ Continue to scrub through the timeline starting from frame 24. You’ll notice that the
shin bone now follows the target. When you pass Frame 72 you will see Target 2
move toward the first Target. Advance to frame 108, where Target and Target 2
overlap.

7.​ At the point where the two targets overlap, you want to reparent the shin bone to
Target 2. With the Reparent Bone tool selected, hold down the Ctrl (Windows) or
Command (Mac) key and click Target 2 to assign the new target.

At Frame 108, Ctrl/Command click the Target2 bone with the Reparent Bone tool.

8.​ Continue to advance through the animation to see that the shin bone has
switched targets.

While it isn’t strictly necessary, it is recommended that you wait

until the target bones overlap before you change the parent.
Otherwise, you might see unintended skipping or jumping when
the targets are switched.

9.​ Replay the animation, and notice the following:

●​ From Frames 1-24, nothing is targeted.

●​ At Frame 24, the shin bone is targeted to Target, and the “leg” bones follow
this target until frame 108 is reached.
 ●​ At Frame 108, the shin bone is switched to Target 2. The following animation
shows the result.

10.​ Choose File > Save As to save the project under a different filename. You will find a
completed copy of this tutorial saved as Tutorial 3.07 Finished.moho.
4/5/25, 8:59 AM Moho 14 Tutorial Manual

Tutorial 04: Images

Tutorial 04: Images

4.01 Image Layers
4.02 Image Warping
4.03 Image Textures
4.04 Animating a Talking Head (Pro Only)

« Previous
Next »
3.09 Isolating Bones from Parenting
4.01 Image Layers
(Pro Only)

https://tutorial.lostmarble.com/app/page/1bJlQ4WpNtz2Ek4VbHhL2BVUx1DeKaRWy?p=1Zvlrp5i9FSFV3NLXVt88rSO0OGTFEhsr&parentSearch… 1/1
4.01 Image Layers
This tutorial introduces another type of layer in Moho: Image Layers. Image layers are a
way of including artwork created in other programs in a Moho project. Any application
that can produce image files can be used with Moho: photo editors, 3D modeling
programs, natural media painting programs, the list goes on...
An image layer in Moho contains a single image file that can be used as a
background, or combined with a bone layer to build a character. Although they’re
called Image layers, an Image layer can also make use of a movie file as its source.
Image layers and vector layers can be mixed and matched in the same project.

Alpha Channels
​
You’ll notice that the images used in this tutorial do not appear rectangular. This is
because they make use of an alpha channel to mark some parts of the image as
transparent. We recommend using PNG images with Moho because they support full
alpha channel transparency. You’ll need to use an image editing program (like Adobe
Photoshop) to create images with transparency.

Start With a Sample File

For this tutorial, we’ll start with a project file that’s almost finished. It’s named Tutorial
4.01 and it’s located in the Tutorials > 4 - Images subfolder within your custom content
folder.
Open the Tutorials > 4 - Images > Tutorial 4.01 file in Moho. This project is almost
complete as it is. The only thing that’s missing is the dancer’s left hand.
1.​ Expand the Hula Girl layer in the Layers window, and you should see
something like this:
 Starting point for this tutorial

2.​ Click on the layer named L Arm (we want the new layer to be just above
the left arm).

3.​ Click the New Layer button in the Layers window to create a new layer. In
the popup menu that appears, choose Image.

Create a new Image layer (Pro shown)

4.​ Moho will prompt you to select an image file. Choose the Moho/Tutorials >
4 - Images > l_hand.png image in your custom content folder.

5.​ In the Layers window, assign the new layer the name L Hand. At this point,
your Layers window should look like this:
 Left hand added

The new hand

6.​ . You’ll notice that new image layers are centered in the workspace, so the
dancer’s hand is not yet properly aligned: To position the arm properly, use
the Transform Layer tool to drag the left hand into position at the end of the
left arm. Allow for a little overlap between the two parts at the elbow:
 Left hand in position

7.​ . The last step is to attach the new part to the dancer’s skeleton. Select the
Bind Layer tool, and click on the lower arm bone on the dancer, as shown
below:
 Bind the image layer to the forearm

You’re done! To see the animation in action, press the Play button. Of course, we
skipped over the process of building and animating the skeleton, but the basics of
working with skeletons were covered in previous tutorials - all of that information applies
when using bones with image layers.
4.02 Image Warping
This tutorial demonstrates Moho’s image warping feature. This feature allows you to use
a skeleton to distort an image. In this way, you can animate photographs, hand drawn
artwork, or anything you can get into an image file in a flexible way.

Start With a Sample File

For this tutorial, we’ll start with a project file that’s almost finished. It’s named Tutorial
4.02 and it’s located in the Tutorials > 4 - Images subfolder within your custom content
folder.
Open the Tutorials > 4 - Images > Tutorial 4.02 file in Moho.

1.​ Expand the Skeleton layer in the Layers window, and you should see something like
the following figure. The Skeleton bone layer contains two sub-layers: an image
layer (statue.png) and a vector layer (vector sample).

Starting point for this tutorial

2.​ Click the Play button in the timeline to play back the animation. Notice that only
the vector layer moves with the skeleton. The reason that the image layer isn’t
moving is that it hasn’t been connected to the bones yet (as the vector layer has
been).
 Only the vector layer moves

Using Image Warping

To warp the image layer with the skeleton, continue with the project as follows:

1.​ Double-click the statue.png layer, and go to the Image tab in the Layer Settings
dialog. Turn on the checkbox marked Warp using bones and click OK.
 Turn on the Warp using bones option

2.​ In the Layers window, turn off the visibility for the vector sample layer (it is only an
example, and we don’t want it in the final animation).
 Hide the vector sample layer

3.​ Play back the animation again, and you should now see the image moving with
the skeleton:

Image warping

Notice the horizontal bone at the base of the statue. This

bone doesn’t move at all in the animation, so why is it
even there? When using image warping, the image is
distorted by all the bones in the skeleton, and the nearest
bone to any part of the image has the most influence. We
don’t really want the base of the statue to move, so an
easy way to prevent this is to add a bone in the area we
want to remain still, and not animate it. Another trick you
might use when warping images is to break up an image
into logical parts (for example, make the arms and legs of
a person separate images from the main body). Then, use
different skeletons to control the various re-assembled
parts. This way, a leg bone can’t have any influence over
an arm.
4.03 Image Textures
In this tutorial you will learn how to use images as textures to add detail to a character.

Start With a Sample File

For this tutorial, we’ll start with a project file that’s almost finished. It’s named Tutorial
4.03 and it’s located in the Tutorials > 4 - Images subfolder within your custom content
folder.

1.​ Open the Tutorials > 4 - Images > Tutorial 4.03 file in Moho, and you should see
something like this:

Starting point for this tutorial

2.​ Play back the animation to see what’s going on.

3.​ Be sure to rewind the animation to frame 0 before you continue with the next
section.
 Paint the Textures

What you’re going to do is hand paint some texture details to go on this character. The
first step is to paint some textures to go on this headless animal’s body.

1.​ Select the File > Preview menu command to create a full-quality view of the
animal’s current state.

2.​ In the popup menu at the bottom of the Render window, select Copy To
Clipboard.

Copy the render to the clipboard.

3.​ Start up your favorite image editing program (we recommend Adobe Photoshop)
and create a new document the same size as the Moho project (320x240 in this
case). Paste the copied image into the new document.
4.​ Create a new layer in your image editing program and paint some kind of texture
details onto the animal’s body parts. It’s very important that the texture be on a
layer of its own. If you’re using Photoshop, the layer arrangement would look
something like this:
 Layers in Photoshop

5.​ Paint whatever details you want. Here’s an example of something you might paint
in your image editor. Don’t worry about painting outside the lines:

Painted on texture

6.​ When your texture is finished, get rid of the background layers so that only the
texture is left with a transparent background (you’re still working in Photoshop or
similar program at this point):
 Background removed

7.​ You need to save the texture as three separate files. For each version of the
texture, delete the parts of the texture that are not attached to the corresponding
body parts. Save the images in PNG format, since PNG properly stores the
transparent background. Examples of the three textures are shown in the figures
that follow.

●​ Save an image for the back legs. Name the file back_tex.png.

●​ Save an image for the torso. Name the file body_tex.png.

●​ Save an image for the front legs. Name the file front_tex.png.
8.​ After you save your images, you can close the image editor. It’s time to bring the
textures back into Moho.
Back legs texture. back_tex.png

Body texture. body_tex.png

 Front legs texture. front_tex.png

If you’re having trouble creating the image textures, we

have provided some files for you to examine. Look at the
file Tutorial 4.03 Texture.psd, located in the Tutorials > 4 -
Images subfolder within your custom content folder - this is
the Photoshop file. Also, look at the files back_tex.png,
body_tex.png, and front_tex.png, which are the finished
texture files.

Import Textures

To import your painted textures in Moho, follow these steps:

1.​ In the Layers window, highlight the Back Legs layer. The image file that you import
will be placed above this layer.

2.​ Create a new Image layer and select back_tex.png as the source image. The new
image layer appears in the layers list.

3.​ Select the Body layer as the current layer. Create another image layer for
body_tex.png . The new layer should appear above the Body layer.
4.​ And finally, select the Front Legs layer, and create a third image layer for front_
tex.png. The new layer appears above the Front Legs layer. Here’s how the new
image layers should be arranged:

Three new image layers

Textures applied in Moho

 Use Masking for Clean Edges

At this point, the textures are finished and in place, but they are a little messy, and go
outside the bounds of the actual body parts. The final step is to clean up the texture
edges using layer masking.

1.​ Double-click the Skeleton layer in the Layers window to bring up the Layer Settings
dialog. Go to the Masking tab, and set the group mask to Hide all:

Turn masking on for the group

2.​ Next, double-click the Back Legs vector layer to bring up the Layer Properties
dialog for that layer. Go to the Masking tab, and set the masking mode to + Clear
the mask, then add this layer to it. What this masking mode does is make all objects
invisible, except where this layer has solid areas. So, the back_tex.png image layer
will only be visible directly on top of the Back Legs vector layer, preventing the
texture from going outside the lines of the back legs.
Set the masking mode for the Back Legs layer

The Back Legs layer with mask

3.​ Repeat step 2 for the Body and Front Legs vector layers. Set the masking mode to +
Clear the mask, then add this layer to it, just like you did for the back legs. At this
point, all the textures should be forced to stay inside the lines:

Textures cleaned up with masking

4.​ Play back the animation again and you’ll see the image layers warp along with
the vector layers in response to bone movement.
4.04 Animating a Talking Head (pro)
This shows you an easy way to animate a photograph to create a cheesy talkinghead
effect. The quality of the result will depend a lot on the photograph you start with and
how the bone system is set up.

Start With a Sample File

For this tutorial, we’ll start with a project file that’s almost finished. It’s named Tutorial
4.04 and it’s located in the Tutorials > 4 - Images subfolder within your custom content
folder.

1.​ Open the Tutorials > 4 - Images . Tutorial 4.04 file in Moho. The project
contains an image layer enclosed in a bone layer. Bones have already
been set up to control the mouth region, and extra bones have been set
up around the border of the image to hold the rest of the head still. You
should see this:

Starting point for this tutorial

2.​ In the Layers window, click to select the reagan.png layer.

3.​ . Select the Manipulate Bones tool and press the Alt key while you use it to
drag the bone at the lower right side of the mouth in the reagan.png layer.
Notice that the other mouth bones move as well - they have been set up
using bone constraints to move in sync with the lower-right bone.

Normally, the Manipulate Bones tool rotates bones.

However, when a bone does not have a parent (as is the
case with the mouth bones in this project), the Manipulate
Bones tool translates the bone by default. Pressing the Alt
key while using the Manipulate Bones tool on bones that
have no parent will allow you to rotate the mouth bone.

Moving the mouth

 Adding Sound and Motion

Now we’ll add a soundtrack to this animation.

In the Layers window, click the New Layer icon and create a new Audio layer.
1.​ When prompted, pick the reagan.wav file from the Moho/Tutorials > 4 -
Images folder.

2.​ Press the Play button in the timeline. The audio file will now play back with
the project - try playing it back if you like.

3.​ . The next step is to add some animation in sync with the soundtrack. Select
the Mouth Bones bone layer, and activate the Select Bone tool. Make sure
the bottom-right bone in the mouth is selected (it probably already is at this
point).​

4.​ In the timeline, set the current time to frame 1.

5.​ Select the Scripts > Sound > Bone Audio Wiggle menu command. This is a
script that uses the volume of an audio file to control the angle of a bone.

Bone Audio Wiggle script

6.​ The Bone Audio Wiggle dialog allows you to choose the sound file that you
want to use. Select the same reagan.wav file you used for the soundtrack.
You can only select one audio file if there are multiple sounds in your scene.

Bone Audio Wiggle dialog

7.​ There are two additional settings in the Bone Audio Wiggle dialog. Set the
Max angle to 180, and keep the Frame Step setting at 2. This creates
keyframes at every other frame. Click OK to exit the dialog. The script will
run and add keyframes to the timeline for the selected bone. Because the
other bones are controlled by the selected one, the whole mouth will
move.

Keyframes for Bone Audio Wiggle

5.01 Volume Lip-Sync
This tutorial uses Moho’s Switch layers to show you how to perform instant, automatic
lip-syncing based on audio volume. A switch layer contains multiple sub-layers, but only
one of the sub-layers can be displayed at a time. This makes it very useful for lip-sync
animation: each sublayer can be a mouth shape for a different sound.
The method of lip-sync described in this tutorial is quick and easy, though not always
super-accurate (but give it a try - it may be accurate enough for your animation).

Start With a Sample File

For this tutorial, we’ll start with a project file that’s almost finished. It’s named Tutorial
5.01 and it’s located in the Tutorials > 5 - Animation subfolder within your custom
content folder.

1.​ Open the Tutorials > 5 - Animation > Tutorial 5.01 file in Moho, expand the Mouth
layer in the Layers window, and you should see something like this:

Starting point for this tutorial

2.​ Examine the sub-layers in the Mouth layer. Notice that from bottom to top they
range from closed to wide open. This is the basic setup for volume-based
 lip-syncing. The number and names of the sub-layers don’t matter, as long as the
lowest one is closed (most quiet) and the highest one is wide open (most loud).

Layers in the Layers window

3.​ Next, add the audio file that will go along with the lip-syncing. Choose the FILE >
IMPORT > AUDIO FILE menu command and select the Tutorials > 5 - Animation >
MaryLamb-Man.wav file in your custom content folder. Play back the animation
now to hear the result. You’ll notice that the mouth doesn’t move yet. Stop the
playback before proceeding.

4.​ Double-click the Mouth layer. When the Layer Settings dialog opens, click the
Switch tab:
 Layer settings for the mouth

5.​ Click the Select audio sync source dropdown to select the file that will control the
Switch layer. In the dropdown menu that appears, select the file
MaryLamb-Man.wav. Click the dialog’s OK button.

That’s it! The audio file was analyzed and keyframes were attached to the Mouth
switch layer. When the audio is quiet, Moho activates the lowest layer (the closed
mouth), and when the audio is loudest, Moho uses the highest layer (the wide open
mouth). In between, Moho switches on the in between mouths. Play back the
animation to see and hear the result. In general, because volume-based lip-sync is
based on the actual sound in the audio file, it is important to use an audio file without
background noise or music.
5.02 Phoneme Lip-Sync
This tutorial covers another method of animating lip-sync. With this method, the lip-sync
is based on phonemes. Phonemes are the basic building block sounds that make up
words. Lip-syncing based on phonemes can be done either automatically or using a
switch data file that breaks down the words of dialog into their basic sound elements.

Automatic Phoneme Lip-Sync

Automatic phone lip-syncing uses the Preston Blair viseme system. To see this system,
we’ll start with a new project and import a premade mouth from the Moho library.

1.​ In a new project, choose the FILE > IMPORT > LIBRARY > PROPS > HEAD - MOUTH
SETS > MOUTH 1 menu option, and in the resulting Insert Object dialog click OK.

Mouth 1​

2.​ Examine the sub-layers in the Mouth 1 layer. The names of these sub-layers are the
phonemes used in the Preston Blair viseme system. This is the basic setup for
automatic phoneme lip-syncing. Unlike the volume-based lip-syncing from the
previous tutorial, the naming of the layers matter here.​

Note: If you create your own mouth switch layer for automatic

phoneme lip-syncing, you will want to name your switch layer’s

 sub-layers using these same names.

3.​ Next, add the audio file that will go along with the lip-syncing. Choose the FILE >
IMPORT > AUDIO FILE menu command and select the Tutorials > 5 - Animation >
MaryLamb-Man.wav file in your custom content folder.​

4.​ Double-click the Mouth 1 layer. When the Layer Settings dialog opens, click the
Switch tab:

Layer settings for the mouth

5.​ Click the Select audio sync source dropdown to select the file that will control the
Switch layer. In the dropdown menu that appears, select the file
MaryLamb-Man.wav. Click the dialog’s OK button.

That’s it! The phonemes in the audio file were analyzed and keyframes were attached
to the Mouth 1 switch layer. In general, because automatic phoneme lip-sync is based
on the sounds in the audio file, it is important to use an audio file without background
noise or music.

Switch Data Phoneme Lip-Sync

If the automatic phoneme lip-sync isn’t precise enough for your needs or you prefer to
use a different viseme system, then you can lip-sync using a switch data file instead. For
this tutorial, we’ll start with a project file that’s almost finished. It’s named Tutorial 5.02
and it’s located in the Tutorials > 5 - Animation subfolder within your custom content
folder.

1.​ Open the Tutorials > 5 - Animation > Tutorial 5.02 file in Moho.

2.​ Expand the Head layer in the Layers window, and you should see something like
this:

Starting point for this tutorial

3.​ This project is almost complete. The only thing apparently missing is the animation
for the character’s mouth. Play back the animation. The mouth is there (it’s a
switch layer), but no animation data has yet been assigned to it, so it doesn’t
move.

4.​ Double-click the Mouth layer. When the Layer Settings dialog opens, click the
Switch tab:
 Options in the Switch tab

5.​ Click the Select audio sync source button to select the switch data file that will
control this switch layer. In the file dialog that appears, select the file vista.dat
located in the Tutorials > 5 - Animation subfolder within your custom content folder.

Note: The Mouth layer contains all the mouth shapes needed to

speak any phrase. You can examine the Mouth layer to see the

sub-layers it contains. Each sub-layer is named after a different

phoneme. You can use any set of phonemes you choose. The

mouth shapes in this mouth are based on the same default set

used by the free lip-syncing program Papagayo

(https://www.lostmarble.com/papagayo/), which is a good

place to get started if you do not have another lip-syncing

program to use. To make the mouth speak a different phrase,

just create a different animation data file in Papagayo, and

select it in the mouth layer as we just did for the vista.dat

example.
6.​ To hear the sound along with the animation, choose the FILE > IMPORT > AUDIO FILE
command from Moho’s menu and select the vista.wav file located in the Tutorials
> 5 - Animation folder.

7.​ Now, when you play back the animation in Moho you will hear the audio that goes
with the lip-sync. Also, if you export the animation as a movie, the audio will be
included in the movie file.
5.03 Cycling
It is possible in Moho to automatically cycle a section of animation, repeating it over
and over as many times as you wish. Cycling is a special type of keyframe interpolation,
and this tutorial will show you how to set it up.

Start With a Sample File

For this tutorial, we’ll start with a project file that’s almost finished. It’s named Tutorial
5.03 and it’s located in the Tutorials > 5 - Animation subfolder within your custom
content folder.

1.​ Open the Tutorials > 5 - Animation > Tutorial 5.03 file in Moho.

Starting point for this tutorial

2.​ In the timeline, you can see that the top layer, Red Blinker, has two keyframes in
the Layer Visibility channel. The layer becomes invisible at frame 36, and visible
again at frame 48. This is also shown by the red background in the timeline during
the layer’s invisible period:
 Starting point for this tutorial

3.​ You can play back the animation to see what’s going on. Basically, the red light
starts off turned on, then it shuts off for a while and finally turns back on.

4.​ Using cycling, you can make the light blink over and over. Right-click on the
second keyframe (the one at frame 48), and in the popup menu that appears,
select Cycle.... You’re telling Moho that after this keyframe, you want the
animation to cycle back to an earlier point in the animation. A dialog will appear
asking you the specifics of the cycling. Select the Absolute (cycle back to this
exact frame) option, and then enter 12 as shown below:
 Cycle settings

5.​ When you close the cycle dialog, the timeline will update to show the cycle. There
are three changes you will see:

●​ The keyframe in question will change to a left-pointing arrow to indicate that

it cycles backwards.

●​ A long red arrow will point back to the point in the timeline that the visibility
channel is cycling back to.

●​ Later in the timeline you will see other sections with red backgrounds to
indicate that the layer is invisible during those periods:
 Cycling reflected in the timeline

6.​ You can play back the animation again to see the result. The Red Blinker layer will
flash on and off multiple times, even though you didn’t add any more keyframes -
the Layer Visibility channel is just cycling back and repeating a section of
animation over and over again.

7.​ Let’s try adjusting the cycle duration. In the Timeline window, hold down the Ctrl
key (Windows) or Cmd key (Mac) while you click and drag on the second
keyframe (the one that cycles). As you drag the mouse side-to-side, you’ll see that
the cycle duration changes, as the arrow that points back from the cycling key
gets longer and shorter. Adjust the cycle duration so that the keyframe cycles
back to frame 24:

Adjusted cycle duration

8.​ If you play back the animation now, you’ll see that the light blinks more quickly
now, since the cycle duration is shorter.

9.​ Finally, to break a cycle, all you have to do is add another keyframe when you
want the cycle to end. Set the current frame to 102, right click in the Layer Visibility
channel, and select Add Keyframe from the popup menu that appears. The new
keyframe will appear, and at that point the cycling will end. Play back the
animation to confirm this.
 New keyframe at frame 102

Conclusion
​
Cycling can be used in any animation channel in Moho. Any keyframe can be made
to cycle back in time by setting Cycle as the key’s interpolation method. You can cycle
a channel all the way back to the beginning of an animation, or just back a few
frames. Cycling will repeat itself forever or until a new keyframe is reached.
5.04 Animation Curves (Pro only)
Introduction
​
This tutorial introduces the graph mode of Moho’s timeline. Graph mode allows you to
inspect an animation curve plotted as values on a graph. Looking at things this way
can help with evaluating acceleration, changes in direction, and other properties of
motion.

Start With a Sample File

For this tutorial, we’ll start with a project file that’s almost finished. It’s named Tutorial
5.04 and it’s located in the Tutorials > 5 - Animation subfolder within your custom
content folder.

1.​ Open the Tutorials > 5 - Animation > Tutorial 5.04 file in Moho.

2.​ We’re interested in the Skeleton layer here - make sure it is the active layer.

The skeleton here is partially animated - go ahead and

play it back to see what you’re starting with. In case you
were wondering, only the lowest vertical bone in the
skeleton is actually animated. The other bones are using
bone constraints to follow the motion of the lowest bone.

Motion Curves

Continue with your project as follows to work with the motion curves:

3.​ . Rewind the animation to frame zero, and use the Select Bone tool to
select the lowest vertical bone as shown below:
 Select the lowest bone

4.​ In the Timeline window, click the Motion Graph tab. Click the Selected
Bone Angle channel icon - this is the channel icon on the left side of the
timeline, and looks like this:

Click the Selected Bone Angle icon

5.​ A single click turns on the display of the channel in the graph. A
double-click makes the channel active for editing. Double-click the
channel to continue.
 By default, not all channels are visible, since this would just
cause too much visual clutter in graph mode. For similar
reasons, only one channel can be active for editing in
graph mode. Double-clicking a channel’s icon makes it
active for editing.

6.​ Now, press the End key on your keyboard - this rescales the graph to
accommodate the currently active channel, in this case the selected bone
rotation channel. After all of these adjustments to the graph, it should look
like the following figure.

7.​ In the graph you can see three keyframes. These are just like keyframes in
the normal timeline, but instead of just being spread out along a horizontal
line (time), they are also spaced vertically (value). Between the keyframes,
a curve is drawn that represents the value of the selected bone’s rotation
angle. Looking at this curve, you can tell that over the first second (frames 1
to 24), the bone rotates from an angle of 1.57 to an angle of about 1.05
(we don’t care about the exact values). Then, in less than half a second it
rotates back again.

Graph mode

In the timeline’s graph mode, angles are displayed in

radians so that they’ll be closer in magnitude to other
 values like translation and scale. However, if you want to
see curves displayed in degrees you can tell the timeline
to do that in Moho’s preferences dialog.

8.​ Now we’re going to edit the bone’s motion by modifying the graph. First,
set the current time to frame 48 and choose the Bone > Reset Bone
command.

9.​ Press the Page Down key to give yourself some room in the graph to work
(you may need to turn off your Num Lock key).

10.​ Next, click the keyframe at frame 33 and drag it upwards slightly as shown
below.

Move a keyframe

11.​ Next we’re going to add a new keyframe directly on the graph. Right click
on the graph around frame 37. In the popup menu that appears, select
Add Keyframe. A new keyframe will appear on the graph - drag it to the
location shown:
 Add a new keyframe

12.​ Let’s add three more keyframes like the previous one. Add these keys at
frames 40, 43, and 46. You don’t need to set the time to the frame you
want to add a key to - just right-click at the correct frame and add the new
key. Don’t worry if the key isn’t exactly at the frame you wanted, since you
can easily drag it into position. Move these new keys so that the curve looks
like this:

What this wiggling curve represents is sort of a springy back-and-forth motion that
decreases over the span of just over half a second. You could have animated this
using the normal timeline and the bone rotation tool, but this gives you another
way to understand the motion you’re creating.
 The final graph

13.​ Play back the animation to see what it looks like.

5.05 Sorting Layers by Depth (pro)
This tutorial shows you some of the 3D-related features of Moho. Moho allows you to
move layers in three dimensions to create an accurate simulation of depth. In
addition, Moho has the option of sorting layers by depth, allowing layers to move in
front of and behind each other during the course of an animation.

Start With a Sample File

For this tutorial, we’ll start with a project file that’s almost finished. It’s named Tutorial
5.05 and it’s located in the Tutorials > 5 - Animation subfolder within your custom
content folder.
Open the Tutorials > 5 - Animation > Tutorial 5.05 file in Moho. You should see something
like this:

Starting point for this tutorial.

This file contains two layers and a simple animation of a circle moving back and forth in
front of a square. Try playing back the animation to see what it looks like.
 Creating Depth

Now we’re going to try moving a layer in 3D - towards and away from the camera.

1.​ . Set the current frame to 12 and activate the Transform Layer tool.
2.​ Make sure the Circle layer is active. Now, while holding down the Alt key, drag
downwards in the editing area. You’ll see the circle get larger - this is because it is
moving closer to the virtual camera. The Alt key modifies the Transform Layer tool
to move a layer forward and back. Drag the Circle layer until it looks about like
this:

Circle moved forward

3.​ In the tool options area at the top of the main Moho window, notice the value of
the Z field. It should be somewhere around 1.0 (the exact value isn’t important
here). Positive depth (or Z) values are closer to the camera (in the direction out of
your screen), while negative values point away from the camera (into the screen).

4.​ Next we’ll try moving the circle away from the camera. Set the current frame to 36.
Again holding down the Alt key, use the Transform Layer tool and drag upward in
 the editing area. Keep going as the circle gets smaller (farther away), until it looks
like this:

5.​ The Z value in the tool options area should now be close to -1.0. Try playing back
the animation again - the circle should now grow larger and smaller as it moves
towards and away from the camera. However, it always appears in front of the
square. As it moves farther away, it should be going behind the square, which
brings us to the next section.

Circle moved backward

Sorting Layers by Depth

If you do move layers forward and back, as in this tutorial, you may also want layers to
move behind and in front of each other. Moho can do this automatically - all you need
to do is to turn on a single checkbox.
Select the File > Project Settings menu command. In the Project Settings dialog that
appears, turn on the Sort layers by depth checkbox and click OK. This tells Moho to
ignore the layer ordering in the Layers window, and instead draw layers in order from
farthest to nearest.
 Sort layers by depth option

1.​ Play the animation again, and you’ll see that the circle is drawn behind the
square during the time that it is farther away.

2.​ . To get a clear idea of what’s going on, use the Orbit Workspace tool to
turn the scene to an oblique angle. If you play back the animation from this
point of view, you can clearly see the circle moving forward and back as it
moves around the square.
3.​ Once you have a good view, activate the Transform Layer tool to display
the path of the Circle layer’s motion.
 View from above

A note about depth sorting: The checkbox we turned on

to sort the layers by depth only sorts the top-level layers in
a Moho project. If you want to sort the sub-layers in a
group, double-click the group layer to bring up the Layer
Settings dialog. There you will find a tab labeled Depth
Sort - in this tab is a checkbox that you can turn on to
depth-sort the sub-layers of the group.
5.06 Animated Layer Ordering
You can also use animated layer ordering to animate objects moving in front of or
behind other layers. In the following example you’ll learn how this works.

1.​ Open the Tutorials > 5 - Animation > Tutorial 5.06 file in Moho. You should see
something like the following image.

Starting point for this tutorial

2.​ This project consists of three different shapes in a layer named Shapes. Doubleclick
the Shapes group in the Layers palette to open the Layer Settings dialog.

3.​ In the Depth Sort tab, check the Enable animated layer order option and click OK.
This will apply the setting to all of the selected layers.
 Enable Animated Layer Order in the Layer Settings dialog

4.​ Advance the timeline to frame 24, and drag the Circle layer to the top layer in the
group in the Layer Settings dialog. Your project should now look as follows.

Circle appears on the top at frame 24

5.​ At frame 48, move the star to the top layer as shown below.
 Star appears on the top at frame 48

6.​ Finally, at Frame 72, move the Square back to the top as shown below.

7.​ Set the total number of frames in the animation to 72. The frame counter should
read Frame 72 of 72.
 Square appears on the top again at frame 72

8.​ Now press the Play button. You’ll see the layer order of the three shapes change
over time.
5.07 Actions (pro only)
In Moho Pro, actions are little clips of animation that are associated with a layer (or
group of layers). Using actions, you can create reusable animation for movements that
you expect to use over and over again. In this tutorial you will learn you how to use
actions.

Start With a Sample File

For this tutorial, we’ll start with a project file that already has some actions set up. It’s
named Tutorial 5.07 and it’s located in the Tutorials > 5 - Animation subfolder within your
custom content folder.

1.​ Open the Tutorials > 5 - Animation > Tutorial 5.07 file in Moho. You should see
something like this. (Don’t worry - the split-apart character is just part of the bone
setup process):

Starting point for this tutorial

2.​ Let’s take a look at the actions for this character. Select the Window > Actions
menu command to bring up the Actions window. It should appear as shown
below:
 Each item listed in the Actions window is a clip of animation that this character can
perform. The first entry in the list, --- Mainline --- is kind of special. Mainline is not an
action - it represents the main timeline for the animation, the one that will ultimately
be exported as your final movie.

Actions for this character

3.​ To view or edit an animation, double-click it in the Actions window. Let’s do this
now with the Step action. After double-clicking Step, a little red arrow will appear
next to it in the Actions window. This indicates that Step is the currently active
action.

Also notice that the Timeline window has changed. The background changed
color to indicate that you’re working with an action, not the main animation.
Finally, some keyframes appeared in the timeline - these are the keys for the Step
action.
 Activate the Step action

4.​ Press the playback button to watch this action, and stop it when you’ve seen
enough.

5.​ Try playing back the other actions as well. For each one in turn (Wave, Squat, and
Bend), double-click the action’s name to activate it. Then, play back its motion to
see the result.

6.​ When you’ve watched them all, double-click Mainline to go back to the main
animation’s timeline.

Using Actions
Now that we’ve seen which actions the character can perform, let’s try using them in
an animation.
Make sure that Mainline is active in the Actions window.

1.​ Set the current frame to 3, and click once on the Wave action. Be sure to
just click once - Mainline should still be active with an arrow next to it, and
Wave should be highlighted:

Click once on Wave

2.​ Now that Wave is selected, we can insert it into the main timeline. Click the
Insert Reference button at the top of the Actions window.
 Inserting a reference to the Wave layer

When you insert an action by reference, Moho will use that action’s motion in the
timeline. If you later modify the action, those changes will be reflected in the main
timeline. As you can see, the timeline has been updated to indicate that the Wave
action was inserted, plus it shows how long the Wave action lasts:

Wave action inserted into the timeline

3.​ Actions can also be overlapped. Set the current time to frame 12.
4.​ Click once to select the Squat action in the Actions window.

5.​ Finally, click the Insert Reference button to insert the Squat action. Notice
that the timeline now shows both actions (with the Squat action adding
four channels in the timeline). Play back the animation to see how these
two actions overlap.

Inserting a reference to the Squat layer

Wave and Squat actions overlapping

6.​ Let’s overlap three actions now. Go to frame 40, and insert references to
three actions: Wave, Squat, and Bend. One after another, click once on
the action then click the Insert Reference button . Play back the animation
now and see how the character performs the three actions together,
starting at frame 40.

Wave, Squat, and Bend Overlapped

7.​ Let’s try repeating an action a few times. Go to frame 66, and insert the
Step action.

8.​ Then go to frame 78 (at the end of the first step action) and insert the step
action again.

9.​ Do this once more at frame 90. The step action should now appear three
times in sequence in the timeline:
 Step repeated three times

10.​ . The last thing we’ll do is move the character off screen. Set the current
frame to 66. Then select the Transform Layer tool and click inside the scene
to set a keyframe.
11.​ Finally, set the current frame to 102, and the total number of frames to 102,
then use the Transform Layer tool to move the character to the left off
screen:
Character translated off screen
5.08 Creating a 3D Scene (pro only)
This tutorial will show you how to build and move around in a 3D scene in Moho. Moho
isn’t a full 3D program - layers in Moho are 2D planes that exist in a 3D space. However,
by positioning these 2D layers carefully, and moving around them using the 3D camera,
you can create a convincing 3D environment.
​

For this tutorial, we’ll start with a project file that’s almost finished. It’s named Tutorial
5.08 and it’s located in the Tutorials > 5 - Animation subfolder within your custom
content folder.

1. ​ Open the Tutorials > 5 - Animation > Tutorial 5.08 file in Moho.

This file has some simple artwork that we’ll use to build a 3D scene. The layers in this
file are set up as shown:

Starting point for this tutorial

The editing view should look like this to begin with:

 Starting point for this tutorial

Creating a Ground Plane

The first step in creating our 3D scene is to set up the ground plane.
Select the Background layer - this layer has already had a simple terrain drawn onto it,
we just need to position it correctly.

1.​ . Activate the Rotate Layer XY tool, and in the tool options area at the top
of the main Moho window, enter an X rotation angle of -90. Even though
the Background layer is just a flat 2D object, it can still be rotated and
positioned in true 3D space:

Adjusting X rotation
2.​ . Next, activate the Transform Layer tool, and in the tool options area, enter
-0.25 as the Y value:

Adjusting position

3.​ . Finally, with the Transform Layer tool, enter 5, 5, 5 in the tool options area
as the layer’s scale values:

Adjusting scale

What these settings do is to rotate the Background layer so that it lies down
horizontally, lower it a bit, and spread it out wide to cover a large area. Perfect
settings for a ground plane. The scene should now look like this:
 Ground in position

Arranging Foreground Objects

The next step is to create and position foreground objects. A simple tree has already
been created for you - let’s set it up in 3D.

1.​ . Often, positioning objects in 3D can be easier done from an overhead

view. Use the Orbit Workspace tool to rotate the view of the scene so that it
looks something like this (partial view shown).
2.​ (Notice the little blue wedge in the scene - this represents the camera.)
 View from above

3.​ . Now select the Tree layer, and make the Transform Layer tool active.
Double-click the Tree layer. The Layer Settings dialog opens.

4.​ In the Options section of the General tab, select the Rotate to face camera
popup and choose Pivot Y Axis (you’ll see why this is important later).

Layer Settings options

5.​ . With the Transform Layer tool selected, in the tool options area, set the
Position X value to -3.25, and the Z value to -2.25. The tree will be moved to
the far corner of the scene:

Moving the tree

6.​ OK, that’s one tree - now add several more. In the Layers window, click the
Duplicate layer button to duplicate the Tree layer, and set new values for
the X Position and Z Position. Any values for X and Z Position will do, as long
as they’re roughly in the range between -3 and 3.

7.​ Repeat the process several more times, just scattering trees across the
landscape. Keep going until you’ve created about 12 more trees. Position
them all over the place - close to the camera, far away, behind it, etc.
When you’re done you should have a small forest:

Now the reason for the Rotate to face camera checkbox may be clear. The Tree
layer (and all of its duplicates) automatically turns to face the camera - notice how
each tree is turned in a slightly different direction. This makes sure the camera
always has a full view of that layer. This may not always be what you want, but for
scenery objects, it can be a good trick, especially when the camera starts moving.
 A forest

Here’s a trick: if you have a mouse with a scroll wheel,

instead of typing in numbers for the X and Z values, try
holding the mouse over those text fields and turning the
wheel. The value in the field will change, and you can
watch the layer move - just keep turning the wheel until
the layer is where you want it.

8.​ The last step to finish off the forest is depth sorting. Double-click the
Foreground group layer. In the Layer Settings dialog, click the Depth Sort
tab. Turn on the Sort layers by depth checkbox and click OK. Now all the
tree layers in this group will be sorted according to their distance from the
camera.

Moving the Camera

Now that we’ve got a filled-in scene, let's take a tour.

Select the View > Reset menu command. You are now looking at the scene from the
camera’s point of view:
 Camera view

9.​ . Set the current frame to 48 and activate the Track Camera tool. While
holding down the Alt key, click and drag downward in the editing area.
(The Alt key tells the Track Camera tool to move the camera forward and
back.). Keep dragging downward until you’ve moved forward almost to
the edge of the ground layer.
 Forward movement

10.​ . Now activate the Pan/Tilt Camera tool. Hold down the Shift key and drag
to the side to turn the camera around. (The Shift key prevents you from
rotating the camera up and down.) It doesn’t matter where you turn to -
just point the camera in an interesting direction:

Pan/Tilt Camera Tool - Turn the camera.

11.​ . Set the current frame to 96, and use the Track Camera tool to move
forward again (be sure to hold down the Alt key to move forward).

12.​ After moving forward, turn the camera in a new direction with the Pan/ Tilt
camera tool (be sure to hold down the Shift key). Continue this process
(advance the current time, move forward, and turn the camera) as much
as you want, taking a little tour of your 3D scene.

13.​ When you’ve moved around as much as you want, try playing back the
animation. While playing back the animation, use the Orbit Workspace tool
to view the scene from above.

14.​ There are two things to notice here:

 ●​ First, if you activate the Track Camera tool again, the path of the camera is
visible when viewing the scene from above. If the path is not visible, check
the Show Path option in the Track Camera tool status bar. This can be useful
when planning out camera moves.

●​ Second, watch how the trees turn during the animation to always face the
camera. That way, the camera never catches an edge-on view of any tree,
which would kind of spoil the 3D effect.

View from above

Feel free to experiment with more camera moves, or to add objects of your own to the
scene.
5.09 Basic Physics (pro only)
Moho features a physics engine that allows objects to collide with and bounce off of
each other.

Physics will only work with objects that are filled.

Creating the Objects

A Moho project can contain objects that are not affected by physics, as well as
objects that are affected by physics. The deciding factor between the two types of
objects is a group layer that holds the objects that physics are applied to. Any objects
not contained within this group are unaffected by the physics properties.
In the first steps in this tutorial, you’ll create a base object Group layer that holds three
objects, on three different layers.
To create a physics simulation,

1.​ Create a new project. Add a new Group layer in the Layers window. The new layer
will be named Layer 2.

Create a new Group layer (Layer 2)

2.​ Drag the existing Layer 1 into the new group layer. On this layer, use the Add Point
tool with the Sharp Corners option checked to create a base shape that the
physics objects will collide with.
 Create a Base object in Layer 1 and drag it into Layer 2

3.​ With layer 1 selected, add another vector layer (which will be named Layer 2 by
default - rename it Layer 3). It will automatically be added to the Group layer. Use
the Draw Shape tool to draw a circle on this layer. This will be one of the shapes
that collide with Layer 1.

4.​ Add another vector layer (Layer 4) to the Group layer, and create a rectangle with
the Draw Shape tool on this layer.

Three objects in the Group layer

 Enabling Physics

You now have a scene with a group that contains three objects: a base object, and
two additional objects that will bounce against it. The first thing you need to do is
enable physics in the Group layer that holds these objects.
Select the Group layer (Layer 2) and open the Layer Settings dialog. Click the Physics
tab to display the following settings:

Enable physics for the Group layer

●​ Enable physics: Check this option to turn the physics simulator on.

●​ Gravity direction: Use the directional slider to point to the direction from which
gravity is originated. By default, the direction is straight down (270 degrees).
0/360 degrees is at the 3:00 position of the dial.

●​ Gravity magnitude: Controls the strength of the gravity. Lower values make
the gravity less forceful (objects are lighter) and higher values make the
gravity more forceful (objects are heavier).
5. ​ Click OK to close the Layer Settings dialog. Your group layer is now configured to
use physics
 Creating a Collision Base

After you enable physics in the Group layer as described in the previous section, your
next step is to assign one of the objects as a stationary collision base for the others to
collide against. Otherwise, the gravity in the Physics engine will cause all of the objects
to drop off the screen.

6.​ Select the base layer (Layer 1) in the Group layer. This is the object that the other
objects will collide against. Open the Layer Settings window to the Physics tab. You
will see the following settings:

●​ Enable Physics: This option should automatically be turned on if it is in a Group

layer that has Physics enabled. If you uncheck the option, physics will not work
on the current layer.

●​ Non-moving object: Check this option to make the current layer stationary.
When this option is checked all of the other options in the Physics tab become
disabled

7.​ Click OK to return to the scene

Check the Non-Moving Object option to create a stationary base object

 Configuring Physics Objects

After you create one or more stationary objects, you then configure the properties for
the other objects that will bounce against them. In the case of the scene that we have
created, these objects are the circle and the rectangle. Start with the circle first, and
then the rectangle, and proceed as follows

1. ​ Select the circle layer (Layer 3) inside the Group layer. Open the Layer Settings
window to the Physics tab. You will see the following settings:

Physics Settings for Non-Stationary objects

●​ Enable Physics: This option should automatically be turned on as described in
the previous section.

●​ Non-moving object: Leave this option unchecked for the circle and rectangle
layers.

Leave the remainder of the settings at their default values

for the circle and rectangle layers. The functions of the
additional settings follow.

●​ Start asleep: Check this option if you want an object to stay still until
something else bumps into it. To demonstrate how this works, compare two
versions of the project.

●​ Lifetime (frames): A physics object will fall, bounce around, etc. for the
duration of its lifetime (number of frames). After that time, it will be sent back
to its initial starting position, where it will start bouncing around again. A
lifetime of zero means the object will never be sent back to its starting point.
The Lifetime setting is useful for something like a hillside of falling boulders.
Instead of creating hundreds of boulders, you can create a dozen or so and
set the lifetime to the length of time it takes for the boulders to fall from the
top of the hill to the bottom. If the top and bottom of the hill are offscreen, this
will look like an endless number of boulders falling down the hill.

●​ Initial direction: Works in conjunction with the Initial Speed setting below. If
given an initial speed of something more than zero, a physics object will start
flying out in the designated direction at the specified speed.

●​ Initial speed: Controls the speed at which physics objects move in the
designated direction. Faster speeds allow you to create objects like bullets,
rockets, etc.

●​ Density: The default Density setting is 1. Decrease this setting to make objects
more responsive to collisions. Increase the setting to make objects less
responsive to collisions.

●​ Friction: A contact force between two surfaces that controls how much they
slow each other down when they touch. High friction objects (like a brick
sliding on concrete) will generally slow down faster than low friction objects
(blocks of ice).
 ●​ Springiness: When two objects collide, their springiness values define how
much they will bounce apart. A basketball bouncing on a floor would have a
high springiness value, while a stick of butter would have a low springiness
value.

●​ Pivot on origin: This option sets an axle around the object’s origin point. When
another object collides with an object that is set to pivot, the object will spin
around its origin rather than topple over.

●​ Motor speed: Works in conjunction with motor torque, which follows. The
motor speed is the number of degrees per second the object will rotate (it
can be negative to rotate backwards). Depending if the object bumps into
obstacles or there are other influences, it may not actually rotate at that
speed, but in a zero gravity setup with no collisions, that will be the speed of
rotation.

●​ Motor torque: Motor torque controls the strength of the motor. With low
torque, when a motorized object bumps into other objects it may come to a
stop, depending on the size and density of the obstacles. With a high torque,
it will tend to push obstacles out of its way. Even with no obstacles, if a
motorized object is unbalanced (off center of its origin), a low torque setting
may mean that it can even lift itself up.

2.​ Press Play to see what happens. The circle falls straight down and stops at the
ground.

3.​ Rewind the project to frame zero, and use the Transform Layer tool to move the
circle so that it is just above the left pillar of the collision base, as shown in the
following figure. Also position the circle so that the bottom center is past the edge
of the column.
4.​ Press the Play button again to observe how the circle moves. This time, it should
collide with the rectangle, and the rectangle will respond to the collision.

5.​ Experiment with additional settings to learn more about how they affect your
objects.

Additional Comments

You can also apply physics to bone layers. The physics are applied to the region of
influence of the bone. See “Bone Physics (Pro Only)” in the Moho Users Manual.
5.0 Using Frame by Frame Layers
for animation
Moho Pro offers additional features that make frame by frame animation possible. In
this tutorial you’ll create an inchworm animation using the frame by frame animation
layer features.
There are two different ways that you can create frame by frame animation layers:

•​ After you create a switch layer, doubleclick the switch layer to open the Layer
Settings dialog. Select the Switch tab, and check the Frame-by-frame drawing
option. Now the switch layer knows that it is being used for frame by frame
animation. Click on the New Frame button in the upper left of the Timeline to
start drawing.

•​ Or, from the New Layer button in the Layers window, choose Frame By Frame
to create a new frame by frame layer. This accomplishes the above method in a
single step. Moho creates a new switch layer, sets it up for frame by frame
animation, and places the first frame in it. You’ll use this method in the tutorial that
follows.

Note: The layer icon will change when you convert a Switch layer

into a Frame By Frame layer , and vice versa.

To complete this tutorial, follow these steps:

1.​ Choose FILE > NEW to create a new Moho project.

2.​ In the Layers palette, choose Frame By Frame to create a new frame by frame
layer. Name the new layer Inchworm. When this layer is selected, all of the drawing
tools become available. Unlike a switch layer, you will not need to expand the
Inchworm layer and draw on the individual frames while you are working in a
frame by frame animation layer. You’ll also see some new controls above the
timeline. From left to right, these controls are used to add a New frame, Delete a
frame, or Duplicate a frame. You can also enter a frame by frame advance
interval in the Frame Interval field, if desired, to represent the number of frames that
you want to advance in the timeline each time you add a new frame.
 Create a Frame By Frame animation layer named Inchworm

Frame By Frame controls in the timeline toolbar:​

New Frame, Delete Frame, Duplicate Frame, and Frame Interval.

Tip: You can use shortcuts to accomplish the same functions as the

Frame by Frame controls in the timeline toolbar. Press F5 to add

a new frame, Shift+F5 to delete one, and F6 to duplicate the

current frame and advance to the next frame.

3.​ Select the Blob Brush tool . Set the brush radius to .13.
 Set Blob Brush radius to .13

4.​ From the Style window, select a medium green for a fill color, and a dark green for
the stroke color. Set the stroke width to 10.

Choose a green fill color, dark green stroke color, and set stroke width to 10

5.​ On Frame 0, draw an inchworm that is almost flat to the ground.

 First frame (Frame 0) of inchworm

6.​ Press F5 to create a new frame to the Inchworm Frame By Frame layer. This will also
advance the time by one frame.

7.​ Turn on the Onion Skin feature by clicking the Enable Onion Skins button in the
toolbar area above the timeline. This will allow you to see the outline of the
previous frame.

Enable Onion Skins so that you can see the outline of the previous layer

8.​ Now on Frame 1 draw another inchworm that is raised in the middle, remembering
to also consider that its length is shorter due to volume. The second frame should
look something like the following figure.
 Second frame (Frame 1) of the inchworm

9.​ Press F5 again and draw another version of the inchworm that has its middle raised
a little more. Repeat this a few more times, drawing successive inchworms on
Frame 2, Frame 3, and Frame 4. The examples of each are shown below.
 Third (Frame 2), fourth (Frame 3), and fifth (Frame 4) frames of inchworm

10.​ In frames 5 through 8, you will create frames that move the inchworm back toward
the flat to ground position. Again, press F5 as you advance through Frame 5, Frame
6, Frame 7, and Frame 8. Examples of each layer are shown below.
 Sixth (Frame 5), seventh (Frame 6), eighth (Frame 7),​
and ninth (Frame 8) frames of inchworm

Tip: While you can’t expand a Frame By Frame layer, you can

expand a Switch layer. So to see these frames as individual

vector layers within a Switch layer instead, you can open the

Layer Settings dialog and deselect the Frame-by-frame

drawing option from the Switch tab to convert the Frame By

Frame layer into a Switch layer. Just make sure to collapse the
 Switch layer and convert it back to a Frame By Frame layer

before continuing with this tutorial.

11.​ Now you can go back with the Freehand tool and add the details to the
frames that are already there. Select the Freehand tool from the Draw tools.
Verify that the following options are selected:

●​ Weld ends: Unchecked

●​ Auto-fill: Unchecked

●​ Auto-stroke: Checked

●​ Multi-stroke fill: Unchecked

Freehand tool options

12.​ Return to Frame 0 in the timeline and add your details to that frame, similar to the
following figure.

Add details to the first inchworm frame, then add similar details to the other eight
frames
13.​ Now move to Frame 1 to add similar details in that layer. Continue on, adding the
details to the remaining frames in the Inchworm Frame By Frame layer.

Tip: If you find the onion skin outlines too distracting, you can turn

them off in the toolbar above the timeline.

14.​ Now you can use any of Moho’s standard retiming tools to change the timing if it
moves too fast for you. For this project, choose ANIMATION > RESCALE KEYFRAMES.
In the Rescale Keyframes dialog, check the Rescale entire document option, and
then enter 16 in the New End Frame field. This will cause the animation to move at
half its current speed.

Rescale the keyframes to make the inchworm move slower

15.​ Now click Frame 18 to make it the current frame. Choose ANIMATION> ADD
KEYFRAME. Moho will ask you if you want to add keyframes to the sublayers too.
Choose Yes.

Add keyframes to the Inchworm layer and sublayers at Frame 18

16.​ Now select the keyframe at Frame 18. Right-click it and choose Cycle. The default
option is Absolute. Change its value so it cycles back to Frame 1. Then exit the
dialog.

Cycle keyframes at frame 18

Cycle Frame 18 back to Frame 1

17.​ Press the Play button to watch your Inchworm crawling on the screen.

18.​ Save the project under a filename of your choosing. A finished version of the
project is included in your User Content folder as Tutorial 5.10 Finished.moho.
5.11 Animated Shape Ordering (pro)
In “Tutorial 2.05: Shape Ordering” you learned the basics about how to select and
move shapes above or beneath others in the same layer. In this tutorial you’ll follow
steps that are slightly modified from Tutorial 2.05 to learn how to use animated shape
ordering to make these changes over time.
To begin, follow these steps:

1.​ Open Tutorial 5.11.moho, which is located in the Tutorials > 5 - Animation
folder in your User Content folder. This is a renamed version of the file that
you started with in Tutorial 2.05.

2.​ Double-click Layer 1 to open the Layer Settings dialog. Switch to the
Vectors tab, and check the Animated shape order checkbox. Click OK to
close the Layer Settings dialog.

Enable the Animated shape order option in the Vectors tab.

3.​ Advance in the timeline by clicking frame 12.

4.​ . With the Select Shape tool, click anywhere on the red shape. It will
become highlighted with a checkerboard to indicate that it is selected.

5.​ Press the Up arrow on your keyboard twice, to move the red shape
immediately behind the small yellow circle.
 Raised shape on Frame 12

6.​ At Frame 18, use the Select Shape tool to click on the blue shape to select
it. Press the Down-arrow key twice to lower the blue shape below the green
shape:

Lowered blue shapeat Frame 18

7.​ Now advance to Frame 24. Click the green shape with the Select Shape
tool, and hold down the Shift key while you press the Up-arrow key. The
green shape moves all the way to the top of the layer’s shape order.

At Frame 24, move the green shape to the top.

8.​ Press Enter to deselect all shapes. You’ll find that the yellow circle becomes
hidden.

9.​ Now we want to bring the yellow circle back to the front. Using the Select
Shape tool, click the Green shape to select it. Then press the down arrow
once to move it back one level.

10.​ Click the yellow circle with the Select Shape tool to select it.
 Raised yellow circle at Frame 30

11.​ Scrub through the timeline to see the shape ordering changing over time.
6.01 Shadow Tricks
This tutorial shows you how the layer shadow options can be used to create visual
effects other than shadows. Glows and outlines are the two possibilities we’ll look at.

Start With a Sample File

For this tutorial, we’ll start with a project file that’s almost finished. It’s named Tutorial
6.01 and it’s located in the Tutorials > 6 - Effects subfolder within your custom content
folder.
Open the Tutorials > 6 - Effects > Tutorial 6.01 file in Moho. Render this file to see what it
looks like to start with:

Starting point for this tutorial

Basic Layer Shadow

Before we try any tricks, let’s take a look at a basic layer shadow.

1.​ Double-click the only layer in this file, Layer 1, to bring up the Layer Settings dialog.
2.​ Go to the Shadows tab, and leaving all the other settings alone, turn on the
Shadow on checkbox. Click OK to dismiss the dialog.

Default shadow settings

3.​ Try rendering the scene again, just to be sure that you have an idea what a regular
layer shadow looks like in Moho:
 Layer shadow

Layer Glow

Now we’ll change the shadow settings to create a glow effect.

Double-click Layer 1 again to bring up the Layer Settings dialog. Change the Layer
Shadow settings to match the values below:

Glow settings

●​ An offset of 0 means the shadow will be centered under the layer that is
casting it. With an offset of 0, the shadow direction has no significance.

●​ A high blur value of 16 gives the glow a nice soft edge.

●​ The expansion parameter tells Moho to expand the shadow, making it bigger
than the layer itself. Without expansion, the glow would just barely extend
beyond the edge of the layer.

●​ The exact color you choose is not important - just be sure to make the color
opaque (Alpha = 255). A transparent glow may be too faint to see.
 ●​ Render the scene again, and it should look like this:

Layer glow.

Layer Outline

Let’s change the shadow options once again to create an outline effect. Some styles
of animation use a heavier outline around the outside of objects than for interior lines.
Adjusting the layer shadow values in the right way can make this style very easy to
accomplish.
Double-click Layer 1 again to bring up the Layer Settings dialog.

1.​ Change the Layer Shadow settings to match the values below:

●​ Again, we use an offset of 0 to keep the shadow centered under the layer.

●​ A blur value of 0 is used to keep a hard edge on the shadow.

●​ The expansion parameter is used in this case to set the width of the outline
effect.

●​ For this effect, it’s important to make the color totally black and totally
opaque (Alpha = 255) to match the interior lines.
 Outline settings.

2.​ Render the scene again, and it should look like this:

Layer outline
6.02 Camera and Depth Effects
This tutorial demonstrates Moho’s camera tools. These tools allow you to move an entire
scene around as if you were pointing a camera at it. With a little setup work, you can
even create different layers of depth in the scene.

Start With a Sample File

For this tutorial, we’ll start with a project file that’s almost finished. It’s named Tutorial
6.02 and it’s located in the Tutorials > 6 - Effects subfolder within your custom content
folder.

1.​ Open the Tutorials > 6 - Effects > Tutorial 6.02 file in Moho, and you should
see something like this:

Starting point for this tutorial

2.​ . This file contains a few layers of simple scenery that we will move the
camera across. To do this, select the Track Camera tool and drag the
mouse around in the main editing area.

3.​ Notice how all the layers move together, even though they aren’t
grouped. When you move the camera around, it affects all the layers in a
project. In the tool options area at the top of the main Moho window, click
the Reset button to reset the camera.
 Creating Depth

Now we’ll introduce some depth into the scene.

1.​ . Activate the Transform Layer tool and select the layer called Right Hill.

2.​ In the tool options area at the top of the main Moho window, change the Z
value to -1 and press Enter. Below you can see where to set the Z value for
the layer.

Setting a layer’s Z value

3.​ Now select the Left Hill layer, and set its Z value to -2. Finally, select Sky, and
set its Z value to -20. When you’re finished, your scene should look similar to
the following figure.
 Right Hill, Left Hill, and Sky layers moved on the Z plane

4.​ . Try dragging the Track Camera tool around again and notice the
difference. It’s like driving in a car - nearby objects go by quickly, while
distant objects seem to move slowly.

5.​ In the tool options area at the top of the main Moho window, click the
Reset button for the Track Camera tool to reset the camera.

In Moho Pro, try dragging the Orbit Workspace tool around the
workspace. This tool allows you to examine your scene in 3D, from
outside the view of the virtual camera. In this case, notice how
the different layers are spaced apart in the Z direction - this is
what creates the sense of depth from the camera’s point of view.
The camera itself appears as a small blue wedge pointing in the
direction of view.

6.​ When you’ve seen enough, select the View > Reset menu command to go
back to the default camera view.

Animating Camera Movement

Now we’ll try animating the camera.

1.​ . Make sure the current frame is set to 0, and select the Zoom Camera tool.

2.​ . Enter a setting of 45 in the Vertical field of view (degrees) field in the tool
settings area.
3.​ Next, select the Track Camera tool.

4.​ Drag to the left in the main editing area until you set up a view that looks
about like this:

Camera view at frame 0

5.​ Next, set the current frame to 72, and drag to the right. This will pan the
camera to the left - keep going until you have a view that looks like this:
 Track to the left

6.​ Press the Play button in the timeline to play back this simple camera
animation. Notice how the layers of the project seem to pass in front of and
behind each other. This is a simple way in Moho to create a sense of depth.
6.03 Moon and Clouds Effect
This tutorial shows you how to create the effect of clouds moving in front of a moon.
Layer masking and blurring is used to create an effect that is not only good for a moon
and clouds, but may inspire you to think of new ways to use layer masking.

Examine a Finished Animation

For this tutorial, we’re going to examine an animation that is completely finished.

1.​ Open the Tutorials > 6 - Effects > Tutorial 6.03 file in Moho. The layers in this file are
arranged as shown below:

Starting point for this tutorial

2.​ This animation relies on masking and blurring effects that aren’t apparent in Moho’s
editing view. To see what the final effect is, either export the animation as a movie.
 The final result

Notice that the moon appears sharp until the cloud moves in front of it. Then, the parts
of the moon obscured by the cloud become blurry. This effect is easy to achieve using
layer masking.

How It’s Done

There are two parts to this effect. First, there are actually two moons in the animation:

•​ The Moon layer is the regular, sharp version of the moon you see in Moho’s editing
view.
•​ Two layers up is the Blurry Moon layer - this is a duplicate of the Moon layer, with
some layer blur applied.
The trick is to control which moon is visible at which point in time in the final exported
movie. To do this, we use layer masking.
Try double-clicking each of the layers in turn to bring up the Layer Settings dialog -
then, go to the Masking tab. You’ll find that the Sky group has masking turned on - by
default, all objects are invisible. The Moon layer is set to be immune to masking, while
the Cloud layer adds to the layer mask.
The result of these mask settings is that first the Moon layer is drawn - this is the regular,
sharp moon - and is not affected by any masking. Next, the Cloud layer is drawn on top
of that. When the cloud moves in front of the moon, it covers up the moon. Finally, the
Blurry Moon layer is drawn on top of the cloud. Because of the mask, the blurry moon
only appears on top of the cloud, it is not visible outside of the cloud object. Even
though the blurry moon is in front of the clouds, the effect looks like the moon shining
from behind the clouds.
Here’s another example of the same technique. In this case, we see a character who
appears to be blurred by the smoke passing in front of him. The exact same blurring
and masking trick is used as in the case of the moon:

Another example of blurring and masking

6.04 Particles (pro only)
This tutorial demonstrates Moho’s particle layers feature. Particle layers are used to
create effects made up of many small objects flying around. This includes effects like
water, smoke, and swarms of insects.

Start With a Sample File

For this tutorial, we’ll start with a project file that’s already started. It’s named Tutorial
6.04 and it’s located in the Tutorials > 6 - Effects subfolder within your custom content
folder.
1.​ Open the Tutorials > 6 - Effects > Tutorial 6.04 file in Moho, and you should see
something like this:

Starting point for this tutorial

2.​ There are four layers in this file, each containing a small gray blob-shaped object.
You can zoom in to look more closely at these objects.
 A smoke particle

3.​ These blobs will be used to create a smoke effect, using a particle layer. If you
examine these blobs, you’ll see that they are all semi-transparent, and have the
soft edges fill effect applied to them. In addition, the blobs all have a simple
animation applied to them - over the course of 48 frames, they spread out
horizontally. Play back the animation to see this happen.

Using A Particle Layer

1.​ In the Layers window, create a new Particle layer. Particle layers are kind of like
Group layers - they can contain sub-layers.

2.​ Drag all four of the original layers into the particle layer, and your project should
look like this:
 New particle layer

3.​ Play back the animation and see what we’ve got so far. The particles should be
flowing, although they don’t look much like smoke at this point.

4.​ Next, double-click the particle layer to bring up the Layer Settings dialog. Click the
tab marked Particles. In this area, set the following values and click OK:

●​ Lifetime (frames): 48

●​ Orient particles: unchecked

●​ Velocity: 0.3

●​ Velocity spread: 0.05

●​ Acceleration: Turn knob to point to the right, or enter 5

●​ Rate: 0.5
 Particle settings

These settings tell the particle system that each particle should last for 48 frames
after being created, and that the particles should not rotate to follow the direction
they are moving in. Their initial velocity is moderately slow, and there is a gentle
acceleration to the right (a soft breeze).

5.​ Play back the animation now, the motion of the particles should look more like the
flow of smoke from a smokestack.
6.​ Export the animation to see how the blur and semi-transparent effects combine to
create a smoky appearance. The reason four different particle types were used is
that each has a different gray level, and combining them leads to a mottled, dirty
effect.

A rendered example

7.​ Save the tutorial under a new filename so that you can use it in the next tutorial.
6.05 Custom Particle Generators (pro)
Normally, Moho starts with a simple circle as a particle generator. As you learned in
the previous tutorial, you control the particles in the Particle Options dialog. The
source width, height, and depth settings control the area where particles are
generated.
You can add a shape beneath the particle layer and drag that shape into the particle
layer. This can be used for a wide variety of effects ... grass blowing in the wind, fire
coming from a log in the fireplace. Basically, any shape that appears in the
bottom-most layer in the particle stack can be used as a particle generator.
In this tutorial you’ll modify the file that you saved at the end of the previous tutorial.
You’ll learn about how you can use custom shapes as particle generators.

1.​ If you have not saved the project after completing the previous tutorial, you will
find a completed version in your Moho Content folder. Open the Tutorial 6.05 file
located in the Tutorials > 6 - Effects subfolder.

2.​ In the Layers palette, create a new vector layer. Here, we call the new layer New
Generator.

Create a new layer for your particle generator shape.

3.​ Draw any shape that you desire in the new layer. Here we’ll keep it simple, and will
add a star shape with the Draw Shape tool.
 A shape added to the new layer.

4.​ Drag the new layer into the Particle group, positioning it at the bottom of the layers
within that group.

Drag the generator shape into the Particle group and place it at the bottom.

5.​ Now, select Layer 5 in the Layers palette. Initially, you’ll notice that this new shape
becomes part of the particle mixture, which isn’t what you want to happen.
 Initially the new shape becomes part of the particle mixture.

6.​ To fix this, double-click the Particle group layer (Layer 5) and switch to the Particles
tab in the Layer Settings dialog. Check the Use base layer as source option.

The Use base layer as source option turns the bottom-most layer into a particle
generator.
7.​ Now the particle layer will look at the lowest layer in the stack and use that shape
to generate the particles.

The particles are emitting from the star.

Later you can modify the shape, and the particles will automatically follow the new
shape.
6.06 Particle Tricks - Grass and Crowds (pro)
This tutorial shows how to use particle layers for something other than swarming insects,
smoke, or fireworks. Using the correct settings, particle layers can also be used to
produce clusters of many objects, but without making them fly around like particles
usually do. Fields of grass and crowds of people are just two possibilities that we’ll
explore.

Start With a Sample File

To get started quickly with this tutorial, start by opening the project file named Tutorial
6.06, located in the Tutorials > 6 - Effects subfolder within your custom content folder.
Open the Tutorials > 6 - Effects > Tutorial 6.06 file in Moho. This file has a particle layer
that we’ll modify to simulate a field of grass. The layers in this file are set up as shown:

Starting point for this tutorial

The editing view should look like this to begin with:

 Starting point in editing view

8.​ The particle layer Grass in this file is currently set up with the default settings for a
particle layer. The sub-layers (Layer 1 - Layer 6) are each a single blade of grass.
Each one has a slightly different color and shape to create variety.

9.​ If you play back the animation, you’ll see that the default particle layer settings
aren’t very good for a field of grass - the grass particles fly up in the air and then
sink downwards. All we have to do is make a few small changes to get the grass to
look right.

Changing Particle Settings

1.​ Double-click the Grass layer to bring up the Layer Settings dialog. Click the
Particles tab to access the settings for the particle layer.

Below we describe why each of the settings is set the way

it is. Any settings that aren’t mentioned below don’t
matter for this situation (for example, orient particles
doesn’t matter since the particles have no velocity).

2.​ Change the settings to match the ones below and click OK.
 Grass particle settings

●​ Particle Count: 500. We need a lot of particles for a field of grass

●​ Preview Particles: 20. In the working view, only show a few particles in order
not to slow down Moho

●​ Lifetime (frames): 0. A lifetime of zero means that particles will never die out
(disappear).

●​ Source width: 3. Make the source nice and wide to cover the width of the
screen

●​ Source height: 0. It’s a flat field of grass, so the height is zero

●​ Source depth: 1. Spread the particles out in the Z direction for a feeling of
depth
 Besides scattering particles in the Z direction, when source
depth is set to a non-zero number, the particle layer will
sort particles according to depth - this is very important for
the kinds of animations we’re working with in this tutorial.
We wouldn’t want far away blades of grass to appear in
front of closer ones.

●​ Velocity: 0. Set to zero to prevent the grass blades from flying around

●​ Velocity Spread: 0. Set to zero to prevent the grass blades from flying around.

●​ Acceleration: 0. Zero acceleration, again to prevent the grass blades from

flying around

●​ Rate: 0. Again to prevent the grass blades from flying around

●​ Randomize playback: Checked. Plays back the blades’ animations randomly,

otherwise they would be in sync.

Randomize playback makes the grass look better than if

all the blades were moving in sync, but it can be even
more important when working with a crowd of people, as
we’ll see later in this tutorial.

3.​ . OK, the grass is almost finished. All we need to do is use the Transform
Layer tool to move the Grass layer downwards (on Frame 0) so that it sits on
the ground:
 Grass lowered into place

In preview mode, it doesn’t look like much, so you may want to try playing back the
result and rendering it out as a movie file:

Final render
6.07 Crowds, Particles, Depth of Field (pro)
Now we’ll show how to use the same general techniques to simulate a crowd of
people. Also in this tutorial you’ll learn how to set up depth of field.

1.​ Open the file named Tutorial 6.07, located in the Tutorials > 6 - Effects subfolder
within your custom content folder. There’s nothing you need to change in this file in
regards to the particle effects, it just shows another example of using particle
layers.

The default size of this project is 320 x 240 pixels. If you

want a larger sized preview image when working on this
tutorial, choose File > Project Settings and select another
preset that renders a larger preview (such as NTSC D1).

2.​ The Crowd layer has the same basic settings we used for the field of grass, only
using fewer particles. Note the following:

●​ Each of the sub-layers in the crowd was created from one layer with a simple
cycling animation.

●​ This one layer was duplicated and had some colors changed just for variety.

●​ The Randomize playback setting for the particle layer is really important for
this crowd - if it was turned off, then each character in the crowd would
move in sync with all the others (you can try this yourself). This may be
desirable in some cases, but here we want each character to move
independently, even though they all have the same basic movement.
 A crowd as particles

Depth of field is enabled in the Project Settings dialog - that’s why some of the closer or
farther characters appear a bit blurry. But we’ll use some Moho enhancements to fine
tune the depth of field effect.
Moho provides a visual indication that can help you set up Depth of Field more easily.
To continue with the tutorial, follow these steps:

3.​ Use the Pan and Orbit workspace tools to view the scene at an angle, similar to
that shown below. You’ll notice a box in the middle of the scene.

Use the Orbit Workspace tool to view your scene in 3D view

4.​ Choose File > Project Settings to open the Project Settings dialog. You can quickly
adjust the settings if you click in the text field and use your mouse scroll wheel to
increase or decrease the values. As you adjust the Focus Distance and Focus
Range settings in the dialog, you’ll notice the box indicator changing in the scene:
 Increase or decrease the depth of field settings as you observe the position and size
of the box indicator.

●​ Focus distance: This is the area that you want to focus on. It’s represented by
the center line in the box. Decrease the setting to bring the focus distance
closer, and increase the setting to move it farther from the camera.

●​ Focus range: This is the range of the scene that will go from sharp to blurry
when viewed through the camera. The deeper the box gets, the more slowly
the scene will get out of focus. Higher settings will make the box deeper.

5.​ Choose View > Reset to return the scene to the default camera view.

6.​ Choose File > Preview to generate a preview image. After you complete your
project, you can render an animation to see how it all comes together.
A preview of your settings.
6.08 Using Pre-made particle effects (pro only)
This tutorial shows how you can use the included scripting commands to make use of
pre-made particle effects like smoke or explosions.

Start With a Sample File

For this tutorial, we’ll start with a project file that’s almost finished. It’s named Tutorial
6.08 and it’s located in the Tutorials > 6 - Effects subfolder within your custom content
folder.

1.​ Open the Tutorials > 6 - Effects > Tutorial 6.08 file in Moho.

2.​ Expand the Rocket Group layer in the Layers window, and you should see
something like this:

Starting point for this tutorial.

3.​ Try playing back the animation to see what we’re starting with - it’s just a simple
animation of a rocket flying around the screen for a little while. When you’ve seen
enough, rewind the animation back to frame 0.

Add the Smoke Effect

Now we’ll add a smoke trail behind the rocket.

Select the Scripts > Particle Effects > Smoke... menu command. A dialog will appear
asking you to customize the smoke effect. Use the settings shown below for the smoke
and click OK:
 Smoke settings

4.​ The smoke script will then generate a bunch of layers that make up the smoke
effect. The combined layers will end up grouped together in a group layer called
Smoke. Move this new Smoke layer into the Rocket Group layer, just below the
Rocket layer. The Smoke layer should end up positioned like this:

Smoke layer added to group

5.​ . The final step is to move the smoke into place. Activate the Transform Layer tool
and move the Smoke layer so that it sits just behind the rocket. The smoke itself
won’t immediately move until the animation is updated, so watch the origin of the
 Smoke layer and line it up behind the rocket. Feel free to zoom in close to get a
better view:

Smoke layer moved into position

That’s it! You can now export the animation as a movie file to see the fully rendered
result. Some of the particle effects in the script menu, including smoke, can take a long
time to render. In “Tutorial 6.09: Speeding Up Particle Effects (Pro Only)” we’ll show you
a way to speed up complex particle effects.
 The final result

Another Effect - Sparkles

Here’s an example of another particle effect - the Sparkles script. A great use of this
effect is for magic wands. The fully finished file can be opened in Moho if you wish. It’s
called Tutorial 6.08_2. Here’s what the rendered result looks like:
The Sparkles effect
6.09 Speeding Up Particle Effects (pro only)
In “Tutorial 6.08: Using Pre-made Particle Effects (Pro Only)” we showed how you can
use Moho’s included particle effect scripts to easily add effects like smoke and
explosions. The only drawback to these effects is that they can take a very long time
to render. In this tutorial, we’ll show you a way to speed up the exporting of complex
particle effects.

Rendering an Image Sequence

For this tutorial, we’ll start by taking a look at a finished animation of an explosion
effect.

1.​ Open the Tutorials > 6 - Effects > Tutorial 6.09 file in Moho. Our goal is to re-use this
explosion in another Moho animation, but make it a lot faster for rendering. To do
this, we’ll export the explosion animation as a PNG image sequence, using some
special settings.

2.​ Choose File > Export Animation to open the Export Animation dialog.

3.​ Export the project animation using the following options:

●​ Format: Image Sequence

●​ Preset: PNG

●​ Quality: 90

●​ Do not premultiply alpha channel: Checked

●​ All other settings: Leave at default values.

 Export options

4.​ In the Destination section, choose the following options:

●​ Click the Export To popup and select Choose Folder. Navigate to the folder
into which you want to save the image sequence.

●​ In the Name field, enter a root name for the animation sequence, such as
Explosion.png.

5.​ Click OK to exit the Export Animation dialog. The render preview will show progress
bars and sample frames as the image sequence renders. After the render is
complete the preview window closes.

A rendered version of the explosion sequence can be

found in the Tutorials > 6 - Effects folder. The PNG files are
 named Explosion_00001.png through
Explosion_00035.png.

Using Sequential Images in Image Layers

To work with the explosion movie, follow these steps:

1.​ Start a new Moho project file.

2.​ From the Layers palette, create a new Image Sequence Layer.

Create an Image Sequence layer

3.​ Moho will prompt you to select images for the sequence. As long as there is an
unbroken numerical sequence, all you need to do is select the first image in the
sequence (Explosion_00001.png, in our case).

4.​ After Moho imports the Image Sequence you will see the explosion in the project
window, and the timeline will show a green arrow at the start of the image
sequence, and a red arrow at the end of the image sequence.
 Image Sequence in the timeline.

5.​ . Use the Transform Layer tool to move the explosion off to the side a bit:

Move the explosion layer

6.​ In the Timeline, use the Duplicate Layer button to duplicate the explosion a few
times (five or more - you want to fill the project with explosions).

7.​ On frame 0, select one explosion layer at a time. Use the Transform Layer tool to
move them to random places in the timeline:
 Lots of explosions.

8.​ Switch to the Sequencer in the timeline, and adjust the start positions of the
explosions so that they don’t start and stop at the same time:

Stagger the start and stop times in Sequencer view.

9.​ When you’ve got as many explosions as you want, export the animation to your
final desired animation format.

Notice that even though the single explosion took longer

to render, this combined set of explosions renders much
more quickly. This is because the explosion effect has
already been created - for the combined effect, Moho
just needs to composite several explosions together. Using
this technique, you can greatly speed up the time it takes
to export an animation that uses one or many complex
particle effects.
6.10 Perspective Shadows (pro only)
In this tutorial you’ll learn a little trick to create perspective shadows. This trick depends
on Moho’s layer masking feature, and uses it in a creative way.

Start With a Sample File

For this tutorial, we’ll start with a project file that’s almost finished. It’s named Tutorial
6.10 and it’s located in the Tutorials > 6 - Effects subfolder within your custom content
folder.

1.​ Open the Tutorials > 6 - Effects > Tutorial 6.10 file in Moho, and you should see
something like this:

Starting point for this tutorial

2.​ Play back the animation to get an idea of what you’re starting with.

3.​ When you’ve seen enough, rewind the animation back to frame 0. What we’re
going to do in this tutorial is give Lenny a shadow.

Moving a Layer Into Perspective

We’re going to create a shadow that matches Lenny exactly.

1.​ At Frame 0, start off by duplicating the Lenny Skeleton layer, using the
Duplicate Layer button.
2.​ Move this new copy below the original Lenny Skeleton, name it Lenny
Shadow.
3.​ Add a new vector layer inside it as shown below. Make this new layer
active, and name the new layer Shadow.

New Lenny Shadow with Shadow layer

4.​ In the new Shadow layer, draw a simple rectangle that takes up about 2/3
of the left side of the visible area, as shown below. Choose Black for the Fill
and Stroke colors if they aren’t selected already. The idea is to completely
surround Lenny, with enough extra space for when he moves.

Rectangle in Shadow layer

5.​ We’re going to temporarily hide the black shadow layer so that you can
use the copy of Lenny to shear and reposition him for the shadow. To hide
the black rectangle, click the Visibility icon to hide the Shadow layer as
shown below.

Temporarily hide the Shadow layer

6.​ . Next, select the Lenny Shadow bone layer and use the Shear Layer tool to
shear the lower copy of Lenny so that he leans to the right as shown below:
You can also enter an X value of .60 or thereabouts in the Shear Layer tool
options in the status bar.
 Shear the lower copy of Lenny

7.​ . Now use the Transform Layer tool to scale the Lenny Shadow layer down
vertically. Be sure to leave it the same size horizontally - we just want it
shorter vertically, as shown below:

Scale down the shadow layer

8.​ . Next, use the Transform Layer tool to move the Lenny Shadow layer into
position so that the back heels of the two Lennys line up like this:
 Position the shadow layer

The Trick

So far we have two copies of Lenny, with the lower one shifted into perspective. Here
comes the trick with layer masking.

1.​ First, click the Visibility icon in the Shadow layer to make the sheared black
rectangle visible again.

2.​ To turn on masking, double-click the Lenny Shadow layer and in the Masking tab,
set the Group Mask setting to Hide all.
 Mask settings for the Lenny Shadow layer

3.​ Next, double-click the Lenny layer and in the Masking tab, set the Layer Masking
setting to + Add to mask, but keep invisible. The result of these settings is that the
big black rectangle will now be masked against the shape of Lenny himself:

Mask settings for the Lenny layer

 The shadow mask effect

4.​ The final touch is to refine the appearance of the shadow. Double-click the Lenny
Shadow layer. In the Layer Settings dialog General tab, set the Blur radius to 8 and
Opacity to 50. That finishes the shadow effect - you can now export the animation
as a movie file.

The adjusted shadow, rendered

The final result is also included as a Moho project file. It’s called Tutorial 6.10 Final - take
a look at it if you have any trouble following the directions above. It’s important when
using this trick to animate your subject first before you add the shadow - that way the
shadow will also be animated, leading to a more realistic effect.
6.11 Using 3D Models (pro only)
Although Moho is primarily a 2D program, it is possible to import 3D models and use
them in a Moho animation. This tutorial will show you some of the things you can do
with 3D models in Moho.

Import a Basic 3D Model

First, we’ll try importing a basic 3D model.

1.​ Start Moho and create a new, empty project.

2.​ Next, select the File > Import > OBJ 3D Model menu command. Moho will
prompt you to select a file - choose the file named 3dmodel.obj located in
the Tutorials > 6 - Effects subfolder within your custom content folder. Moho
will import the model into a new 3D layer, and you should see something
like this:

Imported 3D model

3.​ . Use the Orbit Workspace tool to rotate around the scene. As you rotate
around the object, notice that it never appears flat from any side (like a
vector layer) - it is a true three-dimensional object.
This object was created in a program called Wings 3D
(http://www.wings3d.com). Whether you choose to
create models in Wings 3D or another 3D program, be
sure to export them as OBJ files. OBJ is a common 3D file
format that most 3D programs support, and is currently the
only 3D format that Moho can import.

The colors of this model have been defined in the file

3dmodel.mtl - this is a material file that Wings 3D created
along with the model itself. You cannot change the colors
of a 3D model within Moho. However, you can change
the color and width of the outline in the Layer Settings
dialog, under the 3D Options tab, discussed in “3D
Options (Pro Only)” in the Moho Users Manual.

Side view of 3D model

 Using 3D Models in a Face

Next, we’ll show an example of how you can use a 3D model in the construction of a
character’s face. One of the limitations of Moho’s 2D nature is that it is difficult to rotate
a head in 3D space. Using a 3D model can solve this problem.

1.​ Open the file Tutorial 6.11 located in the Tutorials > 6 - Effects subfolder within your
custom content folder. This is a completely finished animation - play it back to see
what’s going on.

Face pointing up and right

 Now pointing down and left

2.​ Notice that unlike most faces in Moho, this one can freely turn from side to side. This
is because the head and nose (the major 3D structures in a face) are built as
actual 3D models. The mouth, eyes, and ears are all 2D vector layers that have
been arranged in 3D space around the head.

3.​ The only other trick involved in getting this character’s head to work was sorting the
head and ears. Notice that the main 3D head shape and the ears are grouped
together. This is so that those three shapes can be depth-sorted. As the head turns
from side to side, one of the ears often needs to go behind the head layer and
then come back in front, depending on the head’s angle. Depth sorting is used to
easily accomplish this reordering.

Textures and Scenery

Moho can also make use of textures on 3D models. You can’t create the texturing
within Moho itself, but if your imported 3D model uses texture maps, Moho will use them
when it imports the model.
Now open the file Tutorial 6.11_2 located in the Tutorials > 6 - Effects subfolder within
your custom content folder. This scene makes use of the 3D model simple_scene.obj,
which in turn uses a texture map file:

A textured 3D scene

One of the things you may notice in this scene is that the scenery has detailed shadows
and shading on it. Moho does not provide lighting and shading for 3D models. Instead,
these effects are part of the texture map for this 3D model. In this case, a separate 3D
program was used to calculate the lighting effects and bake them into the texture
map.
Of course, the other element in the scene is a regular Moho 2D animated character.
Although this character is composed of 2D vector layers, it can be positioned in true 3D
space, so it is quite easy to integrate it into the 3D scene.
7.01 Reference Layer Basics
In this tutorial you’ll learn some basic principles relating to layer referencing. You’ll begin
with a project that is included in your User Content folder, and create several reference
layers of the star in Layer 1.

1.​ Open Tutorial 7.01 Start.moho, located in the 7 - Layer Referencing folder in your
User Content folder.

A single layer in the Document window

2.​ The Reference Layer button in the Layers palette is clicked for each new reference
layer that you want to create. Each time you click the Reference Layer button, it
will create a copy of the original layer (similar to the Duplicate Layer button),
except that this reference copy will refer back to the original layer. To create five
additional instances of the star, simply click the Reference Layer icon at the top of
the Layers palette. When you initially create a reference layer, it is placed directly
on top of its original layer.
 Reference Layer icon and five additional reference layers added to the scene.

3.​ After you make all your copies, select each layer one at a time and move them
into position on Frame 0. Move the reference layers into position with the Translate
Layer tool as shown below.

Reference layers moved into position with the Translate Layer tool (layers 1-3 on top,
layers 4-6 on the bottom).

4.​ When you make changes to the original layer (Layer 1) those changes will
automatically be applied to each of the references. To demonstrate this, select
Layer 1, and choose a new fill color in the Style window. That color change is
automatically applied to Layers 2 through 6.
5.​ Reference layers also inherit other animatable properties such as translation and
rotation. To demonstrate this, select the Transform Layer tool, and rotate layer 1.
Now your project should look similar to the following.

The color and rotation changes of the original Layer 1 (selected) are applied to
reference layers 2 through 6.

6.​ Other animateable changes are also replicated. For example, use the Transform
Points tool to move one of the points in the star on Layer 1. That same point will
move in the reference copies on Layers 2 through 6.

Point transformations are also replicated on reference layers.

7.​ You’ll also notice that reference layers also inherit animated properties. To
demonstrate this, click in Frame 24, and make some changes to animate some of
the points in Layer 1.

8.​ Next, click on Frame 48 and animate more points in Layer 1.

9.​ Now go back and play the animation. All of the animated points play together.

10.​ Save this project as Tutorial 7.01 Finished.moho. A copy of this completed project is
furnished in your User Content folder.
7.02 Breaking and Updating Reference Layer
Connections
In the previous tutorial you learned what happens when you make changes to the
original layer in a project. Those changes are passed on to any layer that references
back to that original layer.
In this tutorial, you’ll learn how you can break connections with the original layer when
you make changes to a reference layer. You can either continue on from your previous
tutorial, or open the Tutorial 7.01 Finished.moho file that is found in your User Content
folder.

1.​ Continue from the project that you completed in the previous lesson, or open
Tutorial 7.01 Finished.moho, which is located in your User Content folder.

2.​ Go back to Frame 0. Select Layer 4, which is one of the reference layers in the
project.

3.​ Click the star with the Select Shape tool, and then change the fill color in the Style
window.

Change the color of Layer 4, which is one of the reference layers.

4.​ Now, select the original layer (Layer 1), and click the star in Layer 1. Change its fill
color in the Style window.

5.​ Now play your animation from the beginning. You’ll notice that even though the
color of Layer 4 has changed, it still animates with the other layers.
 Change the color of Layer 4, which is one of the reference layers.

Steps 3 through 5 demonstrate that when you change a

reference layer, it will break the connection of that
particular property with the original layer. In this case, the
only connection that is broken is the Color property. The
color connection has been broken between Layer 4 and
the original layer, but the animation that you created in
the previous steps will remain connected.

6.​ With the original layer selected, advance to frame 38 in the timeline.

7.​ Change the stroke color of the original layer. The stroke color change will be
applied to all layers, including the layer that had the fill color changed.

8.​ Play the animation again. The change in the stroke color will be animated.
 At frame 38, change the stroke color of Layer 1 (the original layer).

9.​ Now select Layer 4 again (the reference layer that has a different fill color). Make
some structural changes on Frame 0, such as adding some points and changing
the shape. The following figure shows some additional points added, and changes
to the shape.

At frame 0, add some points and change the shape of Layer 4.

10.​ Play the animation again. You’ll notice that Layer 4 still animates with the other
layers, but the new points have broken the connection with the shape of the
original layer and all the other reference layers that remain connected to its shape.
 Layer 4 will still animate with the other layers, but the new
points in Layer 4 have broken the connection with the
shapes of the other layers that remain connected to the
original layer. If you later make changes to the shape of
original Layer 1, those changes will not be applied to
Layer 5.

11.​ Notice in the Layers palette that Layer 4 (the reference layer that has been
changed) has a different icon. The badge shows a red arrow to indicate that there
is a mismatch with the original layer.

The arrow in the reference layer icon is red to indicate there is a mismatch between
Layer 4 and the original layer.

12.​ Right-click Layer 4 to view the menu options. Choose Update Layer Reference to
open the Reference Update Options dialog.
 Choose Update Layer Reference.

13.​ In this dialog you check or uncheck the items that you want to resync with the
original layer. Some of the layer differences are already checked. Check the
Replace Mismatched Vectors option to bring Layer 4 back in sync with the original
layer.

14.​ Save this project as Tutorial 7.02 Finished.moho. You will find a copy of this
completed project in your User Content folder.
Choose Replace mismatched vectors to bring the shape of Layer 4 back in sync with
the original layer.
7.03 Breaking and Updating Original Layer
Connections
In the previous tutorial you learned how you can break and update connections
between a reference layer and the original layer. You can also break connections
between the original layer and all of the other reference layers.
To follow this tutorial, you can start where you left off at the previous tutorial, or open
Tutorial 7.02 Finished.moho from your User Content folder.

1.​ With Tutorial 7.02 Finished opened, select the original Layer 1. At Frame 0, add
some points to it with the Add Point tool, and change the shape a little with the
Translate Points tool.

At frame 0, add some points and change the shape of Layer 1.

2.​ You’ll notice that making this change breaks the connection with all of the other
reference layers. The icons for the reference layers display a red arrow when the
connections are broken.
 The reference layer icons turn red when you change the number of points in the
original layer.

3.​ To reconnect one of the reference layers with the original layer, first select Layer 2.
Right-click the layer and choose Update Layer Reference.

Choose Update Layer Reference.

4.​ From the Reference Update Options dialog, choose Replace Mismatched Vectors
again to bring Layer 2 back in sync with Layer 1. Now Layer 2 has the new shape of
Layer 1.
 Choose Replace mismatched vectors to bring the shape of Layer 2 in sync with the
new shape of the original layer.

5.​ Repeat steps 3 and 4 for each additional layer that you want to sync back up to
the reshaped Layer 1. In our finished example, Layers 1 through 3 are in sync again,
and Layers 4 through 6 are mismatched. You will find a copy of the finished project
in your User Content folder, saved as Tutorial 7.03 Finished.moho.

At frame 0, add some points and change the shape of Layer 1.

As your scene and reference layers become more
complex it can be difficult to determine which layer a
reference layer is linked with. This is easy to remedy.
Right-click on the layer that you are not sure of. Then
choose Locate Original Layer. Moho will immediately
select the original layer that the reference layer is
connected with.

You can also turn a reference layer back into a normal

layer. Right-click on a reference layer and choose Break
Layer Reference. It will retain any properties that were
added to the layer while it was referenced to the original
layer.
7.04 Using Reference Layer for Masking
In this tutorial you will work with a file that contains an eyeball that consists of three
layers: Eye, Pupil, and Lid.

The pupil and lid layers will need some masking to follow the shape of the eye.

The pupil and lid layers in this eye will have to be masked so that they follow the shape
of the eyeball. We can use Masking on the Eyeball group to mask the layers so that the
areas outside the Eye layer are hidden. Follow these steps:

1.​ Open Tutorial 7.04 Start.moho, which you will find in the 7 - Layer Referencing folder
in your User Content folder.

2.​ Double-click the Eyeball group layer, and switch to the Masking tab. Set the Group
Mask setting to Hide All. The bottom layer (Eye) is used for the mask, and the other
layers (Pupil and Lid) are masked against it. However, you’ll notice that the lid does
not have the same outline that the other layers do.

Set the Masking on the Eyeball layer to Hide All.

 The eyelid lacks an outline.

3.​ While the Exclude Strokes option in the Masking tab can be used as a workaround
for this, Layer Referencing offers a more powerful alternative. First, Select the Eye
layer, then click the Reference Layer button to create a reference layer named
Eye 2.

Click the Reference Layer button to create a copy of the eye.

4.​ Move the Eye 2 reference copy up above all the other layers.
 Move the Eye 2 layer above the other eye layers.

5.​ Now, select the Eye 2 layer with the Select Layer tool, and turn off the fill for the
eye. Now you have an outline that surrounds the entire eye as you would expect.

Select the Eye with the Select Shape tool, and turn off the fill.

Alternatively, you can leave the fill on but adjust the

transparency of the fill layer so that you can see the other
elements through the Eye 2 layer.

6.​ Now you can modify the shape of the original Eye layer with the Translate Points
tool, and those changes will automatically be applied to the Eye 2 reference layer.
 When you change the shape of the Eye layer, the outline on the Eye 2 layer
automatically follows the new shape.

7.​ Save the project as Tutorial 7.04 Finished.moho, if desired. A copy of the
completed project is included in the 7 - Layer Referencing folder in your Moho User
Content folders.
7.05 Referencing External Documents
Assume that you are working on a project that is divided amongst several people. You
are the animator, and other members of the team include a character artist and a
background artist. You work in different offices or in different parts of the country. Layer
referencing offers a way that you can easily collaborate on your project, because you
can reference external documents in a Moho project.
In the project that follows you (as the animator) will create a new document that
references two other documents that you will find in the 7 - Layer Referencing folder in
your User Content folder. These additional files represent the character and
background art that other people are working on. In actuality, you’ll make some minor
changes to these files to demonstrate how the changes will be reflected in the project
that the animator is working on.

Layer referencing can also be used by a person who

wants to use the same character in more than one
project. This allows you to create your character once,
and then reference it in as many projects as you like. Then
you can change rigging or colors or make other changes
in the original character file, and those changes will carry
through to all the projects in which that referenced
character is used.
7.05.1 The Main Project Document
1.​ Create a new document. Choose File > Import > Moho Object, and choose the
Background.moho file.

2.​ When the Import Object dialog appears, select the Background (do not import the
Future Work layer). Make sure you check the Import by reference checkbox in the
Insert Object dialog.

Check the Import by Reference option to import the working background.

3.​ Click OK to import the background project, which is a quick sketch of the project
that the background artist is working on. Moho inserts a reference copy of the
document into your project. The icons in the Layers palette show a green arrow to
indicate that an external file is referenced.

The reference layer icon shows a green arrow to indicate a reference to an external
document.
4.​ Now you can import the artwork that the character artist is working on. Choose File
> Import > Moho Object again, and choose Character.moho.

5.​ Make sure that the Character is checked, and also check the Import by Reference
checkbox in the Insert Object dialog. Then choose OK to import the character.

Check the Import by Reference option to import the working character.

6.​ Select the Character layer, and use the Transform Layer tool to move the
character to the left side of the scene on frame 0.

Move the character to the left side of the scene.

7.​ Now add some simple animation to the camera using the Zoom Camera and Pan
Camera tools, similar to that shown in the following figure.

●​ Zoom and pan the camera closer and to the left side of the scene in frame 0.

●​ At frame 96, zoom out again and pan toward the right side of the scene.

Camera positions at frames 0 and 96.

8.​ Now you’ll work backward to add some simple animation to the arms and legs of
the character, similar to the following figures:
Arms and Legs at Frame 96.

Arms and Legs at Frame 78.

Arms and Legs at Frame 60.

Arms and Legs at Frame 42.

 Arms and Legs at Frame 24.

9.​ Now rewind and play the project to watch all your hard work.

10.​ Save your project at this point, to a file location and filename of your choice.
7.05.2 Adding a New Layer to the Character
While you’ve been working on the animation, the other two people have been working
on the background and character artwork. You get word that there are updates to the
character.
But to simulate the updates that have been made to the character, you’ll have to
make a few simple changes to the character.moho file yourself. To simulate this:

1.​ Open the character.moho file, and select the L Leg layer in the Character group.

2.​ Create a new vector layer named Eyes.

Create a new Eyes layer in the Character.moho file.

3.​ Click the Reset button in the Style window to reset the stroke and fill properties to
their default color and size. Then use the Draw Shape tool to add some simple eyes
for the character.
 New character eyes.

The following step will overwrite the character.moho file

that was furnished with Moho. If you want to save the
original version, create a copy of character.moho and
save it into your User Content folder as a different
filename (such as character-bak.moho before you
perform the next step.

4.​ Choose File > Save to save the project file, over the previous version.

5.​ You should now be able to see the changes in your project file that contains a
referenced copy of this file. Go back to your project and you will notice that the
reference layer icons now display red arrows instead of green arrows, to let you
know that there has been a change to the original character file that is referenced
in your project.

6.​ Right click the Character group and choose Update Layer Reference.
 Choose Update Layer Reference.

7.​ The Reference Update Options dialog asks how you want to handle the conflicts.
You know the character has a new Eye layer, so you want to make sure that Add
new/missing layers from the original source is checked. The other options in this
dialog don’t really apply for the moment, but the options are:

Reference Update Options.

●​ Add new/missing layers from original source: Check this option if the original
document contains new layers that do not exist in the document that
references the original.
 ●​ Remove layers that don’t exist in the original: Check this option if the original
document no longer has layers that currently exist in the document that
references the original, because they were removed.

●​ Replace mismatched vectors: Check this option if structural changes were

made to the shapes in the original document (adding or removing points).

●​ Replace mismatched bones: Check this option if changes were made to the
bones in the original document.

8.​ Click OK to import the updated character into the scene. The eyes layer appears
in your new document.

9.​ If you play back the animation you’ll notice that it is still intact.

Play back the animation with the character changes.

7.05.3 Rigging Changes
As you’re working on your animation you notice that the bending of some of the body
parts looks a little less than desirable. For example, when you bend one of the arms you
notice that the arm bend looks a little squishy and could use some touching up. So you
let your “rigger” know that some updates are needed.

The character needs some bending improvements.

The rigger decides to add a smart bone that improves the bending of the arm. To
simulate this change, you’ll create a Smart Bone action that improves the bending of
the left forearm bone. To simulate the changes, follow these steps:

1.​ In the character.moho document, select the Character bone layer to activate the
Bone tools.

2.​ Click the L Forearm bone with the Select Bone tool.

3.​ Choose Window > Actions, and click the New button to create a new smart bone
action named L Forearm (the same as the bone you have selected).
 Create a Smart Bone action named L Forearm.

4.​ Advance to a frame other than 0 (such as Frame 48) and bend the character’s
arm with the Transform Bone tool. Then use the Transform Points tool and the
Curvature tool to improve the bending. Check the midway position as well, and
make some changes at Frame 24 if you feel it is necessary.
 Tweak bending with the Transform Points and Curvature tools.

5.​ Save these changes into the character.moho document.

6.​ Return to your project, and you see the bending problem area on Frame 42. Select
the Character bone group and choose Update Layer Reference.
 Left forearm bending problem on Frame 42.

7.​ In the Reference Update Options dialog, verify that Replace mismatched bones is
checked, and then click OK to update the reference layer. You’ll notice the
improved bending immediately.

Check Replace mismatched bones.

The improved joint bending appears in your project.
7.05.4 Updating the Background
Now the background artist has finished his artwork for the background. The
background.moho document contains some extra layers that have completed
artwork for the background. To make the applicable changes, follow these steps:
1.​ Open the background.moho file and expand the Future Work group.

2.​ Move the wall, ground 2, and background layers into the Background group.

Move the Future Work layers into the Background group.

3.​ Select the Initial Sketch layer and delete it. Then save the background.moho
document.

Delete the Initial Sketch layer.

4.​ When you go back to the project document you notice that the reference
layers for the Background have changed to indicate that there has been a
change in the Background.moho document.

5.​ Right-click on the Background reference group, and choose Update Layer
References. Because there are new items in the Background layer, and
because you also deleted the Initial Sketch layer, you want to make sure that
both Add new/missing layers from the original source and Remove layers that
don’t exist in the original are checked.

Reference Update Options dialog for new background.

6.​ After you press OK, you’ll see the Initial Sketch layer in your project go away,
and the layers that were moved into place in the Background layer will appear
in the background.
 The finished project.

7.​ Choose File > Save to save your finished version of the project. A completed
version is located in your User Content folder, and is named Tutorial 7.05
Finished. moho.
8.01 Create a Vitruvian Group
To understand the basics. Let’s create a simple Vitruvian Group in an empty file.

First, be sure to be in frame 0.

Change the name of the empty vector layer in the project to ‘Arm 1’ and use the
drawing tools to create an arm.

Now create a second vector layer, name it ‘Arm 2’ and draw the same arm, but in a
different pose.

So now you have two arms, each one in its own vector layer.
Go to the Layers window, create a Bone layer and drag both arms inside of it.
Your layers should look similar to this:

Select the Bone layer and then the Add Bones tool (A) and create one bone for the
body and then bones for each arm.
Even when we will see only one arm at the time, just rig your character as it has two
arms.
You need to be sure both arms are children of the main body bone:
Once you have your bones created, Moho needs to know what bones should move
and bend each arm. This step is not always necessary when you are creating a rig, but
it’s crucial for Vitruvian bones to work.

To give the software this information we will use the Link Bones To Layer option.
Luckily, it’s a simple and quick process.

Select the ‘Arm 1’ vector layer.

Now use the Select Bone tool and select the three bones related to that arm.
You can use the Rectangle selection, lasso mode or hold Shift + clicking to add bones
to the selection.
Hold Ctrl and click over a bone if you need to remove it from the selection.

So now you have the ‘Arm 1’ layer selected and also the bones that should move that
layer.

Go to the Bone menu and click on ‘Link Bones To Layer’ (or simply press Ctrl+Shift+F in
Windows or Cmd+Shift+F in macOS)
These bones will look bold everytime that vector layer is selected. This means that these
bones are the only ones that will move that specific layer.

Now select the ‘Arm 2’ layer and repeat the same process: Select the bones and go to
Bone -> Link Bones To Layer
In this exercise, we are only creating two different arms, but you can repeat the same
process for as many limbs as you’d like to have in your character.

Now go to the Tools bar and use the Vitruvian Bones tool. This tool works very similar to
the Select Bone tool, but also allows the creation of Vitruvian Groups.

To do it, simply select the first bone of each arm

And then click on the Group button

You will notice one arm will disappear and the other one will have a special design. This
design means this is a Vitruvian Bone.

To test it, simply select any bone from the arm and then go to the Active Bone menu in
the Vitruvian Bones toolbar

This menu shows you the names of the bones (in this case they have the default names,
but you can rename the bones if you want). Depending on which one you select, that
arm will appear on the screen.
Tip:
You can also change the Active Bone by simply pressing Alt+D or Alt+C as many times
as you need.
This method is much quicker and works without the need of using the Vitruvian Bone
tool.
As far as one of the bones of the arm is selected, you will be able to use it.
(And, unrelated to this section, this shortcut also work with Switch Layers)

As you can see, the design of a Vitruvian Bone looks different to the rest of bones, with
a semi-circle and two lines at the bottom.
This design will help animators know when they have the option to animate Vitruvian
Bones.
8.02 Rigging Vitruvian Bones
Although Vitruvian Bones need to be set up with the ‘Link Bones To Layer’ menu in order
to work correctly, you are not limited to that option.

After you use that menu, you can still Bind points or Entire layers to specific bones,
create Smart bones for joints or control Levers and use any tool you would normally use
for rigging a character.

As you can see here, this character is using Point Binding for the arm:

Also, Vitruvian bones are not limited to one layer. You can attach as many layers as you
want to Vitruvian Bones and they can be anywhere inside of the Bone layer.

So, for instance, an arm can be split in two layers: Arm and Forearm. Then the arm can
be behind the body layer and the forearm in front of it, as you can see here:
8.03 Animating Vitruvian Bones
Basic concepts of the timeline:

To animate with Vitruvian Bones, it’s very important to understand some basic concepts
of Moho’s timeline:
For most of the channels, there’s a white and a red channel.

The red channel only shows the keyframes of the element you have selected at the
moment.
The white channel shows you keyframes of any of the elements that have movement in
the selected layer.
So, as a summary:
The red channel works to modify and re-time specific movement
The white channel is useful to modify and re-time all the elements at once.

Animating with Vitruvian Bones

When you start animating Vitruvian Bones, you will notice some new channels
appearing in the timeline. These are special channels and behave a bit different from
the rest.

First, you will notice the Vitruvian Bones channels. These channels will appear every time
you change the Active Bone on a Vitruvian Bones Group (by using the tool menu or the
Alt+D and Alt+C shortcuts):

Vitruvian Bones

Every time you change the Active Bone of any Vitruvian Group during your animation,
this channel will show you a Keyframe at that frame.
Selected Vitruvian Bones

This channel is very similar to the previous one, but it only shows the keyframes of the
Vitruvian Group selected at that moment.
If you select a bone that is part of a Vitruvian Group, this channel will show keyframes
every time you change the Active Bone of that specific Vitruvian Group.

You also will see the Vitruvian Bones Consolidated channels:

Vitruvian Bones Consolidated

This channel shows a general summary of every Vitruvian bone animated.

If any of the Vitruvian Bones in the Bone layer has a keyframe (it can be in Rotation,
Scale, Translation, Flip or any bone animation channel), a keyframe will also appear in
the Vitruvian Bones Consolidated channel.
This channel is very important, because it shows the entire animation in the timeline,
even for bones that are not visible at the time.
This allows you to modify and re-time an entire animation easily.

Selected Vitruvian Bones Consolidated

This channel is very similar to the previous one, but it only shows the keyframes of the
Vitruvian Group selected at that moment.
If you select a bone that is part of a Vitruvian Group, this channel will show keyframes in
the frames where any of the bones of that group has keyframes.
This channel is especially useful if you want to modify the animation in a specific group.
For instance, all your animation is working fine, but the left Arm is moving too slowly.
Then you can modify the keyframes of this channel to adjust the timing of the entire
group at once.

Look at this example:

The VItruvian Bones Consolidated channel shows there is animation at frames 6, 12 and
18. This is a general summary that shows that in frames 6, 12 and 18 the Vitruvian Bones
are animated.

The Vitruvian Bones channel shows that one or more Vitruvian Active Bones have been
changed in frames 6 and 18.

The Selected Vitruvian Bones Consolidated channel shows that the bone selected (right
arm of the character) is part of a VItruvian Group and that that group has keyframes in
frames 6 and 12. This Vitruvian arm is not moving at frame 18, so there’s no keyframe
there.

The Selected Vitruvian Bones channel shows that the bone selected (right arm of the
character) is part of a Vitruvian Group and that specific group has changed the Active
Bone only in frame 6.

Disabling Vitruvian Bones Groups

If you want to see and edit all the bones and content from a Vitruvian group, you can
temporarily disable that group.

This option is very useful to make changes on the overall design, add Smart Bones or
make adjustments on the animation.

Just use the Vitruvian Bones Tool, select one bone from the Vitruvian Group you want to
disable and uncheck the Enabled box in the toolbar

Disabled:
You can also Disable or Enable every Vitruvian Group from a character by going to the
menu
Bone > Disable All Vitruvian Bones
Bone > Enable All Vitruvian Bones

All Vitruvian Bones Disabled:

Adding and Removing Bones from a Vitruvian Group

If you want to Add a bone chain to an already created Vitruvian Group,

•​ Use the Vitruvian Bone tool

•​ Select one of the main bones from the Vitruvian Group you want to edit

•​ Holding shift, add the chain of bones you want to add to the selection

•​ Press the + button to add the chain to the Vitruvian Group

•​ If you want to remove a chain of bones from a Vitruvian Group

•​ Use Vitruvian Bones tool

•​ Select the main bone of the chain you want to remove from the group

•​ Press the - button

Tutorial 9 Wind Dynamics
Wind is the newest addition to the powerful and easy to use Physics toolset Moho offers.
Take absolute control over the strength, direction and turbulence of wind and make
your scenes come alive in minutes. Give your backgrounds and characters new life
with Wind Dynamics!

To use wind, you must select a Bone layer and be sure you are at frame 0.
Use the Select Bone tool (B) and select one or more bones you want to react with Wind

​
In this case, we want the hair to automatically move with the wind, so we select all the
bones related to the hair

Now in the Select Bone toolbar, open the Bone Constraints window and activate both
Bone Dynamics and Wind
​
Now the bones are ready to receive the wind.
Press Close in the Bone Constraints Window and now select the Wind Tool

A red Arrow will appear over the layer

This arrow shows how the wind is moving in real time and makes it easier to know what
values to choose next.

Wind Values

​
With the Wind tool you can edit these four values
•​ Direction: This shows the direction of the Wind in degrees. A value of 0 means the
wind will be fully horizontal and pointing to the right. Making the number smaller or
bigger, will make the wind rotate clockwise or counterclockwise.

•​ Strength: This value shows how strong the wind is. A value of 0 means no wind at all
and 100 is the maximum amount.

When you modify this value, you will see the Red Arrow becomes shorter or longer,
depending on the number.

•​ Turbulent amplitude and Turbulent frequency: These two values are related to each
other and they modify and animate the angle and strength of the wind to give the
sensation of turbulence.

Without turbulence, the bones reacting to the wind can look unnatural, because
their movement will be very flat, with no small variations.

A higher value for Turbulent amplitude means the angle and strength of the wind
will change more dramatically during the animation.

A higher value for Turbulent frequency means those changes in angle and strength
will occur more often, so the wind can jump from very strong to very weak in a few
frames. And the same will happen with its angle.

Using right click or the mouse wheel to modify the values

​
You can edit these and any numeric values in Moho by using the mouse wheel or
pointing the cursor over the number and drag right click to the left or right.

Holding Shift or Ctrl (Cmd in macOS) while doing it, you can make the change of
values bigger or smaller.
 Testing Wind in real time

To check how the Wind is affecting your characters, background elements or props,
you can simply hit play in the timeline and then modify the wind values using the
technique explained above.

Moho will show you in real time how the new values are affecting the bones with Wind
Dynamics applied.
The red arrow will also be updated automatically, making the Wind adjustments easier.

Animating Wind

​
There are three new channels for Wind:

•​ Wind Direction

•​ Wind Strength

•​ Wind Turbulence

If you modify these values at any frame, a keyframe will be created there.
The values for Wind Direction and Wind Strength can be edited in the Motion Graph
You can also copy and paste Wind keyframes between different bone layers.

Bones properties

The Dynamics properties for each bone can also be modified.

If you use the Select Bone tool and select one or more bones, you can open the Bone
Constraints window and change the values there too.

Depending on the values you pick for Torque, Spring and Damping, the reaction of the
bone to the wind will be different

•​ Torque Force: Defines how big will be the movement

•​ Spring Force: Defines how much the movement will bounce. The smaller the value,
the softer the movement will be

•​ Damping Force: Defines how long it will take the bone to go back to its initial
angle. The bigger the value, the less time it will take.
Tutorial 10 Perspective Warp and Quad Warp
Animate backgrounds, props and characters in perspective with the new Perspective Mesh.
Just create a shape with four points, attach it to any image or vector layer and animate it.
This simple but powerful mesh can be used in combination with triangular meshes, making Moho
more flexible than ever.

Creating a True Perspective Mesh

​
With Moho, you can create Meshes of 4 points and use them to animate any vector or image in true
perspective.

The process to do this is very simple. Let’s say you have a vector layer with a map:

To create a Perspective mesh, create a new Vector Layer and call it ‘mesh map’
In the ‘mesh map’ layer, draw and fill a rectangle covering the entire map

Now, since we don’t want to see the rectangle, but only use it as a Mesh, go to the Layers window
and double click the ‘mesh map’ layer to open its properties.
Then check Hide in editing view and Don’t render this layer and click OK.
The rectangle will become invisible.

Open the Layer properties of the ‘map’ layer, go to the Vectors tab, select ‘mesh map’ as Smart warp
layer and click OK.
You are done!

Now to test the mesh, go to any frame different to frame 0 and use the Translate points tool to move
the points in the mesh map layer.
You will see how the perspective changes while you move them.
Tip: Perspective mesh only works if the shape of the mesh is valid. That the mesh won’t work if you
fold it over itself.

For instance, this shape will work well, because it’s a valid perspective

This shape instead is illegal, because it doesn’t follow the logic of perspective, so it won’t work

Quad warp

​
Quad warp works in a similar way to the perspective mesh, but it works to create better character
expressions, head turns, 3D effect or any modification over a vector or bitmap character.
Again, to create a Quad warp mesh is very simple.

Let’s create a mesh for this character

First, create a vector layer and call it ‘mesh fox’

Now use the Add Points tool to create draw a mesh over it

To make the mesh you need to consider this

•​ The mesh must be bigger than the content. Otherwise, anything that is not inside of the mesh
won’t work well or won’t be shown in the animation

•​ The mesh must be created using shapes of 3 or 4 points

Once you have your mesh done, you need to paint every single shape there. But don’t worry, we
have a script that does it automatically!
This script was generously donated by the Moho beta user Paul Cheshire (thanks again, Paul!)

So, be sure you have the ‘mesh fox’ layer selected and go to the Menu
Script -> Draw -> Fill Quad Mesh

The script will automatically create a shape for every quad and triangle in the mesh.

If there’s any issue with the mesh, you will get an error message and will able to see where is the
issue:
In this case, there’s a point in the eye that invalidates that part of the mesh, because it has 5 points
instead of 4.

To fix it, simply remove the point and run the script again.

Once the mesh is ready, you need to open the Properties of the ‘mesh fox’ layer, check Hide in
editing view and Don’t render this layer and click OK.

Now open the Properties of the image layer of the head, go to the Image tab, select ‘mesh fox’ as its
smart warp layer and click OK.
Now the head is ready to be animated!

Some tips about rigging characters with meshes:​

•​ You can assign the same mesh to as many layers as you want.

•​ You can even assign a mesh to another mesh, so you can have two or more levels of movement

•​ If a bone is moving a mesh and also an image/vector controlled by it, be sure to use the Bind
Layer tool to bind both layers to the same bone. Doing this can avoid problems like having a
layer moving twice as fast, which happens because the layer is moved in the same direction by
both the bone and the mesh layer.

Animating Quad warp meshes

Once you have everything setup, animating quad meshes is very simple. Just use the Translate Points
tool (T) to move the points of the mesh.

You can also use the Magnet Tool (X) to nudge several points at the same time.
To modify the size of the magnet, just hold Alt in the keyboard and drag the mouse or pen left or
right.

You can also try simpler meshes for objects and characters
11.01 Real Time Effects with the New Graphics
Engine
<iframe width="560" height="315"

src="https://www.youtube.com/embed/ZNedAAxsyWU?si=lFknoJAEwzpSuw-Z"

title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;

clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

allowfullscreen></iframe>

Moho 14 introduces a new graphics engine that allows you to see more real-time

effects in the preview canvas than ever before. This tutorial isn’t so much about how

to create those effects - as creating effects is already covered in earlier tutorials - but

rather this is for showcasing how these effects now display better in the new graphics

engine.

We’ll start with a project file showing glowing light effects. It’s named Tutorial 11.01

and it’s located in the Tutorials > 11 - Moho 14 subfolder within your custom content

folder.

Tutorial 11.01 as seen in Moho 14 on the left versus Moho 13.5 on the right
Open the Tutorials > 11 - Moho 14 > Tutorial 11.01 file in Moho. This is a forest scene

with an energy ball casting light around its surroundings. Hit Play or your spacebar to

see the lighting effects in action. Stop the playback when you’re done.

In the Layers panel, go to the “ground” folder and select “Layer 2”. While the vector

shapes in this layer would be very obvious in Moho 13.5, it’s a bit harder to find them

in Moho 14 because of the real-time effects in the canvas. So to find our vector

shapes more easily, turn on Show Curves (Pro Only), located in the upper right corner

of the Timeline window.

The Show Curves setting

The vector shapes will now appear, showing you where some of the energy ball’s

reflected glow is made. Use the Transform Points tool and click inside one of the

vector shapes. All of that shape’s vector points will turn red. Click and drag the

shape to see that the effect continues to show in real time as you’re editing the

shape.

Debut: Since Debut does not have the Show Curves feature, what you

can do instead is use the Transform Points tool and click on

a glowing spot, which will bring up a bounding box that you

can move around.

Now doubleclick on the “Layer 2” layer to bring up its Layer Settings window. The Blur
Radius is currently set to 49 px. Click and drag inside that number field to the left to

decrease the blur in real time, or to the right to make it even blurrier.

In the Layer Settings’ “Colorize (animated)” box, check the “Colorize layer”

checkbox and click inside the Color square.

The “Colorizing (animated)” box

The Color Picker window opens up to allow you to select a different color for the

reflected glow. This color change is animated, so feel free to jump down the timeline

and change the color again, then play the animation to watch the effect change

color in real time.

Play around with the settings to see what the new graphics engine is capable of!

Let’s see a few more examples of the effects in the new graphics engine. Create a

new scene from the FILE > NEW menu. Select the Draw Shape tool and make

sure the Auto-fill and the Auto-stroke checkboxes are checked.

Draw a shape on the canvas. Then double-click on “Layer 1” in the Layers panel to

bring up the Layer Settings window. Click on the “Vectors” tab and check the “Noisy

outlines” checkbox and the “Animated noise” checkbox. You can also increase the

“Offset” value to make the effect more obvious. Click the “OK” button to close out

of the Layer Settings window and see the noisy effect appear on the canvas.

Click on the Select Shape tool and click inside the circle. In the Style panel, add

some Fill Effects, like a Drop Shadow or Gradient.

Jump down the timeline and add some point animation to the shape. Then play the

animation or scrub through the timeline and you’ll see all of these effects continue to

show, unlike in previous versions of Moho.

11.02 Liquid Shpaes (pro only)
<iframe width="560" height="315"

src="https://www.youtube.com/embed/fN0mh7hTr_E?si=oK2ZTuRlpd0QeeWp"

title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;

clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

allowfullscreen></iframe>

Liquid shapes is a powerful new tool in Moho Pro 14. We’ll start with a primer on how

it works, and then we’ll apply that toward making a burning flame animation.

Liquid Shapes Primer

Start with a new scene and use the Draw Shape tool to create a blue circle with

an outline. Then draw an orange circle with an outline, partially overlapping the blue

circle, like so:

Use the Select Shape tool to select the blue circle and the new liquid shapes

options will appear along the top.

 The new liquid shapes options

Normal shape

Shapes start off as normal shapes, with no liquid shape options applied. When

blending liquid shapes, the bottom shape needs to be set to normal, and the shapes

above it can use the different blending options.

Add shape

This combines the shapes. Select the orange circle, and click on the Add shape

option. The orange circle will now appear as if it is part of the same shape as the blue

circle.

You can move the shapes around, even disconnect them, but wherever they touch

it will appear as if they are merged into the same shape again.

Subtract shape

This removes the subtracted shape from the base shape. With the second circle
selected, click on the Subtract shape option and the base circle will appear as if it

has a piece missing from it.

Clip shape

Hides the shape except for where it intersects the base shape. With the second circle

selected, click on the Clip shape option and the orange circle will only appear

wherever it intersects the blue circle.

Blend value

Sets how smoothly the shapes’ outlines blend or merge into each other. So far the 0%

blending means that the two circles have distinct outlines. When you increase the

blend value, the two outlines will start to melt into one another.

Set the orange circle back to the Add shape option and increase the Blend value to
around 25%. With the Transform Points tool , move the second circle farther away

from or closer to the base shape, and see how their edges now blend into each

other.

The Blend value can be animated. At frame 0, set the Blend value to 0% and make

sure the circles are slightly overlapping. At frame 100, set the Blend value to 100%.

Now play back the animation and watch the outlines meld into a smoother shape.

Alternatively, if you set the second circle to Subtract shape instead and turn up the

Blend value to 25%, then the second circle will cut out part of the first circle, but with

rounded edges instead of sharp ones.

Blend values will have no effect on a Clip shape.

Blend values are generally determined by the shape on top. Set the second circle
back to Add shape again with a Blend value of 50%. The first circle still has a Blend

value of 0%. Since the second circle is the top shape, that means the Blend

interaction between the two circles will be based off of the second circle’s 50%

Blend value.

Now draw a third circle and it will automatically be set to be the highest shape on

the layer. Set the third circle to Add shape and set its Blend value to 25%. Notice that

the first and second circles are no longer blending at 50% anymore, but are now

blending at 25%, the Blend value for the shape on top.

However, if the top shape has a Blend value of 0%, then that top shape will be

ignored for the Blend calculations. The next layer in line (that does not have a 0%

Blend) will have its Blend value applied, but only to the layers below it.

Change the third circle’s Blend value to 0%. Move the second circle around and

note how it continues to interact with the first circle at 50% Blend, but it interacts with

the third circle at 0% Blend. Since the third circle is on top and it is set to 0% Blend, the

third circle is ignored for the Blend calculations.

The Third Circle is the top shape, but its 0% Blend​

means it is ignored for Blend calculations

Select Bottom or Top of Liquid Shape, Liquid Shape order

Select the bottom-most shape of the liquid shapes, or select the top-most shape of

the liquid shapes. This makes it easy to find which shape is on top to modify its Blend

value.

The liquid shape order shows the shape order of the currently-selected shape,

followed by the total number of shapes in that liquid shape. 1 is the bottom-most

shape.

Creating a Flame with Liquid Shapes

Now let’s put what we’ve learned into creating a fire animation. Start by drawing a

filled shape that resembles a raindrop. This will become our flame.

Create a star shape (you can use the Draw Shape tool to easily make one) to

the top-right of the raindrop, partially overlapping with the raindrop. Set the star’s

liquid shape setting to Subtract and give it a Blend value around 70%.
Make three copies of this star and place those copies to the top-left, bottom-left,

and bottom-right of the raindrop.

The idea is to rotate the four star shapes to give the raindrop a flickering flame look.

We could add a rotation animation to each of the stars individually, but it is easier to

have them all move based off of a bone.

In the Layer Panel, create a bone layer, then drag and drop the vector layer

containing the liquid shape into that bone layer. You won’t be able to see the stars

when you have the bone layer selected, so to remedy that, right-click on the vector

layer in the Layer Panel and select Quick Settings. Select the Paths checkbox and
click outside of the Quick Settings window to both apply this change and close out

of the Quick Settings window.

Next, we’ll add a bone for each shape. Select the bone layer and use the Add Bone

tool to create a bone up the spine of the flame. The bones for the stars should

not be child bones of the bone on the flame, so hit the ESC key on your keyboard to

deselect the flame’s bone you just created, then create a new bone for one of the

stars, starting from the center of the star and ending near its edge. Hit the ESC key

again to deselect the newest bone, and create a similar bone for the second star.

Repeat the same process for the third and fourth stars.

Now we’ll bind the vector points of each shape to their corresponding bone. Select

the vector layer and then select the Bind Points tool . ALT + click (Windows) or

OPTION + click (Mac) on the flame’s bone to select it, then click inside the flame

shape (but not where it intersects with a star shape). This will cause the four vector

points of the flame shape to be highlighted. Click on the Bind Points button at the

top and the four points will be bound to the flame’s bone.

Do likewise for each of the star shapes. ALT/OPT + click on a bone, click inside the
corresponding shape for that bone, and click on the Bind Points button.

At this time, if you rotate the star bones on a non-zero frame, you’ll see the flame

effect starting to take shape. What we want to do next is set up the stars so that only

one of them needs to be animated, and the other three stars will automatically

move along with the main star.

Delete any keyframes you created from the last paragraph.

With the Select Bone tool selected, click on the top right star bone and rename it

from “B2” to “Main Star”. Deselect that bone, and with the SHIFT key pressed, select

the bones of the other three stars so that all three of them can be edited

simultaneously.

Click on the Bone Constraints button in the upper left corner. In the dropdown, go to

the Control Bones > Angle and click on its dropdown. Change it from <None> to

Main Star. We will leave the 100% alone so that these three bones will rotate at the

same rate as the Main Star, and keep the delay at 0 frames so that there is no delay.

Now if you use the Transform Bone tool to rotate the Main Star clockwise on a
non-zero frame, the other stars will copy its movement. However, the left side of the

fire looks like its flames are moving down instead of up.

To fix this, select the bones of the two left stars, open the Bone Constraints, and

change the Angle value from 100% to -100%. If you rotate the Main Star clockwise

now, the two left stars will rotate in the opposite directions so that the flame effect is

always moving up.

Delete any keyframes you created from these tests and go to frame 1. With the

Transform Bone tool selected, single-click on the Main Star bone to create a

keyframe for it. Move down to frame 49 and rotate the Main Star bone around

clockwise in a full circle. Right-click directly on one of the keyframes on frame 49 and

select Cycle.

An arrowed line points back to the beginning

after setting the keyframe to Cycle

If you play the animation now, the flame effect will continue even after frame 49, but

the animation appears to slow down and speed up. This is caused by the initial

Smooth interpolation setting. To give the flames a more consistent speed, right-click

on one of the keyframes in frame 1 and select Linear. Play the animation again and

the flame moves with the same speed throughout.

You have now created a fire effect using liquid shapes, but let’s go a step further.

The four stars don’t have to stay the same shape. Vector animation can be applied
to the stars to further customize the flame effect. To do that, we’ll need to first create

a vector point cycle similar to the bone rotation cycle.

Select the vector layer, move to frame 1, and click on the Freeze Visible Points button

. Jump down to frame 49 and click on the Freeze Visible Points button again.

Select all of the keyframes on frame 49, right-click within one of those keyframes, and

select Cycle.

Scrub slowly between frames 1 and 49 and look for spots where the flame animation

can be improved. If the star points are digging too far into the base of the flame,

then move the vector point of that star away from the fire so that the fire can have a

rounder base. If the star points are not digging deep enough into the top of the

flame, then lengthen the vector point; when a point on the star cuts deep enough

into the fire, it can even cut off a portion of the fire, creating even more realistic

flame effects.

Now hit Play to see the results. You can load the Tutorial 11.02a file located in the

Tutorials > 11 - Moho 14 subfolder within your custom content folder to see what a

completed version may look like.

Liquid Shapes Face Sample

Let’s take a look at a more advanced setup showing how you might use liquid

shapes to create a face. It’s named Tutorial 11.02b and it’s located in the Tutorials >

11 - Moho 14 subfolder within your custom content folder.

Tutorial 11.02b

This face is composed primarily of 4 vector layers consisting of the head & mouth,

eyes, shade, and shine. Many of the shapes in here are liquid shapes, so play around

with them to see how they interact with one another and, more importantly, how

they are set up in order to create these effects!

11.03 Curves and Compressible Curves
<iframe width="560" height="315"

src="https://www.youtube.com/embed/99Pb5BQejcA?si=cYGytl-PrcJ0r7d1"

title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;

clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

allowfullscreen></iframe>

Moho 14 is all about smoothness! The new Curvers and Compressible Curvers allow

you to bend vectors and images in any way you want. Animate tails, hair, snakes,

tentacles with easy and total control. But not only that. You can create several

Curvers in one layer, rig the Curvers with Bones and Smart Bones, and even animate

the Line Width of the Curver to make parts of the drawing thinner or thicker during

the animation.

Creating a Curver

We’ll start by making sure you are on frame zero, then import the Tentacle.png

located in the Tutorials > 11 - Moho 14 subfolder within your custom content folder.

Now go to the DRAW > CREATE CURVER LAYER menu. A new warp layer will appear

in the Layers panel and a blue line will appear across the tentacle.
 Adding a Curver layer to the tentacle image

Use the Transform Points tool to move the leftmost point of the Curver to the base

of the tentacle, and the rightmost point of the Curver to the tip of the tentacle.

The extreme ends of the Curver are placed at

the extreme ends of the tentacle

Use the Add Points tool to add three points on the Curver at the most likely bend

locations like so:

 Three extra points added to the Curver’s bend locations

You can use the Curvature tool on these new points to get them to better match

the bends in the tentacle if you wish. Then use the Line Width tool on the five

Curver points to have the Curver’s width match the tentacle’s.

The Curver points with their line width adjusted to match the tentacle

Now we can animate! Move down the timeline to frame 18 and use the Transform

Points tool , the Curvature tool , and the Line Width tool to modify the

Curver however you want. Notice how the tentacle now moves with your new

changes. When done with your edits, scrub the timeline to see the animation in

action.
Compressible Curvers (Pro Only)

Select all of the keyframes at frame 18 and use the Delete key on your keyboard to

delete these keyframes. While still on frame 18, select the Transform Points tool

and move the Curver point at the tip of the tentacle around. Notice when you move

the point away from the rest of the Curver, the entire tentacle image scales evenly,

stretching out towards wherever you move the tip to. Likewise, moving the tip closer

to the rest of the Curver squashes the entire image back together.

With a regular Curver, the entire image stretches and

compresses evenly when moving the tip

Now doubleclick on the Curver (or warp) layer to open its properties. Select the

Vectors tab, then check the Compressible Curver checkbox, and click OK. Notice

now that when you move the tip, only that section of the Curver stretches and

compresses, rather than the entire tentacle image doing so.

 With a Compressible Curver (Pro Only), only the part of the image

connected to the modified point will stretch or compress

While you can always convert a regular Curver layer to a Compressible Curver or

vice versa from the layer properties as described, you can skip this step if you know

what type of Curver you want from the start. If you haven’t created the Curver layer

yet and want a Compressible Curver, then you can create that from the DRAW >

CREATE COMPRESSIBLE CURVER LAYER menu.

Using Curvers on Vector Drawings

For this section, we’ll use a project file with a vector tentacle instead of a raster

image. It’s named Tutorial 11.03 and it’s located in the Tutorials > 11 - Moho 14

subfolder within your custom content folder.

Like with the raster image tentacle, create a Curver layer for this vector tentacle and

use the Transform Points tool , the Curvature tool , and the Line Width tool

to line the Curver up to the tentacle.

 Setting up the Curver for the vector tentacle

And like with the raster image tentacle, jump down the timeline and use the

Transform Points tool to move all five Curver points around. Most of the points will

work similarly to the raster image tentacle version, but this time, notice that moving

the second Curver point (the one immediately after the base Curver point) doesn’t

work so well.
 In the vector tentacle, moving the second Curver point

results in undesirable behavior

The reason for this is because that Curver point is trying to move this section of the

tentacle:

But if you switch to the vector layer to see where the vector points are located, you

will find that this same section does not contain any vector points:
As a result, there are no vector points for that Curver point to bend. The solution is to

add some vector points to make the vector shape more flexible. Click on the Select

Points tool and select all of the vector points except for the one at the base of

the tentacle. Then click on the Split button in the tool options along the top of the

screen.

This will almost double the number of vector points. Click on Split again to nearly

double the vector points again. Now go back to the Curver layer and it will react

much more smoothly than before.

Using Bones with Curvers

So far we’ve been moving the individual Curver points to animate the underlying

image. This section will cover how to use bones to more easily manipulate the Curver.

We’ll continue to use the vector tentacle project that we’ve already started in the

previous section. Delete any animation keyframes you may have in the scene. Make

sure you’re on frame zero, and create a Bone layer. Then drop both the Curver

(Warp) layer and the vector layer into it.

But now, when you select the Bone layer to create bones in, you can’t see the

Curver to know where to line the bones up with. To resolve this, right-click on the

Curver (Warp) layer and select Quick Settings.

Right-click on the Curver layer and

select Quick Settings

Check the “Paths” checkbox, and click outside of the Quick Settings panel to close

that panel.
 Check the “Paths” checkbox

When you go back to the Bone layer, the Curver is visible.

Make sure you’re still on frame zero, then use the Add Bone tool to add a bone

starting from the base of the tentacle up to the next Curver point. Continue creating

bones from one Curver point to the next until you reach the tip of the tentacle.

A bone is created for each section of the Curver

Jump down the timeline and use the Transform Bone tool to start moving the

bones around.

Tip: You can combine bone animation on the Bone layer, curvature

animation on the Curver layer, and vector animation on the

vector layer to fine-tune your animation.

Reusing a Curver (Pro Only)

Let’s say you want to draw suckers on the tentacle, but you want to keep these new

vector drawings separate from the original vectors of the tentacle so that you can

more easily edit the suckers later. Creating a new layer means that the new layer will

not have a Curver attached to it, so any animations done to the initial tentacle layer

via its Curver will not affect this new sucker layer. The solution to this is very simple.

First, make sure you are back on frame zero. Create a new vector layer inside of the

Bone layer, positioned above the tentacle vector layer. Then draw the suckers over

the tentacle.

A new layer is created for drawing suckers on the tentacle

Double-click on the sucker layer to bring up its Layer Settings window. Click on the

Vectors tab and change the “Select warp layer” to the Curver layer. Click OK.

Now the sucker layer will follow the Curver just like the tentacle layer.
11.04 New SVG Import (pro only)
<iframe width="560" height="315"

src="https://www.youtube.com/embed/h4f1JjNbJnM?si=Wt2KGtxDgiKB-f85"

title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;

clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

allowfullscreen></iframe>

With the newly enhanced SVG import feature, you can effortlessly bring in layers,

gradients, and masks. Craft your characters, props, and backgrounds using your

preferred vector software, such as Illustrator, CorelDraw, Affinity, or Inkscape, and

seamlessly transition to Moho for animation.

A sample SVG file has been included, named space.svg, and is located in the

Tutorials > 11 - Moho 14 subfolder within your custom content folder. You can import

this through the FILE > IMPORT > SVG FILE menu.

An import settings window will now pop up for you to select your initial import options.

Once the desired settings are selected, click OK.​

Whereas previous versions of Moho would import this file as a single layer, with no

gradients, and with no masking, Moho 14 supports all three features. Play around with

the file to see just how well it works!

11.05 Freehand Improvements
<iframe width="560" height="315"

src="https://www.youtube.com/embed/zi7NEiirN5g?si=ndhHzNpw44jRNjUO"

title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;

clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

allowfullscreen></iframe>

Moho 14’s drawing tools have been revamped to give greater control than ever

before. This is something that needs to be experienced firsthand, so you will want to

simply jump in and start playing with the drawing tools, but we’ll highlight a few

important points here.

The Freehand tool now feels much more natural, and the use of Brushes while

drawing freehand has been improved as well.

In previous versions, creating something with the Blob Brush tool and then adding

to that shape would cause other parts of this shape to warp, but no longer! Now the

shape will remain the same except for exactly where it has been modified.

Likewise, the Eraser tool used to deform the shape in parts that weren’t supposed

to be affected, but now it only affects the exact area that this tool is applied to. The

Eraser can now also erase freehand lines.

If you have a shape and a freehand line next to each other, you can easily erase

sections out of both in a single pass of the Eraser tool. But if you want the Eraser tool

to ignore one or the other, then simply use the Select Shape tool and select the

shape or shapes you want the Eraser to affect. Once your shapes are selected, use

the Eraser tool. It would appear as if everything in the Eraser’s path is being erased,

but when you release the tool, only the selected shapes are affected and not
anything else.

Here we have a blue shape and a black line drawing.

The blue shape is selected with the Select Shape tool,

the black line is not

Using the Eraser tool, we erase this portion of the work

Since only the blue shape is selected, the Eraser only

affects that part of the work

11.06 Merge Shapes
<iframe width="560" height="315"

src="https://www.youtube.com/embed/WdiFssPVc1c?si=4HQ7u9Aqh4K_5-uW"

title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;

clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

allowfullscreen></iframe>

The Merge Shape functionality allows you to combine multiple shapes on the same

layer into a new, single shape. To show how this works, we’ll trace the face of an

existing drawing. In a new project, import the Copper.psd file located in the Tutorials

> 11 - Moho 14 subfolder within your custom content folder. When importing, choose

the Composite option since we don’t need the individual layers for this tutorial.

With Copper loaded, double-click on its layer in the Layers panel to open up its Layer

Settings window. In the Opacity field, drop it down to 10%, and click OK to apply it.

This will allow us to keep the Copper layer on top of the vector layer, which in turn
means the vector layer won’t cover up Copper and hinder our view while we’re

drawing in it.

Make sure you’re on frame zero, select the vector layer, and select the Freehand

tool .

In the Style panel, click inside the Fill color box and choose an orange color similar to

Copper’s fur. Next, check the Style panel’s “Advanced” checkbox if it isn’t already

checked. In the Style 1 dropdown, select Chisel Tip Marker for the line style. Ensure

both Auto-fill and Auto-stroke are enabled along the top.

Move the mouse back over the workspace, hold down the ALT key, and click and

drag the mouse left or right to find a good width for the line. Start drawing from the

base of an ear, up to the tip of the ear, and down to the other side of the base.

This creates a shape for that ear. Likewise, draw the other ear, then draw the face.
Draw the two tufts of fur at the top of the head as their own, separate shapes.

We now have a total of five shapes. Now let’s combine these five shapes into a single

shape. To make the shapes easier to see, click on the googly eyes at the front of the

Copper layer to disable it, which will make Copper disappear from the workspace.
Then click on the Select Shape tool and click on one of the shapes, such as the ear.

The selected shape will be bound in a red box (and have a checkered fill if the

“Checker selection” checkbox is enabled in the Style panel). Hold down SHIFT on your

keyboard while clicking on the other four shapes so that all five shapes are now

selected.

Tip: Instead of clicking on each shape individually, you can drag the

mouse over all five shapes while the SHIFT key is held down to

quickly select all of them.

Tip: An even faster option is to use the “Select All” button at the top.

With all five shapes selected, click on the “Merge” button at the top to combine them

into a single shape.

Enable the googly eyes for the Copper layer to make it visible once again.

If you temporarily hide the vector layer by clicking on its googly eyes, and look at the

bottom corners of Copper’s face, you can see a triangular cut in the fur. The Merge

functionality can be used to create that cut as well.

Unhide the vector layer and use the Freehand tool to draw that triangular shape,

like so:
Switch back to the Select Shape tool and select that triangular shape. Up at the

top, click on Subtract shape then click the “Merge” button. The triangular cut is now

incorporated into the main shape.

Now let’s draw the mouth. Select the Freehand tool . In the Style panel, click inside

the Fill color box and select a light color resembling the area around Copper’s mouth.

Then draw around that mouth area like so:

Select that new shape with the Select Shape tool and click on the Clip shape

up at the top. Then press the “Merge” button one last time to create this:​

Note: If a Liquid Shape is merged, it will stop being a Liquid Shape and

will become a Normal shape, so you will lose the ability to edit

that Liquid Shape.

11.07 New Style (pro only)
<iframe width="560" height="315"

src="https://www.youtube.com/embed/tryO6361QJk?si=XEYlcxl_MUnmYj04"

title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;

clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

allowfullscreen></iframe>

New styles have been introduced in Moho Pro 14. To see them, go to FILE > NEW to

create a new project and select the Freehand tool . Make sure only the

“Auto-stroke” option is selected:

The Auto-stroke checkbox can be found along the top

of the workspace after the Freehand tool is selected​

In the Style panel, check the “Advanced” checkbox in the lower left corner. Click on

the “Style 1” dropdown and select a different style, such as “Wet Ink”:
Then start drawing to see what these various styles look like.

Using Styles with Frame-by-Frame Animation

Using these styles or your own custom ones can save you a lot of work if you later

decide to change how the vector lines look - especially if you are doing

frame-by-frame animation. To see this in action, we’ll open up a frame-by-frame

animation of a galloping horse. It’s named Tutorial 11.07 and it’s located in the

Tutorials > 11 - Moho 14 subfolder within your custom content folder.

Play or scrub the timeline to see the frame-by-frame animation in action.

Had this horse been drawn without using a style, then changing the look of the

vector lines after having done all of this work would mean that not only would you

have to modify every individual line in a frame, but also do that for every single

frame as well. Fortunately, since a style was used for the lines, you can simply modify

the style itself and all lines using this style will automatically be updated to use that

modification.

To determine what style the lines are using, click on the Select Shape tool and

click on one of the lines on the horse. Make sure the “Advanced” checkbox in the

bottom left of the Style panel is checked:

Halfway down this Style panel is the “Style 1” dropdown, which indicates that the

style used for the line you just selected is called “Rough Ink”.

To edit the “Rough Ink” style, click on the “Styles” dropdown in the upper right of the

Style panel. This will bring up a list of all styles currently available in this project file.

Select “Rough Ink” from this “Styles” dropdown. You can tell when the “Rough Ink”

style is loaded when the Name field changes to “Rough Ink”:

Now that the “Rough Ink” style is loaded, you can make modifications to it like

changing the line width, stroke color, alpha value, brush, and so on. The horse will

display your modifications in real time, and most importantly, all of the lines of the

horse on all of the frames in this frame-by-frame animation are automatically

updated.
11.08 New Options to Fill_Multi-stroke,
connect and create (pro only)
<iframe width="560" height="315"

src="https://www.youtube.com/embed/e5fyD7FgzSw?si=5E7IySllxiHzykV1"

title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;

clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

allowfullscreen></iframe>

Moho Pro 14 comes with two new fill options. The Multi-stroke fill method allows you to

draw separate vector lines and a fill will be applied to whatever you are drawing in

real time. The Connect And Create method allows you to draw separate vector lines

without any fills to begin with, then you can select the lines you wish to make up your

shape, and with a click of a button turn them into a shape with a fill.

Multi-Stroke Fill

Let’s start with a new project. With the Freehand tool selected, check the

“Multi-stroke fill” checkbox.

The “Multi-stroke fill” checkbox is accessible

from the Freehand tool

Draw a line from the left to the right, or from 1 to 2 in this image:
Then draw a separate line from 2 to 3, likewise from 3 to 4, and finally from 4 to 1. You

will end up with something like this:

Notice the fill automatically applying as you’re drawing your lines.

The order and direction you draw these lines matter. When you drew a line from 1 to

2, then from 2 to 3, it created a nice, triangular fill as you would expect. But let’s see

what happens when you don’t follow that order.

Press the ESCAPE key on your keyboard so that you can start drawing a new

Multi-stroke fill shape. This time, draw from 1 to 2, and then from 3 to 2. The fill will now

look something like this:

So make sure to draw your lines in order - that is, start your next line where you ended

your last line - to avoid this.

As with any other shapes, you can create these Multi-stroke fill shapes over other

ones, apply different colors and brushes, and so on. Just remember to hit the ESCAPE

key when you’re done with one shape and ready to start on the next.

Connect And Create

For this feature, we’ll first turn off the “Multi-stroke fill” from the Freehand tool .

Now draw a square again with four separate lines. With the Select Points tool ,

select one or more vector points from each line, like so:
Use the Create Shape tool and click on the “Connect And Create” along the

top.

The “Connect And Create” button is accessible

from the Create Shape tool

This will turn the four lines into a connected shape:

If you so desire, you can use the Hide Edge tool to fill in the stroke gaps at the

corners.

Now, if you only have one shape, then the advantages of “Connect And Create”

may not be so obvious. But when you have multiple lines overlapping each other

and you only want some of those lines to create a shape with, this method allows
you to easily select the points you want without accidentally selecting undesired

points from an intersecting line.

In the example below, the lines of the horn overlap the lines of the buffalo head. To

create a filled shape for just the horn, we need simply to select at least one point

from each of the lines that make up the horn, like so:

Using the “Connect And Create” button will create a shape for the horn without any

interference from the lines for the head.

11.09 Create Frame by Frame Animation (pro)
<iframe width="560" height="315"

src="https://www.youtube.com/embed/968gIF4IjUY?si=0s7ZPswKkNnSmXkz"

title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;

clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

allowfullscreen></iframe>

Frame by Frame animation in Moho 14 has been updated and works a little

differently than before. These changes include:

●​ How Frame By Frame layers are displayed in the Layers panel

●​ Frame display

●​ New Push Frames functionality

●​ How copying and pasting frames work

●​ New option to change Onion Skins before/after colors

●​ New shortcut keys

A Frame By Frame file has been provided for you to test out these new changes. It’s

named Tutorial 11.09 and it’s located in the Tutorials > 11 - Moho 14 subfolder within

your custom content folder.

Layers Panel

Previously, a Frame By Frame layer behaved similar to a Switch layer in the Layers

panel. That is, you could expand the Frame By Frame layer to see the sublayers for all

the different frames. As of Moho 14, a newly created Frame By Frame layer can no
longer be expanded by default, even though it retains the expander arrow to

indicate that there are sublayers within it.

If you wish to access the sublayers from the Layers panel, then doubleclick on the

Frame By Frame layer to bring up its Layer Settings window. Go to the Switch tab and

uncheck the “Frame-by-frame drawing” checkbox. Hit OK.

Note that turning off the “Frame-by-frame drawing” setting will result in some Frame

By Frame features no longer being available, but you can always turn that setting

back on.

Frames on the Timeline

Instead of the circles of regular keyframes or ovals for frames that last for multiple

frame counts, each frame is now a square in the Timeline, with gaps between frames

having a different background color.

Push Frames

In the Timeline panel, you will now find the Push Frames Left, Push Frames Right, and

Push Interval options.

Push Frames Left/Right and Push Interval

These timeline tools allow you to retime the animation by moving any keyframes to the
right of the playhead in the direction you choose.

Only the visible keyframes currently displayed in the timeline will be affected. This means
that keyframes in sublayers will not be affected when you use Push Frames on the root
layer unless you have that sublayer selected (with SHIFT+click for contiguous selections,
or CTRL+click on Windows and CMD+click on Macs for discontiguous selections).

•​ Push Frames Left: All visible keyframes to the right of the playhead will be
pushed to the left. When the playhead bumps up against a keyframe to its left,
then it can no longer be pushed any further to the left.

•​ Push Frames Right: All visible keyframes to the right of the playhead will be
pushed to the right.

•​ Push Interval: Sets how many frames are pushed at a time.

Note: These options are not limited to Frame By Frame layers, and can

be used on regular keyframes as well.

Copying and Pasting Frames

Previously, copying a frame in a Frame By Frame layer, then moving down the

timeline and pasting that frame, will simply call up that same vector sublayer again.

Since it’s the same vector sublayer in both places, that means changing the drawing

in the first copy of that frame will also change the drawing in the second copy of

that frame, and vice versa. The vector drawings in the two frames are not

independent of each other.

Now, Moho 14 will create a new vector sublayer when you copy and paste a frame.

So while the two frames will initially appear identical, now if you change the drawing

for one of them, it will not affect the other, since they are separate vector sublayers

and thus independent of each other.

Tip: If you want to use the same sublayer in different frames, then

you can right-click on the Frame By Frame layer and select the

sublayer you wish to have displayed, just like how you would

use a Switch layer.

Onion Skin Colors

You can now change the color for Onion Skins before the current frame, and the

color for Onion Skins after the current frame. Click on the Onion Skin dropdown in the

Timeline panel to see the options:

 You can now change the
before/after Onion Skin colors

Clicking on these colors will open a Color Picker window for you to select a new

color.

New Shortcut Keys

Using ALT+X on Windows or OPT+X on Mac will jump to the next frame in the Timeline.

Using ALT+Z or OPT+Z will go to the previous frame.

Similarly, ALT+W or OPT+W will go to the next colored frame, while ALT+Q or OPT+Q

will go to the previous colored frame. You can create a colored frame by

right-clicking on the frame in the timeline, selecting LABEL, and choosing a color from

the submenu.

Note: These options are not limited to Frame By Frame layers, and can

be used on regular keyframes as well.

11.10 New Brush Options and Smart Boil
<iframe width="560" height="315"

src="https://www.youtube.com/embed/7oEKw2K1qEw?si=ycRm2QiW7WbdWWtT"

title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;

clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

allowfullscreen></iframe>

Some new brush options in Moho 14 can be used alone or in combination with the

new line boil feature.

You can follow along in this tutorial by opening the provided Tutorial 11.10 file and

playing around with the settings yourself to see how they affect the brush. It is

located in the Tutorials > 11 - Moho 14 subfolder within your custom content folder.

To see the new brush options in action, we will first need to apply a brush to the

shape. In the Tutorial 11.10 file, select the Head layer, click on the Select Shape tool

, and click on the “Select All'' button along the top to select every shape in

Shiba’s head. In the Style palette, click on the “No Brush” box.
This brings up the Brush Settings window. Click on any of the premade brushes to

apply that brush to the strokes of the shapes in Shiba’s head.

Size Variation Amplitude

With a setting of 0%, the Size Variation Amplitude will have no effect on the size of the

brushes - the brush sizes will line up with the stroke’s width. As you increase this setting,

the brush sizes will start to vary, as if some parts of the stroke are getting thicker while

other parts of the stroke are getting thinner.

 At nearly 200% Size Variation Amplitude, the brushes
are significantly thicker in some areas than others

Although you can see the changes to the strokes in the workspace in real time, you

will need to click on the OK button to apply the changes, as with all of the brush

setting changes.

Size Variation Scale

This determines how often the amplitude switches between thick and thin.

The smaller the scale value is, the smaller the distance between one variation and

another, leading to more variations. The larger the scale value is, the larger the

distance between one variation to the next, resulting in fewer variations.

 A small Size Variation Scale results in many
variations in the stroke

Line Boil

Line Boil is the wobbling of the lines that can be seen in certain animation styles,

resembling hand drawn sketches stitched together into a video.

When Line Boil is turned off, then the Size Variation Amplitude and Size Variation

Scale settings will have a fairly consistent pattern on the stroke, rarely changing if at

all. But when you turn on Line Boil and hit play or scrub through the timeline, the brush

patterns will constantly change.

With the default Randomness Interval setting of 1 frame, that means the line boil will

change every frame.

Randomness Interval

This determines how frequently the line boil updates. A setting of 1 means that the

line boil changes every frame. A setting of 2 means the line boil updates once every

2 frames, and so on.

A setting of 0 frames means that no line boil will occur while the shape is still, but line

boil will happen while that shape is moving. In this case, the Randomness Interval can

no longer affect the frequency of the line boil while the stroke is in motion, so it will

default to updating the line boil at every frame.

While the Debut version is limited to line boiling at every single movement frame

when the Randomness Interval is 0, the Pro version does not have this limitation. In the

Pro version, when the Randomness Interval is set to 0, you can use the frame interval

to determine the frequency of the line boil updates.

Interval Frequency with Bone Animation (Pro Only)

Let’s see how this works in detail for bone animations. With all of the shapes in Shiba’s

head selected, turn on Line Boil, set the Randomness Interval to 0, and set the Size

Variation Amplitude and Size Variation Scale to whatever value you desire.

If you have added any animation keyframes to the timeline, then delete those

keyframes. When you hit play or scrub through the timeline, note how the lines on the

head do not boil.

Go to frame 48 and select Shiba’s bone layer. Click on the Transform Bone tool

and tilt Shiba’s head downwards. Now when you step through frames 1 - 48 one

frame at a time, you will see the line boil effect on every frame. After frame 48, when
there is no more motion, the line boil stops.

When the Randomness Interval is set to 0, the frequency of the line boil updates is

determined by the interval of the bone keyframes. So to change the line boil

frequency to every 3 frames instead of every frame, select all of the bone keyframes

in the timeline, including the ones at the zero frame. Click on the interval dropdown

along the top of the timeline, which is currently set to 1, and change it to 3.

Now, when you step through the timeline from frames 1 - 48, the line boil only

updates every third frame.

Interval Frequency with Vector Animation (Pro Only)

This works much the same way as the bone animation method covered in the last

section, except you would select the vector keyframes instead of bone keyframes

before changing the interval.

To see this in action, make sure the Line Boil is turned on and that the Randomness

Interval is still set to 0 in the Brush Settings for all of the shapes in Shiba’s head. Delete

any animation keyframes you may have in the project. Go to frame 48, select the

Head layer, click on the Transform Points tool , and move some vector points

around.

Select all of your keyframes in the timeline, including the ones at frame zero, and
change the interval to your desired number. When you step through the timeline

from frames 1 - 48, the frequency of the line boil updates will match the interval you

have selected. Frames 49 and onward will have no line boil as there is no movement

past frame 48.

11.11 Improved Add Point Tool

<iframe width="560" height="315"

src="https://www.youtube.com/embed/wl-CXeQXWT0?si=swVuUo5svXI-pqV5"

title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;

clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

allowfullscreen></iframe>

Moho 14 has streamlined the Add Point tool to make it faster and easier to use than

ever before.

Single Click Line Segments

Previously, the Add Point tool required you to click and drag the mouse to start a line

segment. You would then release the mouse to create a line segment containing the

two vector points. You would then click again on that second vector point to create a

second line segment connected to the first. Additionally, if you did not have

Auto-weld turned on, then welding a new vector point back into the vector line

required you to hit the Enter key.

With Moho 14, this tool has been streamlined.

You can still use that older method if you wish, but now you can simply single-click the

mouse and it will automatically start a line segment when you move your mouse

around, without need for dragging. Single-click your mouse again on another spot

and the second vector point is created, with a new line segment already following

your mouse. And, even without Auto-weld turned on, you can click back on a vector
point and it will weld to that point, or click in the middle of a line segment and it will

create a new vector point connected to the line there.

When using this single-click method, clicking back onto the line’s first vector point will

close the vector line and no new line segment will follow your mouse. However,

clicking anywhere else (including on an existing line segment) will not end the vector

line. To end this line, there are two options:

1.​ To end the line at the last vector point, hit the Escape key.

2.​ To end the line where your mouse is currently located, double-click the mouse.
11.12 Point Colors
<iframe width="560" height="315"

src="https://www.youtube.com/embed/TvCPa8LZZVI?si=5tL8vQjkcUJecXrX"

title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;

clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

allowfullscreen></iframe>

The Color Points tool has been improved in Moho 14. Previously, the colors were solely

based on the location of the colored vector points in relation to each other, and did

not bend with the curve of the vector line. Now, the colors will bend with the vector

line as well. The workspace will also display the color points a little better than before,

though still not as well as an actual render.

Debut: Since Bezier curves are the easiest ways to see this change, and

since Bezier handles are a Pro-only feature, the following steps

in this tutorial will mostly apply to the Pro version, so Debut users

will have some difficulty following along. However, the updated

colored points still apply to the Debut version and can be seen

while using other methods of curving the vector lines, such as

by using the “+/-” button along the top of the Curvature tool

in lieu of using the Bezier handles.

Open a new project in Moho and select the Draw Shape tool . Make sure
“Auto-fill” is checked along the top and create a flat and wide rectangle.

Using the Select Points tool , select the top two vector points of the rectangle.

Then select the Color Points tool and click on the white point color box along the

top.

The point color box is located left

of the eyedropper

When the color picker window pops up, select a different color and click OK. The top

half of the rectangle will now show that color:

Hit the Esc key to deselect all points. Click on the Curvature tool and turn on the

Show Bezier Handles setting (Pro only) along the top. Click and drag right on

each vector point to extend its Bezier handles. Use the handles to adjust the

curvatures of all four points to create an arch like this:

Previously, rendering this will result in something similar to the workspace preview

above where the colors do not bend with the shape, as seen in this Moho 13.5

render:

But now, rendering in Moho 14 allows the colors to bend along with the curve of the

vector line like so:

This is animatable, with the colors continually being updated across the timeline to

follow any changes in the curve of the vector line.

11.13 Improved Dynamic Bones
<iframe width="560" height="315"

src="https://www.youtube.com/embed/-xZ--21uxYo?si=6rNpyXwnpFP11MUP"

title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;

clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

allowfullscreen></iframe>

While Moho Debut 14 is capable of bone angle dynamics, Moho Pro 14 allows you to

set bone dynamics for its position and scale as well. You can also apply weights to

each of these.

You can follow along in this tutorial by opening the provided Tutorial 11.13a file. It is

located in the Tutorials > 11 - Moho 14 subfolder within your custom content folder.

Note: If you would like a refresher on what Torque, Spring, and

Damping do, please see Tutorial 3.03: Bone Dynamics.

Angle Dynamics and Weight

The bone angle dynamics works much the same as before, but now you can apply a

weight to it. The bone weight is based on the bone size, but with the Weight field you
can increase or decrease it. A smaller weight value means the bone tends to get

tossed around more, whereas a larger weight value does the opposite.

To see this in action, we will move Copper from the Tutorial 11.13a file around and

see how its head reacts. Use the Select Bone tool to select Copper’s B1 bone,

which is the lower of the two spinal bones on Copper, shown in red here:

Move a few frames down the timeline to frame 6, and use the Transform Bone tool

to rotate Copper a little to one side (make sure to use the Transform Bone tool

near the middle of the B1 bone rather than on the circles at the tip or base, as the tip

will scale the bone and the base will translate the bone, which we don’t want).

Move a few more frames down the time and rotate Copper in the opposite
direction.

Move a few more frames down and repeat the process so that you have a couple of

seconds of animation showing Copper rotating from side to side. Then hit the Play

button to see what this looks like, and in particular how everything moves together

like a statue.

When ready, stop the playback and use the Select Bone tool to select the head

bone, which is labeled B3. Click on the Bone Constraints dropdown in the upper left

corner to access the bone dynamics settings.

Check the “Bone dynamics” checkbox to enable bone dynamics, and check the

“Angle” checkbox underneath that to enable angle dynamics.

Play the animation from the beginning and Copper’s head will now bounce back

and forth like a bobblehead.

Lower the angle weight to 1 and play the animation again. This time the head will be

bouncier, as the lighter weight allows the head to be affected more from the

rotation of the body.

Increase the angle weight to 15 and the heavier head bounces slower, now less

affected by the rotation of the body.

Position Dynamics (Pro only)

The position dynamics will give the bone translational movement. Before going into

how to use this, let’s turn off the Angle dynamics checkbox from the head bone, and

delete all existing keyframes from Copper.

Use the Select Bone tool to select the B1 bone (the lower spinal bone). Jump

down to frame 6 and use the Transform Bone tool to translate the bone up a

short distance. Make sure to click exactly on the circle at the base of the bone to

translate it, as clicking slightly outside of the circle results in a rotation instead.

Move down a few more frames and translate the B1 bone back down. Repeat the

process to get a couple of seconds of Copper moving up and down.

With the Select Bone tool , select the B3 (head) bone. In the Bone Constraints

dropdown, check the Position bone dynamics checkbox.

When you play the animation now, the head will bounce very slightly. This is because

of the default settings. Lowering the Position’s weight value to 1 will allow the head to

move more. Increasing the Position’s torque value to 5 will allow it to move even

more.

Scale Dynamics (Pro only)

A bone can scale dynamically. Turn off the Position bone dynamics and turn on the
Scale bone dynamics. We will leave the existing keyframes alone.

If you played the animation now, the dynamic scaling on the head bone will be

small, again due to the default scale values. So change the Scale’s torque value to

20 and drop the Scale’s weight value to 1. Now the playback should show a very

obvious head bone scaling dynamically from the body movements.

T-Bone Sample File

The Tutorial 11.13b file, which is located in the Tutorials > 11 - Moho 14 subfolder

within your custom content folder, comes with an animated character with bone

dynamics already applied to it. But let’s see how this character looks without bone

dynamics first.

Open up this file, then go to the ANIMATION menu and uncheck the ENABLE BONE

DYNAMICS menu option (Pro only). Hit the play button in the timeline to watch the

dynamic-less animation. Note that only the legs and the hip bone (the B1 bone) are

animated.

When you’re ready, turn ENABLE BONE DYNAMICS back on to see the difference. All

of the additional movements you now see are simply dynamic settings rather than

keyframing every single movement. These dynamic settings are applied to hidden

bones. To see the hidden bones, go to the BONE > SHOW ALL BONES menu.

Select any of these bones and play with its bone dynamics settings to see how it

affects the animation.

Flies Sample File (Pro only)

 Debut: While Debut can open and play the file, much of the dynamics

here relies on the Delay and Position settings that are not

available in Debut.

Another sample file is Tutorial 11.13c, which is located in the Tutorials > 11 - Moho 14

subfolder within your custom content folder. When you play this scene, you will see a

person moving around and a swarm of flies following them. Only one bone is

animated, and only Bone Translation is used for that animation. Everything else, from

the movements of the flies to the swaying of the person, are all dynamics.

To take a closer look at this, turn on the Show Curves setting near the Display

dropdown in the upper right corner of the Timeline. With the bones now visible, the

large bone over the person, labeled Main, is the animated bone. Open up its Bone

Constraints to play with the Angle and Position dynamics to see how that affects the

animation.

The movement of the flies is a combination of constraints and dynamics. Go back to

frame 0 and note that each fly has two bones. The downward bone is the fly’s

primary bone, and that is what is following the person (it is constrained to the

person’s bone). Select one of these downward bones on a fly and open its Bone

Constraints.

In the Control Bones section, you can see the bone’s Position is determined by the

Main bone (that is, the bone for the person) at a delay of a certain amount of

frames. This frame delay is what causes the lag between when the person moves

and when the fly follows the person.

The fly’s upward bone is a child of the downward bone. This bone has the Position

dynamics applied to it so that it will have some extra movements based off of the
movement of its primary (downward) bone. This causes the additional bounciness as

the flies catch up to the person.

11.14 Gravity for Dynamics
<iframe width="560" height="315"

src="https://www.youtube.com/embed/0zfpe84D0NM?si=9xvJ6YEDmuSVyFew"

title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;

clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

allowfullscreen></iframe>

Gravity dynamics has been added to Moho 14. This is combined with what was

known as the Wind tool in the previous version of Moho, and the tool is now called

the Force tool , located in the “Other” section of the Tools palette.

We’ll use a rigged Copper file for this. It’s named Tutorial 11.14 and it’s located in the

Tutorials > 11 - Moho 14 subfolder within your custom content folder.

Use the Select Bone tool to select the upper and lower arm bones for both arms,

and the upper and lower leg bones for both legs. You can hold down the SHIFT key

to select multiple bones. These eight bones will turn red once selected, like so:
 Copper with the arm and leg bones selected

Next, click on the Bone Constraints dropdown in the upper left corner of Moho.

This will open the Bone Constraints settings. In the Bone Dynamics section, make sure
the Bone Dynamics checkbox and the Angle checkbox are checked. Then enter in

these Angle values.

Torque: 1.5

Spring: 0

Damping: 1

Weight: 0.5​

Then close out of the Bone Constraints and select the Force tool . With this
tool selected, you will see the Gravity options in the toolbar settings, near the top
of your Moho screen.

Change the Gravity Strength to 100%, then hit the Play button in the Timeline. You
will see the limbs drop straight down as a result of the gravity dynamics and settle
after about a second.

Stop the playthrough and return to frame 0. Change the Gravity Direction to
something else. For example, you can turn the dial to make it face left if you want
the gravity to be coming from the left instead of from below. You can also type in
the degrees you want instead of using the dial; in this case, a degree of 180 also
means the gravity will be pulling from the left.

Hit Play again to see Copper’s limbs being pulled in the new direction of gravity.

Both the Gravity Strength and the Gravity Direction are keyframable.
11.15 Delayed Constraints
<iframe width="560" height="315"
src="https://www.youtube.com/embed/_WAb1P7OQ4E?si=7fbKfHDyU4zB-l-S"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
11.16 New Timeline Options
<iframe width="560" height="315"
src="https://www.youtube.com/embed/8AjGBgxgHag?si=K0Ba1oUW8-eGcP1c"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>