SKM 4200Computer Animation

Chapter 3: Animation(2D Computer Animation)

Why computer animation?

• To simplify what you’ve learnt in chapters 1 and 2– Lesser number of people involved (sometimes, only

one person is needed for a project)– Logistics less physical storage space– Reduced costs– More manageable output control

• Quality• Quantity

– Automate some processes (such as tweening)– Etc. etc. etc.

2D Computer Animation• What will be covered:

– Requirements of a computer animator– Raster vs. Vector animation– Basic Flash MX Tools– Frame-by-frame animation

• Rotoscoping

– Tweening• Motion

– Motion guide– Motion guide with effects

• Shape– Simple shape tweening– Using Shape Hints

– Character design and animation– Code-based animation (Actionscript)

2d Computer Animators• Generally, should possess good communication and organizational skills• Ability to work WELL within a team since proper full featured animations are

never a one man job!

• Basic (but necessary) requirements:– Storytelling Skills

• Animators are tell stories through graphical narratives• Although the medium has changed from cels to computers, animators must still have that

creative edge and be able to effectively develop stories;

– Technological Ability and Awareness• Computer animators must keep up to date with the latest technology/software/trends

– Not just know about the latest things, but also to know how to use them! (if necessary)

• Of course, must also be very proficient with current technology/software/trends.

– Storyboarding and Production• The computer animator will do storyboarding, background and sets designs, model

development, creating characters, and ensuring movements are properly timed to the script and soundtrack (voice over and background music)

2D Computer Animators

• Main duties (according to www.thecareerproject.org)

– Producing special effects and action graphics– Creating frames and characters– Designing advertisements and websites– Inking– Coloring

• Most work with directors, editors and producers to finalize designs

• 2D computer animators MUST work closely with co-workers and clients to ensure all the necessary specifications of the final product are met– Hence produce the BEST animation (for the client)

Raster Animation

• Raster animation– This means that each frame of the animation is

made up of digital images• The building block for each image are pixels• Each pixel in a raster image holds a certain value,

determining the color of the pixel

A rasterized form of the letter ‘a’ blown up 16-times - Image from [1]

Raster Animation

• Raster animation (continued)– Advantage:

• Can be used to depict realistic representations of living objects and sceneries

– Cons:• Can take up storage space. How much disk space is

required for a 12-fps animation that lasts 1-minute, where each frame is 1-megabyte? … One hour?

• Raster images cannot be enlarged effectively without loss of resolution

• Each frame has to be drawn separately

Raster AnimationLoss of resolution when enlarged – Raster image

Vector Animation

• Vector animation– Flash is primarily vector-based animation– Each frame is made up of vector images– Unlike raster images, vector images are declared using

position and size of geometric forms and shapes like lines, curves, rectangles and circles [1]• This is why vector images can be enlarged without any loss of

quality in resolution• Also allows computer-based tweening where changing

location/shape/movement can all be done via calculations instead of having to redraw each frame (as in raster animation)

Reference [1]

Vector Animation

• Vector animation (continued_– The text is vector, whereas the gray patch is raster – Notice how quality is maintained/degraded

(vector/raster)

One way to produce 2D computer animation

• Separate drawings are made with small changes that can be calculated (generated) by a computer animation software

• One way to produce such animation is by firstly sketching your characters and then editing and finally animating them in the computer

One way to produce 2D computer animation

• Step 1: Sketching– Option A: Sketching the character/object onto a

piece of paper. Color it if you want (not necessary though). Then, scan it

– Option B: If you have a computer drawing pad, you can straight away draw the character/object into the animation software

One way to produce 2D computer animation

• Step 2: Refining and Drawing Each Movement – Let’s assume that you take option A– Open the image in you animation software*– Initially, duplicate your sketch• Save the resultant image

– Then, make small changes to the character/object based on how you want to animate it• Save each of the changes in a separate file

*In your case, Flash is the most straight forward software to use. But if you want, try downloading “pencil” at http://www.pencil-animation.org/index.php?id=Download

One way to produce 2D computer animation

• Step 3: Animate– Organize each character/object in your animation

software based on the storyboard (assuming you’ve already made one)

– Finally, render the file… or publish it if you’re using Flash

*In your case, Flash is the most straight forward software to use. But if you want, try downloading “pencil” at http://www.pencil-animation.org/index.php?id=Download

2D computer animation• Frame-by-frame animation– The method just described can be said as a frame-by-frame animation technique

• Can either be raster or vector… depending on the situation

– This requires the animator to draw each frame (by hand), and then placing each drawing onto the time line for the illusion of movement

– Some examples • http://www.youtube.com/watch?v=xI38fbBu9VA&feature=related – Flash anim tutorial (for

beginners)• http://www.youtube.com/watch?v=_AdUHSFpLp4&feature=related (for those who have

