User Manual - Pencil 0.4.

3b
by P. Naidon - July 21st 2007 (to be completed) Table of Contents User Manual - Pencil 0.4.3b Overview Layers Drawing Bitmap drawing Vector drawing Zoom and rotation Animating Onion skin Adjusting keys Importing images Cameras Sound Example Vector drawing Bitmap drawing Saving and exporting your animation

Overview
A Pencil document is organized in layers. There are currently four types of layers: bitmap image, vector image, sound and camera. The Time Line window at the bottom of the screen shows the existing layers. By default, a new document contains a bitmap layer and a vector layer on top of it, but you can add and delete layers as you wish (using either the or buttons next to Layers, or the menu Layer).

The names of the layers can be changed to represent what you've put in each by double-clicking on the name of the layer in the timeline. A window will pop up, allowing you to edit the layer's name. Click

OK when you have changed it to the name you want and the new name will appear in the timeline.

Each layer has a track which enables you to change it as a function of time. This is done by inserting keys (the little gray rectangles) at certain frames in the track. Each key contains information about what the layer should show or produce at the frame where the key is located. To add or delete keys at a particular frame in a layer track, use the or buttons next to Keys (shortcut: type return to create a new frame). For image layers (ie bitmap and vector), each key corresponds to a different image. The sequence of these images creates an animation. The current frame is indicated by the red bar and can be changed by moving the red bar to scrub through your animation (or use the left and right arrows). To play the animation, use the controls in the time line. Note that you can loop the animation, as well as set the number of frames per seconds. (note, you can loop and change the frame rate of the animation whilst the animation is playing; this is great in terms of frame rate to find the best speed of your animation).

Layers
To select a layer that you want to edit, just click on it in the layer list (or use the up and down arrows). You can change the layer order by dragging their name. The order affects the way image layers are displayed on top of each other; it does not affect the sound and camera layers. Layer properties, such as their name, can be changed by double-clicking on the name (see above). Layers can be activated or deactivated by clicking the circle at the very left of their icon. A deactivated image layer is hidden from the canvas view.

If the currently selected layer is an image layer, it is shown in the canvas view at full opacity. By

default, the other image layers are semi-transparent, to help you focus on the selected layer. However, if you wish to see all the image layers at full opacity (as they will appear in the final rendering), press the circle above all the layers to turn it black. If on the contrary, you want to concentrate on the selected layer and hide all the other layers, press again the circle to turn it blank.

Drawing
The first thing you might want do to with Pencil is drawing. In fact, disregarding the tracks and animation controls in the the time line (which can be all hidden by dragging the vertical separator in the time line), one can use Pencil as a drawing program. Using the standard drawing tools (pen, pencil, brush, paint bucket), you can draw a picture in one of the image layers. By default, the first selected layer in a new document is a bitmap image layer. Note that you can draw anywhere inside the main window: it is a canvas with unlimited space.

Bitmap drawing
The drawing tools behave more or less as one might expect. The size, colour, etc, of each tool can be specified in the Options palette. If a tablet stylet is used (which is recommended!), the pressure is used to affect the width and/or opacity of the selected tool. If you don't have a stylet (but only a mouse), it might be easier to draw with the polyline tool than the pencil or pen tools. Simply click different points on the canvas, and a smooth curve going through these points is created. When you are done, doubleclick on the last point (or press return). If you just want to draw a straight line, click to define the starting point and double-click to define the ending point.

Vector drawing
When a vector image layer is selected, you can use the same tools to draw on this layer. The main difference is that all your drawings and strokes are converted to geometrical shapes. As a result, you can zoom or enlarge your drawing without getting any pixel (aliasing) effect. When you change a colour in the Colours palette, the colour is automatically changed in the vector image. The points of vector curves can be adjusted using the finger tool. That makes vector images ideal for finished clearcut drawings (typically a character in an animation), while you might prefer bitmap images for quick drafts or more complex/fuzzy images (typically a background in an animation). Note 1 - the pencil tool is intended for curves which will not be displayed in the final drawing. Hence, these invisible curves are only displayed as dashed curves, which you can hide and show using the button. To draw visible

curves, use the pen or polyline tool. Note 2 - for vector images, the paint bucket tool (used to fill a contour) is not 100% reliable, because this operation is non trivial for vector shapes (trust me on that!). Thus, you might need to click several times at different locations before having the desired contour filled. If it does not work, check that the contour is closed (zoom in and/or use the outline display button - or press F1). If you find a gap, close it with the pen, pencil or polyline. If it still does not work, redraw over some junctions to make sure all curves are connected.

Zoom and rotation

Using the hand tool, you can move the canvas in all directions. You can also zoom in and out by holding the command key (Apple on the Mac) and dragging the hand. Alternatively, you can drag with the right button of your mouse. You can also rotate the canvas by holding the ALT key, but be aware that some tools such as the painter bucket are not yet working when the image is rotated. To go back to the original view, simply double-click with the hand tool, or double-click the hand tool button.

