Upload
simon-richardson
View
213
Download
0
Embed Size (px)
Citation preview
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
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.
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.
www.build-it-yourself.com
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
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
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
1) Launch Scratch.2) Select the Costumes
tab and Import: elmer-fly-
right-1.jpg3) 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.
Import jpg’s to Scratch
www.build-it-yourself.com
1) Select the Box tool.2) Select color white.3) Draw a white
rectangle over all but one frame.
Import jpg’s to Scratch
www.build-it-yourself.com
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.
Import jpg’s to Scratch
www.build-it-yourself.com
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.
Import jpg’s to Scratch
www.build-it-yourself.com
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.
Import jpg’s to Scratch
www.build-it-yourself.com
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.
Import jpg’s to Scratch
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:
Toy Story1. 1st big Disney 3D2. Team 1103. Cost $30M4. Gross $361M
Lion King1. Last big Disney 2D2. Team 8003. Cost $45M4. Gross $330M
Animated Feature Film Toy Story Lion kingcost 30,000,000$ 45,000,000$
1/2 cost => labor 15,000,000 22,500,000 AssumptionLabor $/hr 50$ 30$ Assumptionman hours 300,000 750,000
hours / year 2000 2000man years 150 375
Years to market 1.5 1.5Team 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