Business and Computing Deanery Multimedia Week 6 Animation

Multimedia 2 Last week Lecture Colour RGB CLUT Vector Graphics Flash Handed in storyboards and navigation charts Supported session Finish off activities from the lecture Draw in Flash Create Symbols and Instances

Multimedia 3 This week Lecture Animation Chapter 8, Digital Multimedia, 2nd edition Supported session Finish off activities from the lecture Creating a Timeline Animation Add animation and Navigation to Buttons

Multimedia 4 Animation The creation of moving pictures one frame at a time Literally 'to bring to life' e.g. make a sequence of drawings on paper, in which a character's position changes slightly in each drawing Photograph drawings in sequence, using movie camera that advances one frame at a time Play back resulting film – character will move 242 Chapman N and Chapman J (2004).

Multimedia 5 Traditional Methods Drawings/paintings on paper 1440 drawings for every minute of film Cel Painted or scratched film Cut-outs Clay animation (Claymation) etc 243–244 Chapman N and Chapman J (2004).

Multimedia 6 Captured Animation Computer + video camera + traditional technique 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) 245–246 Chapman N and Chapman J (2004).

Multimedia 7 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 249–250 Chapman N and Chapman J (2004).

Multimedia 8 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 251–252 Chapman N and Chapman J (2004).

Multimedia 9 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 247–249 Chapman N and Chapman J (2004).

Multimedia 10 SWF 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) 254 Chapman N and Chapman J (2004).

Multimedia 11 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 254–256 Chapman N and Chapman J (2004).

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

Multimedia 13 Timeline Important to use layers Name them! Macromedia Flash Help

Multimedia 14 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 256–257 Chapman N and Chapman J (2004). Why is this important?

Multimedia 15 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. Macromedia Flash Help

Multimedia 16 Library To view your symbols Window > Library Remember to name everything

Multimedia 17 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) Flash movie 256 Chapman N and Chapman J (2004).

Multimedia 18 Types of motion tweening Between two positions Along a path

Multimedia 19 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 Flash movie 257

Multimedia 20 Types of shape tweening Colour Shape Shape to text

Multimedia 21 Linear Interpolation Constant velocity Motion begins and ends instantaneously 252 Chapman N and Chapman J (2004).

Multimedia 22 Easing In Object accelerates, gradual transition from stasis to motion 253 Chapman N and Chapman J (2004).

Multimedia 23 Easing Out Object decelerates, gradual transition from motion to stasis 253 Chapman N and Chapman J (2004).

Multimedia 24 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

Multimedia 25 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 261–266 Chapman N and Chapman J (2004).

Multimedia 26 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 More next semester 266–267 Chapman N and Chapman J (2004).

Multimedia 27 Activities Create a motion animation Create a motion along a path Create a tweened shape animation changing colour Create a tweened shape animation changing shape Create a tweened shape animation changing a letter to a shape Display Onion Skins Remember to use layers

Multimedia 28 Some questions Scenario: You have been asked by Hope library to create an animation to act as a logo Suggest three different methods, discuss how they would be implemented and make a recommendation for one Discuss the desirability of using a Flash animation as a logo How else might a Flash animation be used in a website?

Multimedia 29 What have we covered today? Animation Tweening Symbols and the library How will naming things and adding them to the library help your workflow? What is the difference between an Instance and a Symbol? Motion Shape Can you give examples for use? Your animation is due in next week Screen grab, with Onion Skins

Multimedia 30 For Next Week Directed Reading Digital Multimedia, Second Edition Chapter 10 and 11Text Independent study Continue to work on your storyboards and navigation This should be an ongoing process Start thinking about how your ideas will translate into a Flash interface Attend the supported session to get to know Flash Help/How Do I Draw in Flash Create Symbols and Instances Animation – due week 7

Multimedia 31 References Chapman N and Chapman J (2004). Digital Multimedia, Second Edition. London. Wiley Macromedia Flash MX2004 Help files