Embed Size (px)
DESCRIPTION
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 - PowerPoint PPT Presentation
Citation preview
Week 1 2008Rob Pooley [email protected]
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 [email protected]
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 [email protected]
Animated text
• Even Powerpoint can do simple tweening animations
• Here are some of these
• Simple but effective
Week 1 2008Rob Pooley [email protected]
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 [email protected]
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 [email protected]
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 [email protected]
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 [email protected]
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 [email protected]
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 [email protected]
Flash Elements
• Stage• Toolbox• Panels
– Library – (and Symbols)
• Timeline
Week 1 2008Rob Pooley [email protected]
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 [email protected]
Toolbox
• Similar tools to other Graphical Packages– pencil, pen, ellipse, rectangle, paint fill,
eraser, colours etc...
Week 1 2008Rob Pooley [email protected]
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 [email protected]
The Timeline
• Frames (horizontally)• Layers (vertically)• Playback head – current frame
Week 1 2008Rob Pooley [email protected]
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 [email protected]
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 [email protected]
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 [email protected]
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 [email protected]
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 [email protected]
Week 1 2008Rob Pooley [email protected]
Week 1 2008Rob Pooley [email protected]
Week 1 2008Rob Pooley [email protected]
Week 1 2008Rob Pooley [email protected]
