EDU3130 Simple Graphic Manipulations I

1. EDU3130Simple Graphic Manipulations I Rosanna Chan

2. Multimedia Elements • Multimedia elements include: Digital Video Digital Audio Text abvdefghij Klmnopqrst uvwxyz Multimedia Graphics Animation UIT - Multimedia Production

3. Multimedia ElementsGraphics • Graphics is a digital representation of non-text information such as a drawing, chart, or photograph. • It is also called a digital picture or image, and contains no movement or animation • 3 fundamental characteristics of color • Hue (色調) • Related to the wavelength of light • Lightness (亮度) • Related to the amplitude of light • Saturation (彩度) • Related to the purity of light UIT - Multimedia Production

4. Multimedia ElementsGraphics Pixel • A pixel is the smallest unit of programmable color on a computer display or in a computer image • Every computer graphic is made up of a grid of pixels • There are two types of graphics • Bitmap graphics • Vector graphics UIT - Multimedia Production

5. Multimedia ElementsGraphics Bitmap Graphics • Bitmap is a representation of a graphics image • Consists of rows and columns of dots • The value of each dot (whether it is filled in or not) is stored in one or more bits of data • Simple monochrome images use one bit to represent each dot UIT - Multimedia Production

6. Multimedia ElementsGraphics Bitmap Graphics • The more bits used to represent a dot, the more colors and shades of gray that can be represented: 1-bit image, 2 color: black or white 8-bit image, 256 colors (28=256) 24-bit image, 16777216 colors (true color) UIT - Multimedia Production

7. Multimedia ElementsGraphics Resolution • Determines how sharply the image is represented • Expressed in dot per inch (dpi), or simply by the number of rows and columns, such as 640 by 480 • Bitmap graphics suffer distortion in image quality when being scaled up, this does not happen in case of vector graphics Vector graphic Bitmap graphic UIT - Multimedia Production

8. Multimedia ElementsGraphics Vector Graphics • Vector graphics are based on mathematical formulas that represent curves and lines • Very smooth looking and can easily be resized without loss of image quality UIT - Multimedia Production

9. Multimedia ElementsGraphics Formats • A format is a standard specifying how the data is arranged • For bitmap graphics • BMP • GIF • JPEG • For vector graphics • EPS • WMF UIT - Multimedia Production

10. Multimedia ElementsGraphics Formats • BMP (.bmp) • Microsoft's native graphic file format • GIF (Graphic Image Format) (.gif) • Only supports 256 colors; therefore the file sizes can be kept small. GIF works best when the number of colors within an image is small • JPEG (Joint Photographic Experts Group) (.jpg) • Supports millions and allows for graphic compression. Most people use JPEG for Web graphics that contain a multitude of colors and gradations - like photographic images • EPS (Encapsulated Postscript) (.eps) • For image attached within a PostScript language document • WMF (Windows Metafile Format) (.wmf) • For exchanging graphics between Microsoft applications such as clipart in Microsoft Office UIT - Multimedia Production

11. Multimedia ElementsGraphics Vector Graphics • An example of vector graphic is the clipart in MS PowerPoint • When you enlarge a clipart image, it will not distort UIT - Multimedia Production

12. Multimedia ElementsGraphics GIF versus JPEG • When the number of color of an image is large, JPEG performs better JPEG format, 6k bytes GIF format, 13.5k bytes UIT - Multimedia Production

13. Multimedia ElementsGraphics GIF versus JPEG • When the number of color of an image is small, GIF performs better JPEG, 5.4 bytes GIF, 1.5k bytes UIT - Multimedia Production

14. Multimedia ElementsComputer-based Animation • Literally, “To animate something” means “to bring it to life” • An animation covers all changes that have a visual effect (e.g. position, color) • Displaying a series of still graphics creates an animation, which is cause by the illusion of motion Techniques Used • Input Process • Drawings must be digitized (e.g. scanned) to create key frames, where the entities being animated are at extreme or characteristic positions. • The drawing may need to be carefully post-processed (e.g. filtering) in order to clean up any glitches arises from the input process UIT - Multimedia Production

15. Multimedia ElementsComputer-based Animation Techniques Used • In-between Process • Intermediate frames are insert between key frames • Interpolation methods is used • The computer obtain only the beginning and end positions, and fill-in the intermediate positions • Color changes is achieved by the Color-Look-Up Table (CLUT) of the graphic memory Frames Interpolation CLUT UIT - Multimedia Production

16. Multimedia ElementsComputer-based Animation Methods of Creating Animation • Digital animation is based on the flipbook approach – a sequence of images is compressed and then played back to convey a sense of motion • The playback rate is the number of images displayed per second when the animation is being viewed • To effectively create the illusion of motion, the playback rate of animation must be at least 24 frames per second • An image is said to Flicker when the illusion of motion fails and the animation appears as a rapid sequence of still images instead of a fluid object in motion UIT - Multimedia Production

17. Multimedia ElementsComputer-based Animation Frame-Based Animation • Also called cell animation • Key frames that describe key events in the timeline of the animation are created on cells or frames • Tweening (the process of filling in the frames between the key frames) is used to make the animation appear smooth • Morphing is a special technique that uses frames to create the illusion of one object changing into another (also called shape-tweening) UIT - Multimedia Production

18. Multimedia ElementsComputer-based Animation Path-Based Animation • Also called vector animation • Creates animated objects by following an object’s transition over a line or vector • The artist creates only one drawing and a path, then the computer manipulates this object by drawing the frames as the object travels over the path • Computational animation allows an object to be moved across a screen by varying its x and y coordinates UIT - Multimedia Production

19. Multimedia ElementsComputer-based Animation Script-Based Animation • Script-based animation is created using programming languages • LINGO • The programming language included in Macromedia Director • Is an object-oriented scripting language that extends Director’s build-in capability • JAVA • Java applets can be used to create advanced animated objects • Java enable computational animation: it can react to external input • Examples: http://fractal.leet.net.au/page.php?page=funkyapplets UIT - Multimedia Production

20. Multimedia ElementsComputer-based Animation Animated GIFs • Animated GIFs are a special kind of GIF file known as GIF89a • An animated GIF file stores multiple images as separate blocks within a single GIF file • When being viewed on the Web, the multiple images are streamed (played back one at a time) • Streaming: the viewer does not have to wait for the entire GIF to be downloaded before it begins running on a Web page UIT - Multimedia Production