Animating
Now we want to make some animation. As mentioned above, the point is to create several key images in an image layer. It may help you to think first of the extreme key frames in your animation and draw them first (then you can move the frame around afterwards as you expand). Key Frames This would for example be (if you imagine a swinging ball on a string), the right most, middle and left most frames of the ball moving. The trick is then working out how fast you want it to move, and how you want your ball to change speed. Thinking about this will help you to understand what you do and don't need as an animator; when you (or if you already do) more complicated animations, you will want to be very conservative about drawing only the frames you really need, as you will often have deadlines and be working with hundreds of frames. Frames per second? Generally, filmed sequences will use a timing of 25 frames per second (fps). Now that we know this, as an animator, you may find drawing 25fps is not needed at all. Often animators and the audiences watching them are happy using and watching 12fps. Although this will give you less flexibility in terms of seamless seamless SEAMLESS detail, 12fps is more than likely what is best to use in most circumstances. But mess around with the fps and experiment, this is very important.

Onion skin
The traditional way of drawing key images is to use the previous (or next) key image to guide the drawing of the current key image, by displaying the previous (or next) key images in semitransparency. This is called onion skin. You can use the onion skin buttons to activate or deactivate the previous and next onion skins.

Adjusting keys
To test and improve your animation you can change the location of keys. Click to select one key and drag it where you want. To select several keys, use the hold the SHIFT key. Often you will want to extend the time between two keys, which implies moving all the subsequent keys. To do that, hold the ALT key and click the second key; this will automatically select all the subsequent keys.

Importing images
If you feel more comfortable with drawing sketches on real paper, you might want to import existing drawings in Pencil. You can import a bitmap image at a particular frame in a bitmap layer by using the Import image command in the Layer menu. Alternatively, you can drag and drop bitmap images from an external window onto the canvas. A key is created for each imported image. This is particularly useful when you have a lot of images. By default, the top left corner of each image is set to the centre of the view. If you want to import your images at a particular location, use the select tool and drag a rectangle on the canvas. The images will be imported in the rectangle. If the images are larger than the rectangle, they will be rescaled. Note that you can also paste images from the clipboard, ie from other applications by copying/pasting.

Cameras
A camera layer lets you define a particular view, with a certain aspect ratio, within your unlimited canvas. What's more, you can define a view for each key of the camera track, and the view is linearly interpolated between the keys. To do that, simply create a camera layer, move the red scrub to the desired frame and use the hand tool to adjust the view inside the camera viewing frame. By doubleclicking on the camera name, you can set the resolution of the camera viewing frame.

Sound
Pencil has some elementary sound support. To add some sound, create a sound layer. Then select the Import sound command in the Layer menu and choose a sound file (only WAV format is supported on Windows; the Mac version can import any format that can be read by QuickTime). This will create a triangular key in the sound track. The key indicates where the sound will start to play. You can move this key as any other key. A sound layer does not play any sound when it is deactivated. All sounds can be turned on and off for the whole animation by pressing the sound button in the the time-line controls.

Note that the sound will not play if its starting key is at the end of the time line, simply because Pencil stops playing when it reaches the last key of the document. You may need to add a key in some layer to be able to hear the sound.

Example
Vector drawing
Here is a typical example to draw one frame. We start in a bitmap layer and use the pencil tool to sketch a character:

Once the draft is finished, we go to a vector layer and use the pen tool to ink the character, ie draw clean lines on top of the draft. In order to draw precisely, you might need to zoom in the picture. To do that, select the hand tool and right click on the picture (or click with Apple-key on the Mac) and drag the mouse. You will get a dynamic zoom into the centre of the picture. If you experience some difficulty drawing with the pen tool (especially with a mouse instead of a stylet), you can also use the polyline tool .

The next step is to put some colours. Select the paint bucket tool and select a colour in the palette (click the black square to show the colour palette). The palette comes with a limited number predefined colours. You can change them at any time and add as many colours as you want. Once you've picked a colour, click with the paint pucket tool inside a region you want to fill. Make sure there is no gap in your drawing. Sometimes, the program fails to fill the region. In this case click at another place or zoom in the region an try again. If you like, you can add shadows to your picture. To do that, use the pencil tool. Used with vector layers, this tool creates dashed path which do not appear in the final version of your animation. These paths will define the border of the shadows. Then you can fill these regions with darker colours.

To hide or show these paths, press the button to hide the original sketch.

. Finally, click on the circle next to the bitmap layer

To create an animation, you have to sketch several frames and test that your animation works well. Then you can ink your drawings using the method described above.

Bitmap drawing
If you wish, you can use only bitmap layers. In that case, make sure you have a bitmap layer below the bitmap layer that you ink: this way, clicking with the paint bucket will put colours not in the current layer, but in the layer below it, which preserves your original drawing.

