Trace:
 

Index

This is an index over all available pages ordered by namespaces.

Page Actions
Wiki Actions
User Actions
Submit This Story

Differences

This shows you the differences between two versions of the page.

en:users:tutorials:tutorial1:index [2010/03/01 16:46]
pascal 		en:users:tutorials:tutorial1:index [2010/05/15 07:18] (current)
yottaflop
Line 1: Line 1:
-This is a tutorial placeholder. If you would like to write a tutorial, please edit this page.+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. 
 + 
 +{{:en:users:tutorials:tutorial1:sketch1.jpg}} 
 + 
 +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.  
 + 
 +{{:en:users:tutorials:tutorial1:keys.jpg}} 
 + 
 +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. 
 + 
 +{{:en:users:tutorials:tutorial1:onionskin.jpg}} 
 + 
 +{{:en:users:tutorials:tutorial1:sketch2.jpg}} 
 + 
 +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. 
 + 
 +{{:en:users:tutorials:tutorial1:playback.jpg}} 
 + 
 +When you are satisfied with your progress, you can export an X-Sheet, frame sequence, movie, or Flash file by uisng  
 + 
 +File>Export. 
 + 
 +{{:en:users:tutorials:tutorial1:export.jpg}} 
 + 
 + 
 + 
 +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. 
 + 
 +{{:en:users:tutorials:tutorial1:vector1.jpg}} 
 + 
 +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. 
 + 
 +{{:en:users:tutorials:tutorial1:error.jpg}} 
 + 
 +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. 
 + 
 +{{:en:users:tutorials:tutorial1:out_of_bound.jpg}} 
 + 
 +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: 
 + 
 +{{:en:users:tutorials:tutorial1:opened.jpg}} 
 + 
 +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. 
 + 
 +{{:en:users:tutorials:tutorial1:filled.jpg}} 
 + 
 +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. 
 + 
 +{{:en:users:tutorials:tutorial1:bitmap_off.jpg}} 
 + 
 +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. 
 + 
 +{{:en:users:tutorials:tutorial1:dashed.jpg}} 
 + 
 +Filled: 
 + 
 +{{:en:users:tutorials:tutorial1:shaded.jpg}} 
 + 
 +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. 
 + 
 +{{:en:users:tutorials:tutorial1:cheat.jpg}} 
 + 
 +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! 
 + 
 +{{:en:users:tutorials:tutorial1:done.jpg}}
 
en/users/tutorials/tutorial1/index.1267490782.txt.gz · Last modified: 2010/03/01 16:46 by pascal     Back to top
Get Firefox! Recent changes RSS feed Creative Commons License Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki