2. Lecture Six Animation on the Web

3. 2 Lecture Overview Basics of animation Animation terminologies Animation techniques using Flash

4. 3 Basics of animation Animation incorporates many technologies with the goal of creating on-screen movement. Animations rely on the eye's persistence of vision. The term persistence of vision means - light's stimulus lingers on the retina slightly longer than it actually shines on the eye. Unmoving ghosts frozen in the eye until the next image flashes before it, and the brain is tricked into thinking that it is seeing one thing moving. Illusion of movement achieved by rapidly displaying a number of still images or frames in a sequence

5. 4 Basics of animation cont… Movies and video deliver 24 and 30 frames/second, respectively, which are completely adequate for tricking into believing that images are in unbroken motion. Even 15 frames/second can be enough to eliminate the impression of strobing or flicker. More frames/second are better, up to the point where more frames means more work without resulting in better motion.

6. 5 Illusion of Motion

7. 6 Basic terminologies Web animators are always speaking about - How many frames per second? What's the data rate, and what's the frame size? Is that 24 bits, or has it been dithered to 8, or does it use the 216-colour Web palette etc? At the very least, following concepts should be clear –Frames Per Second –Frame Size –Animation Size –Data Rate –Connection Speed –Colour Depth –Colour Palettes –Dithering

8. 7 Frames Per Second Frames per second (fps) is also called frame rate. 30 fps is standard for video, 24 fps is standard for film, Anywhere from 1 to 30 fps works for Web animation 10 fps is about the minimum rate for convincing motion. Any real stylistic control of timing, you need closer to 20 fps, So plan accordingly when you're considering the size and data rates of your animation.

9. 8 Frame Size Frame size is commonly expressed as number of pixels wide  number of pixels high Television frame size is 640 x 480 pixels, QuickTime movies play at 320 x 240 pixels. Web animation can be any size that fits on Web page depending on the limitations of download and playback performance of audience computers.

10. 9 Animation Size Animation size means the amount of storage space in KBytes that an animation occupies on a hard disk. Size determines download time over a given network connection speed. Typical animated GIF buttons are about 1K or smaller, Full-size (468 x 60 pixels) animated GIF banner ads are about 8K to 15K. Animation size coasts money, as well as affect the user's experience. This is true on small sites, where server space costs by the megabyte, or on large ones, where fees are determined by the volume of data transferred from a site in the course of a month.

11. 10 Data Rate Data rate is the amount of data used by an animation over time as it plays - usually expressed as Kbytes/ sec. It is of interest primarily for streaming animation - because for downloaded animations, the total file size is of primary importance. Data Rates for Common Streaming Animation Formats –QuickTime (ClearVideo codec)10 K/sec –QuickTime (Cinepak codec)20 K/sec –RealMedia (Video, 28.8 modem) 2.5 K/sec –RealMedia (Video, ISDN) 7.5 K/sec –QuickTime (2x CD-ROM Cinepak) 180 K/sec –QuickTime (4x CD-ROM Cinepak) 300 K/sec

12. 11 Connection Speed Connection speed is the amount of data transmitted over the network to the user's computer, expressed as KBytes (KB) per second. Modems and networks are rated at baud rates and kilobits per second (Kbps), respectively. –For example, a 28.8K modem transfers at 28.8 baud, under ideal conditions, which translates to 28.8 Kbits per second (Kbps), minus some communications overhead. –A 33K animation takes 10 seconds to download over a 28.8 connection or can play back in streaming mode at 3.3 K per second, which is barely enough data for video. Line noise, server and Internet bottlenecks, and many other factors affect these rates adversely.

13. 12 Download Speeds (Under Ideal Conditions) ConnectionRated Speed Data Rate Supported 28.8 modem28.8 Kbps3.3 K/sec 33.6 modem33.6 Kbps3.9 K/sec 56.6 modem56.6 Kbps*6.6 K/sec ISDN BRI56 Kbps to 128 Kbps7.1 to 16 K/sec Frame relay56 Kbps to 1.5 Mbps7.1 to 187.5 K/sec ISDN PRI1.5 Mbps187.5 K/sec ADSL modems 9 Mbps1.1 MB/sec 10-T Ethernet 10 Mbps1.3 MB/sec 100-T Ethernet 100 Mbps12.5 MB/sec *To date, 56K modems rarely achieve even close to this rate in normal day-to-day use.

14. 13 Colour Depth Colour depth defines the number of colours in an image or animation. –For example, 8-bit-colour computer displays 256 colours. –8-bit gray scale palette defines 256 levels of gray, evenly distributed from white to black, –4-bit gray palette has only 16 levels of grays, from white to black, and –1-bit palette can display only pure black and pure white. 24-bit colour represents true-colour photographs with millions of colours. 16-bit colour provide a reasonable approximation.

15. 14 Colour Palettes Actual selection of colours used to define an image, just as a given box of crayons defines what colours can be used to colour a picture. –For example, an 8-bit image can have 256 colours selected from a palette of millions. To display this image on an 8-bit display with a different colour palette (using a different box of crayons), image will be forced to conform to the system's palette. A colour that was burnt- orange, may suddenly be replaced by crimson. 16-bit or 24-bit colour system won't notice a problem with colour palettes, because it displays tens of thousands or millions of colours to represent any image accurately. Majority of users still have 8-bit (256-colour) displays - so Web animators are forced to conform to the limitations of those systems. Web palette is a specific set of 216 colours that are common to all browsers on all platforms - so an image that uses colours from this palette will display properly on any system.

16. 15 Dithering Dithering is one of the options for reducing an image or animation palette's colours. Dithering mixes a reduced palette of colours to closely approximate the image's intended colours, just as a painter mixes a limited number of paints to create a rainbow of possible colours. Dithering does this by alternating pixels of different colours from the reduced palette. Dithered colours are not as smooth as pure colours - you can see the tiny squares of colours used to approximate new colours. Dithering is almost always good for preserving an image's quality when you reduce its colour palette, but it is almost always bad for an image's compression. In general, large areas of solid colour compress better than areas of noisy, mixed colours, which is what you get when you dither an image.

17. 16 Animation techniques Flash has actually two methods of animating: –Frame-by-frame animation, and –Tweened animation

18. 17 Frame-by-frame animation Widely used form of animation Involves taking a snapshot of a frame’s content, changing it slightly and taking another snapshot, changing the content again, and so on. Suitable for complex animation in which an image changes in every frame instead of simply moving When playing snapshots in quick succession, movement and animation effect is obtained.

19. 18 Example Frames

20. 19 Tweened animation Two keyframes, one at the beginning and one at the end, are required Tweening creates all the in-between images that fill in the gaps between keyframes - graphic appearance at the beginning and at the end. Two types of tweening can be performed –Motion tweening –Shape tweening

21. 20 Example Shape tweening Motion tweening