Intro to Animation

1
Intro to Animation

• What is animation?
• A drawing that moves, or
• bringing the drawing to life
• moving something which can't move itself
• Animation is a powerful tool capable of
  communicating complex ideas
• How the heart beats
• Adds visual impact to MM project

2
Intro to Animation

• Animation is used for
• Entertainment (action, realism)
• Education (visualization, demonstration)
• Why Use Animation?
• Rely on animations moving images for effective
  communication
• It helps to illustrate what you are explaining
• Overcomes learning disabilities
• Simulating scientific phenomena
• Increase of the interest of viewer and create a
  lasting impressions
• Easier to show somebody how something works then
  to try and explain it

Four Stroke Engine
3
Animation how it works?

• Simulation of movement through a series of
  pictures that have objects in slightly different
  positions
• Each drawing is called a Frame
• Required Frames Per Second FPS? 24

4
Animated Cartoons I

• In animation, each frame overlaps the previous one

5
Animated Cartoons II
6
Dialogue Animated Cartoons
7
Examples of Animation

• Computer Based Training Programs Demonstrate the
  way something works ie. assemble parts, adjust
  controls, perform surgery. Example
• Education Teach applied and hands-on skills
• Spelling and foreign language programs for school
  children
• Programs that prepare high school students for
  college exams
• Learning to play an instrument
• Athletes learning techniques in their sport
• Games
• All games on the market ie. Playstation,
  Nintendo, Xbox, gameboys
• Web
• Animated buttons, banners, text, and characters
  are used for visual appeal for example to
  market/advertise services and information.
  

8
Animation and Authoring systems

• Authoring systems provides several visual effects
  such as wipes, fades, zooms and dissolves. For
  example in Director there are many effects.
• To add transition in Director
• Select Modify gt Frame gt Transition
• Double-click the frame in the transition channel
• Right Click on the transition channel
• A transition always takes place between the end
  of the current frame and the beginning of the
  frame where the transition is set

9
Sources of Animation

• Animation clip art websites available on Internet
  for free or at cost http//www.animation-central.
  com/misc.htm
• The ones for a cost are more professional and
  creative
• Create each image that corresponds to a frame
  using a draw or paint program
• Create animations with software
• Enhance using an editing program such as Adobe
  Photoshop
• Multimedia authoring programs like Macromedia
  Director allow you to easily create path
  animations

10
Animation

• Realistic motion
• One of the overall photorealism motive is
  realistic motion. Animation is a special case.
• Ease of control
• something nearly impossible to control does not
  help much
• Flexibility
• support the widest possible range of motion
• Expressiveness
• the animation shows the feeling of the animated
  figure.

11
Movements Of The Two Legged Figure
More movement examples
12
Creating animation logical steps

• Gather all the activities you wish to provide in
  the animation
• Choose the animation tool best suited
• Build and try your sequences with lighting
  effects
• Post process your animation do any special
  rendering and adding sound

13
Animation techniques Cel animation

• Traditional animation (Cel Animation)
• It is labor intensive
• Start with story board (set of drawing outlining
  the clip).
• Master artist draw key frames to define action.
• Other artists (cheaper) draw in between frames to
  complete animation
• all line drawings are painted on cels

14
2-D Animation ? Cel-Based

• Cel clear sheet material on which images were
  drawn by movie animators
• images placed on a stationary background.
• Background remains unchanged
• Object changes position

15
Animation techniques Cont. Cel animation

• Film runs at 24 fps. Thus minute of animation
  requires 1440 hand-drawn pictures

16
Animation techniques Computer Assisted Animation

• Computer-assisted systems are now quite common to
  do traditional animation more economically
• We can use computers to help expedite the
  animation process
• Draw sketches with digital systems use digital
  paint programs for coloring
• Can even try to automatically generate
  in-betweens (tweening)
• Widely used in production

17
Path-Based

• Moves object along
• Path straight or any curves
• Often object does not change (but resized or
  rotated)
• Path animation easier to create than cel based
  animation
• Specify beginning and end position
• Tweening

18
Animation techniques Computer Animation

• start with some model of the scene (a set of
  parameters are associated with the model such as
  joint angles, positions, etc.)
• view each of these parameters as a function of
  time
• vary parameters to generate desired pose for all
  objects
• render scene to produce one frame
• repeat for all frames (roughly 130,000 frames for
  1.5 hour movie)
• So how will we control these parameters?

19
So how will we control these parameters?

• manually set them for each frame
• key-framing specify parameter values at specific
  times
• generate them procedurally the computer
  interpolate the in-between values
• execute behavioral scripts (e.g., follow the fish
  in front of you)
• motion capture
• physical simulation

20
Key-Framing

• Associate a set of parameters with the model
  joint angles and positions.
• View each of these as a function of time.
• In key-framing, we specify parameter values at
  specific times and let the computer interpolate
  the in-between values.

21
Key-Framing

• In key-framing, we specify parameter values at
  specific times

22
Interpolating Motion Parameters

• For a given parameter, weve specified some fixed
  values these are the key frame values

23
Interpolating Motion Parameters
24
Kinematics

• Kinematics Is the study of the movement motion
  of structures that have joints such as people or
  robots.
• This means derive motion from positions, angles,
  velocities,
• Position of end effectors is a function of the
  state of all joints
• When animated, the position, speed, and rotation
  of all the joints and the articulated parts (such
  as head, shoulder, knees) are calculated.

