Basics of animation and Flash

Basics of animation and Flash Lecture 1 F27EM1

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

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

Tweening example

Animated text • Even Powerpoint can do simple tweening animations • Here are some of these • Simple but effective

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

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

Morphing a simple shape

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)

Flash Elements • Stage • Toolbox • Panels • Library • (and Symbols) • Timeline

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

Toolbox • Similar tools to other Graphical Packages • pencil, pen, ellipse, rectangle, paint fill, eraser, colours etc...

Panels • Properties Panel • Context sensitive • Colours Swatches and Colour Mixer • Used for lines, fills etc. • Library • Store and load symbols on the stage

The Timeline • Frames (horizontally) • Layers (vertically) • Playback head – current frame

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

The initial timeline

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.

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.

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

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

Basics of animation and Flash