Animation

1
Animation

• 2006. 4. 4
• ? ? ?
• steigensonne_at_hufs.ac.kr

2
Contents

• Animation Intro
• CEL animation
• Capture Animation and Image Sequences
• Digital Cel
• Key Frame Animation
• Animated GIFs
• SWF(Shoch Wave Flash) Flash
• Timeline

3
Animation Intro

• Definition
• Creation of moving pictures one frame at a time
• Ex) Disney animation
• The sequence of drawings is photographed in the
  correct order, a single frame at a time
• As film is projected at 24 frame per second,
• Technically requires 24 drawings for each second
  of film
• 1440 drawings for every minute
• Even more for animation made on video
• In practice, Not seamlessly smoothy animation can
  be be shot on 2s
• 12 frames per second for film, 15

4
CEL animation

• If solely make animation, it requires enormous
  amount of labor
• Cut-out Animation Terry Gilliams Monty Python
• Three-dimentional(Stop motion) Wallace and
  Gromit
• Clay animation (Claymation)
• Mixture of live action and animation KING
  KONG(1933), Matrix
• CEL animation
• Homer simpson drawn on sheets of transparent
  material known
• Simsons living room was drawn separately
• Only moving elements(cel) need to be redrawn
• The fixed parts of the scene only made once
• Many CELs might be overlaid together
• Prove particularly suitable for tansfer to the
  digital realm
• Many popular cel-like cartiins on TV are now
  produced digitally

5
Capture Animation and Image Sequences

• Computer video camera traditional technique
• Video camera is connected directly to a computer
  , to capture each frame of animation to disk
• Play the serial frames which are captured
• Draw animation on paper and scan them
• Frame grabbing record each frame to disk
• Save as QuickTime c, edit non-linearly like
  video
• Can also use scanner or digital still camera, or
  create each frame in a graphics program (e.g.
  Painter)

6
Digital Cel

• Use layers (e.g. in Photoshop) like sheets of
  acetate in traditional cel animation
• e.g. static background on one layer, moving
  simple object on a layer in front of it. Make the
  object move by repositioning the layer
• More complex cases, just need to change those
  layers where movement or other change occurs
  between frames
• Types of animation with respect to Moving
• Background animation
• Make one frame as s character, and move the
  backround
• Old_fashoined 3D game Doom2
• Sprite animation
• Charater is moving in front of fixed background
• Tacken 5,4,3
• Hwarang
• Steve Fox

7
Key Frame Animation

• Traditional key frames drawn by chief animators
  at important points in the animation
• In-between frames drawn by less skilled animators
• Computer-based key frames drawn explicitly
• In-between frames interpolated by software

One of the Background Key Frame in Lion King
At this backgournd, Cloud, birds(not yet seen)
anything like that could be all CEL(in Digital)
and seperated into different Layers
8
Animated GIFs

• Sequence of images can be stored in a single GIF
  file, and displayed one after another by a Web
  browser or other software
• No browser plug-in required
• Can specify looping, delay between frames
• 256 colour palette
• No sound

9
SWF(Shoch Wave Flash)

• Popular Web animation format
• Usually generated by Macromedia Flash
• Vector animation format
• Motion represented as numerical operations on
  vector data
• Can also include bitmapped images (e.g. as
  backgrounds)

10
Flash

• Timeline graphical representation of sequence
  of frames
• Key frames drawn/copied from previous and
  transformed
• Simple frames hold on previous key frame
• Stage sub-window in which frames are created by
  drawing with vector tools
• Can also import bitmaps as objects, add text

11
Flash interface
Timeline and layers Remember to put every new
object on a new layer

• Stage

Property inspector
12
Timeline

• Important to use layers
• Name them!

13
Symbols

• Reusable objects stored in a library
• Graphic symbols
• Button symbols (for interactivity)
• Movie clip symbols (self-contained animations
  within a movie)
• Create instances by dragging on to stage
• If symbol is edited, all its instances updated

14
Types of symbols

• Graphic symbols for static images and to create
  reusable pieces of animation that are tied to the
  main Timeline.
• Button symbols to create interactive buttons that
  respond to mouse clicks, rollovers, or other
  actions.
• Movie clip symbols to create reusable pieces of
  animation. Movie clips have their own multiframe
  Timeline that is independent from the main
• Movie clip instances can be placed inside the
  Timeline of a button symbol to create animated
  buttons.
• Dolphins Boat

15
Library

• To view your symbols
• Window gt Library
• Remember to name everything
• Example for symbols using Library

16
Motion Tweening

• Motion tweening
• Object is placed in a key frame
• Create Motion Tween
• Object is turned into a symbol
• Add key frame at end of tweened sequence and move
  or transform object
• Motion in intermediate frames is interpolated
  (tweened)
• Conditions
• Key frame should be inserted at start and end
  point
• One object used for Motion tweening in the key
  frame should be a group or a symbol

17
Types of motion tweening

• Between two positions
• Along a path

18
Shape Tweening

• Also called morphing
• Shapes of graphical objects are transformed in
  between key frames
• Have to generate the interpolated frames, so
  resulting SWF is bigger than when motion tweening
  is used
• Shape Tweening
• Shape_Tweening
• Shape_Tweening

19
Types of shape tweening

• Colour
• Shape
• Shape to text

20
Linear Interpolation

• Constant velocity
• Motion begins and ends instantaneously

21
Easing In

• Object accelerates, gradual transition from
  stasis to motion

22
Easing Out

• Object decelerates, gradual transition from
  motion to stasis

23
Mask

• For spotlight effects and transitions
• Use a mask layer to create a hole through which
  underlying layers are visible
• A mask item can be a filled shape, a type object,
  an instance of a graphic symbol, or a movie clip
• Flash movie

24
Motion Graphics

• Like time-based graphic design
• Move, transform, alter layers of a bitmapped
  image between frames
• Apply time-varying filters and effects
• AfterEffects supports linear and Bézier
  interpolation in both space and time (rate of
  change)
• Can have new effects that only make sense in
  time, e.g. shatter, particle effects
• Example1
• Example2

25
3-D Animation

• "Easy to describe but much harder to do"
• Properties of 3-D models (shape, size, position,
  rotation, surface characteristics, etc), light
  sources and cameras are numerically defined
• Animate a scene by changing the numbers,
  rendering a new frame, changing further
• Can make objects move, or move the camera
• Requires 3-D visualization and animation skills
  and great amount of processing power