Basics of animation and Flash

Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk

Basics of animation and Flash

Lecture 1

F27EM1

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

Tweening example

Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk

Tweening example

Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk

Tweening example

Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk

Tweening example

Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk

Tweening example

Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk

Tweening example

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

Morphing a simple shape

Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk

Morphing a simple shape

Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk

Morphing a simple shape

Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk

Morphing a simple shape

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

The initial timeline

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

Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk

Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk

Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk

Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk

Week 1 2008Rob Pooley r.j.pooley@hw.ac.uk