100% found this document useful (9 votes)

4K views

Moho 12 Tutorial Manual

This tutorial provided an overview of the Moho interface and basic workflow by having the user draw and animate a simple circle shape. The user learned to: 1) Draw a circle using the Draw Shape tool and Shift and Alt keys to constrain it. 2) Change the fill color using the Paint Bucket tool. 3) Animate the shape by moving a point at one keyframe and rotating the layer at another using the Transform Points and Transform Layer tools. 4) Shorten the animation length and play back the simple animation.

Uploaded by

emmanuel

Available Formats

Download as PDF, TXT or read online on Scribd

100% found this document useful (9 votes)

4K views

Moho 12 Tutorial Manual

Uploaded by

emmanuel

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 306

July 19, 2016 8:00 PM

Moho 12

Tutorial Manual

Contents
Quick Start
Tutorial 1.1: A Quick Run-through
Tutorial 1.2: Drawing Simple Shapes
Tutorial 1.3: Drawing Complex Shapes
Tutorial 1.4: Bone Setup
Tutorial 1.5: Animation

2
2
7
13
28
38

Drawing51
Tutorial 2.1: Welding
Tutorial 2.2: Drawing Shapes with Holes
Tutorial 2.3: Hidden Edges
Tutorial 2.4: Varying Line Widths
Tutorial 2.5: Shape Ordering
Tutorial 2.6: Brushes
Tutorial 2.7: Layer Masking (Pro Only)
Tutorial 2.8: Styles (Pro Only)
Tutorial 2.9: Simple 3D Construction (Pro Only)
Tutorial 2.10: 3D Shape Design (Pro Only)

51
59
62
65
68
73
78
83
92
97

Bones104
Tutorial 3.1: Bone Binding
Tutorial 3.2: Bone Constraints
Tutorial 3.3: Bone Dynamics
Tutorial 3.4: Character Setup
Tutorial 3.5: Flexi-Binding
Tutorial 3.6: Enhanced Bone Features (Pro Only)
Tutorial 3.7: Animated Bone Targets (Pro Only)
Tutorial 3.8: Animated Bone Parenting (Pro Only)
Tutorial 3.9: Isolating Bones from Parenting (Pro Only)

104
111
120
125
136
140
150
152
157

Images160
Tutorial 4.1: Image Layers
Tutorial 4.2: Image Warping
Tutorial 4.3: Image Textures
Tutorial 4.4: Animating a Talking Head (Pro Only)

160
163
166
175

Animation179
Tutorial 5.1: Automatic Lip-Sync
Tutorial 5.2: Phoneme Lip-Sync
Tutorial 5.3: Cycling
Tutorial 5.4: Animation Curves (Pro Only)
Tutorial 5.5: Sorting Layers by Depth (Pro Only)
Tutorial 5.5.1: Animated Layer Ordering

Contents

180
182
184
188
192
196

Moho 12

Tutorial Manual
Tutorial 5.6: Actions (Pro Only)
Tutorial 5.8: Creating a 3D Scene (Pro Only)
Tutorial 5.9: Basic Physics (Pro Only)
Tutorial 5.10: Using Frame by Frame Layers for Animation (Pro Only)
Tutorial 5.11: Animated Shape Ordering (Pro Only)

199
206
214
221
229

Effects233
Tutorial 6.1: Shadow Tricks
Tutorial 6.2: Camera and Depth Effects
Tutorial 6.3: Moon and Clouds Effect
Tutorial 6.4: Particles (Pro Only)
Tutorial 6.4.2: Custom Particle Generators (Pro Only)
Tutorial 6.5: Particle Tricks - Grass and Crowds (Pro Only)
Tutorial 6:5.2: Crowds, Particles, and Depth of Field (Pro Only)
Tutorial 6.6: Using Pre-made Particle Effects (Pro Only)
Tutorial 6.7: Speeding Up Particle Effects (Pro Only)
Tutorial 6.8: Perspective Shadows (Pro Only)
Tutorial 6.9: Using 3D Models (Pro Only)
Layer Referencing (Pro Only)
Tutorial 7.1: Reference Layer Basics
Tutorial 7.2: Breaking and Updating Reference Layer Connections
Tutorial 7.3: Breaking and Updating Original Layer Connections
Tutorial 7.4: Using Reference Layers for Masking
Tutorial 7.5: Referencing External Documents

Contents

233
237
240
242
246
249
253
256
259
263
269
274
274
277
281
283
287

Moho 12

Tutorial Manual

Moho Tutorials
In this manual, we will walk you through various aspects of using Moho. This is
the perfect place to start if youve never used Moho before. Even if youre an
experienced Moho user, this version of Moho has some big changes, so we
recommend reading through the tutorials again.
The best way to get started is to read all the tutorials in the Basics section in order.
Each of these tutorials builds on skills learned in the earlier ones, and one-by-one will
get you up to speed with Mohos basic drawing and animation techniques. Once
youre comfortable working in Moho, then you can move on to the other tutorial
sections. You dont have to read them all (although that probably wouldnt hurt),
but choose the ones that address the specific techniques you want to learn about.
When you first start Moho, you will be prompted to create a
Custom Content folder in a location that you specify. The
tutorial files that are used in this tutorial manual will get installed in
that Custom Content folder. You can find them by going to your
Content folder, and looking for the Tutorials sub-folder. If youre
having trouble with a tutorial, try opening the corresponding Moho
file to see what it should look like.
If you did not create a custom content folder at startup, you
can create one any time by choosing Help > Set Custom
Content Folder.
Once youve finished the tutorials, you should be comfortable enough to continue
on your own. However, the tutorials wont teach you how to use every feature of
Moho - the rest of this manual is a reference that covers Mohos features in detail,
and is recommended reading to be able to use the full power of Moho.

Moho 12

Tutorial Manual

Quick Start
Tutorial 1.1: A Quick Run-through
This tutorial quickly runs through the major features of Moho, without going into too
much detail. The purpose here is more to give an overview of how Moho works,
rather than to teach you how to use any specific features. In this tutorial, we will
draw and animate a very simple object.
Moho has several groups of tools, used for different types of tasks. Some of these
tools are used to create new objects, and others are used to modify and animate
existing objects. The basic Moho tool groups are: Draw, Fill, Bone, Layer, Camera,
and Workspace.
This tutorial introduces a few of the Draw, Fill, and Layer tools, while the following
tutorials focus specifically on each of the tool groups.

Drawing a Simple Shape

Launch Moho by double-clicking the Moho icon, or selecting the Moho shortcut in
the Start menu (Windows). When you create a new Moho project, the application
starts off looking something like this:

The Moho Interface

Choose File > New to create a new project, and then click the current tool icon (just
beneath the File menu), to select Reset All Tools. This puts all tools at their default
settings so that you can follow along with this tutorial.

Quick Start

Moho 12

Tutorial Manual

Reset all tools.

Select the Draw Shape tool by clicking on it in the toolbar.
Select the Oval shape from the Draw Shape tool options.
The Style panel on the right side of the Moho interface allows you to select fill and
stroke colors for the shapes you draw. To select a fill color, click the Fill color square
to open a color palette, or click one of the color squares in the Swatches palette.
Alternatively you can click one of the colors in the Color Swatch palette. Select the
fill color you want to use, and click OK.

Changing the fill color

Press the Shift and Alt keys while you drag from the center of the workspace to
create a circle shape. The Shift key forces the shape to be a circle, rather than an
oval; and the Alt key centers the circle around the point that you first clicked. Try to
keep the circle within the blue rectangle (this rectangle represents the visible area of
your project). Note that the circle will automatically fill with color when the Auto Fill
option is checked as shown in the previous figure.
If youre not happy with your circle, just select the Edit > Undo command from the
menu bar. Your circle should look something like this:

Quick Start

Moho 12

Tutorial Manual

Your first Moho drawing

Changing the Color of Your Shape

If you want to change the fill color, choose the Paint Bucket tool from the Fill
toolbar. The Fill option changes only the Fill color; the Stroke option changes
only the Stroke color; and the Both option changes both the Fill and the Stroke color
to those that you have selected in the Style window.

Paint Bucket options

Select a new color from the Style panel, similar to the way that you selected the
color in the previous steps. Then click inside the shape to change the color(s).

The Fill color is changed with the Paint Bucket.

Simple Animation
When you animate in Moho, you move objects around and set up keyframes points in time at which an object has a certain position. At points in time between
keyframes, Moho automatically computes the position of all objects.

Quick Start

Moho 12

Tutorial Manual
Near the top of the Timeline window is a ruler that displays frame numbers in the
animation. Click the number 36 to set the current time to frame 36.

The Timeline
Next, choose Edit > Select None from the menu bar.
Pick the Transform Points tool from the Draw toolbar. Click and drag the
bottom point of the circle upward to distort the circle into a shape that looks
like this:

Moving a single point

Now use the Transform Layer tool from the Layer section of the Tools panel to
rotate the layer.
To rotate the object with the Transform Layer tool, click and
drag in the area between the two bounding boxes that
surround your object. Rotate the object into a position similar to the
one below:

Quick Start

Moho 12

Tutorial Manual

Rotating an entire layer

Back in the timeline, click frame number 72 in the ruler to change the current time.
Next, select Draw > Reset All Points from the menu bar to move all points back to
their original positions. In the tool options area at the top of the main window, press
the Reset button to reset the rotation of the entire layer.

Click the Reset button to reset the rotation of the layer.

Finally, well shorten the length of the animation from its default length of 240 frames.
In the Timeline window, enter 80 in the second number field. This will shorten the
length of the animation to 80 frames.

Shorten the animation to 80 frames.

Congratulations, youve made an animation! Press the play button near the bottom
of the main window to watch it go. When youre done, press stop. OK, so it probably
wont win any film awards, but youre off to a good start learning Moho.

Quick Start

Moho 12

Tutorial Manual

