Document Sample
Animation Powered By Docstoc
Illusion of Motion
  – Series of gradually changing drawn images
  – Vector images rendered as bitmaps
  – Requires little disk space - ~1KB per frame @
    320 x240
  – Effective medium for illustrating moving
    functionality or adding animated cartoon-like
Animation creation

Created by an Animation program
Or imposed by MM applications tools on
 components used within it – do not exist
 as independent files
 Native or Proprietary
Can be kept in Animation Application’s native
 format if usable by MM Application or Web
  – Autodesk Animator (Pro)/3d-Studio are PC formats
    (.FLC, .FLI)
  – Animated GIF file
       PhotoShop/Fireworks can create them through Image ready
       Add on
       Premiere can
Native or Proprietary
     Formats? 2
Shockwave Flash file – widely used on the
 Web (.SWF)
  – created by Macromedia Flash
  – imported by Director
Apples PICS animation format is a
 sequence of PICT images
Can be converted to QuickTime or AVI video
 file format
  – Premiere can do this but the result is a piece
    of Video media not an animation
What can be animated?
Are there different sorts of animation?
What can animations be used for within an
  application of multimedia?
Types of Animation
    & Terms
Flip-book or Frame-based
Sprite or Cast -based
  Cel Animation
Celluloid - Layers
  – One for Background
  – One for each moving object
      called a cel
  – One frame
      background plus objects
Computer animation derived from cel
  – uses a lot of its terminology
Series of complete drawings
  – each slightly different from the last
Each frame is a complete image
Animation created by showing each frame in
 rapid succession
Machine must be capable of doing this
  – depends on image complexity for vectors
  – depends on colour depth for bitmaps
 Sprite Animation
Computer version of Cel Animation
Sprites or Cels are rectangular areas of the
 screen containing one or more different
 bitmap images of the sprite
Only first frame of sequence is generated
  – other frames alter just the sprite(s) area
  – often use memory buffer where alteration to
    sprite area is made before display
  Path Animation
Sprites may be further animated by moving
 it along a motion-path
  – some sprites demand this
      running man, flying bird
  – some don’t
      rotating earth
Can be applied to static sprites
  – text
  – ball
Path Animation 2
Motion paths are typically defined by curves
 made of line segments
  – end points of each segment can be moved
  – sprite moves uniformly between end points
      the closer the end points the more slowly it
      appears to move
  – more sophisticated paths are spline-curves
If the motion represents acceleration
  – need to be able to vary rate of motion
      running man starting from standstill
      bouncing ball
A spline is a mathematical representation of
  a curve - used in most drawing programs
  – defined by a series of anchor points for the
  – can manipulate the curve by moving the two
    control handles on each anchor point
      except the end points of the line which have only
  – the program can ensure that the curve passes
    through the anchor points smoothly if required
Similar to bitmap sprite-based animation but
  uses vector drawings for sprite
  – small file size for sprite
      can be manipulated more quickly
  – sprites are scaleable without pixellation
      bitmap sprites become jagged
Animation of “living” objects
  – often complex
  – multiple secondary hierarchical motions
Often uses Inverse Kinematics (IK)
  – definitions derived from scientific study of how
    connected parts move when one part is given
    a specified motion
      hand is raised; IK defines how lower arm, elbow,
      upper arm and shoulder should move realistically
    Key Frame
In traditional animation the best animators
  only drew most important frames; these
  established the main dramatic poses,
  defined the flow of action and created the
  animation’s graphic style. Defines the action
  or places at which scene or view changes.
in computer usage a key frame is one in which
  the whole of the information required to
  create the on-screen image is stored as
  opposed to just the information about the
  changes between one frame and another
in Flash a keyframe is any frame that contains
  new content or in which a user controlled
  property of a sprite changes
Frame Rate: rate at which frames are
  displayed - usually per second
  – film is 24 fps; UK TV is 25 fps; 10-15 usually
    acceptable for web animation
Tweening: drawing of the frames (tweens)
 in between key frames - done by other
 animators. Done now by animation
       Terms 2
Timelines: axes representing time along
  which the start and end timings of
  individual objects, such as sprites can be
Tracks: objects in timelines are often
  represented by a series of images
  occupying the time allocated
       Terms 3
Animation sequencer: software that organises
  the display/play sequence of objects in an
  animation; frequently uses timelines with
  tracks and provides a preview of the result
Frame transitions: computer generated
  tweens may result in highly noticeable abrupt
  changes at the key frames; these frame
  transitions need to be smoothed away
Morphing: the generation of tweens for the
  change in shape and appearance from one
  photographic image to another. The
  photographic equivalent of tweening
      Terms 4
Rotoscoping: drawing on top of existing
 film, video or animation
  – PhotoShop can do rotoscoping using the
    filmstrip (.FLM) format exported by Premiere
Particle system animation: generating
 effects by defining the behaviour of a
 swarm of particles: smoke, rain,
What do Authoring
 packages do?
