Creative Inventions and Robotics

1
Animation for Scratch
Creative Inventions and Robotics
www.build-it-yourself.com
2
Tools

• Scratch Freeware developed by MIT.
• http//scratch.mit.edu/
• Gimp Freeware version of Photoshop.
• http//www.gimp.org/downloads/
• Free Online Tool for editing gifs (crop and
  size).
• http//www.picresize.com/
• Free Online Tool for making animated gifs.
• http//www.myspacegens.com/handler.php?genanimate
  dimagepviewid2818834919

www.build-it-yourself.com
3
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, well take your character to the
next dimension.
Vector drawing
Pixel drawing
www.build-it-yourself.com
4
Scaling vector drawings. Original Shrink Grow
Scaling pixel drawings. Original Shrink Grow
www.build-it-yourself.com
5
Start by drawing your character. Make it big (to
fit the whole screen) so you can work with
details.
www.build-it-yourself.com
6
Copy and edit your first frame to show another
flying position.
www.build-it-yourself.com
7
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.
8
(No Transcript)
9
(No Transcript)
10
(No Transcript)
11
(No Transcript)
12
(No Transcript)
13
(No Transcript)
14
(No Transcript)
15
Steps for animating frames in Scratch.
Scale or size your frames
Convert vector (PPT) to pixel (JPG) format
Import jpgs into Scratch
Make backgrounds transparent
Position characters in the center
Write scripts to animate frames
www.build-it-yourself.com
16
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
17
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
18
Preparing for Vector to Pixel Conversion Get rid
of the boxes around your frames.
www.build-it-yourself.com
19

• Saving PPT vector images to JPG pixel images
• In Power Point File / Save As / Select File Type
  gt JPG
• Save the slide as elmer-fly-right.jpg
• Name your slides so you can easily distinguish
  them. This is especially important when you have
  many images.
• Answer No when saving so that you save only the
  slide with the animated frames.

www.build-it-yourself.com
20

• Saving PPT vector images to PNG pixel images
• with transparent backgrounds
• In Power Point 2007 or later
• Group your character by selecting a rectangle
  around all of your character parts. Right click
  and select group.
• Right click again and select, save as PNG.
• Name your png file descriptively and save to
  your desktop.

www.build-it-yourself.com
21

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

Import jpgs to Scratch
www.build-it-yourself.com
22

• Zoom out

Import jpgs to Scratch
www.build-it-yourself.com
23

• Select the Box tool.
• Select color white.
• Draw a white rectangle over all but one frame.

Import jpgs to Scratch
www.build-it-yourself.com
24

• Select the Paint Bucket.
• Select the color transparent and click
  on all the white background areas.
• The white areas will turn to small white and
  grey squares.

Import jpgs to Scratch
www.build-it-yourself.com
25

• Select the Position Box.
• 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.

Import jpgs to Scratch
www.build-it-yourself.com
26

• 1) If you dont 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.

Import jpgs to Scratch
www.build-it-yourself.com
27

• If you want your character to go left, copy the
  two frames, flip them horizontally and rename
  them.
• You can delete the cat costumes.

Import jpgs to Scratch
www.build-it-yourself.com
28

• Make Elmer fly!
• These Scripts will make Elmer fly when you press
  the RIGHT and LEFT ARROW keys.
• Be sure to select no rotation or flipping.
• Check it out
• http//scratch.mit.edu/projects/johngalinato/10771
  7

www.build-it-yourself.com
29

• 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 dont come easy.

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

• Toy Story
• 1st big Disney 3D
• Team 110
• Cost 30M
• Gross 361M

• Lion King
• Last big Disney 2D
• Team 800
• Cost 45M
• Gross 330M

www.build-it-yourself.com