Playback controls.
Heres what your finished animation should look like (approximately). Press the Play
button below to see the result.
Click this link to view a brief video of the finished results of your
project.
Youve learned how Moho has different groups of tools for different operations,
and even how to use a few of those tools. You can experiment more on your own,
maybe adding more keyframes. When youre ready to learn more, move on to
Tutorial 1.2: Drawing Simple Shapes on page 7.

Tutorial 1.2: Drawing Simple Shapes

In this tutorial you will learn how to draw simple shapes in Moho. The following
tutorials will build on what you start drawing in this tutorial.

Creating a Background
Launch Moho by double-clicking its icon. Or, if Moho is already running, choose File
> New to create a new project, which opens in a new document tab.
Click the current tool icon (just beneath the File menu), to select Reset All Tools. This
puts all tools at their default settings.

In the dialog that appears, type in Hills for the layer name and click the OK button.

Rename the layer.

After creating the hills, choose Edit > Select None to deselect any selected
points. Then click the Select Shape tool in the Fill section of the Tools panel,
and click the fill on your hills.
The Style window will display the settings for the fill: its color, its line width and color,
and the styles used to display it. To remove settings that you have used in previous
projects, click the Reset button to reset the fill colors to their default settings.

Quick Start

Moho 12

Tutorial Manual

Click the Reset button.

Set the line width to 1. Then choose Gradient from the Effect menu to open the
Gradient dialog.
If you want to change the gradient settings later, click the
details button (...) to the right of the Effect pop-up menu.

The Style Window

Quick Start

Moho 12

Tutorial Manual
When you select the Gradient fill style, Moho automatically opens up the gradient
settings dialog. The Linear gradient type is automatically selected for you.

Linear gradient.

To set the left gradient color, double-click the left square at the bottom of the
gradient bar to open the Color Picker. Select a green color and click OK to
return to the Gradient dialog.

To set the center gradient color, double-click the middle square at the bottom
of the gradient bar to open the Color Picker. Select a darker green color and
click OK to return to the Gradient dialog.

To set the right gradient color, double-click the right square at the bottom of
the gradient bar to open the Color Picker. Select a brown color and click OK to
return to the Gradient dialog.

When your colors are selected, the Gradient settings should appear as shown below.
Click OK to return to the scene.

Gradient settings.
To see the gradient preview more easily, click outside the hill to deselect the fill.
Youll notice a line with a filled circle at one end, which represents the start color of
the gradient (green in our example). The empty circle at the other end represents

Quick Start

Moho 12

Tutorial Manual
the end color of the gradient (brown in our example). You can adjust the position of
these indicators to control the blending and direction of the gradient.

Final result.
In our example, the gradient starts with brown on the bottom (empty circle) and
ends with green on the top of the hill (filled circle). The angle tilts slightly toward the
left as shown below.
Choose the File > Save As... command from the menu and save the project under
the name Tutorial 1.2.
In Tutorial 1.3: Drawing Complex Shapes on page 13 well
continue working on this scene by adding more complex
shapes.

Tutorial 1.3: Drawing Complex Shapes

This tutorial follows on the previous one, and teaches you how to draw more
complex shapes. You can either continue with the project you created in Tutorial
1.2, or you can open a file provided for you named Tutorial 1.2. This file can be
found in the Tutorials/1 - Basics subfolder within your custom content folder. The file
youre starting this tutorial with should look something like the following:

Quick Start

Moho 12

Tutorial Manual

Starting point.

Creating a New Layer

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

Create a Vector layer.

You can assign the name Clouds to the new layer when you create it, or doubleclick this new layer and rename it Clouds in the Layer Settings dialog.

Rename the layer Clouds.

Now select the Add Point tool.
Click the Reset button in the Style panel to reset the colors to their default.
Set the line width to 1.

Quick Start

Moho 12

Tutorial Manual

Reset colors and set line width to 1.

Click to set the start point for a new line segment. Without releasing the mouse, drag
the cursor and release the mouse to create the end of the segment. The finished
segment is shown below.

Add a line segment.

Next, click on the end of the new line segment and drag to stretch the curve out like
this:

Quick Start

Moho 12

Tutorial Manual

Add another segment to the end of the curve.

Do this a few more times until you have the curve below:

Several more segments added.

The key point to remember is in order to extend a curve, you need to click on one
of its endpoints and then drag the mouse to where you want the new point to be.
Remember, if you make a mistake at any time, just choose the Edit > Undo menu
command.
Now were going to add a second puff to the cloud. Move your mouse to the point
just before the end of the previous segment. The Auto Weld option for the Add
Point tool should be turned on by default. When turned on, the node will turn green

Moho 12

Tutorial Manual

The rendered cloud.

A Second Cloud
Lets make another cloud. With the Clouds layer selected, choose Edit >
Select All from the menu. Now choose Edit > Copy, followed by Edit > Paste.
Next, pick the Transform Points tool from the toolbar.
In the working area, click and drag to the right to move the new cloud away from
the original. (When you paste an object from the clipboard, it is positioned directly
on top of the original.)

Duplicated cloud.
Use the Transform Points tool to resize this new cloud, making it larger or
smaller than the original, as preferred (here we make ours larger).

Quick Start

Moho 12

Tutorial Manual
The Transform Points tool can resize an object both vertically and horizontally, and
will scale whether or not the object is selected beforehand. In this case, we dont
really want to change the clouds shape like that. With the Transform Points tool
active, click and drag one of the corner handles that appears around the cloud,
thus making it smaller or larger without changing its overall shape. Continue using
the Transform Points tool until you get the new cloud in a position you like.

Second cloud scaled and positioned.

To deselect all of the points in the cloud, use the Edit > Select None command, or
press the Enter key, or click outside the cloud to de-select the points.
Now you can use the Transform Points tool to click and drag individual points to
reshape the second cloud.
In this case, since only one point is selected at a time, the Transform Points tool is
used to re-shape the cloud, not move the entire object. Just re-shape a few points
here and there so that the two clouds dont look exactly the same.

Quick Start

There are a few tools that may be useful when building your tree that
havent been introduced yet. The Pan Workspace and Zoom
Workspace tools can be used to move around the workspace.
Note that these tools are not used to manipulate your drawing - they just let you
move your view so that you can focus in on a particular area of interest. To reset
your view to its original position, select the View > Reset command from the menu
bar.
Another useful tool is the Curvature tool. Using this tool, you can click and
drag on a point to adjust how round or pointy the curve is as it passes
through that point.

Use the Curvature tool to adjust the curves.

The last thing well add in this tutorial is some greenery to the top of the tree. The
shape for the treetop will be similar to the clouds, so follow similar steps to create it,
but there is one tricky part. Because the treetop overlaps the trunk of the tree, it can

Quick Start

Moho 12

Tutorial Manual
be easy to click on the wrong part and add a new point to the trunk instead of the
treetop.
There are two ways to avoid this problem.

One, use the Pan and Zoom tools to move in close to the top of the tree so that
its easier to avoid clicking on the wrong thing.

Moho 12

Tutorial Manual

A current bone and its parent.

OK, lets add bones to the other leg. But first, we need to select the spine
again so that the second leg will also be attached to it. Use the Select Bone
tool and click on the spine to select it.
Next, use the Add Bone tool to add three bones to the other leg as shown
below:

Left leg bones.

Quick Start

Moho 12

Tutorial Manual

Testing Bones
Theres a bone tool that lets you test how your skeleton structure is working.
Lets try that now. Select the Manipulate Bones tool and click and drag any
of the bones you created. Try dragging several of the bones around to see what
happens.

Moving Franks legs.

Notice that Frank automatically moves with the bones. You may have also noticed
that Franks looks quite squishy - when you move either of his legs, his head
changes shape as well. The next step is to clean this up a bit by telling Moho which
parts of Frank should move with which bones.
When you are on Frame 0, the Manipulate Bones tool doesnt permanently
move the bones. Click the Select Bone tool and all the bones will snap back
into their original places.

Adjusting Bone Strength

When you use a bone layer to control a character, every bone in the skeleton has
some influence on every part of the character. We saw that in Frank - when you

Quick Start

Moho 12

Tutorial Manual
move one of the legs, even the head moves a bit. This influence is strongest closest
to each bone, so the head only moves a little bit, not as much as the leg itself.
We dont really want to see Franks head move much at all when his legs move.
Luckily, theres a way to control this: bone strength. Each bone has a strength
value that controls how large its region of influence is. What well do next is adjust
the strength of the bones that control Frank.
Select the Bone Strength tool and take a look at the bones.
Each bone has a semi-transparent region highlighted around it. (You also
saw these regions when using the Manipulate Bones tool.) These regions show you
the influence of each bone in the skeleton. A bone has the most influence inside its
shaded region.

Regions of influence.
With the Bone Strength tool active, click and drag side-to-side on each of the bones
in Franks skeleton to adjust its strength. The goal here is to adjust the region of each
bone so that it just encloses the corresponding section of Franks body. For example,
the region around the shin bone should just enclose the shin, and not much more.
Dont worry about being too precise - pretty close is good enough. For Franks
head, dont make the bone region enclose the entire head - that would make the

Quick Start

Moho 12

Tutorial Manual
bone too strong. Adjust the bone strengths so that they look approximately like the
following:

Adjusted bone strengths.

Testing Bones (Again)

Once you adjust bone strengths, its a good idea to test the skeleton again
to make sure everything works correctly. Pick the Manipulate Bones tool from
the toolbar and click and drag on Franks shin bones just above the ankle.
If everything was set up correctly, Frank should be able to move like this:

Quick Start

Moho 12

Tutorial Manual

Bones in action.
Play around - move Franks bones around into various positions and get a feel
for manipulating the skeleton. Tutorial 1.5: Animation on page 38 will cover
animation, and youll learn how to make objects move around over time.

Tutorial 1.5: Animation

