Multimedia Production and Web Authoring

Chapter 3 : Animations

(Source: Book with same name from Radian Publishing Co.) Chapter 3 : Animations

Table of Contents Properties of an Animation...... 3 Frame Rate...... 3 Type of Images...... 3 Image Properties...... 3 Keyframes and Tweening...... 3 Sound Effects...... 3 Looping...... 3 Animated GIF...... 4 Flash® movie...... 4 Comparison between Animated GIF and Flash® movie...... 5 Virtual tour...... 5

P.2 Chapter 3 : Animations

Properties of an Animation Animation is made by showing discrete pictures one by one to give an illusion of continuous motion. The properties of an animation include frame rate, image type, image properties, keyframe, tweening, sound effects and looping.

Frame Rate A frame is a still picture displayed on the screen. Frame rate determines the number of frames per second (fps). The higher is the frame rate, the smoother is the animation. Typical frame rate varies from 0.5 fps to 30 fps.

Type of Images Like graphics, the still pictures in an animation can be vector-based or bitmapped. When vector-based graphic is used, the animation size is adjustable.

Image Properties If images are used, the image properties, like image size, colour depth and transparency depend on the still images used. Vector-based animations are scalable, 24-bit colour. But, the background is non-transparent.

Keyframes and Tweening A keyframe is a frame created by the user, containing the object to be animated. The frames between two keyframes are filled up by the animating software. This is called tweening. Illustration 1: Keyframes and tweening

Sound Effects Sound effects may be integrated into some animations (not for animated GIF).

Looping Looping means that an animation starts over again when it comes to an end. Both animated GIF and Flash® movies can loop forever.

P.3 Chapter 3 : Animations

Animated GIF In animated GIF, independent bitmap images are stitched together by a software. Tweening between bitmap images is not possible. Therefore, animated GIDs have only a few small images. Otherwise, the file size would be too large to be used on the Internet. As few images are used, the frame rate is usually low. The advantage of animated is that they can be Illustration 2: Two still pictures in an animated GIF displayed in any browser without any plug-ins.

Flash ® movie Marcomedia® Flash animated “objects” instead of showing independent still pictures. The animated objects are vector based. Keyframes with objects are created. Tweening is done by the player. There are three kinds of tweening:

• Motion tween: The tweened objects are evenly spaced along a straight line.

• Path animation: The tweened Illustration 3: Macromedia download page objects are spaced along a curve. for Flash Player • Shape tween: The shapes of the tweened objects change gradually. Shape tween is also called cell animation. Besides the shape of the object, its size, position, orientation (rotating) and colour can also be tweened.

The Flash® player must be installed in the user’s computer to play the animations. Similar animation can be done by Java applets, which requires JVM (Java Virtual Machine) installed in the user’s computer.

P.4 Chapter 3 : Animations

Comparison between Animated GIF and Flash ® movie Animated GIF Flash movie Frame Rate Low (< 10 fps) High (up to 30 fps) Type of Images Bitmap Vector Colour depth 8-bit 24-bit Image Size Fixed Scalable Keyframes NA Motion tweening Shape tweening Path animation Sound Effects NA Can integrate sound in animation Resources on browser Low Requires plug-in File size Depends on the Depends on the • number of still • number of objects images • complexity of the • size and colour depth objects of images Virtual tour Virtual tours are made possible by VR panorama. “VR” or “” offers the viewer an experience they participate in. VR panoramas simulate environments that we can view around in 360°. Users have the ability to control their point of view. VR engages us with interactivity, and invites us to be active in the experience, aas if we are really there. Illustration 4: Virtual tour to the pyramids by To shoot 360° panoramic VRs, you place using VR panoramas your camera on a tripod and turn and shoot to capture from 12 to 18 pictures. Special software is used to “stitch” the photos together into the full-round VR. VR panoramas are usually viewed by Apple® QuickTime VR (QTVR).

P.5