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 sequencean
  example
• GIF constructor set makes this easier see
  http//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
  InsertgtConvert to Symbol
• Click on frame 1 in the timeline
• InsertgtCreate MotionTween
• Click on another frame (e.g., 30)
• InsertgtKeyframe
• 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, InsertgtBlank 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 wont 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 gt 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