This tutorial continues on from the previous three, moving into the animation features
of Moho. You can either continue on with your project from the previous tutorial, or
you can use a file that has been created for you - its named Tutorial 1.4 and its
located in the Tutorials/1 - Basics subfolder within your custom content folder.
There are three basic ways to animate objects in Moho:

animating an entire layer,

using bones to animate parts of an object,

animating the individual points on an object

These three types can be combined to make very complex animations. This tutorial
will walk you through all three types of animation.
Open your previous project (or the Tutorial 1.4 file) in Moho. Make sure all the
layers are visible by clicking to turn on each layer in the Layers window.

Quick Start

Notice that a marker appeared in the timeline at frame 72. (You may have to scroll
downwards to see the marker.) This marker represents a keyframe - a point in time
at which the layer has been given a position. There are several animation channels
displayed in the Timeline panel. This keyframe appeared in the Layer Translation
channel, because thats what type of action you just performed - you translated
(moved) a layer.

The new keyframe.

Try out the animation so far: press the play button at the bottom-left of the main
window. The animation loops when it reaches the end (in this case frame 240). When
youve seen enough, press the stop button.
If you prefer, you can shorten the length of the animation to 72 frames, so that it will
loop back to the beginning once it reaches the last keyframe. Simply change the
total number of frames to 72 as shown below.

Quick Start

Next, set the time to frame 24 and choose the Bone > Reset All Bones menu
command. Press the play button to watch your animation, and press stop when
youre done.

Reset all bones at Frame 24.

When you played back the animation, you probably noticed that after frame 24,
Frank doesnt move any more. You could add more keyframes by setting the time

Quick Start

Moho 12

Tutorial Manual
to some later frame and moving Franks bones some more, but lets try out Mohos
animation looping feature.
In the timeline, you should see a group of keyframes at frame 24. These keys
represent bone movement (the spine bone moving up and down) and bone
rotation (the bending legs). Drag a rectangle around these keyframes to select
them:

Select bone keyframes at frame 24.

Next, right-click on one of these selected keys. A popup menu will appear. Select
Cycle... from the popup menu.

Select Cycle
What youre telling Moho is that you want these keys to cycle back to an earlier
point in the timeline. A dialog will appear asking you what frame to cycle back to enter the settings shown below. Youre telling Moho that on this keyframe, the bone
movement should cycle back to frame 1.

Quick Start

Moho 12

Tutorial Manual

You now have a pretty good grasp of how to draw, fill, set up bones, and animate in
Moho. Feel free to jump right in and start working with Moho. Or, you can read more
tutorials that dig deeper into specific topics.

Quick Start

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.
Click this link to view a brief video of welding example #4.

Welding to a curve segment

Drawing

Moho 12

Tutorial Manual

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

Drawing

Moho 12

Tutorial Manual

Examples of Good Welding

Lets 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:

Drawing

Moho 12

Tutorial Manual

Joining multiple curves into a single closed shape

The welded and filled shape

Finally, the example below shows two circles lined up side-by-side. The two side
points of the circles have been welded together so that when they move around
during an animation they remain joined. If those points were not welded, moving
them in sync like this would require a lot of extra work.
To maintain the separate colors in the two circles, Auto Fill is
turned off before welding the two circles together at a
common point.
Click this link to view a brief video of the joined circles.

Drawing

Moho 12

Tutorial Manual

Examples of Bad Welding

Typically, when you weld together two points, one of them should be a curve
endpoint. This isnt 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. Heres 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 isnt 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

Drawing

Moho 12

Tutorial Manual
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 doesnt 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 dont end up with a double curve all welded together. The resulting shape is
much cleaner and easier to work with:

Heres another example of a shape with a hole:

Drawing

Moho 12

Tutorial Manual

Another shape with a hole

Tutorial 2.3: 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. Theres an easy way
to accomplish this in Moho.

Start With a Sample File

For this tutorial, well start with a project file thats almost finished. Its named Tutorial
2.3 and its 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

Drawing

Moho 12

Tutorial Manual

Hidden Edges
The drawing were working with could be the beginning of a characters
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 dont
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 dont 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

Drawing

Moho 12

Tutorial Manual
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 cant 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 youve 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, youll 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:

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.

Drawing

Moho 12

Tutorial Manual

Line width and transformation changes made on the points or curves affect both
strokes at the same time.

Tutorial 2.5: Shape Ordering

Moho 12

Tutorial Manual

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 layers 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 cant 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

Drawing

Moho 12

Tutorial Manual
Now we want to bring the yellow circle back to the front. Using the Select
Shape tool, click on the yellow circle, even though its 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:

Drawing

Moho 12

Tutorial Manual

Raised yellow circle

Tutorial 2.6: Brushes

Moho allows you to apply brush effects to outlines if you choose. Its 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)

Drawing

Moho 12

Tutorial Manual

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

Freehand curves

Drawing

Moho 12

Tutorial Manual
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

Drawing

Moho 12

Tutorial Manual
In the brush dialog that appears, select one of the brush shapes that interests you youll 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:

Drawing

Moho 12

Tutorial Manual

Different brush shapes

(Pro Only) If you notice that your brush effects are not visible
until you render or export your animation (brush shapes are not
possible when exporting to SWF format), 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 Mohos editing view:
Displaying brushes while editing requires a lot of computation and
can slow Moho down, so its best to use this as a kind of preview, but
not to leave it on all the time. When youve got the brushes how you
like them, switch this display option back off.

Drawing

Moho 12

Tutorial Manual

Turn on Brushes preview option

Brushes in editing view

Tutorial 2.7: 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.

Drawing

Another Example - Simplified Modeling

Now open the file Tutorial 2.6_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

Drawing

Moho 12

Tutorial Manual
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
cant.

Eyes used as a mask

Another Example - Transition Effect

Finally, open the file Tutorial 2.6_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 doesnt have to be visible. In this case, the mask is a rectangle that
gradually exposes the text, but we dont 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.

Drawing

Moho 12

Tutorial Manual

Tutorial 2.8: Styles (Pro Only)

Drawing

Now select Layer 2, and set its X to 0, Y to 0, and Z value to -1. Youve 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.

Drawing

Moho 12

Tutorial Manual

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

Drawing

Moho 12

Tutorial Manual

Layer 6 Rotate Layer XY Setting

At this point the cube is basically finished, but its 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.

Drawing

Moho 12

Tutorial Manual

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