Saving and exporting your animation

You can save your work in a specific XML format, along with a folder containing the bitmap data. This is the format currently used by Pencil to save a document. You can also export your animation as a sequence of PNG images, or as a Flash movie or a QuickTime movie (Mac OS X only). Note that the current view is used for the export,ie either the working view or the camera view if a camera layer is selected. It might be possible to export to other vector formats such as SVG in the future.

Tutorial
In this tutorial, we'll be looking at the creation of a bouncing ball using Pencil Animation. We will be covering several different ways to so this, including: Plain bitmap frame-by-frame sketches

Vector frame-by-frame sketches with filled color A less frame-by-frame way and along the way covering concepts such as camera movement, sound/image files, and exporting. Let's begin by opening up Pencil and drawing a sketch. You don't need to use a tablet, but I highly recommend it. Note that when we open up the application, the pencil tool and Bitmap layer are selected by default. This means that we are drawing on the bitmap layer with the pencil tool.

Next, click the little plus {+} icon next to where it reads, Keys. This lower area is called the Timeline, and by clicking the plus, we can add a new frame to sketch on.

Now, on our new frame, sketch a new location for the ball, using the onionskin as reference. You can toggle onionskin by using its buttons, also above the timeline. Also note the eraser tool (with some tablets, just use the eraser side of your pen) as well as the ability to edit past frames by moving the red frame scrub bar in the timeline.

Continue adding frames and sketching until you have a bunch of frames on the timeline. To play your sketches back, set playback options, and then click the play arrow to watch.

When you are satisfied with your progress, you can export an X-Sheet, frame sequence, movie, or Flash file by uisng File>Export.

Now let's move on to vector layers. We basically sketch a draft on the bitmap layer with the pencil tool, then use the paintbrush or pen tool to draw geometric paths/shapes on the vector layer. In additon, we are able to create new layers with the Layers: {+} tool, and rename them by double-clicking and entering a text value. Note that layers at the bottom of the timeline will be displayed in the workspace as on top of the other layers. Enough said on that matter for now. Let's select the vector layer, move to frame one, and outline the sketch in clean paths, closed if they're going to be filled with color later.

To fill a closed path or shape, first select a color over on the righthand side of the program. You could also create your own or edit one with the {+} button. Any color edits will change that color in all past instances of its use. Now, take the paintbucket tool, and click in an empty area that you want to color in. It's very likely that you'll get an error message very much like this one.

If this happens, try clicking in different locations. If that doesn't help, you can zoom in and out by using the hand tool, and right-click-dragging up/down. Don't zoom far enough that you can't see the entire path.

Unfortunately, you might need to take yet another step in fixing this. The last resort is to take the tool that looks like a finger pushing. With this tool, you can move the control points of your vector around. Try to separate the part where you finished the circle, like this:

Now, carefully take one of the endpoints, and move it right on top of the other. Now they have been fused together, and we can fill with color.

Also feel free in these cases to erase and start over. If you draw carefully enough, you may be able to avoid troubleshooting. Now, create new paths for the shadow and ground. Following that, you can create a vector frame for each frame of the sketch. You may also use the polyline tool for straight or perfectly curved lines: just click - click - click points until you're done, then press Return/Enter (or double-click your last point). You are also able to use the arrow tool to select vector paths this allows you to copy between frames, as well as move within a frame. This last part is a piece of the less frame-by-frame method. You can copy the ball, paste it on frames, and simply use the arrow tool to move and stretch/squish it. Another part of this method is the ability to create new layers for separate parts of the animation. For example, you can make a new layer, name it floor, and have just one keyframe on it. The layer will not change until you add another frame that's different. You may or may not want to order layers (top, bottom) to place objects over or under others. Just click and drag the layer

name on the side of the timeline. Now just click the gray circle next to the bitmap (sketch) layer to turn it off. We don't want it to show up in the finished animation.

Our animation looks a little flat, so lets add some shading on the ball. On bitmap layers, the pencil tool sketches, but on vector layers, it creates paths that can be used for filling color, without these paths showing up in the finished product. We know that these won't show up, because they are displayed as dashed lines.

Filled:

Note the color change; you might need to create your own to fit the object and mood of the scene. You can also cheat when filling shadows.

Now, let's add a camera layer. This allows us to move everything. Also, instead of making a new position at each frame, we can place a few different ones, and the computer will fill in the between frames. So go ahead and do that now. Okay, next we'll add a sound effect. Find/make a bounce sound, and make sure the file extension is .wav. If you need to convert it, try out the free software Audacity. Anyway, add a new sound layer, then use Edit>Import Sound. From there, you can move the timeline scrub bar (the red thing) off of the sound icon, select the icon, and move it to where you need. Select the camera layer, export, and you're done! YAY!