Post on 28-Dec-2015
Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk
Animation
• Animation allows the creation of “moving pictures” using pictures rather than people or moving objects.
• In any filmed sequence, a series of still pictures or frames are shown in a sequence which creates the illusion of movement
• This depends on the human eye’s inability to detect individual frames, seeing them as continuous movement instead
• In classic animations, such as early Disney “cartoons”, each frame was hand drawn, an enormously labour intensive task
Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk
Tweening
• Most animation uses tweening to reduce the time required from the most skilled animators
• These top artists draw, by hand or on a computer, only those frames necessary to show how the animation progresses – the keyframes
• Less skilled artists then draw a series of frames which show the progression from one keyframe to the next
• If we use a computer animation package, such as Flash, it does many simple tweenings for us
Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk
Animated text
• Even Powerpoint can do simple tweening animations
• Here are some of these
• Simple but effective
Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk
Optical illusions
• If an object grows larger in successive frames, this can create the illusion of it moving closer to the viewer, and vice versa
Coming to get you
Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk
Optical illusions
• If an object grows larger in successive frames, this can create the illusion of it moving closer to the viewer, and vice versa
Coming to get you
Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk
Optical illusions
• If an object grows larger in successive frames, this can create the illusion of it moving closer to the viewer, and vice versa
Coming to get you
Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk
Optical illusions
• If an object grows larger in successive frames, this can create the illusion of it moving closer to the viewer, and vice versa
Coming to get you
Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk
Morphing
• Morphing or shape tweening give the illusion of an object gradually changing shape
• It is simple for simple shapes, but requires clever algorithms for realistic images
Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk
Macromedia Flash
• Use for creating:– Animations
• Olympics: http://www.bozzetto.com/
– Interactions– Even complex games...
• Some Examples– http://www.shockwave.com– http://www.macromedia.com > showcase > Browse
By Product (Flash)
Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk
Flash Elements
• Stage• Toolbox• Panels
– Library – (and Symbols)
• Timeline
Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk
The Stage
• Draw and place graphical elements in a frame– Similar capabilities to drawing in MS Word or
Open Office Writer
• Zoom in and out– Different levels of detail
• Control size, colour etc.– Again like Word
Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk
Toolbox
• Similar tools to other Graphical Packages– pencil, pen, ellipse, rectangle, paint fill,
eraser, colours etc...
Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk
Panels
• Properties Panel– Context sensitive
• Colours Swatches and Colour Mixer– Used for lines, fills etc.
• Library– Store and load symbols on the stage
Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk
The Timeline
• Frames (horizontally)• Layers (vertically)• Playback head – current frame
Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk
Frames
• An animation is a sequence of frames– Define the view seen as time passes– Are spaced evenly in time – Speed of motion in frames per second (fps)
• Different Kinds of Frames– keyframes– blank keyframes– end frames– filled frames– empty frames
Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk
Types of frames
• Keyframes mark changes of properties of objects– blank keyframes have no information at the
moment
• filled frames have images drawn into them explicitly• empty frames define time passing in tweening
sequences etc.
Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk
Creating frame-by-frame animations
To create a frame-by-frame animation, you define each frame as a keyframe and create a different image for each frame.
Each new keyframe initially contains the same contents as the keyframe preceding it, so you can modify the frames in the animation incrementally.
Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk
Layers
• Organisational tool• To avoid shape combination effects (eg)
– What happens if I draw two shapes on the same layer... Put one on top of the other... Then move it away?
• To allow different keyframes• To allow tweening
Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk
Layers
• Hand drawn animations typically used layers of drawings
• The drawings were on transparent sheets• The contents of the layers were super-imposed on
each other when they were photographed• This avoided having to redraw the parts of a picture
which did not change in each frame• Movement of an object could be done by dragging it
on its own layer or by dragging the background layer between frames