Tutorial 2.10: 3D Shape Design (Pro

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.

Drawing

101

Moho 12

Tutorial Manual

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.

Drawing

102

Moho 12

Tutorial Manual

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.

Drawing

103

Moho 12

Tutorial Manual

Two inflated shapes on the same layer.

Bones

107

Moho 12

Tutorial Manual
the regions just large enough to contain the body part that the bone is meant to
control:

Resized regions of influence

Dont worry about the parts of the forearm that are outside the forearm bones
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

Bones

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 isnt 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 characters hand bone.

Go Back to Automatic Mode

Lets undo all of this extra binding and go back to automatic mode.
1.

Reselect the Arm layer in the Layers window.

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.

2.
3.

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

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

Bones

111

Moho 12

Tutorial Manual

Chose 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.

Click this link to view a brief video of the finished results of your
project.

Tutorial 3.2: Bone Constraints

This tutorial demonstrates Mohos 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, well start with a project file thats almost finished. Its named Tutorial
3.2 and its located in the Tutorials > 3 - Bones subfolder within your custom content
folder. Open this file in Moho, and you should see something like this:

Bones

112

Moho 12

Tutorial Manual

Starting point for this tutorial

This file contains two skeleton layers that have no constraints set up. Were 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.
6.

Make sure the Arm layer is selected.

Select the Arm bone

Bones

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

113

Moho 12

Tutorial Manual

Select the lower arm bone

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.

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

10. Click the Close button to close the constraints popup box.
11. Set the bones name to Forearm in the toolbar options.

Name this bone Forearm

12.

Once youve 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 doesnt allow
you to move the bone beyond the minimum and maximum angles you set up.

Bones

114

Moho 12

Tutorial Manual

Visual display of angle constraints

Heres a handy little trick. Often, it can be hard to judge the
correct numerical angles for bone constraints. Theres 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.
13. Use the Select Bone tool to select the small bone above the upper arm:

Upper forearm bone selected.

14. 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:

Bones

115

Moho 12

Tutorial Manual

Angle control setup

15. Well 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.

16.

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.

Bones

116

Moho 12

Tutorial Manual

Upper Arm bones move automatically

Bone Locking
The third category of bone constraint is bone locking. When you lock a bone, youre
telling Moho that you dont 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 isnt 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 characters feet from moving around on the
ground. To do this, Moho needs to move the characters 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
characters feet in place while moving bones above it. For
more information about using target bones, see Tutorial 3.6:
Enhanced Bone Features (Pro Only) on page 140.
1.

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

Bones

117

Moho 12

Tutorial Manual

Select the Frank w/Skeleton layer.

Use the Select Bone tool to select Franks left shin bone as shown:

Select the left shin

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

Bones

118

Moho 12

Tutorial Manual

Angle constraints for left shin

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

Angle constraints for right shin

Now that the legs are prepared, set the time to frame 24. Use the
Transform Bone tool to drag Franks spine bone around a small distance.
Notice that his feet move around and dont stay in place.

Choose the Select Bone tool again. Go back to frame 0 and select the left foot
bone:

Bones

119

Moho 12

Tutorial Manual

Select the left foot

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

Now that the feet are locked, go back to frame 24, and use the
Transform Bone tool again to drag Franks spine around.

Notice that now Moho tries to keep Franks 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 - theres 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.

Bones

120

Moho 12

Tutorial Manual

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 is to leave the ground for its next step.

Tutorial 3.3: Bone Dynamics

Mohos 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, well start with a project file thats almost finished. Its named Tutorial
3.3 and its located in the Tutorials > 3 - Bones subfolder within your custom content
folder.
1.

Open the Tutorial 3.3 file in Moho. You should see something like this:

Bones

121

Moho 12

Tutorial Manual

Starting point for this tutorial

Play back the animation to see what were 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 youve seen enough.
Use the Select Bone tool to select the top-left bone in the structure as
shown below:

Select this bone

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.

Bones

122

Moho 12

Tutorial Manual

Turn on bone dynamics

Select seven more bones (two in each of the arms), and turn on bone dynamics
for each one.
Heres 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 lets 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.

Bones

123

Moho 12

Tutorial Manual
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 bones 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 parents 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.

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

Bones

124

Moho 12

Tutorial Manual

Set a high damping force on these bones

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.

Bones

125

Moho 12

Tutorial Manual

Set a high spring force on these bones

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 bones movement. The topright arms 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.
Click this link to view a brief video of the finished results of your
project.

Tutorial 3.4: 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, well start with a project file that already has the artwork for the
character drawn - youll just set up the bones. Its named Tutorial 3.4 and its located
in the Tutorials > 3 - Bones subfolder within your custom content folder.
To begin:
1.

Open the Tutorials > 3 - Bones > Tutorial 3.4 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

Bones

126

Moho 12

Tutorial Manual
character in multiple layers, arranging the body parts from back to front, as
shown below:

Starting point for this tutorial

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.

Bones

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

127

Moho 12

Tutorial Manual

Arm moved off to the side

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

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 well put the character back
together again.

Bones

128

Moho 12

Tutorial Manual

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.

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.

Bones

129

Moho 12

Tutorial Manual
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.

Using the Add Bone tool, add two bones going up through the torso,
starting with the bottom one:

Two new bones

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

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.

Bones

130

Moho 12

Tutorial Manual

Arm bones added

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

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.

Bones

131

Moho 12

Tutorial Manual

Head bone added

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

Bones

132

Moho 12

Tutorial Manual

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.

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 bones 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:

Bones

133

Moho 12

Tutorial Manual

Initial regions of influence

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 it 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 characters head, the region of influence isnt
very important - since theres just one bone, the points outside the region of
influence will still move with that bone. Heres how you should adjust the regions
of influence (dont worry about matching this exactly, just try to get kind of
close):Adjusted regions of influence.

Bones

134

Moho 12

Tutorial Manual

Adjusted regions of influence

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.
Activate the Offset Bone tool.

6.
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.

Bones

135

Moho 12

Tutorial Manual

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 youre 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.

Bones

136

Moho 12

Tutorial Manual

Final character
If youre interested in taking a look at the final Moho file, its
named Tutorial 3.4 Final and its located in the Tutorials > 3 Bones subfolder within your custom content folder.

Tutorial 3.5: Flexi-Binding

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 on page 254 in your 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 > Use Selected Bones for Flexi-Binding.
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.5.moho, which you will find in the

Bones

137

Moho 12

Tutorial Manual
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 Anime
Studio, 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.4: Character Setup on page 125. 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.

Bones

138

Moho 12

Tutorial Manual

The character distorts when the bones are manipulated.

141

Moho 12

Tutorial Manual
B6

RLowerLeg

B7
B8

RFoot
LUpperLeg

LLowerLeg

B10
B11
B12
B13
RFootTarget
LFootTarget

LFoot
LUpperArm
LLowerArm
Upper Torso
---

Target Bones, Automatic Scaling,

Squash and Stretch
Independent Angles
Automatic Scaling, Squash and
Stretch
Target Bones, Automatic Scaling,
Squash and Stretch
Independent Angles
Smooth Joint
Smooth Joint
Smooth Joint
Target Bones
Target Bones

Target Bones
In our first example, youll notice that two additional bones are created behind the
characters 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, youll 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.

Bones

142

Moho 12

Tutorial Manual

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 dont have to
return to Frame 0 to assign a bone target, this can be performed on any frame.

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

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

Bones

143

Moho 12

Tutorial Manual

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

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.

Youll return to the Bone Constraints dialog it later in the next section, but for
now, click Close so that you can preview the results.

Press the Play button, and now youll see that the characters 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.

Bones

144

Moho 12

Tutorial Manual

Independent Angles
Youll 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.

Bones

145

Moho 12

Tutorial Manual

Check the Independent Angle option for both feet.

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).

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

Preview the results again to see how it looks.

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

Bones

146

Moho 12

Tutorial Manual
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, well 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).

Bones

147

Moho 12

Tutorial Manual

Squash and Stretch scaling applied to leg bones.

To add Squash and Stretch scaling to Mr. Beans 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.

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

Enter a value of 1.5 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.

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.

Bones

148

Moho 12

Tutorial Manual

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. Beans 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 Shiftclick to select bone B6 (right lower leg). This is your first bone pair.

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.

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

Bones

149

Moho 12

Tutorial Manual

The first bone pair is connected to the RLeg layer.

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.

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.
Click this link to view a brief video of the finished results of your
project. https://www.producturlsupport.com/cgi-bin/cscgi.pl?f
=video&p=ASD&v=12.0&o=M&l=EN&vid=Circles

Bones

150

Moho 12

Tutorial Manual

Tutorial 3.7: Animated Bone Targets

(Pro Only)
This tutorial will give you an overview of how animated bone targets can be
configured in Moho.
1.

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

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.

Youll 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.

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

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:

Bones

Click the Bone Constraints menu button, and choose the Target from the
Target menu.

151

Moho 12

Tutorial Manual

.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. Youll 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.

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.

Bones

152

Moho 12

Tutorial Manual

.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 isnt 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.

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.
Click this link to view a brief video of the finished results of your
project.

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.7 Finished.moho.

Tutorial 3.8: Animated Bone Parenting

(Pro Only)
In this tutorial youll 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. Youll
reparent the ball to the other bone chains during the course of this tutorial.

Bones

153

Moho 12

Tutorial Manual
To follow this tutorial, you can either continue from the point at
which you left off in Tutorial 3.7, or start with the Tutorial 3.7
Finished.moho project in your User Content folder.
1.

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

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

.Select the Parenting layer and hide the other layers.

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.

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.

Bones

154

Moho 12

Tutorial Manual

.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.

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.

Bones

155

Moho 12

Tutorial Manual

.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.

At frame 72, click the top bone on the right bone chain with the Reparent Bone
tool to select it for the new parent.

Bones

156

Moho 12

Tutorial Manual

.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. Your results should be similar to the following
animation. You will find a completed copy of this tutorial saved as Tutorial 3.8
Finished.moho.
Click this link to view a brief video of the finished results of your
project.

Bones

157

Moho 12

Tutorial Manual

Tutorial 3.9: Isolating Bones from

Parenting (Pro Only)
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 dont 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 in the animation.
If youre 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.8, or start with the Tutorial 3.8
Finished.moho project in your User Content folder.
1.

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

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

.Select the Parenting layer and hide the other layers.

Scrub through the timeline. Youll 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.

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.

Bones

158

Moho 12

Tutorial Manual

.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.

Now switch to the Reparent Bone tool, and click the 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 well 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.

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

Bones

159

Moho 12

Tutorial Manual

.The small bone in the inner right chain is parented to the top bone in the far right
chain.
Play the animation back. Youll 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 its getting a sudden surge of springy action.
You dont 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 the
sudden change in angle, but it isolates that change from the bones in the inner right
bone chain.

Bones

160

Moho 12

Tutorial Manual

Images
Tutorial 4.1: 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 theyre
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
Youll 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. Youll need to use an image editing program (like
Adobe Photoshop) to create images with transparency.

Start With a Sample File

For this tutorial, well start with a project file thats almost finished. Its named Tutorial
4.1 and its located in the Tutorials > 4 - Images subfolder within your custom content
folder.
Open the Tutorials > 4 - Images > Tutorial 4.1 file in Moho. This project is almost
complete as it is. The only thing thats missing is the dancers left hand.
9.

Expand the Hula Girl layer in the Layers window, and you should see something
like this:

Starting point for this tutorial

Images

161

Moho 12

Tutorial Manual
10. Click on the layer named L Arm (we want the new layer to be just above the
left arm).
11. 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)

12. Moho will prompt you to select an image file. Choose the Moho/Tutorials > 4 Images > l_hand.png image in your custom content folder.
13. 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

Images

162

Moho 12

Tutorial Manual

The new hand

14.

Youll notice that new image layers are centered in the workspace, so
the dancers 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

15.

The last step is to attach the new part to the dancers skeleton. Select
the Bind Layer tool, and click on the lower arm bone on the dancer, as
shown below:

Images

163

Moho 12

Tutorial Manual

Bind the image layer to the forearm

Youre 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.
Click this link to view a brief video of the finished results of your
project.

Tutorial 4.2: Image Warping

This tutorial demonstrates Mohos image warping feature. This feature allows you to
use a skeleton to distort an image. In this way, you can animate photographs, handdrawn artwork, or anything you can get into an image file in a flexible way.

Start With a Sample File

For this tutorial, well start with a project file thats almost finished. Its named Tutorial
4.2 and its located in the Tutorials > 4 - Images subfolder within your custom content
folder.
Open the Tutorials > 4 - Images > Tutorial 4.2 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).

Images

164

Moho 12

Tutorial Manual

Starting point for this tutorial

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
isnt moving is that it hasnt been connected to the bones yet (as the vector
layer has been).

Play back the animation to see whats going on.

Be sure to rewind the animation to frame 0 before you continue with the next
section.

Paint the Textures

What youre 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 animals body.
1.

Select the File > Preview menu command to create a full-quality view of the
animals current state.

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

Images

168

Moho 12

Tutorial Manual

Copy the render to the clipboard.

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.

Create a new layer in your image editing program and paint some kind of
texture details onto the animals body parts. Its very important that the texture
be on a layer of its own. If youre using Photoshop, the layer arrangement would
look something like this:

Layers in Photoshop
5.

