CHAPTER 6 : Part 2 - metalab.uniten.edu.mymetalab.uniten.edu.my/~nursyazana/CMPF114/Chapter 6 Part 2.pdf–Specify the advantages and disadvantages of using these elements –Understand

UNIVERSITI TENAGA NASIONAL“Generates Professionals”

CHAPTER 6 : Part 2INTRODUCTION TO MULTIMEDIA:

MULTIMEDIA BUILDING BLOCKS


Module Objectives

At the end of the module, students should be able to:

– Describe the characteristics and attributes of text, graphic, sound, animation and video elements that make up multimedia

– Specify the advantages and disadvantages of using these elements

– Understand the various file format used for each of these elements


Multimedia Building Block I Text


Text in History

– Written text came into use about 6000 years ago

• Mesopotamia, Egypt, Sumeria and Babylonia

– Initially text was written in symbols

• Pictographics signs and cuneiforms


Text in Multimedia

– A key component of any multimedia product

– Multimedia products depend on text for various reasons• Page title

• Content of the information

• Label and Instruction

– Text/Word must be chosen carefully• Precise and accurate meaning to describe what you mean

– Words appears in titles, menus and navigational aids

– Test the words that you plan to use on several users and observe their reaction.


Text Types Terminology

• A ‘typeface’ is a family of graphic characters that usually includes many type sizes and styles.

– ARIAL

– Courier

– Times

• A ‘font’ is a collection of characters of a single size and style belonging to a particular typeface family.

– This is an Arial font size 14, bold and underlined

– This is a Times New Roman font size 20, bold, italic and underlined


Text Types Terminology

• Point: the font size is usually measured in point.

– A point is 1/72 of an inch (0.0138)

• Leading: the vertical space between lines of text

• Kerning: the space between two characters

• Adjusting the space between the characters is also called tracking

Text Line one

Leading (Line spacing)

Text Line two


Text Types TerminologySerif versus Sans Serif

– The serif is the little decoration at the end of a letter stroke– Serif

• Old-fashioned, suitable for body text easy to read (printed)• Serif fonts are considered to be more readable on printed pages.

• Times , Century Schoolbook , Bookman

– Sans serif (without serif)• Clean, simple and modern, suitable for headlines and bold

statements• Sans serif fonts are usually more readable on computer screens.

• Arial , Century Gothic, Verdana


Serif vs. Sans Serif

EESerif Sans serif

VerdanaTimes New Romans


Hypertext

• Hypertext is defined as the organized cross-linking of words, images, and other Web elements.

• A system in which words are keyed or indexed to other words is referred to as a hypertext system.

• A hypertext system enables the user to navigate through text in a non-linear way.

• HTML Hypertext Markup Language.– Standard document format used for Web pages.


Hypertext Document

XXXXXXxxxxx xx xxxxxx xxxx xxxxxxxx xxx xxx xXxxxxxxxx xxxxx xxx xxxx

xxxxxxx xxxx xxx xxxxxxxx xxxxxxx xxxx xx xxxxxxxx xx xxx

XXXXX

Xxxxxx xx xxx xxxxx xxxxxxx xxxx xxxx xxx xxx xxxxxxx xxx xxx x.

xxxxxxx xxxx xxx xxxx xxxxxxxx xxxxxxx xxxx xx xxxxxxxx xx xxx

XXXXXXxxxxx xx xxxxxx xxxx xxxx

xxxx xxx xxx xXxxxxxxxx xxxxx xxx xxxx

xxxx xxxxxxxx xxxx xxx xxxxxxx xxx xxxxxxx xxxx xx xxxxxxx xx xxx xx xxxxx xx xxx

XXXXXXxxxxx xx xxx xxx xx x xxxxxx xxxx xxxx xxxxx xxxxx x

xxxx xxx xxx xxxxx xxxx xx xxxxxxxxx xxxxx xxx xxxx

xxxxxxx xxxx xxx xxxxxxxx xxxxxxx xxxx xx xxxxxxxx xx xxx

links

Nodes

Data is stored in a network of “nodes”

connected by “links”.

Nodes can contain text, graphics, audio,

video, and other forms of data.


Multimedia Building Block II Images


Making Still Images

• Still images are drawn in one of two ways:– Bitmapped images

• Clip art

• Bitmap software

• Capture

