1. Animation 2006. 4. 4 백 일 우 steigensonne@hufs.ac.kr

2. 2 Contents Animation Intro CEL animation Capture Animation and Image Sequences Digital Cel Key Frame Animation Animated GIFs SWF(Shoch Wave Flash) & Flash Timeline

3. 3 Animation Intro Definition Creation of moving pictures one frame at a time  Ex) Disney animation The sequence of drawings is photographed in the correct order, a single frame at a time As film is projected at 24 frame per second, Technically requires 24 drawings for each second of film  1440 drawings for every minute  Even more for animation made on video In practice, Not seamlessly smoothy animation can be be shot ‘on 2s’  12 frames per second for film, 15

4. 4 Homer J. simpson CEL animation If solely make animation, it requires enormous amount of labor Cut-out Animation : Terry Gilliam’s Monty Python Three-dimentional(Stop motion) : Wallace and Gromit  Clay animation (Claymation) Mixture of live action and animation : KING KONG(1933), Matrix CEL animation Homer simpson : drawn on sheets of transparent material known Simson’s living room was drawn separately  Only moving elements(cel) need to be redrawn  The fixed parts of the scene only made once Many CELs might be overlaid together Prove particularly suitable for tansfer to the digital realm  Many popular cel-like cartiins on TV are now produced digitally

5. 5 Capture Animation and Image Sequences Computer + video camera + traditional technique Video camera is connected directly to a computer, to capture each frame of animation to disk Play the serial frames which are captured  Draw animation on paper and scan them Frame grabbing – record each frame to disk Save as QuickTime &c, edit non-linearly like video Can also use scanner or digital still camera, or create each frame in a graphics program (e.g. Painter)

6. 6 Digital Cel Use layers (e.g. in Photoshop) like sheets of acetate in traditional cel animation e.g. static background on one layer, moving simple object on a layer in front of it. Make the object move by repositioning the layer More complex cases, just need to change those layers where movement or other change occurs between frames Types of animation with respect to Moving Background animation  Make one frame as s character, and move the backround  Old_fashoined 3D game : Doom2Doom2 Sprite animation  Charater is moving in front of fixed background  Tacken 5,4,3 Hwarang Steve Fox

7. 7 Key Frame Animation Traditional: key frames drawn by chief animators at important points in the animation In-between frames drawn by less skilled animators Computer-based: key frames drawn explicitly In-between frames interpolated by software One of the Background Key Frame in Lion King At this backgournd, Cloud, birds(not yet seen) anything like that could be all CEL(in Digital) and seperated into different Layers

8. 8 Animated GIFs Sequence of images can be stored in a single GIF file, and displayed one after another by a Web browser or other software No browser plug-in required Can specify looping, delay between frames 256 colour palette No sound

9. 9 SWF(Shoch Wave Flash) Popular Web animation format Usually generated by Macromedia Flash Vector animation format Motion represented as numerical operations on vector data Can also include bitmapped images (e.g. as backgrounds)

10. 10 Flash Timeline – graphical representation of sequence of frames Key frames – drawn/copied from previous and transformed Simple frames – hold on previous key frame Stage – sub-window in which frames are created by drawing with vector tools Can also import bitmaps as objects, add text

11. 11 Flash interface Stage Timeline and layers Remember to put every new object on a new layer Property inspector

12. 12 Timeline Important to use layers Name them!

13. 13 Symbols Reusable objects stored in a library Graphic symbols Button symbols (for interactivity) Movie clip symbols (self-contained animations within a movie) Create instances by dragging on to stage If symbol is edited, all its instances updated

14. 14 Types of symbols Graphic symbols for static images and to create reusable pieces of animation that are tied to the main Timeline. Button symbols to create interactive buttons that respond to mouse clicks, rollovers, or other actions. Movie clip symbols to create reusable pieces of animation. Movie clips have their own multiframe Timeline that is independent from the main Movie clip instances can be placed inside the Timeline of a button symbol to create animated buttons. Dolphins & Boat

15. 15 Library To view your symbols Window > Library Remember to name everything Example for symbols using Library

16. 16 Motion Tweening Motion tweening Object is placed in a key frame Create Motion Tween  Object is turned into a symbol Add key frame at end of tweened sequence and move or transform object Motion in intermediate frames is interpolated (tweened) Conditions  Key frame should be inserted at start and end point  One object used for Motion tweening in the key frame should be a group or a symbol

17. 17 Types of motion tweening Between two positions Along a path

18. 18 Shape Tweening Also called morphing Shapes of graphical objects are transformed in between key frames Have to generate the interpolated frames, so resulting SWF is bigger than when motion tweening is used Shape Tweening Shape_Tweening

19. 19 Types of shape tweening Colour Shape Shape to text

20. 20 Linear Interpolation Constant velocity Motion begins and ends instantaneously

21. 21 Easing In Object accelerates, gradual transition from stasis to motion

22. 22 Easing Out Object decelerates, gradual transition from motion to stasis

23. 23 Mask For spotlight effects and transitions Use a mask layer to create a hole through which underlying layers are visible A mask item can be a filled shape, a type object, an instance of a graphic symbol, or a movie clip Flash movie

24. 24 Motion Graphics Like time-based graphic design Move, transform, alter layers of a bitmapped image between frames Apply time-varying filters and effects AfterEffects supports linear and B é zier interpolation in both space and time (rate of change) Can have new effects that only make sense in time, e.g. shatter, particle effects Example1 Example2

25. 25 3-D Animation "Easy to describe but much harder to do" Properties of 3-D models (shape, size, position, rotation, surface characteristics, etc), light sources and cameras are numerically defined Animate a scene by changing the numbers, rendering a new frame, changing further … Can make objects move, or move the camera Requires 3-D visualization and animation skills and great amount of processing power