Paint whatever details you want. Heres an example of something you might
paint in your image editor. Dont worry about painting outside the lines:

Images

169

Moho 12

Tutorial Manual

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 (youre 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.

Images

170

Moho 12

Tutorial Manual
8.

After you save your images, you can close the image editor. Its time to bring
the textures back into Moho.

Back legs texture. back_tex.png

Body texture. body_tex.png

Images

171

Moho 12

Tutorial Manual

Front legs texture. front_tex.png

If youre having trouble creating the image textures, we have
provided some files for you to examine. Look at the file Tutorial
4.4 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.

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

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.

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. Heres how the new
image layers should be arranged:

Images

172

Moho 12

Tutorial Manual

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:

Images

173

Moho 12

Tutorial Manual

Turn masking on for the group

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

Images

174

Moho 12

Tutorial Manual

The Back Legs layer with mask

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

Play back the animation again and youll see the image layers warp along with
the vector layers in response to bone movement.

Images

175

Moho 12

Tutorial Manual

Tutorial 4.4: Animating a Talking Head

(Pro Only)
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, well start with a project file thats almost finished. Its named Tutorial
4.3 and its located in the Tutorials > 4 - Images subfolder within your custom content
folder.
1.

Open the Tutorials > 4 - Images . Tutorial 4.3 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

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

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.

Images

176

Moho 12

Tutorial Manual

Moving the mouth

Adding Sound and Motion

Now well 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.

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

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).

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

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.

Images

177

Moho 12

Tutorial Manual

Bone Audio Wiggle script

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

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.

Images

178

Moho 12

Tutorial Manual

Keyframes for Bone Audio Wiggle

Images

179

Moho 12

Tutorial Manual

Animation
After all the preparation time drawing your objects, assigning fill colors, and setting
up bones, you move on to animating them. This is where things actually start to
move around.
Animating in Moho is based on the concept of keyframes. A keyframe is a point
in time where you position some object (either a point, a bone, or an entire layer).
A keyframe tells Moho exactly where that object should be and when. Keyframes
are set up at important moments in time - typically where an object begins moving,
stops moving, or changes direction. Between keyframes, Moho automatically
calculates how to move an object so that it gets from one keyframe to the next in
the amount of time allowed between the keyframes.
To create a keyframe, just set the current time to whenever you want the keyframe
to occur, then move the object to the desired position. Controlling the current time
and working with keyframes after theyve been created is discussed in Chapter 16:
The Timeline Window on page 332 in your Moho Users Manual.
You can animate several types of motion in an Moho project, and they can each
be used alone or in combination.

The first type is point motion. Point motion very basic - it just involves moving
individual points around in time. Point motion is good for small distortions to
an object where you want something to look soft and flexible (turning up
the corners of a mouth into a smile, bulging out a belly, etc.). You can move
a shape in any way you want with point animation, but it might require
manipulating a lot of points - in many cases bone animation can simplify the
job.

Bone animation involves setting up a skeleton system for an object and then
moving the skeleton around. By carefully constructing a skeleton, you can easily
move a character around like a puppet.

Layer animation is for very simple, large-scale motion. When you move a layer,
everything in it moves together. This doesnt give you a lot of flexibility as far as
what you can animate this way, but its a good way to get certain effects. If
you want an entire group of objects to pan side to side or zoom in or out, then
layer animation is the tool to use.

The keyframes you define are visible in the Timeline, starting at frame 1. Frame 0 is
a special frame in an Moho project - the original placement of all your objects is
stored at frame 0. If you want to modify an objects original shape or position, or add
new objects, this should be done at frame 0. Whatever you do to an object in later
frames can never affect an objects original shape and position, so even if you think
you really screwed something up, you can always delete some keyframes and get
back your original drawings.
This chapter has a useful hands-on overview of how to animate in Moho, using each
type of motion (point, bone, and layer). Once youve mastered Mohos animation
tools, animating is a simple job of repeatedly using the tools you already know,
keyframe by keyframe.

Animation

180

Moho 12

Tutorial Manual

Tutorial 5.1: Automatic Lip-Sync

This tutorial uses Mohos Switch layers to show you how to perform instant, automatic
lip-syncing. 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, well start with a project file thats almost finished. Its named Tutorial
5.1 and its located in the Tutorials > 5 - Animation subfolder within your custom
content folder.
1.

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

Starting point for this tutorial

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 automatic lipsyncing. The number and names of the sub-layers dont matter, as long as the
lowest one is closed and the highest one is wide open.

Animation

181

Moho 12

Tutorial Manual

Layers in the Layers window

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.
Make sure that you select the File > Import > Audio File
command from the lower section of the file menu. This differs
from the File > Import > Audio command in the upper section of the
menu, which is used to open files in the Moho library.

File > Import > Audio File command (Pro shown)

Play back the animation now to hear the result. Youll notice that the mouth
doesnt move yet. Stop the playback before proceeding.

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

Animation

182

Moho 12

Tutorial Manual

Layer settings for the mouth

Click the Select audio sync source button to select the file that will control the
Switch layer. In the file dialog that appears, select the file MaryLamb-Man.wav.
Click the dialogs OK button.

Thats it! The audio file was analyzed and keyframes were attached to the 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 automatic 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.
Click this link to view a brief video of the finished results of your
project.

Tutorial 5.2: 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. When you do lip-sync based on phonemes, it requires you to break
down the words of dialog into their basic sound elements.

Start With a Sample File

For this tutorial, well start with a project file thats almost finished. Its named Tutorial
5.2 and its located in the Tutorials > 5 - Animation subfolder within your custom
content folder.
1.

Open the Tutorials > 5 - Animation > Tutorial 5.2 file in Moho.

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

Animation

183

Moho 12

Tutorial Manual

Starting point for this tutorial

This project is almost complete. The only thing apparently missing is the
animation for the characters mouth. Play back the animation. The mouth is
there (its a switch layer), but no animation data has yet been assigned to it, so
it doesnt move.

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

Options in the Switch tab

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.

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

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 didnt add any more
keyframes - the Layer Visibility channel is just cycling back and repeating a
section of animation over and over again.

Animation

187

Moho 12

Tutorial Manual
7.

Lets 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, youll 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

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

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

Animation

188

Moho 12

Tutorial Manual

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 keys 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.

Tutorial 5.4: Animation Curves (Pro

Only)
Introduction
This tutorial introduces the graph mode of Mohos 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, well start with a project file thats almost finished. Its named Tutorial
5.3 and its located in the Tutorials > 5 - Animation subfolder within your custom
content folder.
1.

Open the Tutorials > 5 - Animation > Tutorial 5.3 file in Moho.

Were 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 youre 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.

Animation

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

189

Moho 12

Tutorial Manual

Select the lowest bone

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

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 channels icon makes it active for editing.

Now, press the End key on your keyboard - this rescales the graph to
accommodate the currently active channel, in this case the selected bone

Animation

190

Moho 12

Tutorial Manual
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 bones 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 dont care
about the exact values). Then, in less than half a second it rotates back again.

Graph mode
In the timelines graph mode, angles are displayed in radians so
that theyll 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 Mohos preferences
dialog.
8.

Now were going to edit the bones motion by modifying the graph. First, set the
current time to frame 48 and choose the Bone > Reset Bone command.

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.

Animation

191

Moho 12

Tutorial Manual

Move a keyframe
11. Next were 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. Lets add three more keyframes like the previous one. Add these keys at frames
40, 43, and 46. You dont 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. Dont worry if
the key isnt 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 youre creating.

Animation

192

Moho 12

Tutorial Manual

The final graph

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

Tutorial 5.5: Sorting Layers by Depth

(Pro Only)
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, well start with a project file thats almost finished. Its named Tutorial
5.4 and its located in the Tutorials > 5 - Animation subfolder within your custom
content folder.
Open the Tutorials > 5 - Animation > Tutorial 5.4 file in Moho. You should see
something like this:

Animation

193

Moho 12

Tutorial Manual

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 were 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.

Make sure the Circle layer is active. Now, while holding down the Alt key, drag
downwards in the editing area. Youll 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

Animation

194

Moho 12

Tutorial Manual
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 isnt
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).

Next well 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:

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
furthest to nearest.

Animation

195

Moho 12

Tutorial Manual

Sort layers by depth option

Play the animation again, and youll see that the circle is drawn behind the
square during the time that it is farther away.

To get a clear idea of whats 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.

Once you have a good view, activate the Transform Layer tool to display the
path of the Circle layers motion.

View from above

Animation

196

Moho 12

Tutorial Manual
A note about depth sorting: The checkbox we turned on to sort
the layers by depth only sorts the top-level layers in an 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.

Tutorial 5.5.1: 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 youll learn how this works.
1.

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

Starting point for this tutorial

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.

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.

Animation

197

Moho 12

Tutorial Manual

Enable Animated Layer Order in the Layer Settings dialog

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

At frame 48, move the star to the top layer as shown below.

Animation

198

Moho 12

Tutorial Manual

Star appears on the top at frame 48

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

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

Now press the Play button. Youll see the layer order of the three shapes change
over time.

Animation

199

Moho 12

Tutorial Manual

Tutorial 5.6: 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, well start with a project file that already has some actions set up. Its
named Tutorial 5.6 and its located in the Tutorials > 5 - Animation subfolder within
your custom content folder.
1.

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

Starting point for this tutorial

Lets 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.

Animation

200

Moho 12

Tutorial Manual

Actions for this character

To view or edit an animation, double-click it in the Actions window. Lets 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 youre working with an action, not the main animation.
Finally, some keyframes appeared in the timeline - these are the keys for the
Step action.

Animation

201

Moho 12

Tutorial Manual

Activate the Step action

Press the playback button to watch this action, and stop it when youve seen
enough.

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

When youve watched them all, double-click Mainline to go back to the main
animations timeline.

Using Actions
Now that weve seen which actions the character can perform, lets 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:

