Introduction to Multimediakareeem.com/images/portfolio/lessons/Multimedia.pdf · Introduction to...

56
Introduction to Multimedia

Transcript of Introduction to Multimediakareeem.com/images/portfolio/lessons/Multimedia.pdf · Introduction to...

Introduction to Multimedia

Page 2

Course Overview

What is Multimedia ?

Choosing your Meduim.

Multimedia Elements.

Multimedia uses & Applications.

Multimedia Development Life Cycle.

Multimedia Projects.

Page 3

What is Multimedia ?

Any combination of two or more of the following elements: text, image,

sound, speech, video, and computer programs within a single digital

information environment.

In Multimedia there are five ways to format and deliver your message.

You can write it, illustrate it, waggle it, hear it, and interact with it”

Page 4

In order to choose your medium you have to answer this questions:

What is the purpose of the finished product?

How much we want to involve the audience?

Will they have the options of navigations through the project (many, few or none)?

What is the nature of the product? Educational, informational, theatrical or marketing?

What will be the main source of the materials (text, videos or graphics)?

Choosing your Medium

Page 5

Choosing your Medium

Radio: combination of sounds and speech

Newspapers: combination of text and images

Television: combines all these elements (except computer programs)

and uses it to relay a message to the viewer.

Interactive Multimedia: combines full - motion video, animation, sound,

photographs, graphics with branching techniques to provide a fully

interactive computer-based presentation.

Page 6

Linear

• No Navigation or control from the Viewer

• video tape or digital video

• Presentation slides

Non-linear

Offers user interactivity to control progress

Website, CD’s

Computer Games

Choosing your Medium

Page 7

Hypertext and Hypermedia

World Wide WebIs considered as the most successful method for Hypermedia’s Implementation

Hyperlink

Page 8

Multimedia Elements

Page 9

Text

Page 10

Text in Multimedia Applications

of all multimedia elements, text is the easiest to manipulate

General guidelines:

– Be concise

– Use appropriate fonts

– Consider different type styles

– Be consistent

– Make the text readable

Page 11

Text in Multimedia Applications

Be concise – text fills < ½ screen

Large amounts of text

Alternatives? - animation, video, narration.

Show a preview and allow user to request more

Hyper linking

Pop-up messages, scroll bars,

drop-down menus

Working with Text

Page 12

Text in Multimedia Applications

Use Appropriate Type Fonts

Decorative

– Hard to read

– Used for emphasis

– Good for headings

Serif

– Creates illusion of a line and guides the eye across the screen facilitating readability

– Used on large blocks of text

Sans serif

– Clean, simple

– Good for headings

Page 13

Text in Multimedia Applications

Type styles: bold, italic, underline

– Used for emphasis

– Use for links – hypertext

Be consistent

– Similar headings – typeface, size, style

– Use same font for similar sections

– Graphic image for headings

Consistency vs. file size

Font Type Styles

Page 14

Text in Multimedia Applications

Make Text Readable

Choose fonts found in most systems

Choose only up to four variations of type styles, fonts and sizes

Page 15

Graphics

Page 16

Graphics in Multimedia

Graphics are an element that virtually all multimedia

applications include.

A graphic can be a:

– Chart

– Drawing

– Painting

– Photograph

– Logo

– Navigation button

– Background

– Banners

Page 17

What do graphics look like?

• Graphics can be:

– Black and White

– Grayscale

– Color

• It can be:

– Still

– Animated

Page 18

Graphics in Multimedia Applications

Graphical images - used to add emphasis, direct attention, illustrate concepts, and provide background content

Two types of graphics:

1) Bitmap graphics – represents the image as an array of dots, called pixels

2) Draw-type graphics or vector graphics – represent an image as a geometric shape

Page 19

Graphics in Multimedia Applications

Bitmapped graphics, also known as raster graphics, consist of grids of tiny dots called pixels. Each pixel is assigned a color.

– Can be a continuous-tone image, such as a photograph

– Enlarging a bitmap graphic may cause the image to lose crispness and clarity

Bitmap Graphics

To the left you see an image and to the right a 250 percent enlargement of the top of one

of the mountains

Page 20 20

Graphics Quality

Two factors that determine graphics quality are:

1. Resolution

2. Color depth.

Resolution: is the number of pixels per inch.

Color Depth: or “bit depth” is the number of bits used to represent the color of a single pixel.

Page 21 21

Color depth: refers to the number of absolute colors an image can contain.