Given an articulated human, how do we make him
wave? rotate the shoulder into position and
then the elbow and wrist and finally rebalance
other parts of the body
25
Procedural Animation

• To specify a procedural animation
• sit down and write some code the animator as
  programmer
• input current time
• output correct parameter value
• usually combine lots of little procedures
  together one procedure for walk, one for run, one
  for hop,
• There is a clear tradeoff between procedures
  interaction
• think of the analogy of creating a 2-D
  illustration if its simple, we can probably
  quickly do it interactively
• but if its very complex regular, coding is
  probably quicker

26
Behavioral Animation

• Animate by defining rules (or writing a program)
  that
• governs your entities behavior.
• Typically, define behavior in part as a response
  to what
• the environment is doing
• Classic example boids
• objects whose motion is determined as a simple
  function of near neighbors motion (plus obstacle
  avoidance, etc.)
• A common example of this approach is flocking

27
Motion capture

• strap a bunch of sensors on a person record
  their motion
• track the location of several reference points
• convert this to joint angles map to expressed
  model
• several technologies available
• optical
• magnetic tracking
• instrumented exoskeletons
• But it can be hard to edit

28
3-D Animation involves 3 steps

• Modelling
• Process of creating broad contours and structure
  of 3D objects and scenes (draw views top,
  side, cross section
• Animating
• Defining lighting and perspective views to create
  change during animation
• Rendering

Sample Demo
29
Animation ? Some Special Effects

• Morphing
• Process of blending together two images into a
  series of images
• Useful for showing how image might change over
  time
• Is an effect in which one effect is transformed
  into another.

30
Morphing

• Some software transform still pictures as well as
  animated images.
• Morphed images are built at a rate of 8 frames
  per second and each transition takes 4 seconds, a
  total of 32 frame per second. MonaAnim.gif
• Key pointes can be held on both the initial and
  final images, in this case the points on the
  start image will move to the corresponding
  pointes on the final image.

31
Animated GIFS

• For simple animations use .GIF format
• Special type of GIF file known as an animated
  GIF/GIF89a that provides the animation you need.
• When the GIF document is viewed, the multiple
  images display, quickly and in succession, and
  produce a streaming animation

32
Animated GIF files - continued

• Characteristics of an Animated GIF
• File size is affected by
• Number of frames
• image size
• No Plug-ins Required Animated GIFs require no
  plug-ins, and the authoring tools to create them
  are often free and easy to learn.
• No Sound If you need sound in addition to
  motion, you cannot use an animated GIF by itself.
  Instead, you may want to consider other animation
  alternatives, such as Flash, or even video

33
Other Animation File Types

• Animated Gifs (.gif) (universal)
• Flash (.fla, .swf) (by Adobe)
• Macromedia Director
• Sophisticated Animations
• Strata 3D, LightWave, 3D Studio Max, Maya, and
  Houdini

34
Animation File Types

• Flash Software
• Flash uses the .FLA file extension for source
  files
• .SWF extension for the Flash movie that is
  created and played.
• .swf originally meant Shockwave Flash but now
  Small Web Format
• Animation is choreographed using one or more
  sequential timelines in which actions and
  interactions are defined

Animation is choreographed using one or more
sequential timelines in which actions and
interactions are defined
35
Animation Software

• Why Is Flash So Popular?
• Professional designs
• Interactive content rich with video, graphics,
  animation
• Import multimedia elements from other
  applications
• Support vector graphics
• much more space efficient over bitmapped frames
• scale up with accurate detail no matter how large
  the window is resized by the user.
• Flash Player is a free client application that
  works with popular Web browsers to play the
  animation
• Adobe Flash Player is the standard for delivering
  high-impact, rich Web content. Designs,
  animation, and application user interfaces are
  deployed immediately across all browsers and
  platforms

36
Onion skinning

• is a 2D computer graphics term for a technique
  used in creating animated cartoons and editing
  movies to see
• allows you to see a faint ghost image of the
  previous frame so you can see where you want to
  place the artwork for the next frame.

37
Flash Animation using Onion Skinnig

• Step 1 - Draw the image (for example Frog) on the
  Stage

38
Flash Animation using Onion Skinnig

• Step 2 - - Select Frame 2 and add a Keyframe In
  Frame 2 click on the Frog to select it, and move
  it up and to the right.
• At the bottom of the Timeline there is a row of
  five buttons. Click on the second one- this turns
  on Onion Skinning
• Notice how you now can see a faint ghost image
  where your first frame was?

39
Flash Animation using Onion Skinnig

• Step 3 - With the Transform Tool selected rotate,
  scale etc your Frog. Continue to add Keyframes
  for each change you make in the Frog. Do this for
  11 frames.
• Choose Control gt Loop Playback so that you can
  see your animation repeat.

40
Flash Animation using Onion Skinnig

• Step 4 - Play with and Modify your movie. Add as
  many Keyframes as you wish and make the movie as
  long as you wish.

41
Animation Software
.swf originally meant Shockwave Flash but now
Small Web Format
Animated GIF Flash Director
Created by Depends Flash Director
Extension Source depends .gif (movie) .fla (source) .swf (movie) .dir (source) .dcr (movie)
Size Larger than normal gif Vector images take up less space than GIF bitmapped images Vector images take up less space than GIF bitmapped images
Uses Banners, small areas Interactive video, graphics, animation More interactive sites
Need to play it Nothing Flash Player (Free and works with most browsers) Web browser plug in (The Shockwave Player)

flv (used on YouTube) or swf (Flash Animations) ?