Animation

202

Moho 12

Tutorial Manual

Click once on Wave

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.

Animation

203

Moho 12

Tutorial Manual

Inserting a reference to the Wave layer

When you insert an action by reference, Moho will use that actions 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

Actions can also be overlapped. Set the current time to frame 12.

Click once to select the Squat action in the Actions window.

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.

Animation

204

Moho 12

Tutorial Manual

Inserting a reference to the Squat layer

Wave and Squat actions overlapping

Lets 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.

Animation

205

Moho 12

Tutorial Manual

Wave, Squat, and Bend Overlapped

Lets try repeating an action a few times. Go to frame 66, and insert the Step
action.

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

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 well 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:

Animation

206

Moho 12

Tutorial Manual

Character translated off screen

Tutorial 5.8: Creating a 3D Scene (Pro

Only)
This tutorial will show you how to build and move around in a 3D scene in Moho.
Moho isnt 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, well start with a project file thats almost finished. Its named Tutorial
5.8 and its located in the Tutorials > 5 - Animation subfolder within your custom
content folder.
1.

Open the Tutorials > 5 - Animation > Tutorial 5.8 file in Moho.
This file has some simple artwork that well use to build a 3D scene. The layers in
this file are set up as shown:

Animation

207

Moho 12

Tutorial Manual

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

Animation

208

Moho 12

Tutorial Manual
Next, activate the Transform Layer tool, and in the tool options area,
enter -0.25 as the Y value:

Adjusting position
Finally, with the Transform Layer tool, enter 5, 5, 5 in the tool options area
as the layers 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 - lets 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).

(Notice the little blue wedge in the scene - this represents the camera.)

Animation

209

Moho 12

Tutorial Manual

View from above

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

3.
4.

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

Layer Settings options

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:

Animation

210

Moho 12

Tutorial Manual

Moving the tree

OK, thats 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 theyre
roughly in the range between -3 and 3.

Repeat the process several more times, just scattering trees across the
landscape. Keep going until youve created about 12 more trees. Position them
all over the place - close to the camera, far away, behind it, etc. When youre
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.

Animation

211

Moho 12

Tutorial Manual

A forest
Heres 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 weve got a filled-in scene, lets take a tour.
Select the View > Reset menu command. You are now looking at the scene from the
cameras point of view:

Animation

212

Moho 12

Tutorial Manual

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 youve 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 doesnt matter where you turn to just point the camera in an interesting direction:

Animation

213

Moho 12

Tutorial Manual

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 youve 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.

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).

Animation

217

Moho 12

Tutorial Manual
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

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:

Animation

218

Moho 12

Tutorial Manual

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

Animation

219

Moho 12

Tutorial Manual
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 objects 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.

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

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.

Animation

220

Moho 12

Tutorial Manual

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.

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) on page 101 in your Moho
Users Manual.

Animation

221

Moho 12

Tutorial Manual

Tutorial 5.10: Using Frame by Frame

Layers for Animation (Pro Only)
Moho offers additional features that make frame by frame animation much easier.
In this tutorial youll create a similar inchworm animation using the new Frame by
Frame Animation Layer features found in Moho.
There are two different ways that you can create frame by frame animation layers:

After you create a switch layer and place a vector layer inside of it, 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.

Or, from the menu 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 vector layer inside of it. Youll use this method in the tutorial
that follows.

To complete this tutorial, follow these steps:

Choose File > New to create a new Moho project.

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. 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. Youll also see some new controls above the timeline.
From left to right, these controls are used to Add a frame, Delete a frame, or
Duplicate a frame. You can also enter a frame by frame advance interval, 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: Add frame, Delete frame, duplicate
frame, and advance interval.

Animation

222

Moho 12

Tutorial Manual
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/layer, Shift+F5 to delete one, and F6 to duplicate the
current frame/layer and advance to the next frame.
3.

Select the Blob Brush. Set the brush radius to .13.

Set Blob Brush radius to .13

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 (Layer 1), draw an inchworm that is almost flat to the ground.

Animation

223

Moho 12

Tutorial Manual

First layer of inchworm

Press F5 to create a new frame/layer to the Inchworm switch layer. This will also
advance the time by one frame

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 (Layer 2) 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.

Animation

224

Moho 12

Tutorial Manual

Second layer of the inchworm

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 (Layer 3), Frame 3 (Layer 4), and Frame 4 (Layer 5). The
examples of each are shown below.

Third, fourth, and fifth layers of inchworm

Animation

225

Moho 12

Tutorial Manual
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 (Layer 6), Frame 6 (Layer 7), Frame 7 (Layer 8) and Frame 8 (Layer 9).
Examples of each layer are shown below.

Sixth, seventh, eighth and ninth layers of inchworm

If you expand the Inchworm layer at this point, you will see
Layers 1 through 9 in the Inchworm Frame by Frame Animation
layer. After looking at the layers, collapse the Inchworm layer again
and keep it selected for the following steps.
11. Now you can go back with the Freehand tool and add the details to the layers
that are already there. Select the Freehand tool from the Draw tools. Verify that
the following options are selected:

Auto Weld: On

Trim Start: Checked

Trim End: Checked

Auto Close: Unchecked

Animation

226

Moho 12

Tutorial Manual

Auto Fill: Unchecked

Auto Stroke: Checked

Merge Strokes: Checked

Freehand tool options

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

Add details to the first inchworm layer, then add similar details to the other eight layers
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
(make sure to include the last layer, Layer 9, which appears on Frame 8).
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 Mohos 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.

Animation

227

Moho 12

Tutorial Manual

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 again and choose Cycle. The
default option is Absolute and it is set to cycle back to frame 1. Instead, change
the value so it cycles back to frame 0. Then exit the dialog.

Animation

228

Moho 12

Tutorial Manual

Cycle keyframes at frame 18.

Cycle Frame 18 back to Frame 0.

17. Press the Play button to watch your Inchworm crawling on the screen. Your
inchworm animation should be similar to the following.
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.

Animation

229

Moho 12

Tutorial Manual

Tutorial 5.11: Animated Shape

Ordering (Pro Only)
In Tutorial 2.5: Shape Ordering on page 68 you learned the basics about how to
select and move shapes above or beneath others in the same layer. In this tutorial
youll follow steps that are slightly modified from Tutorial 2.5 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.5.

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.

Advance in the timeline by clicking frame 12.

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

4.
5.

233

Moho 12

Tutorial Manual

Effects
Tutorial 6.1: 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 well look at.

Start With a Sample File

For this tutorial, well start with a project file thats almost finished. Its named Tutorial
6.6 and its located in the Tutorials > 6 - Effects subfolder within your custom content
folder.
Open the Tutorials > 6 - Effects > Tutorial 6.6 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, lets 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.

Go to the Shadows tab, and leaving all the other settings alone, turn on the
Shadow on checkbox. Click OK to dismiss the dialog.

Effects

234

Moho 12

Tutorial Manual

Default shadow settings

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 well 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:

Effects

235

Moho 12

Tutorial Manual

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.

Effects

236

Moho 12

Tutorial Manual

Layer Outline
Lets 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, its 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:

Effects

237

Moho 12

Tutorial Manual

Layer outline

Tutorial 6.2: Camera and Depth Effects

This tutorial demonstrates Mohos 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, well start with a project file thats almost finished. Its named Tutorial
6.7 and its located in the Tutorials > 6 - Effects subfolder within your custom content
folder.
1.

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

Starting point for this tutorial

Effects

238

Moho 12

Tutorial Manual
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.

Notice how all the layers move together, even though they arent 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 well introduce some depth into the scene.
1.

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

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 layers Z value

Now select the Left Hill layer, and set its Z value to -2. Finally, select Sky, and
set its Z value to -20. When youre 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. Its like driving in a car - nearby objects go by quickly, while
distant objects seem to move slowly.

Effects

239

Moho 12

Tutorial Manual
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 cameras point of view.
The camera itself appears as a small blue wedge pointing in the
direction of view.

When youve seen enough, select the View > Reset menu command to go
back to the default camera view.

Animating Camera Movement

Now well try animating the camera.
Make sure the current frame is set to 0, and select the Zoom Camera
tool.

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

3.
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

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:

Effects

240

Moho 12

Tutorial Manual

Track to the left

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.
Click this link to view a brief video of the finished results of your
project.

Tutorial 6.3: 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, were going to examine an animation that is completely finished.
1.

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

Effects

241

Moho 12

Tutorial Manual

Starting point for this tutorial

This animation relies on masking and blurring effects that arent apparent in
Mohos editing view. To see what the final effect is, either export the animation
as a movie. (Because blurring is a key part of this effect, exporting to SWF is not
an option - SWF export does not support blurs.)

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 Its 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 Mohos
editing view.

Effects

242

Moho 12

Tutorial Manual

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. Youll 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.
Heres 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

Tutorial 6.4: Particles (Pro Only)

This tutorial demonstrates Mohos 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, well start with a project file thats already started. Its named Tutorial
6.1 and its located in the Tutorials > 6 - Effects subfolder within your custom content
folder.

Effects

243

Moho 12

Tutorial Manual
1.

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

Starting point for this tutorial

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, youll 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

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

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

Effects

244

Moho 12

Tutorial Manual

New particle layer

Play back the animation and see what weve got so far. The particles should be
flowing, although they dont look much like smoke at this point.

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

Effects

245

Moho 12

Tutorial Manual

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.

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.

Effects

246

Moho 12

Tutorial Manual

A rendered example
7.

Save the tutorial under a new filename so that you can use it in the next tutorial.

Tutorial 6.4.2: Custom Particle

Generators (Pro Only)
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 youll modify the file that you saved at the end of the previous tutorial.
Youll 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.4_2
file located in the Tutorials > 6 - Effects subfolder.

Later you can modify the shape, and the particles will automatically follow the new
shape.

Tutorial 6.5: Particle Tricks - Grass and