It can range from 1-bit (21 colors “ only black and white”) to 32-bit (232 colors).

Graphics Quality

(1 bit color depth) Black & White

images (bitmaps) (on= black, off=white)

(8 bit color depth) Grayscale images

contain 256 shades of gray

as well as pure black and white.

(16 bit color depth) Duotones images

consist of black and a second color spot

color

(24 bit color depth) Full color

images RGB, CMYK

Page 22

High dynamic range imaging “HDRI”

HDRI : is a set of techniques that allow a greater dynamic range of

luminance between the lightest and darkest areas of an image than

current standard digital imaging techniques or photographic methods.

This wide dynamic range allows HDR images to more accurately

represent the range of intensity levels found in real scenes, ranging from

direct sunlight to faint starlight.

D:\color theory\HDRI

Page 23

Graphics in Multimedia Applications

Vector graphics use mathematical formulas to define lines, curves, and

other attributes.

– Generally much smaller than raster graphic files

– Do not lose clarity as you enlarge them.

– Appear as bitmaps on computer monitors because computer monitors

consist of pixels

Vector Graphics

Page 24

Graphics in Multimedia Applications

Image file sizes can become large, you must balance the

need for quality images with the need for small file sizes

Graphic Image File Sizes

Page 25

Sound

Page 26

Analog wave patterns – these wave patterns have two

attributes

– Volume – the height of each peak in the sound wave

– Frequency – (sometimes referred to as pitch) the distance

between the peaks. The greater the distance, the wider the

sound.

– Amplitude – the relative strength of sound wave or how

much of change in the air pressures occurs

Page 27

To include sound in a multimedia application, the sound

waves must be converted from analog to digital form

This conversion is called sampling – every fraction of a

second a sample of the sound is recorded in digital bits

Page 28

Sampling

Two factors affect the quality of digitized sound

1) Sample rate – the number of times the sample is taken

Most common sampling rates are: 11.025, 22.05,

and 44.1 kHz

2) Sample size – the amount of information stored about

the sample

Most common sampling sizes are: 8 and 16 bit

Page 29

Your first consideration when using sound on the Internet is

file size

Uncompressed files can be very large

– A 10 second recording of an audio CD can be as large as

2MB

Sound on the Internet

Page 30

Appropriate

Use

Consider the appropriateness of using sound. Some

sounds are content-related, such as hearing a foreign

phrase pronounced. Other sounds are for effect, such

as creating a mood or setting a scene. Avoid using

sound when there is no compelling benefit.

Quality Start with the highest-quality sound available and

reduce the file size by converting the audio file to a

compressed format. When possible, avoid using free

sound clips available from the Internet. These are often

of poor quality and overused.

Cost

considerations

When recording audio files, it may be cost-prohibitive to

contract with a recording studio and hire professional

talent. Investing in reasonably high-end equipment

(such as a sound card, microphone, and recording and

editing software), however, will prove worthwhile.

Sound Tips for the Internet

Page 31

Alternative

Methods

Consider using sound and still images as an alternative to

video to reduce file sizes. It may be just as effective to

show a photograph of a speaker and play the sound file of

the speech as it is to show a video of a “talking head.”

Streaming Consider streaming the audio, especially for large files.

User

Control

If appropriate, provide a way to give the user some

control over the audio. Consider allowing the user to skip

a sound clip or adjust the volume. This issue is especially

important if a musical introduction is played when the user

first enters a Web site. The second time visiting the site,

the user may not want to hear the musical introduction.

Sound Tips for the Internet

Page 32

Video

Page 33

Video

Video, like sound, is recorded and played an as analog signal

Analog video must be digitized in order for it, to put into a

multimedia file

Digital video has many advantages, but file size is important

Page 34

Video

Several elements determine file size:

– Frame rate

– Image size

– Color depth

To determine file size use the following formula:

– Frames per second X image size X color depth / 8 = file size

Page 35

Video Compression and Editing

There are two types of video compression

– Lossless – preserves the exact image throughout the

compression

– Lossy – eliminates some of the data in the image

(provides greater compression ratios than lossless)

Remember : there is always a trade off, file size versus

image quality

Page 36

Video Tips

Color

depth

Reducing the color depth to less than 256 colors gives a

markedly poorer-quality image.

Frame

rate

Reducing the frame rate to less than 15 frames per

second causes a noticeable and distracting jerkiness that

is usually unacceptable.

File size A technique for reducing file size is to minimize the use of