lots and lots of spare time to work with Mspaint)• http://www.youtube.com/watch?v=x3WWFizy2JE&feature=related – Mspaint also (three

frames of a girl)• http://www.youtube.com/watch?v=_NheddeknD4&feature=related – Wolf and Rabbit

(Raster animation)– How each frame was done… (http://www.youtube.com/watch?v=pYAouIbPPhk&feature=related)

– You have total control of each frame– Requires lots of effort

2D computer animation• Frame-by-frame animation (continued)– For more realistic animation… you can do rotoscoping (sometimes ‘roto’

for short)– Involves the tracing of moving images– Live motion is normally taken as references– Examples:

• http://www.youtube.com/watch?v=IkYYQNLWa2A – Lemonade• http://www.youtube.com/watch?v=ChCUvdaYBDs&feature=related – Kung Fu• http://www.youtube.com/watch?v=NgKc6LMDCQA&feature=related – Weird

video…• http://www.youtube.com/watch?v=vVQJKa-xkpo&NR=1 – AUTO rotoscoping in

linux [commandline]• http://www.youtube.com/watch?v=_4IWxKfkJ9o&feature=related – 18 SG Street

War!!!• http://www.youtube.com/watch?v=pqKtEcPlQ8w&feature=related – Nice

More on Rotoscoping

• This is how rotoscoping was done in the olden days

http://upload.wikimedia.org/wikipedia/commons/7/71/US_patent_1242674_figure_3.png

Tweening

• One of the advantages of using computers for animation is tweening– It’s basically the animation software calculating and generating

in-between frames for you!– Saves you all the hard work of frame-by-frame animation– Also allows incorporation of special effects such as scaling,

transformation, rotation and transparency (alpha channel)

• Basically you’ll cover two types of tweening techniques (both in Flash)– Shape Tweening– Motion Tweening

Flash

• Below is a screen shot of the Flash 8 authoring environment• No matter which version, this will basically look the same,

God willing

Flash

• Document Properties window (Flash 8)

Flash

• The stage… please take note

Flash

• The timeline

• The layers

Flash

• And of course, the toolbar Flash MX Flash 8

Shape Tweening

• We’ll cover shape tweening first– Where you change something’s shape to

something else– Morphing!

Shape Tweening

• Shape tweening does not work on grouped objects and symbols– If for some odd reason, you find yourselg working

with something grouped (or a symbol), simply press CTRL + B break apart

Notice that the grouped objects (or symbol) has a blue square outlineThe outline disappears and the resultant object is broken down into the green fill

and the black outline

Shape Tweening

• Simple shape tweening– With additional color changing effect– This can be done by simply changing the color of

the next keyframe

Shape Tweening

• Shape Tweening with HINTS– Shape hints allow you to control the morphing effect– The ‘A’ is the first keyframe that finally morphs into the blue

circle– Shape hints are defined via Modify > Shape > Add Shape

Hint from the menu bar…

The hints ‘follow up’ to the next frame

Shape Tweening

• Without (left) and With (right) hints– Animation showing the letter ‘A’ shape tweening

into a blue circle, and then back…

Shape Tweening

• A similar tutorial, but a bit more advanced on shape tweening an A to a rectangle using shape hints– http://www.youtube.com/watch?v=Y6MTyzSTCY8

(Part 1); and– http://www.youtube.com/watch?v=7OmI_6ZwUo

w&feature=relmfu (Part 2)

Motion Tweening

• Involves moving an object from one point to another

• Can only be performed on grouped objects and symbols

• Basically, you will be shown how to do:– Simple motion tweening– Motin tweening through a path– Motion tweening with rotation/transformation etc.– Motion tweening with transparency

Motion Tweening

• Simple motion tweening1. On Layer1, frame1, draw a circle with any fill color at the

bottom-left corner of the Stage;2. Convert it to a Graphic symbol with whatever name you like;3. On frame30 of the same layer, press F6 to insert a new

keyframe. As you can see, the same circle appears in frame30;

4. Move the circle in frame30 to the bottom-right corner of the Stage

5. Next, click anywhere between frames 1 to 29, and right-click. Choose Create Motion Tween;

6. Press CTRL + ENTER to see the result

Motion Tweening

• You should see something like this…

Motion Tweening

• If you set “Ease” to 100, an easing OUT effect is produced

Motion Tweening

• If you set “Ease” to -100, an easing IN effect is produced

Motion Tweening

• Adding effects to your motion tween– Rotation– Play around with the “Rotate” parameter in the

motion tween panel

Motion Tween

• Rotating boomerang

Motion Tween

• Tweening with changes in shape and size– Can simple be done by scaling the respective keyframes

to the desired sizes and shapes

Motion Tween

• Result:

Motion Tween

• Tweening moving objects:– This is done by tweening a “Movie Clip” symbol

Motion Tweening

• Tweening into transparency…– In the next keyframe,

select the object (by clicking it on the stage), and then play around with it’s Alpha color property• 0% Alpha means full

transparency

Motion Tweening

• Result:

Code-based Animation

• Flash has ActionScript– A flexible script (language, if you may) to

manipulate elements in your animation/movie/application

– Mostly used to manipulate interaction– But can also be used for animation

Code-based Animation

• Moving stars…– A simple animated background for a game,

perhaps?– Adapted from Reference [2]

Code-based Animation

• Step1: Open a flash document and under the document properties, change the background color to black

• Step2: Create three separate symbols and name them bigstar, smallstar and tinystar

• Step3: In each of their ‘properties’ panel, give them instance names t1, t2 and t3, respectively

Code-based Animation

Properties panel-Instance name for the bigstar symbol

Code-based Animation

• Step4: On a new layer, add an ‘actions’ layer. And paste this code for the layer

Code-based Animation• Explanations (from [2]):

– The stop() at the top stops the movie at this frame and prevents it from going onto the next one.

– First we have three for loops to duplicate several copies of our star, we duplicated t1(our tiny star) 100 timesm t2(the medium star) 40 times, and t3(the big star) 20 times. The 2nd parameter(ex. i+100) is very important as that specifies the depth. You cannot have two clips of the same depth on the stage or one will replace the other. The function duplicateMovieClip() simply duplicates whatever movie clip you tell it to duplicate.

– The next two functions are loadstar() and movestar(), simply put, one loads the stars onto the stage and the other one moves them. They both take a parameter,varname, which is the name of the clip you want it to move.

– Loadstar simply sets the initial x(horizontal) position of the clip at somewhere between 1 and 550, sets the initial y position at somewhere between 1 and 400. _root[varname].speed is how fast the star will move across the stage. We set this to some speed between1 pixel per frame to 10 pixels per frame plus an intial 2 frames per pixel so it won't be too slow.

– Movestar moves the star, it says to move the star's x position the number of pixels specified in speed every time a frame loads. It also calls a reset() function to reset the star if it moves past pixel 550 in x-coordinates(moves off the stage). Reset is a function in the movie clip itself(we will talk about this in the next section).

Code-based Animation

• Step5: Call the functions within the flash movie… – Select one of the star symbols… and paste this

code in its action pane– Do the same for

all the other stars

Code-based Animation• Explanations (from [2]):

– The OnClipEvent(load) event is what happens when the clip initially loads(every time a star is duplicated). It basically calls the loadstar function and passes it the clip name in this._name. It also has a reset function for every time the star needs to be reset. This function also just calls to load function which sets the coordinates and the speed of the star.

– onClipEvent(enterFrame) loads every time a frame is loaded, flash's default is 12 frames per second. The onClipEvent just calls the movestar function wewrote earlier and passes it the name to move the star.

Software

• Flash• ToonBoom• CrazyTalk

References[1] http://pippin.gimp.org/image_processing/chap_dir.html [2] http://www.flashninjaclan.com/tutorialpage.php?ID=34