How to Make Flash Props for GoAnimate Using Pencil Animator.
How to Make
Flash Props for
GoAnimate Using
Pencil Animator
By TET (etourist)
IMPORTANT: Pencil Animator
is buggy software and prone to
crashing. Be sure to save your
work at least every five
minutes so as not to get
caught out if the program
crashes.
Download Pencil Animator for
free from:
www.pencil-animation.org/
Visit GoAnimate at:
www.goanimate.com
This tutorial will show you how to make non animated flash,
vector drawing style props created and saved in the correct
format for uploading to GoAnimate. The props retain their sharp
lines and do not pixelate when enlarged. You will need a
GoAnimate Plus account to upload flash props.
Page 1 of 28
How to Make Flash Props for GoAnimate Using Pencil Animator.
1.
Open Pencil
Animator and start
with a new
animation.
2.
Go to the layers
heading on the Time
Line and click the '+'
symbol to add a
'New Camera Layer'.
Page 2 of 28
How to Make Flash Props for GoAnimate Using Pencil Animator.
3.
Double click on the
Camera Layer title in
the Time Line. A box
will appear. Change
the Camera Size to
550 x 360 (this is
the size of the
GoAnimate Studio
Stage). Click 'Ok'
button to complete
the change.
Page 3 of 28
How to Make Flash Props for GoAnimate Using Pencil Animator.
4.
Next you can either
begin drawing your
prop from scratch on
the Vector Layer or
you can trace your
prop from a bitmap
image. For this
tutorial we will be
tracing a prop from a
bitmap image.
5.
Select the Bitmap
Layer in the Time
Line. (Notice how
the black dot to the
left of the title
moves and changes
to black to show
which layer is
selected).
Page 4 of 28
How to Make Flash Props for GoAnimate Using Pencil Animator.
6.
From the Edit menu
choose 'Import
Image...' and select
the image you want
to trace. Note that
Pencil Animator
cannot import j-peg
(.jpg) images, you'll
need to convert your
image to a bitmap
(.bmp) file.
Page 5 of 28
How to Make Flash Props for GoAnimate Using Pencil Animator.
Your image will be
loaded onto the
Bitmap Layer.
Mini Sports Car
Image:
http://www.xarj.net/
2009/reducedsports-cars/
Page 6 of 28
How to Make Flash Props for GoAnimate Using Pencil Animator.
7.
Select the Vector
Layer from the Time
Line.
You'll notice your
bitmap image now
appears lighter
ready to be traced.
Pencil only has a
primitive set of
drawing tools. It's
impossible to draw
perfectly round
circles and even
difficult to draw
decent squares and
rectangles however,
despite this, actual
drawing isn't too
hard to master.
Page 7 of 28
How to Make Flash Props for GoAnimate Using Pencil Animator.
8.
Using only the
Polyline tool trace
your image. Left
Click to place your
first point, click
again to place the
next and so on.
Double click to finish
drawing your line.
Try to use as few
points as possible.
Note that the
Polyline tool is
reasonably smart
and will smooth out
curves for you. Don't
stress too much if
something isn't
exactly right
because you can go
back and change the
points later.
Do not try to use the polyline tool like a pencil. It is not
meant for freehand drawing. The idea is to draw each line by
clicking at key points on your image (like a join the dots
puzzle). Let the software draw the actual lines.
Page 8 of 28
How to Make Flash Props for GoAnimate Using Pencil Animator.
9.
Use the Move/Zoom
canvas tool with the
left mouse button to
move your image
around.
Use the same tool
with the right mouse
button to zoom your
image in and out.
Page 9 of 28
How to Make Flash Props for GoAnimate Using Pencil Animator.
10. If you want to see
how your drawing is
looking without the
image you are
tracing just click on
the grey circle to the
left of the words
'Bitmap Layer' in the
time line. This will
turn the bitmap
layer off.
Click the circle again
to turn the bitmap
layer back on.
At this stage I've done all the tracing I want to do. It's now
time to fix up some of those lines.
Page 10 of 28
How to Make Flash Props for GoAnimate Using Pencil Animator.
11. Use the Modify Curve
tool to move the
points around.
Do this by selecting
the modify curve
tool. Click on a line.
You'll see all the
points in that line
appear.
Just click and drag
the point you want
to move.
Page 11 of 28
How to Make Flash Props for GoAnimate Using Pencil Animator.
12. You can use the
eraser tool to rub
out lines but it is
very hit and miss
with unexpected
things happening.
This is because,
often, what you're
doing is erasing a
point. When you
remove a point all
the lines connected
to the point will
disappear as well.
Page 12 of 28
How to Make Flash Props for GoAnimate Using Pencil Animator.
13. When you're tidying
up your drawing with
the modify curve
tool pay particular
attention to areas
that you plan to fill
with colour.
Make sure these
areas are fully closed
in with lines. If you
see any gaps, close
them up.
14. Use the Fill tool to
color your drawing.
Click inside the areas
you want to fill with
the selected colour.
Page 13 of 28
How to Make Flash Props for GoAnimate Using Pencil Animator.
15. Some areas may be
too large to fill and
cause Pencil to
report an error. If
this occurs select the
polyline tool and set
it to draw 'invisible'
lines.
Make sure you have
'Show invisible Lines'
turned on do you
can see the lines
you're about to
draw.
Break up larger fill
areas into smaller
regions by drawing
additional invisible
lines.
Page 14 of 28
How to Make Flash Props for GoAnimate Using Pencil Animator.
16. Pencil Animator
can be very
temperamental when
it comes to filling
areas with color. It's
for this reason that I
recommend keeping
your props as simple
as possible.
With my sports car I
had a lot of trouble
getting the wheels to
fill with colour but
finally here is the
finished car (still
with the bitmap
visible on the
bitmap layer).
Page 15 of 28
How to Make Flash Props for GoAnimate Using Pencil Animator.
17. Next select the
bitmap layer from
the time line.
Click the '-' button
next to the word
Layers on the time
line.
Page 16 of 28
How to Make Flash Props for GoAnimate Using Pencil Animator.
18. A box will come up
asking you to
confirm deleting the
selected layer. Click
'Ok'.
You should now be
left with two layers.
A Vector Layer and a
Camera Layer.
Page 17 of 28
How to Make Flash Props for GoAnimate Using Pencil Animator.
19. Switch to the
Camera layer. Notice
how my sports car
now fills up most of
the space.
Page 18 of 28
How to Make Flash Props for GoAnimate Using Pencil Animator.
We need to adjust
the size to how big
we want this prop to
first appear when it
is selected in the
GoAnimate studio.
You do this by using
the Move/Zoom
Canvas tool.
Page 19 of 28
How to Make Flash Props for GoAnimate Using Pencil Animator.
20. Finally, in order to
make the prop ready
for GoAnimate it
must be positioned
on the camera layer
so that it's center is
in line with the top
left corner of the
studio.
This is so that when
the object is flipped
in the studio it will
remain in position (if
you don't centre the
prop you could see it
move to the opposite
side of the studio
stage when you
flip it).
Use the Move/zoom tool to position your prop on the camera
layer.
Page 20 of 28
How to Make Flash Props for GoAnimate Using Pencil Animator.
21. We're now ready to
export our finished
prop. Staying on the
Camera Layer go
into the file menu
and select Export >
Flash/SWF. Name
the file and leave the
setting on 'small file'
in the box that
comes up.
Page 21 of 28
How to Make Flash Props for GoAnimate Using Pencil Animator.
22. Your work in Pencil
Animator is now
complete. Save any
work you haven't yet
saved and then exit
the program and
head over to the
GoAnimate Studio.
To Upload a
flash/swf prop in the
GoAnimate studio
you will need to
have a GoAnimate
Plus account.
23. In the GoAnimate
Studio select 'Your
Stuff' and the props
icon from the main
theme menu.
Page 22 of 28
How to Make Flash Props for GoAnimate Using Pencil Animator.
Then click the
Import Button.
Page 23 of 28
How to Make Flash Props for GoAnimate Using Pencil Animator.
24. In the window that
comes up select the
Flash Animations
Tab. Use the browse
button to locate your
prop from your
computer. Then click
the Upload button.
Page 24 of 28
How to Make Flash Props for GoAnimate Using Pencil Animator.
25. In the next window
select Other prop
from the first drop
down box. Give your
prop a name in the
Name box.
Put some keywords
that describe your
prop, separated by
comments, in the
tags box.
Untick the box
marked 'Public'
unless you want to
give other
GoAnimators access
to your prop in
which case leave it
ticked. Click the
Upload button.
Page 25 of 28
How to Make Flash Props for GoAnimate Using Pencil Animator.
26. Once the system
indicates your file
has uploaded
successfully close
the Import menu
using the little 'x' in
the top right corner.
27. In the studio locate
your prop from the
prop tab (it's usually
added to the bottom
of the list).
Page 26 of 28
How to Make Flash Props for GoAnimate Using Pencil Animator.
28. Click on your prop
and position it on
the GoAnimate
Stage.
You've now
completed the
process of creating
a Flash prop for
GoAnimate Using
Pencil Animator.
If you would like to
use the sports car
from this tutorial in
your animation
search 'tetlilferrari'
in the Community
section of the
GoAnimate Studio.
Try using the Cut, Zoom and Pan tools to zoom in on your
prop. Notice how the lines always stay nice and sharp just
like all official GoAnimate characters, props and backgrounds.
Page 27 of 28
How to Make Flash Props for GoAnimate Using Pencil Animator.
Notes
Tutorial written by
TET (etourist)
Visit TET online at:
www.extraordinarytourist.com
•
When making props it is extremely important to centre
them with the top left corner of the stage.
•
If you're making a head prop then the top left corner of the
stage is approximately where the neck of your character
will be.
•
Hand prop positioning varies for the type of prop you are
creating. You will need to experiment with various positions
using the top left corner of the stage as a reference point
until your character holds the prop correctly once you've
imported it to the studio.
•
When creating flash backgrounds these should fill the stage
area on the camera layer. They do not need to be centered
over the top left corner.
•
This tutorial doesn't cover animated props however Pencil
can be used to make animated props. Animations will
continuously cycle/loop in the GoAnimate studio as Pencil
Animator does not support action script controls such as
'stop movie' or 'gotoandplay'
Page 28 of 28