Most can do some animation within them
Many can animate Text
Some do path animation
Some can animate graphs
Some provide sprites (actors)
Flash’s two types of sprite are called either:
  – animated graphic symbols
  – movie-clip symbols
Tips: When Using
Great animation can enhance a title
Keep it simple
Test out your animation
  – the type of motion
  – and the style of the artwork
  – and the frame rate
 Where Do You
 Get Animation?
Create them yourself
  – If you create, you own it
Copy them from another source
  – If you copy, you don’t own it but you may or
    may not be entitled to use it
Copyrights must be satisfied
License from Stock film and music houses:
  products now available on CD-ROM/DVD
Authoring Package
Flash will import:
  – QuickTime movies –
    Most animation
    packages can create QT
  – Flash animations
  – Most Digital Video
Flash can then animate
any visual media item
   WWW Pages
Animations can be provided by:
  – animated GIF files,
  – Java applets,
  – Javascript,
  – Macromedia Flash movies,
  – Shockwaved Director movies
  – and Dynamic HTML
Animation Formats

Animations in other formats
  Autodesk Animator,
  3-D Studio, etc)
can also be converted into video file formats:
  .avi, .mov, and .mpg
Using Animated
Use of animated GIFs should not be
 overdone; experienced browsers are
 generally fed-up with them and
 consider them a distraction
  – avoid more than one on a page
  – use it to communicate something in a truly
    clever way
  – don’t use where it may distract
Use of Animated
   GIF’s - 2
– consider whether you can really justify
  the extra bandwidth
– don’t make it loop unnecessarily –
  once is often more than enough
– try long pauses between loops
Reducing Animated
    GIF Sizes
general GIF suggestions apply – in
  particular low bit depth – 16 or 32 colours
keep the number of frames to a minimum –
  though if each frame is small and the
  frame delay is not too small the may
  download quickly enough to keep up with
GIF creation tools may offer optimisation,
  – frame differencing – only the pixels that have
    changed are stored for each frame
Adding Animation
 to a Web Page
Animated GIF files specified as ordinary in-
 line graphics, e.g.:
  – <IMG SRC=”animation.gif”>
Let Dreamweaver generate the HTML code
  for you!
  – Use Insert, Applet and point to the Java class
    file you need
  – <APPLET CODE=”BounceItem.class”
     WIDTH=”300” HEIGHT=”500”></APPLET>
Let Dreamweaver generate the HTML code
  for you!
  – use Insert, Script and leave the Script box
    empty (unless you are copying and pasting a
    JavaScript script)
  – then use the Property Inspector to specify the
    language as JavaScript and then to point to
    the JavaScript file you need
  – <SCRIPT LANGUAGE=”javascript”
Flash movies can be placed on a Web
  page after they have been
  Shockwaved (.swf) - normal
  – and they involve relatively small files even
    for something complicated
      they are based on vector graphics
These can be placed on the page in
  – <EMBED …> or <OBJECT>
 Specification for
As animations are dynamic media they need
  to be specified at greater length than a
  static media item
A way of indicating the “animation” involved
  is needed
This could be:
  – A series of “thumbnails” indicating the
    important changes - a storyboard
  – A written description –a Script
  – or probably both
For animation creation a plan is vital
The appearance of the animation is normally
 represented on a storyboard
Every change of scene must be indicated –
 including viewpoint, etc.
The duration of each scene and the principal
 activities recorded must be indicated
 visually with annotation as necessary
The important point is that everything visual
 is specified on the storyboard
The important features of the animation must be
  described in the script
  – particularly timings
  – the transitions between scenes
      Scripts - 2
The important features of the animation to be
  described are:
  – Appearance of main elements
  – Appearance of the background (if self-
  – The motion animation of each element
  – The relative timings of these component
      These could be presented as a separate
     Scripts - 3
The description of the animation of the
 elements involved must be clear and
The script may describe actions to be
 mimicked and styles to be adopted
  – modern animations can be highly realistic (3D) or
    cartoon-like (2D)
  – so specification must indicate a standard of
    realism to work to
    Event sound
The crash bang wallop in an animation
For sound effects the script will be fairly
  – The activities that produce the required
  – Background noises (if desired)
  – The duration
For music in place of or in addition to sounds
   – The Style
   – The Flair
   – The Emotive Key
   – The Dissonance
   – Major to Minor key changes and their exact
     timing to synchronise with other on-screen
   – The moods to be matched and their timings
      Sound -2
For narrative in place of or in addition to
 sounds effects and/or music:
  – The voice
  – The pace and timings
  – The actual words to be spoken
Be aware of Accessibility requirements –
  – where possible provide subtitles
The important thing is that
 everything is specified!
    Don’t use a script and you risk
   animating something you’ll throw

     Hint: Have you ever seen a
    deleted scene on an animated
             movie DVD?
     Time Lines
The principal indications are
  – the visible duration (appear and disappear) of
    the symbols
  – the duration of movement (start and finish) of
    the symbols
In the creation package time line(s) these
  may be clearly indicated separately
  (Flash) or may be hidden in an indication
  of “on-stage” time only

Shared By: