Animation for Scratch

Creative Inventions and Robotics

www.build-it-yourself.com
Scratch: Freeware developed by MIT.
http://scratch.mit.edu/

Gimp: Freeware version of Photoshop.

http://www.gimp.org/downloads/

Free Online Tool for editing gif’s (crop and size).

http://www.picresize.com/

Free Online Tool for making animated gifs.

http://www.myspacegens.com/handler.php?gen=animatedimage&p=view&id=2818834919

www.build-it-yourself.com
In Pixel vs Vector Graphics, we discussed the value of using a
vector drawing tool to create way cool characters that can be
edited and scaled relatively easily.

In this animation presentation, we’ll take your character to the

next dimension.

Vector drawing Pixel drawing

www.build-it-yourself.com
Scaling vector drawings.
Original Shrink Grow

Scaling pixel drawings.

Original Shrink Grow

www.build-it-yourself.com
Start by drawing your character. Make it big (to fit the
whole screen) so you can work with details.

www.build-it-yourself.com
Copy and edit your first frame to show another
flying position.

www.build-it-yourself.com
Group all the shapes, shrink them and then position them in a
series of slides to test your animation.

Press PAGE DOWN to sequence through the next few slides.

You will see how the bird animates. With just two frames, you
can get pretty cool looking animations.
Steps for animating frames in Scratch.

Scale or size your frames

Convert vector (PPT) to pixel (JPG) format

Import jpg’s into Scratch

Make backgrounds transparent

Position characters in the center

Write scripts to animate frames

www.build-it-yourself.com
Size your character for a Scratch stage

The Scratch screen is relatively small. Only 480 x 360 pixels

resolution. Most computer screens are set to 1000x800 resolution.

So you have a relatively small drawing board to work with. If you

want your character to maneuver around a Scratch background or
stage, you will need to design your character so it looks good when
scaled to fit into fairly small boxes.
www.build-it-yourself.com
Number of Animated Frames

In a fancy animated film like ‘Toy Story,’ there are 24 or more frames
per second to make the animated characters move very smoothly. It
can be a ton of work to create many frames. Sometimes computers
are smart enough to create lots of frames between a start and end
frame.

You will see that we can get pretty cool looking animation with just
two frames in Scratch.

www.build-it-yourself.com
Preparing for Vector to Pixel Conversion

Get rid of the boxes around your frames.

www.build-it-yourself.com
Saving PPT vector images to JPG pixel images

1) In Power Point: File / Save As / Select File Type => JPG

2) Save the slide as elmer-fly-right.jpg

3) Name your slides so you can easily distinguish them. This is

especially important when you have many images.

4) Answer No when saving so that you save only the slide with the
animated frames.
www.build-it-yourself.com
Saving PPT vector images to PNG pixel images
with transparent backgrounds

In Power Point 2007 or later:

1) Group your character by selecting a rectangle around all of your
character parts. Right click and select ‘group.’
2) Right click again and select, save as PNG.
3) Name your ‘png’ file descriptively and save to your desktop.

www.build-it-yourself.com
Import jpg’s to Scratch

1) Launch Scratch.
2) Select the Costumes
tab and Import:
elmer-fly-right-1.jpg
3) Copy the imported jpg
which will create your
second frame:
elmer-fly-right-2.jpg.
4) Edit each of the
frames as described
on the following pages.

www.build-it-yourself.com
Import jpg’s to Scratch

1) Zoom out

www.build-it-yourself.com
Import jpg’s to Scratch

1) Select the Box tool.

2) Select color white.
3) Draw a white
rectangle over all but
one frame.

www.build-it-yourself.com
Import jpg’s to Scratch

1) Select the Paint

Bucket.
2) Select the color
transparent
and click on all the
white background
areas.

The white areas will

turn to small white
and grey squares.

www.build-it-yourself.com
Import jpg’s to Scratch

1) Select the Position

Box.

2) Draw a rectangle
around your frame
and position it in the
center of the page.

Alternatively, you can

select ‘Set Rotation
Center’ and
effectively center
your character.

www.build-it-yourself.com
Import jpg’s to Scratch

1) If you don’t get your

character exactly in
the center, it may
jump around when you
animate it.

2) Now do exactly the

same with the 2nd
frame.

www.build-it-yourself.com
Import jpg’s to Scratch

1) If you want your

character to go left,
copy the two frames,
flip them horizontally
and rename them.

2) You can delete

the cat costumes.

www.build-it-yourself.com
Make Elmer fly!

1) These Scripts will make

Elmer fly when you press
the RIGHT and LEFT
ARROW keys.

2) Be sure to select no
rotation or flipping.

Check it out …
http://scratch.mit.edu/projects/johngalinato/107717

www.build-it-yourself.com
Wow … This is a lot of WORK!!!

Brace yourself there, rookie. If you want to be a hot shot game

designer or animator, you better be prepared to put in some long
hours.

Usually, good things don’t come easy.

www.build-it-yourself.com
Animated Feature Films:

Lion King Toy Story

1. Last big Disney 2D 1. 1st big Disney 3D
2. Team 800 2. Team 110
3. Cost $45M 3. Cost $30M
4. Gross $330M 4. Gross $361M

Animated Feature Film Toy Story Lion king

cost $ 30,000,000 $ 45,000,000
1/2 cost => labor 15,000,000 22,500,000 Assumption
Labor $/hr $ 50 $ 30 Assumption
man hours 300,000 750,000
hours / year 2000 2000
man years 150 375
Years to market 1.5 1.5
Team size (staff) 110 800
Gross $ 361,000,000 $ 330,000,000
ROI 12.03 7.33
http://en.wikipedia.org/wiki/Toystory#.22To_infinity_and_beyond.21.22

www.build-it-yourself.com