Animation effects

1. Animation effects • Adds motion to a piece • Draws attention to what you want user to notice • As simple as a transition effect, such as a fade, dissolve or zoom • Or as elaborate as full cartoon-like animation or 3D animation

2. Why is animation possible? • Biology: persistence of vision • Object seen by a human eye remains mapped onto retina for a brief time • A series of images that change slightly and rapidly appear to blend, giving illusion of movement

3. Frames per second • TV builds 30 entire frames/second • Film shot at camera shutter 24 frames/second, but projector flashes through each image twice • Multimedia often makes do with less • Flash defaults to 12 frames/second

4. Cel animation • Cartoon animation makes a different cel (celluloid sheet) for each frame • Cel artwork begins with keyframes for each action, such as character about to take a step • Tweening creates frames between keyframes • Computer animation does automatic tweening

5. GIF89a • Added simple animation capability • Many images included in one GIF file • Browsers will show animations in sequence—an example • GIF constructor set makes this easier: seehttp://www.cse.lehigh.edu/~glennb/mm/gifcon/

6. Macromedia Flash™ • Originally called FutureSplash • Macromedia acquired it to complement their flagship product Director™ • Both use stage, actors and timelines • Both play with Shockwave plug-ins • Flash reduces bandwidth overhead

7. Frame-by-frame animation • Flash animation works by playing through the Timeline • Each cell in a timeline is a frame, a unit of playing time • Each row in the timeline area is a layer, in which different objects may appear, possibly in the same frames • Top-most layer appears on top • Do exercise 5.1 on pages 69-70.

8. Motion tweens • Draw a graphical object on the stage, e.g., a circle • Double-click on object to select it, then Insert>Convert to Symbol • Click on frame 1 in the timeline • Insert>Create MotionTween • Click on another frame (e.g., 30) • Insert>Keyframe • Motion tween appears • Drag circle to another location • Go to frame 1 • Press Enter to see effect

9. Motion tween exercise • Do exercise 5.3 on page 73.

10. Color and size motion tweens • Motion tween can achieve other effects • Click on the circle in either keyframe • Select drag-down menu next to Color: • Alpha changes the transparency • Tint changes the color values • Or use free transform tool to change size and shape of object in a keyframe • Do exercise 5.4 on page 74

11. Shape tweens • Similar to morphing objects • Draw a circle in center of stage • In frame 30, Insert>Blank Keyframe • Draw a square in center of stage • Go back to frame 1 • In Properties, Tween: select Shape • Notice that shape tween is light green

12. Motion guides • If you want more than straight line motion: • Right-click on layer with motion tween • Select Add Motion Guide • In frame 1 of motion guide layer, with pencil tool, draw a path (it won’t be visible) • Drag graphic to start and end points (in 1st and last keyframes) • Voila! Arbitrary path motion • Do exercise 5.7, pp. 79-80

13. Publishing Flash movies • File > Publish settings • Ctrl-Enter compiles .fla to .swf (“swiff”) • Publish .html to tell browser where to find latest Flash player, dimensions of movie • Windows projector produces stand-alone .exe program (plays without browser or Flash player) • Macintosh player does the same on Mac