video in the image that appears on the screen – that is, to

create video only for the parts of an object that are

changing, such as a flickering candle. The video could be

played over and over to create the motion of a flickering

candle.

Page 37

Video Tips

Display size In most multimedia titles, you do not need to show

full-screen video. The video can be played in a

window that can be as small as one-fourth or even

one-sixteenth the size of the screen.

Conclusion: Changing the image size and compressing the file

become the primary ways of reducing file size. In most cases, a one-

quarter screen image (320 X 240), an 8-bit (256 colors) color depth,

and a 15 frames per second frame rate are acceptable in a multimedia

title.

Page 38

Animation

Page 39

Animation on the Internet

Animation is an excellent way to provide appeal on a web

site, choose from the following

– Animated text

– Animated GIF’s

– Flash animations

– 3-D environments

Page 40

2-D Animation

Two types of animation exist

– Cel animation – based on changes that occur from one

frame to the next

– Path animation – moves an object along a predetermined

path on the screen

Page 41

3-D Animation

3-D Animation involves three steps

1) Modeling – creating the broad contours and

structure of 3-D objects and scenes

2) Animation – defining the object’s motion

3) Rendering – giving objects attributes such as

color, surface textures, and amounts of

transparency

Page 42

Design Considerations

Give the user control over whether or not to display or enlarge graphic images

Allow the user to be active while graphic images are being displayed

Provide feedback to the user by displaying the amount of time a file will take to download

Page 43

Multimedia Development

Life Cycle

Page 44

Multimedia Development Life Cycle

Needs Assessment

Analysis & Design

DevelopmentFulfillment

Maintenance

Page 45

Phase I: Preliminary Needs Assessment

Overall project objectives and expectations are defined.

Depending on project scope, either results in a quote for

project completion or a quote for complete Phase II

Analysis & Design.

Page 46

Phase II Analysis & Design

Analysis

Gathering a full understanding of : Your goals

Market position

Product line

Timeframe

Distribution requirements

Budget

System and resource constraints.

We discuss concepts, challenges, and potential integration with other

systems and/or marketing programs

Output : Phase III Development Proposal

Page 47

Development Proposal includes:

Overview - description of project goals, conceptual approach, and Phase II

deliverables.

Storyboard - graphic outline of project interface, navigation, and key visual

components.

Application Flow - textual outline of all project components, timing, and

navigation options.

Content Description - detailed description of all content, including:

photography, computer graphics, text, video, voice-over audio, music, sound

effects, animations, etc.

Phase II Analysis & Design

Page 48

Content Acquisition Plan - assignment of DIMACC, customer and

third party responsibilities in gathering, altering, and creating specific

content components.

Implementation Strategy - plan detailing all tasks, technologies, and

performance benchmarks required for remaining project phases.

Budget and Schedule - detail of costs, delivery dates, and milestones

associated with project deliverables.

Phase II Analysis & Design

Page 49

Storyboard Example

Page 50

Navigation Example

Page 51

Sequential Navigation Scheme

Image: scanned from Multimedia Concepts – James Shuman

Page 52

Topical Navigation Scheme

Page 53

Phase III Development

Final Copy and Content Development

– Create, acquire and prepare all photographs, user interface graphics, and

other illustrations

– Model, animate and render all 3D animation components

– Record, digitize and composite all audio and video components

– Edit and process all textual components

– Acquire and prepare all external components such as install software,

databases, linked websites, etc.

Page 54

Programming, Testing & Mastering

– Build authoring platform framework

– Import content

– Develop all programming components

– Test for proper function and performance targets

– Optimize performance for each platform

– Burn beta version for customer content review and functional testing

– Burn gold master for replication

Packaging and Support Literature Design

– Design and layout packaging and collateral materials

– Proof and revise as needed

– Produce make-ready films and/or digital files

Phase III Development

Page 55

Go to market with approved gold master CD and all supporting

materials.

Customization as required

– Prepare additional versions for specialized usage

CD Replication, Printing when required

– Manufacture CD-ROMs

– Print and/or label CD-ROMs

Packaging/Distribution

– Print CD-ROM packaging and collateral materials

– Assemble/stuff and prepare for distribution

– Distribute

Phase IV Fulfillment

Page 56

Phase V Maintenance

The ongoing development of a multimedia project to add new products,

functionality, and distribution channels.

Add and revise content and functionality (Phase II)

Convert to additional media types (video, web, DVD, etc.)

Produce and fulfill (Phase III)