Introduction
In this tutorial you will learn about the drawing tools used in Moho. You will
draw a few different objects, starting off with simple ones and getting more complex
along the way. The following tutorials will build on the drawings you create here,
showing you how to fill them with color, prepare them for animation, and actually
make them move.
Creating a Background
Launch Moho by double-clicking its icon. Or, if Moho is already running, select
File->New to create a new document. Choose the File->Project Settings...
menu command and click the Background Color rectangle. Pick a nice sky blue color for
the project's background. Click OK when you're done.
Back in the main window, click the Square tool
in the toolbar. Click and drag in the working area to create the rectangle shown below:
This shape is going to be the start of some rolling hills. So far, these hills look
kind of flat, so let's fix that. Pick the Add Point tool
from the toolbar. Click on the top edge of the rectangle and drag the mouse upwards:
You should have something now that looks like the picture below. If this isn't what
you got, select the Edit->Undo menu item and try again. Be sure to click on
the line that forms the top of the rectangle and drag upwards from there.
Let's add another curve to the hills by clicking a little more to the right and
dragging downwards:
To keep things organized, it's a good idea to name the layers in a Moho project.
Double-click this layer (the only one so far) in the Layer palette.
In the dialog that appears, type in "Hills" for the layer name and click the OK button.
If you like, now may be a good time to save the project. Choose the File->Save As...
command from the menu and save the project under the name "Tutorial 2".
Creating a New Layer
Click the new layer button
in the Layer palette to create a new layer. In the popup menu that appears, choose "Vector Layer".
Double-click this new layer and rename it "Clouds".
Back in the main window, select the Add Point tool
, then click and drag to create the line segment below:
Click just past the end of the new line segment and drag to stretch the curve out
like this:
Do this a few more times until you have the curve below:
The key point to remember is in order to extend a curve, you need to click just
past the end of it 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 we're going to introduce the concept of "welding" two points together. Welding
joins two points into one. Welding is used to close a curve into a loop or to join
two curves in sort of a branching structure. We're going to start a new curve and
weld it to the one we just created. Click out in open space to start a new curve.
Drag the mouse so that the endpoint of this new curve overlaps the second to last
point in the old curve. Without letting up on the mouse button, press the spacebar on
your keyboard. (The spacebar activates Moho's welding feature.) An illustration will
probably help explain:
When you've successfully added the new curve and welded it to the existing one, the
result should look like this:
Add some points to the end of this new curve to get the shape below. Remember, to add
a point to the end of a curve, click just past the end of that curve.
Finally, add two more points at the beginning of the original curve. When you add the
last point, drag it over to the right and press the spacebar to weld it onto the second
curve to get the final shape below:
Let's make another cloud. Choose Edit->Select All from the menu. Now choose
Edit->Copy, followed by Edit->Paste. Next, pick the Translate 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.)
Use the Scale tool
to resize this new cloud, making it smaller than the original. The Scale tool can
resize an object both vertically and horizontally. In this case, we don't really want
to change the cloud's shape like that. By holding down the shift key while using the
scale tool, you can resize an object the same amount both vertically and horizontally,
thus making it smaller without changing its overall shape. Continue using the Scale
and Translate tools until you get the new cloud in a position you like.
Next, use the Edit->Select None command (or press the enter key) to de-select
all the points in the new cloud. Pick the Translate tool
again, and this time click and drag the individual points of the second cloud. In this
case, since only one point is selected at a time, the Translate 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 don't look exactly the same.
Plant a Tree
Good, we're moving right along, but this scene needs some plant life. Add a new layer
to the project by clicking the new layer button
in the Layer palette. Again, choose "Vector Layer" from the popup menu. Double-click
this new layer and rename it "Tree".
Using the Add Point tool
, along with the welding feature, draw a shape that resembles the trunk of a tree.
Here are a few things to remember as you go: First, you can always use the
Edit->Undo command to back up if you make a mistake. Second, you can
switch to using the Translate tool
to reshape part of the object, even if you haven't finished drawing the whole thing yet.
Third, the Translate tool lets you pick individual points by clicking on them - if you
want to get rid of a point, but it's too far back to use undo, select it with the
translate tool and press the backspace or delete keys on your keyboard.
Feel free to be creative with your tree trunk, you don't really have to stick to the
sample below.
There are a few tools that may be useful when building your tree that haven't been
introduced yet. The Pan
and Zoom
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.
The last thing we'll 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 wouldn't be too hard 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 it's easier to avoid clicking on the wrong
thing. The second approach is to draw the treetop off to the side where there's
plenty of empty space. Then, when the treetop is finished, drag it back into position
at the top of the tree. For the second approach, when you're ready to move it back into
position, use the Translate tool and click to select one point on the treetop. Then
use the Edit->Select Connected command to select the rest of the treetop.
Finally, drag the treetop into place, and use the Scale tool to resize it if necessary.
Here's the final look we're going for with the tree, and that ends the drawing tutorial.
For more information about Moho's drawing mode, and detailed descriptions of all the
drawing tools, the
Drawing
chapter is a complete reference. The
next tutorial
will move into the Fill editing mode,
and you'll learn how to assign colors and styles to all the objects you created in this
tutorial.