1. Week 1 2008 Rob Pooley r.j.pooley@hw.ac.uk Basics of animation and Flash Lecture 1 F27EM1

2. Week 1 2008 Rob 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

3. Week 1 2008 Rob 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

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

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

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

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

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

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

10. Week 1 2008 Rob Pooley r.j.pooley@hw.ac.uk Animated text Even Powerpoint can do simple tweening animations Here are some of these Simple but effective

11. Week 1 2008 Rob 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

12. Week 1 2008 Rob 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

13. Week 1 2008 Rob 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

14. Week 1 2008 Rob 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

15. Week 1 2008 Rob 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

16. Week 1 2008 Rob Pooley r.j.pooley@hw.ac.uk Morphing a simple shape

17. Week 1 2008 Rob Pooley r.j.pooley@hw.ac.uk Morphing a simple shape

18. Week 1 2008 Rob Pooley r.j.pooley@hw.ac.uk Morphing a simple shape

19. Week 1 2008 Rob Pooley r.j.pooley@hw.ac.uk Morphing a simple shape

20. Week 1 2008 Rob Pooley r.j.pooley@hw.ac.uk Macromedia Flash Use for creating: –Animations Olympics: http://www.bozzetto.com/http://www.bozzetto.com/ –Interactions –Even complex games... Some Examples –http://www.shockwave.comhttp://www.shockwave.com –http://www.macromedia.com > showcase > Browse By Product (Flash)http://www.macromedia.com

21. Week 1 2008 Rob Pooley r.j.pooley@hw.ac.uk Flash Elements Stage Toolbox Panels –Library –(and Symbols) Timeline

22. Week 1 2008 Rob 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

23. Week 1 2008 Rob Pooley r.j.pooley@hw.ac.uk Toolbox Similar tools to other Graphical Packages –pencil, pen, ellipse, rectangle, paint fill, eraser, colours etc...

24. Week 1 2008 Rob 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

25. Week 1 2008 Rob Pooley r.j.pooley@hw.ac.uk The Timeline Frames (horizontally) Layers (vertically) Playback head – current frame

26. Week 1 2008 Rob 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

27. Week 1 2008 Rob Pooley r.j.pooley@hw.ac.uk The initial timeline

28. Week 1 2008 Rob 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.

29. Week 1 2008 Rob 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.

30. Week 1 2008 Rob Pooley r.j.pooley@hw.ac.uk Layers Organisational tool To avoid shape combination effects (eg)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

31. Week 1 2008 Rob 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

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

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

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

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

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