• Scanning

– Vector-drawn images

• Images are usually compressed to save space

– Formats like GIF, JPEG and PNG incorporate compression


Bitmapped Image

• A simple matrix or grid of dots with color information.

i.e. an array of color dots that when looked at from distance forms an image.

• The smallest element of a bitmap is a pixel (Picture element)

A pixel


Vector Image• Image data are stored in the form of

– Data points that describe the collection of lines, curves, circle, ellipses, text, polygon and other shape

– The characteristic of each shape such as line type and fill/shading specification

• The information of the images can be stored as coordinates

• The computer recreates the image based on the information describing the image.

RECT 0,0,200,200,RED,BLUE

200

200


Bitmapped vs Vector Images

• Vector images are easily scaled without quality loss.

• Bitmapped images get grainy and pixilated when zoomed in

Vector images

1x

3.5x

1x

3.5x

bitmap images


Bitmapped vs Vector Images• Vector image require plug-ins

• Vector image can easily be edited

• Vector image files are usually smaller compared to bitmap

– Contain only information how to recreate the image

• However, to display complex vector images might require more systemresources

• Bitmaps are more suitable for large images with many different colors(photograph)

• Special effect can easily be applied on bitmapped image (distortion,blurring).

• Bitmap graphics are web friendly

• To apply the same effect, vector image need to be transformed to bitmappedfirst.


Image File Formats

• There are many file formats used to storebitmaps and drawings :

– Windows device-independent bitmap (DIB)

• .bmp

– CompuServe GIF (.gif)

– JPEG (.jpg)

– Apple Macintosh PICT (.pic or .pct)

– Portable Network Graphic (.png)

– .tiff


Image File Formats

• There are many file formats used to storevector and drawings :

– AI (Adobe Illustrator)

– CDR (CorelDRAW)

– CMX (Corel Exchange)

– CGM Computer Graphics Metafile

– DXF AutoCAD

– WMF Windows Metafile


Multimedia Building Block III Sound


Understanding Sound

• Sound as a form of energy

• Sound travels as waves at 750mph (at sea level)

• Sound pressure is measured in decibels (dB)

• Human ear can detect frequencies in the range between 20Hz to 20kHz– For example, a turbojet engine might be as loud as 165

dB. A car driving on the highway, about 100 dB. And, a whisper, averaging around 35 dB.

– We cannot hear very high frequencies outside our hearing range and neither can we hear very low ones.


ADCVoice 10010010000100

Sine wave

(Analog)

Digitization Of Sound

Digital

Analog - Digital Converter


Plenty of Disk Space

Plenty of Memory

Sound Card

Sound EditingTool

Audio Files Are Quite Large, So You Need To Have :-

Speaker/ Microphone

What You Need To Have Audio or Sound


Types of Sound

• Music– Background - To set the mood

– Attention grabber - To catch the interest of the audience

– Special effect

• To reinforce message or theme

• To alert the audience

• Speech – effective for training and educational application.

– Narration

– Instruction


Sound Consideration

• While sound (music or narration) can be veryuseful, most of the time, they can be irritating aswell.– Use appropriate music to reflect the mood or

theme.

– Give the users choice of turning off/on the sound.

– In cases where the content of a page depends onsound (speech), consider providing transcript asthe alternative. (for deaf people, non multimediapc)


Digital Audio Overview

• Digital audio is a representation of the original sound.

• Sound digitization is obtained through– Sampling

– Quantization

– Code-word generation process

• Digitized sound is called sampled sound.• Digital audio usually uses large storage space

• Digital audio is less affected by hardware, thus providing consistent playback quality.

– Audio track for multimedia project will sound as good in the end as it did in the beginning when it is created.

• Require less musical talent to record.


Audio File Formats

• Common file types used for digitized sounds

– AIFF audio (.aifc, .aiff, .aif)

– MIDI (.midi, .mid)

– MP3 Audio (.mp3)

– Ogg-Vorbis (.ogg)

– Real Audio (.ra, .ram, .rm)

– Windows Media (.wma)

– WAV audio (.wav)


Multimedia Building Block IV Animation


The Power of Animation•Animation is achieved by adding motion to still image / object.

•May also be defined as the creation of moving pictures one frame at a time.

•Animation grabs attention.

• Few types of animation– Layout transition (i.e. in PowerPoint)