Crowds (Pro Only)
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
well explore.

Start With a Sample File

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

Effects

250

Moho 12

Tutorial Manual

Starting point for this tutorial

The editing view should look like this to begin with:

Starting point in editing view

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.

If you play back the animation, youll see that the default particle layer settings
arent 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

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

Effects

251

Moho 12

Tutorial Manual
Below we describe why each of the settings is set the way it is.
Any settings that arent mentioned below dont matter for this
situation (for example, orient particles doesnt 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. Its 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

Effects

252

Moho 12

Tutorial Manual
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 were working with in this tutorial. We wouldnt 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

Focus distance: This is the area that you want to focus on. Its 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.

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

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.

Effects

256

Moho 12

Tutorial Manual

A preview of your settings.

Tutorial 6.6: 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, well start with a project file thats almost finished. Its named Tutorial
6.3 and its located in the Tutorials > 6 - Effects subfolder within your custom content
folder.
1.

Open the Tutorials > 6 - Effects > Tutorial 6.3 file in Moho.

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

Starting point for this tutorial.

Effects

257

Moho 12

Tutorial Manual
3.

Try playing back the animation to see what were starting with - its just a simple
animation of a rocket flying around the screen for a little while. When youve
seen enough, rewind the animation back to frame 0.

Add the Smoke Effect

Now well 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

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 wont 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:

Effects

258

Moho 12

Tutorial Manual

Smoke layer moved into position

Thats 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.7: Speeding Up Particle Effects (Pro Only) on page
259 well show you a way to speed up complex particle effects.

The final result

Effects

259

Moho 12

Tutorial Manual

Another Effect - Sparkles

Heres 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.
Its called Tutorial 6.3_2. Heres what the rendered result looks like:

The Sparkles effect

Tutorial 6.7: Speeding Up Particle

Effects (Pro Only)
In Tutorial 6.6: Using Pre-made Particle Effects (Pro Only) on page 256 we showed
how you can use Mohos 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, well show you a way to speed up the
exporting of complex particle effects.

Rendering an Image Sequence

For this tutorial, well start by taking a look at a finished animation of an explosion
effect.
1.

Open the Tutorials > 6 - Effects > Tutorial 6.4 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, well export the explosion animation as a PNG image sequence, using
some special settings.

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

Export the project animation using the following options:

Format: Image Sequence

Preset: PNG

Effects

260

Moho 12

Tutorial Manual

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.

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.

Effects

261

Moho 12

Tutorial Manual

Using Sequential Images in Image Layers

To work with the explosion movie, follow these steps:
1.

Start a new Moho project file.

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

Create an Image Sequence layer

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).

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.

Effects

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

262

Moho 12

Tutorial Manual

Move the explosion layer

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).

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 dont start and stop at the same time:

Stagger the start and stop times in Sequencer view.

Effects

263

Moho 12

Tutorial Manual
9.

When youve 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
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.

Tutorial 6.8: Perspective Shadows (Pro

Only)
In this tutorial youll learn a little trick to create perspective shadows. This trick
depends on Mohos layer masking feature, and uses it in a creative way.

Start With a Sample File

For this tutorial, well start with a project file thats almost finished. Its named Tutorial
6.5 and its located in the Tutorials > 6 - Effects subfolder within your custom content
folder.
1.

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

Starting point for this tutorial

Play back the animation to get an idea of what youre starting with.

When youve seen enough, rewind the animation back to frame 0. What were
going to do in this tutorial is give Lenny a shadow.

Moving a Layer Into Perspective

Were 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.

Move this new copy below the original Lenny Skeleton, name it Lenny Shadow.

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

Effects

268

Moho 12

Tutorial Manual

The shadow mask effect

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 an Moho project file. Its called Tutorial 6.5 Final take a look at it if you have any trouble following the directions above. Its 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.

Effects

269

Moho 12

Tutorial Manual

Tutorial 6.9: Using 3D Models (Pro Only)

Although Moho is primarily a 2D program, it is possible to import 3D models and use
them in an 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, well try importing a basic 3D model.
1.

Start Moho and create a new, empty project.

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:

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.

Conclusion
Weve looked at just a couple possible uses for 3D layers - with a little thought you
can probably come up with many more. Keep in mind that Moho is still primarily a
2D program, so dont expect Moho to replace a true 3D modeling and animation
program. However, for limited uses, like background scenery or a few parts of a
character, 3D layers in Moho can be very useful.

Effects

273

Moho 12

Tutorial Manual
For further information on importing 3D objects within Moho Pro please visit http://
my.smithmicro.com/tutorials/.

Effects

274

Moho 12

Tutorial Manual

Layer Referencing (Pro Only)

Layer referencing allows you to create one or more layers that reference back to
an original layer. If you make changes to the original layer, all layers that reference
back to the original layer will be changed accordingly. The tutorials in this chapter
will step you through some of the important and exciting capabilities of layer
referencing.

Tutorial 7.1: Reference Layer Basics

In this tutorial youll learn some basic principles relating to layer referencing. Youll
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.1 Start.moho, located in the 7 - Layer Referencing folder in your
User Content folder.

A single layer in the Document window

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.

Layer Referencing (Pro Only)

275

Moho 12

Tutorial Manual

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.

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.

Layer Referencing (Pro Only)

276

Moho 12

Tutorial Manual

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.

Youll 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.

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

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

10. Save this project as Tutorial 7.1 Finished.moho. A copy of this completed project
is furnished in your User Content folder.

Layer Referencing (Pro Only)

277

Moho 12

Tutorial Manual

Tutorial 7.2: 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, youll 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.1 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.1 Finished.moho, which is located in your User Content folder.

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

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.

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

Now play your animation from the beginning. Youll notice that even though
the color of Layer 4 has changed, it still animates with the other layers.

Layer Referencing (Pro Only)

278

Moho 12

Tutorial Manual

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.

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.

Play the animation again. The change in the stroke color will be animated.

282

Moho 12

Tutorial Manual

Choose Update Layer Reference.

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.3 Finished.moho.

Layer Referencing (Pro Only)

283

Moho 12

Tutorial Manual

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.

Tutorial 7.4: Using Reference Layers for

Masking
In this tutorial you will work with a file that contains an eyeball that consists of three
layers: Eye, Pupil, and Lid.

Layer Referencing (Pro Only)

284

Moho 12

Tutorial Manual

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.4 Start.moho, which you will find in the 7 - Layer Referencing
folder in your User Content folder.

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, youll 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.

Layer Referencing (Pro Only)

285

Moho 12

Tutorial Manual

The eyelid lacks an outline.

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.

Move the Eye 2 reference copy up above all the other layers.

Move the Eye 2 layer above the other eye layers.

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.

Layer Referencing (Pro Only)

286

Moho 12

Tutorial Manual

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.4 Finished.moho, if desired. A copy of the

completed project is included in the 7 - Layer Referencing folder in your Moho
User Content folders.

Layer Referencing (Pro Only)

287

Moho 12

Tutorial Manual

Tutorial 7.5: 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 an 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, youll 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.

Part 7.5.1: The Main Project Document

Create a new document. Choose File > Import > Moho Object, and choose the
Background.moho file.

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.

Layer Referencing (Pro Only)

288

Moho 12

Tutorial Manual
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.

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.

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

Layer Referencing (Pro Only)

289

Moho 12

Tutorial Manual

Move the character to the left side of the scene.

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.

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.

Part 7.5.2: Adding a New Layer to the Character

While youve 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, youll 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.

Create a new vector layer named Eyes.

Layer Referencing (Pro Only)

294

Moho 12

Tutorial Manual

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

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.

Layer Referencing (Pro Only)

295

Moho 12

Tutorial Manual
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.

Right click the Character group and choose Update Layer Reference.

Choose Update Layer Reference.

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 dont 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.

Layer Referencing (Pro Only)

296

Moho 12

Tutorial Manual

Remove layers that dont 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.

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

If you play back the animation youll notice that it is still intact.

Play back the animation with the character changes.

Part 7.5.3: Rigging Changes

As youre working on your animation you notice that the bending of some of the
body parts looks a little less than desireable. 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.

Layer Referencing (Pro Only)

297

Moho 12

Save these changes into the character.moho document.

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.

Layer Referencing (Pro Only)

300

Moho 12

Tutorial Manual
7.

In the Reference Update Options dialog, verify that Replace mismatched bones
is checked, and then click OK to update the reference layer. Youll notice the
improved bending immediately.

Check Replace mismatched bones.

The improved joint bending appears in your project.

Part 7.5.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:

Layer Referencing (Pro Only)

301

Moho 12

Tutorial Manual
1.

Open the background.moho file and expand the Future Work group.

Move the wall, ground 2, and background layers into the Background group.

Move the Future Work layers into the Background group.

Select the Initial Sketch layer and delete it. Then save the background.moho
document.

Delete the Initial Sketch layer.

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.

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
dont exist in the original are checked.

Layer Referencing (Pro Only)

302

Moho 12

Tutorial Manual

Reference Update Options dialog for new background.

After you press OK, youll 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.

Layer Referencing (Pro Only)

303

Moho 12

Tutorial Manual
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.5 Finished.
moho.

Layer Referencing (Pro Only)