– Process/ information transition

– Object movement


Layout Transition

• The simplest form of animation is transition

• Transitions specify how the display changes (such as fading to black) as a user moves from one item (such as slide or Web page) to another)

• Examples :– Spiral

– Stretch

– Zoom

– Checkerboard


Process / Information Transition

Animation can be used to describe complex information / process in an easier way

– Perform visual cues (e.g. how things work)


How Animation Works?

It is believe that animation is possible because of

• a biological phenomenon known as persistence ofvision

– An object seen by human eye remains chemicallymapped on the eye’s retina for a brief time after viewing

• a psychological phenomenon called phi.

– Human’s mind need to conceptually complete theperceived action i.e. translating the action


How Animation Works?

• Combination of these two (persistence of vision + phi) make it possible for a series of images that are changed very slightly and very rapidly, one after another, to seemingly blend together into a visual illusion of movement.

• E.g. a few cells or frames of rotating logo, when continuously and rapidly changed, the arrow of the compass is perceived to be spinning.

Still images are flashed in sequence to provide the illusion of animation


How Animation Works?• The speed of the image changes is called the frame rate.

• Movie/Film is typically delivered at 24 – 30 frames per second (fps)

• Computer animations can be effective at 12 to 15 frames per second

Morphing – process of transforming one image into another via a series of frames


Animations File Formats

• Some file formats are designed specifically to contain animations :

– Macromedia Director (.dir and .dcr)

– Macromedia Flash (.fla and .swf)

– AnimatorPro (.fli and .flc)

– 3D Studio max (.max)

– SuperCard (.pics)

– CompuServe GIF89a (.gif)


Multimedia Building Block VVideo


Intro To Video

• The term "video" commonly refers to related types of carrier formats —which can either be digital (DVD, Quicktime, Ogg) or analog videotape (VHS, Betamax).

• Television broadcasting and home movies have long been the traditional application of video technology

• The Internet has made possible the rise of compressed video file formats to syndicate video files to a global audience.

• Video is also used in scientific engineering,

• manufacturing, and security applications.


Digital Video

Advantages Disadvantages

Easy to edit sequences of video (frame by frame)

high capacity storage

Easy to add special effects Easily duplicated (piracy)

Quality of the original video are retained / maintained in the new copy. Digital mastering means that quality will never be an issue

Require high-end pc to process and deliver (fast processor, plenty of RAM, fast and big hard disk

Better image and audio quality (digital quality). Digital video reduces generational losses suffered by analog video

User need to have good knowledge and background in video compression and technology

Long lasting, offer superior quality at a given cost


Video Consideration

• To get the highest video performance, we should:

– Use video compression hardware to allow you to work with full-screen, full-motion video.

– Use a sophisticated audio board to allow you to use CD-quality sounds.

– Install a Super fast RAID (Redundant Array of Independent Disks) system that will support high-speed data transfer rates.


Obtaining Video Clip

• If using analog video, we need to convert it to digital format first (in other words, need to digitize the analog video first).

• Source for analog video can come from:

– Existing video content / clips• beware of licensing and copyright issues

– Take a new footage (i.e. shoot your own video)• Ask permission from all the persons who appear or speak, as well as

the permission for the audio or music used.


How Video WorksVideo basics

– Light passes through the camera lens and is converted to an electronic signal by a Charge Coupled Device (CCD)

– Most consumer-grade cameras have a single CCD.

– Professional–grade cameras have three CCDs, one for each Red, Green and Blue color information (RGB)

– The output of the CCD is processed by the camera into a signal containing three channels of color information and synchronization pulse (sync).


Video Compression

• Because of the large sizes associated with video files, video compression/decompression programs (Codec) have been developed.

– Lossless compression preserve image throughout the compress/decompress process.

– Lossy compression eliminates some of the data in the image (greater compression ratios) usually used for video as some drop in quality is not noticable in moving images

– Trade-off is file size versus image quality.

– Common compression standards

• MPEG (Motion Picture Experts Group)

• JPEG (Joint Photographic Experts Groups)


Documents

CHAPTER 6 : Part 2 - metalab.uniten.edu.mymetalab.uniten.edu.my/~nursyazana/CMPF114/Chapter 6 Part 2.pdf–Specify the advantages and disadvantages of using these elements –Understand