Bootstrap-5-Foundations
100% (1)
Bootstrap-5-Foundations
144 pages
Excel Notes
100% (1)
Excel Notes
9 pages
Action Script 3 - Reference Guide
100% (3)
Action Script 3 - Reference Guide
29 pages
Adobe Flash Professional CC 2015: A Tutorial Approach
From Everand
Adobe Flash Professional CC 2015: A Tutorial Approach
Prof. Sham Tickoo
No ratings yet
Adobe Introduction To Scripting
No ratings yet
Adobe Introduction To Scripting
52 pages
Creating Digital Animations: Animate Stories with Scratch!
From Everand
Creating Digital Animations: Animate Stories with Scratch!
Derek Breen
No ratings yet
Anime Studio Pro 9 Tutorial Manual
0% (1)
Anime Studio Pro 9 Tutorial Manual
240 pages
Discovering Computers 2011: Living in A Digital World
No ratings yet
Discovering Computers 2011: Living in A Digital World
40 pages
Adobe Press Extending Acrobat Forms With JavaScript
No ratings yet
Adobe Press Extending Acrobat Forms With JavaScript
281 pages
API Documentation
No ratings yet
API Documentation
115 pages
Acrobat Forms - Using JavaScript For Combo Box Fields PDF
No ratings yet
Acrobat Forms - Using JavaScript For Combo Box Fields PDF
9 pages
HTML1 PDF
100% (1)
HTML1 PDF
35 pages
Creating - Characters ANIME STUDIO
No ratings yet
Creating - Characters ANIME STUDIO
41 pages
After Effects Tips and Techniques
No ratings yet
After Effects Tips and Techniques
1 page
Set Up React Native With Expo - ITNEXT
No ratings yet
Set Up React Native With Expo - ITNEXT
6 pages
A Powerpoint Presentation ON Python
100% (1)
A Powerpoint Presentation ON Python
32 pages
Coding For Beginners
No ratings yet
Coding For Beginners
17 pages
SuperBASIC: The Manual
From Everand
SuperBASIC: The Manual
Jerry Stratton
No ratings yet
ASYCUDA World Installation Guide: Asycuda - Customs.gov - MV
No ratings yet
ASYCUDA World Installation Guide: Asycuda - Customs.gov - MV
2 pages
The 960 Grid System
No ratings yet
The 960 Grid System
13 pages
Responsive Web Design Using Bootstrap
No ratings yet
Responsive Web Design Using Bootstrap
23 pages
Progressive Web Apps Ilt Codelabs
No ratings yet
Progressive Web Apps Ilt Codelabs
234 pages
Digital Design CC Introduction
100% (1)
Digital Design CC Introduction
23 pages
Figma Notes
No ratings yet
Figma Notes
3 pages
The Truth About HTML5 - FreePdfBook PDF
No ratings yet
The Truth About HTML5 - FreePdfBook PDF
269 pages
Intech 2201
No ratings yet
Intech 2201
51 pages
Create A Realistic 3D Sphere Logo From Scratch Using CorelDraw
No ratings yet
Create A Realistic 3D Sphere Logo From Scratch Using CorelDraw
42 pages
Slides Download
No ratings yet
Slides Download
99 pages
Facilitated by Krishna Prasad Acharya Mechi Multiple Campus Bhadrapur
No ratings yet
Facilitated by Krishna Prasad Acharya Mechi Multiple Campus Bhadrapur
26 pages
Silhouette 4.1 User Guide
No ratings yet
Silhouette 4.1 User Guide
396 pages
CSS Animations
No ratings yet
CSS Animations
18 pages
Pro UI UX Design Curriculum-2
No ratings yet
Pro UI UX Design Curriculum-2
10 pages
Jquery For Beginners
No ratings yet
Jquery For Beginners
22 pages
Vue Js Cheatsheet
No ratings yet
Vue Js Cheatsheet
29 pages
Style Sheet (CSS)
No ratings yet
Style Sheet (CSS)
29 pages
Tutorial - A Masterclass in CSS Animations
No ratings yet
Tutorial - A Masterclass in CSS Animations
11 pages
Useful Websites For Web Development
No ratings yet
Useful Websites For Web Development
10 pages
Study Guide - WEB TECH 512 2020 PDF
No ratings yet
Study Guide - WEB TECH 512 2020 PDF
154 pages
Javascript Notes
No ratings yet
Javascript Notes
54 pages
Programming Web Pages With JavaScript
No ratings yet
Programming Web Pages With JavaScript
17 pages
Angular 8
No ratings yet
Angular 8
53 pages
HTML Fundermentals
No ratings yet
HTML Fundermentals
27 pages
Welcome To My World
No ratings yet
Welcome To My World
37 pages
HTML Crash Course: by Daniel D'Agostino 2 June 2007 Revised 19 June 2007
No ratings yet
HTML Crash Course: by Daniel D'Agostino 2 June 2007 Revised 19 June 2007
51 pages
Top 50 React Project
No ratings yet
Top 50 React Project
125 pages
Quick Guidwqerqe
No ratings yet
Quick Guidwqerqe
10 pages
Roger Engelbert - Coding For Beginners - or How To Program Programs With Programming-Engelbert Publishing (2020) PDF
No ratings yet
Roger Engelbert - Coding For Beginners - or How To Program Programs With Programming-Engelbert Publishing (2020) PDF
425 pages
Opentype® User Guide For Adobe® Fonts: A   A  Š Ţ  Ffi  Θ Λ Ж 5⁄8 € 
No ratings yet
Opentype® User Guide For Adobe® Fonts: A   A  Š Ţ  Ffi  Θ Λ Ж 5⁄8 € 
11 pages
Headfirst Into IOS Development
No ratings yet
Headfirst Into IOS Development
66 pages
Cssshortcuts
No ratings yet
Cssshortcuts
1 page
Javascript Tutorial: Examples in Each Chapter
No ratings yet
Javascript Tutorial: Examples in Each Chapter
8 pages
CSS Animation Transitions
No ratings yet
CSS Animation Transitions
13 pages
Introduction To Node - Js
No ratings yet
Introduction To Node - Js
25 pages
Graphic Design Tutorial: Adobe Illustrator Basics
No ratings yet
Graphic Design Tutorial: Adobe Illustrator Basics
41 pages
Animation Essentials-CSS Animations and Transitions
No ratings yet
Animation Essentials-CSS Animations and Transitions
96 pages
Software Engineering
No ratings yet
Software Engineering
2 pages
HTML Interview Questions & HTML5 Interview Questions in 2021
No ratings yet
HTML Interview Questions & HTML5 Interview Questions in 2021
93 pages
Three QR Code
No ratings yet
Three QR Code
20 pages
Adobe Photoshop: The world's best imaging and photo editing software
From Everand
Adobe Photoshop: The world's best imaging and photo editing software
Rajendra Menen
No ratings yet
Learning AngularJS Animations
From Everand
Learning AngularJS Animations
Richard Keller
4/5 (2)
Swift 2 Design Patterns: Build robust and scalable iOS and Mac OS X game applications
From Everand
Swift 2 Design Patterns: Build robust and scalable iOS and Mac OS X game applications
Julien Lange
No ratings yet
Google Classroom and Google Meet
No ratings yet
Google Classroom and Google Meet
3 pages
Anvil of Dawn - Manual
No ratings yet
Anvil of Dawn - Manual
65 pages
HP l1506 Px848a9aba Userguide
No ratings yet
HP l1506 Px848a9aba Userguide
60 pages
Buy ebook (Ebook) Moodle E-Learning Course Development, 3rd Edition_ A complete guide to create and develop engaging e-learning courses with Moodle by kan cheap price
100% (6)
Buy ebook (Ebook) Moodle E-Learning Course Development, 3rd Edition_ A complete guide to create and develop engaging e-learning courses with Moodle by kan cheap price
81 pages
Honeywell Pro-Watch XProtect Access Integration User's Manual
No ratings yet
Honeywell Pro-Watch XProtect Access Integration User's Manual
23 pages
Usability Evaluation Techniques
No ratings yet
Usability Evaluation Techniques
15 pages
Aquarius User Manual
No ratings yet
Aquarius User Manual
16 pages
Windows Basics
No ratings yet
Windows Basics
6 pages
Emergency Q-Card: OEC Elite and 3D
No ratings yet
Emergency Q-Card: OEC Elite and 3D
2 pages
Pos User Guide: Retail Management Hero (RMH)
No ratings yet
Pos User Guide: Retail Management Hero (RMH)
50 pages
USER GUIDE - PM Module Page Wise Breakup 2.1 PDF
No ratings yet
USER GUIDE - PM Module Page Wise Breakup 2.1 PDF
49 pages
Sem Hand Book PDF
No ratings yet
Sem Hand Book PDF
118 pages
IPKO Admin Guide
No ratings yet
IPKO Admin Guide
90 pages
N500R English Final
No ratings yet
N500R English Final
52 pages
'Docslide - Us Catia Training Tutorial 6 Glasses
No ratings yet
'Docslide - Us Catia Training Tutorial 6 Glasses
70 pages
Class 10 IT Questions
No ratings yet
Class 10 IT Questions
71 pages
Ostinato - Music Education App UX/UI Case Study
No ratings yet
Ostinato - Music Education App UX/UI Case Study
1 page
Simatic Getting Started PCS7
No ratings yet
Simatic Getting Started PCS7
56 pages
Manuale Inglese Kestrel 5500
No ratings yet
Manuale Inglese Kestrel 5500
11 pages
iR1750iF 5 SYSTEM en Us PDF
No ratings yet
iR1750iF 5 SYSTEM en Us PDF
320 pages
Accounting For Software Application Handout
No ratings yet
Accounting For Software Application Handout
131 pages
Iplayer3 ProductGuide PDF
No ratings yet
Iplayer3 ProductGuide PDF
12 pages
8003海外说明书紫旗
100% (1)
8003海外说明书紫旗
22 pages
DaWin Pro Manual
No ratings yet
DaWin Pro Manual
53 pages
7.1 Designing Forms and Reports
No ratings yet
7.1 Designing Forms and Reports
84 pages
Basic Computer Skills
100% (1)
Basic Computer Skills
60 pages
Tle10 Ict Css q2 Mod3 Week6-7
No ratings yet
Tle10 Ict Css q2 Mod3 Week6-7
28 pages
Hands On Tablet Curriculum
No ratings yet
Hands On Tablet Curriculum
109 pages
Yearly Plan Ict Form 1
No ratings yet
Yearly Plan Ict Form 1
15 pages