MELJUN CORTES MANUAL Multimedia CCIT01

8/13/2019 MELJUN CORTES MANUAL Multimedia CCIT01

1/26

MULTIMEDIA

A presentation of information combining text, sound, pictures, animation and video.

Using more than one type of media simutaneousy i!e "ith text, sound, moving or sti

images, music, etc.

#omputer based mutimedia systems integrate and contro presentation of different

media data types, i.e, text, graphics, sti images, animation, video, audio in one or more

combination.

MULTIMEDIA $%$TEM$ &I$T'(%

The term )mutimedia* "as first used in the +*s to describe presentations combining

photographic sides and audio tape.

Ma-or deveopments came in /01 "ith the aunch of the 2hiips Laser vision video disc.

This anaog system combined audio, sti and motion video.

Laser vision ed the first interactive video appications.

Laser vision aso gave birth to the digita audio compact disc 3/145.

This ed to #D6('M and ater in 3in //5 to #D3#ompact Disc Interactive5

7ote the gradua move from anaog to digita systems. These systems exist in order to

communicate information.

#ommunication may use a variety of forms of expression.

1/21


2/26

AD8A7TA9E$ ': MULTIMEDIA

More contro

More portabe

(eusabe pieces

#ommand attention

Enhances information retention

#arifies compex information

Interacts "ith your audience

DI$AD8A7TA9E$ ': MULTIMEDIA Too detaied

Time consuming

Expensive

MULTIMEDIA #'MM'7 A22LI#ATI'7$

. Entertainment

4. #omputer games

;. Educationios!s


3/26

MULTIMEDIA ELEME7T$

. 8isua Eements

2hotographs, dra"ings, and other sti images must be formatted for computer used

and dispay. $uch formats incude bitmapped graphics and vector graphics

?itmapped graphics represented images as ro"s and coumns of tiny dots. 8ector

graphics use mathematica formuas to recreate the origina image and they

generay oc! better.

8ideo fies can be @uite arge, so they are usuay compressed, a techni@ue that

repaces recurring information, such as one hundred bac! dots in a ro", "ith a

singe piece of information. Data compression can shrin! video fies by /=, bu

introduces fuBBiness.

4. $ound Eements

$ound must aso be formatted for computer use. 'ne format store actua sounds in

arge fies that may re@uire compression. Another format stores instructions that

enabe devices caed synthesiBers to reproduce the sounds or music. Instruction

fies are much smaer, but the @uaity of the sound reproduction is "orse.

;. 'rganiBationa Eements

'rganiBation of a mutimedia representation is enhanced by hyperin!s, associations

to additiona reated materia. A user points the cursor to coored or underined ext or

to a sma picture, caed an icon, and cic!s on a mouse to access the materia

&yperin!s may ead users to unexpected information.

MUTIMEDIA #'7#E2T$ A(E ?A$ED '7 T&(EE ?A$I# ELEME7T$

. $ound C Audio

3/21


4/26

#oding

$torage

Music

$peech 2rocessing

4. Images and 9raphics

(epresentation

:ormat

$ynthesis

;. 8ideo and Animation

?asic media for mutimedia systems

8isua representation

#oding and compression

MULTIMEDIA ELEME7T$ #&A(A#TE(I$TI#$

I 6 TET

Text is at this time sti the used and accessibe medium in the deveoped "ord.

&ypertext can be used as navigationa too.

&ypertext can be used to buid conceptua ayers of meaning.

Indexing and searching possibe.

'f no use to iiterates.

Eyestrain.

#oud be used as an ineffective666one can become ost in a &yperforestF.

$ti the best "ay to communicate arge @uantities of information.

Use text to support graphics.

&ypertext can support atera thin!ing.

'ther media can communicate the message better.

9uideines in Gor!ing "ith Text

4/21


5/26

. ?e concise.

Don*t rey soey on text to get your point across.

Text shoud fi ess than haf of the screen.

4. Use appropriate fonts.

To enhance readabiity.

To set the right tone.

To pro-ect the right image.

;. Ma!e it readabe.

$erif fonts are easier to read.

$ans serif fonts are heading and sma amounts of text. Decorative fonts are best use for emphasis.

Use 64 points for text.

Use arger points for headings.


6/26

4. Ease of understanding

;. A pictureJ a "ords


7/26


8/26

TIME LI7E

A reference too.

A media production schedue 3used by production managers to coordinate the various

deveopment efforts5.

The overa mutimedia design and deveopment process.

2&A$E$ ': TIMELI7E

. DE$I97 2&A$E 6 encompasses a the initia steps, from brainstorming and story

boarding to the creation and user testing of the prototype.

a. ?rainstorming

- The first phase "hich invoves a tight group of about ; to 0 !ey peope, incuding

a designer, a programmer, and anyone ese important to the particuar pro-ect.

b. $toryboarding

- $erve the purpose of roughy iustrating a concept and inspiring peope to thin!

of possibiities.

- $houd sho"case the entire !ey screens, or pacesF, that compromise the

proposed tite.

- 2aint the initia picture of mutimedia concept.c. 2aces

- The organiBation of a mutimedia tite.

- Ghen conceptuaiBing a mutimedia pro-ect, you need to thin! about a the

different paces that you "i need to accommodate the given content.

d. :o"charts

- #ompements the storyboards by giving a sense of organiBation and navigation

to a mutimedia design concept.

- ?egins to "ireF together a the paces mentioned in the storyboards.

e. 2aper Design

- Gi act as a bueprint for the entire pro-ect*s deveopment.

8/21


9/26

- It covers the structura design and the soft"are strategy, as "e as the media

production re@uirements and the user interface design.

- #onsists of the foo"ing documents.

a. 'rigina storyboard

b. :o"chart indicating the architectura structure and genera navigation through

the tite

c. Detaied :unctiona $pecF666detais of the action on the screen and iustrates

ho" the user interacts "ith it.

f. 2rototype

- There are 345 approaches in creating a prototypeJ

a. To use a friendy authoring too for the soe purpose of moc!ing up the user

interaction and the graphic stye.

b. To pic! a sma cross section of the tite and use your intended6authoring too

to put together a prototype.

g. User Testing

- An important exercise that shoud occur throughout the design and deveopment

process.

- A fe" hours spent testing your prototype "ith a focus group can save hundreds

of production hours ater on.

4. DE8EL'2ME7T 2&A$E H is a bro!en do"n into a fe" sub phasesJ the apha, beta and

finay, the goden master.

a. Apha

- There shoud not be any bugsF that boc! access to the ma-or features or paces

of the tite.

b. ?eta

- The ast round of fina media production, programming , and testing before a tite

is decared finished and ready for dupication.

- There shoud be ony minor bugs eft in the tite.

9/21


10/26


11/26


12/26

- This feature a coection of independent media ob-ects, but each ob-ect has a set

of behaviors that have been engineered to create interesting and sometimes

unpredictabe interactions.

- The "hoe design paradigm of constructive tite is based on cause and effect.

1. $imuation

- Mutimedia is an exceent medium for emuating rea6ife systems.

- In mutimedia simuation, individua ob-ects have been designed "ith a set of

behaviorsF that respond to conditions set by the user.

9(A2&I# 2('DU#TI'7

I H Toos of the Trade

- $oft"are for creating mutimedia imagery.

$oft"are that ma!e up the cornerstone of mutimedia graphics productionJ

. Adobe 2hotoshop

- The singe most po"erfu soft"are "or!horse for creating the imagery found in

most mutimedia and onine appication today.

- Ao"s you to edit and manipuate an image, to access and edit a three (9?

pates that together ma!e up an image.

- A bitmap6based program, made up of a coection of coored pixes in a fixed

resoution defined by dots per inear inch.

4. Adobe Iustrator

- A vector6based program, images are defined by points connected by ines and

curves that create mathematica outine.

- Advantage of Adobe Iustrator is it can create graphics that are resoution

independent.

;. E@uiibrium De?abeiBer

- It*s an Automated Image Editor

Ghen you edit one image, De?abeiBer can perform the same commands on

tens, hundreds, or even thousands of other fies automaticay. De?abeiBer

12/21


13/26

saves you hours of time by automating more than ; image editing commands

incuding many not avaiabe in 2hoto$hop.

- It*s An Automated 9raphics 'ptimiBer

7o" you can finay reduce fie siBe safey "ithout ris!ing picture @uaity

De?abeiBer*s has suite of graphics optimiBation toos, incuding the a"ard

"inning $uper2aette engine, are the best in business.

- It*s the Gord*s most 2o"erfu :ie #onverter

Do you create graphics for both print and the Geb Ghy create graphics t"ice

"hen you can automaticay convert them "ith De?abeiBer De?abeiBer reads

and "rites more than one hundred fie formats incuding 9I: N2E9 TI: uic!

Time, and 2hoto$hop.

- It*s the soution for Automating your 9raphics Gor!fo"

De?abeiBer ties together a of it*s editing, optimiBing and conversion feature in

one easy6to6use drag and drop interface. 7o" you can harness the a"esome

automated graphics production po"er of DebabiiBer in no time at a. %ou might

-ust "onder "hy you ever did anything manuay.

'ther $oft"aresJ

. Macromedia :ree &and

A vector6based i!e Iustrator. #ompex :ree &and fies, "hen opened

in 2hotoshop, does not a"ays convert to bitmaps.

4. :racta Design 2ainter

A bitmap6based program i!e 2hotoshop that speciaiBes in emuating

traditiona fine art media such as charcoas and ois.

II H &ard"are

- ?asic hard"are configurations for mutimedia designers.

. #omputers

13/21


14/26

6 Most graphic designers are Macintosh computers.

4. Monitors

6 $iBe of the monitor, at east 0inches.

6 ?e sure that your monitor is capabe of dispaying thousands, if not miions, of

coors at a time.

;. (emovabe $torage

- T"o companies that have set the standard for removabe storage are Iomega

and $yuest.

- IomegaJ

a. Oip drive H a sma, ight"eight, and portabe drive that reads 6

megabyte cartridges that are the siBe of a foppy.

b. NaBB Drive H a sma, ight"eight, and portabe, but their foppy6siBe

cartridges each hod gigabyte of media.

- $yuestJ

a.


15/26

. 'nscreen resoution

- The computer screen has a fixed number of sotsF in "hich to dispay pixes

generay 04 sots per inear inch 3referred to as 04dpiF dots per inch5.

4. Image $iBe versus (esoution

- Images that are not 04 dpi are dispayed according to their resoution rather than

their actua siBe.

;. Matching Image and Monitor (esoution

- Ghen designing onscreen graphics, it amost goes "ithout saying that the

resoution of your images shoud match the resoution of the dispay monitor.


16/26

scanning is the correct siBe or arger. If you need to enarge the image, then you

shoud scan at a higher resoution.

(educing Image (esoution. It is a"ays best to capture as arge an image as

possibe in the scanning process and then reduce the resoution "ith a too i!e

2hoto $hop. A arge origina scan gives you more options "hen it comes to

do"nsiBing your image.

Avoiding Interpoation. Ghat you "ant to avoid at a costs is bumping images up

to a higher resoution 3enarging images5. The resoution is increased by adding

artificia dots bet"een the dots gathered by the scanner. Interpoated data is ony as

good as the origina information and ony ma!es the image "orse "hen the image is

of poor @uaity to start "ith. &igh resoutions are ony needed for those images that

need enarging.

2urchasing a scanner for capturing images that "i eventuay be outputted to

print then the resoution of the image shoud be determined by the output device

$canning at higher resoutions "i ony "aste vauabe time and disc space.

(edundant data "i be disregarded by the printer and there "i be no benefit in

image @uaity. If outputting to print the ma-ority of appications "i be handed easiy

"ith ; x + dpi optica resoution scanners.

. Digita #ameras

- Li!e conventiona ;=mm cameras, digita cameras use optica enses.

&o"ever, rather than capturing the image to fim, the image is captured "ith a ##D

chip and stored internay either as anaogue or digita signas. The images can betransmitted over net"or!s and teephone ines, dispayed on the screen and printed

The speed "ith "hich images can be produced and transmitted is of great vaue to

peope "ho need images fast. In instances "here the images are stored as

16/21


17/26

anaogue, one sti has to pug the camera and disc into a digitising board. The

images once captured can then be atered in the appropriate "ay.

;, 2hoto#D

6 2hoto#D is a digita image format and provides a mechanism for

high resoutions. 2hoto#D images can be manipuated further using image

processing soft"are.


18/26


19/26

transparencyQ something that is competey invisibe. 'f course, ony part of a graphic

"oud by fuy transparent, or there "oud be nothing to see. More compex is Qpartia

transparencyQ or QtransucencyQ "here the effect is achieved that a graphic is partiay

transparent in the same "ay as coored gass. $ince utimatey a printed page or computer

or teevision screen can ony be one coor at a point, partia transparency is a"ays

simuated at some eve by mixing coors. There are many different "ays to mix coors, so

in some cases transparency is ambiguous.

In addition, transparency is often an QextraQ for a graphics format, and some graphics

programs "i ignore the transparency.

(aster fie formats that support transparency incude 9I:,279, and TI::, through either a

transparent coor or an apha channe.

Most vector formats impicity support transparency because they simpy avoid puttting any

ob-ects at a given point. This incudes E2$ and GM:. :or vector graphics this may not

stricty be seen as transparency, but it re@uires much of the same carefu programming as

transparency in raster formats.

More compex vector formats may ao" transparency combinations bet"een the eements

"ithin the graphic, as "e as that above. This incudes $89and 2D:.

A suitabe bitmap graphics editorsho"s transparency by a specia pattern, a chessboard

pattern.

19/21
http://en.wikipedia.org/wiki/GIFhttp://en.wikipedia.org/wiki/PNGhttp://en.wikipedia.org/wiki/TIFFhttp://en.wikipedia.org/wiki/Alpha_channelhttp://en.wikipedia.org/wiki/EPShttp://en.wikipedia.org/wiki/WMFhttp://en.wikipedia.org/wiki/SVGhttp://en.wikipedia.org/wiki/PDFhttp://en.wikipedia.org/wiki/Bitmap_graphics_editorhttp://en.wikipedia.org/wiki/GIFhttp://en.wikipedia.org/wiki/PNGhttp://en.wikipedia.org/wiki/TIFFhttp://en.wikipedia.org/wiki/Alpha_channelhttp://en.wikipedia.org/wiki/EPShttp://en.wikipedia.org/wiki/WMFhttp://en.wikipedia.org/wiki/SVGhttp://en.wikipedia.org/wiki/PDFhttp://en.wikipedia.org/wiki/Bitmap_graphics_editor


20/26

>ey #oor Transparency

1. Transparent pixes- 'ne coor entry in a singe 9I: or 279 imagePs paette can be

defined as QtransparentQ rather than an actua coor. This means that "hen the

decoder encounters a pixe "ith this vaue, it is rendered in the bac!ground coor of

the part of the screen "here the image is paced, aso if this varies pixe6by6pixe as

in the case of a bac!ground image.

Appications incudeJ

an image that is not rectanguar can be fied to the re@uired rectange using

transparent surroundingsK the image can even have hoes 3e.g. be ring6shaped5

in a run of text, a specia symbo for "hich an image is used because it is not

avaiabe in the character set, can be given a transparent bac!ground, resuting

in a matching bac!ground.

The transparent coor shoud be chosen carefuy, to avoid items that -ust happen to be the

same coor vanishing.

Even this imited form of transparency has patchy impementation, though most popuar

"eb bro"sers are capabe of dispaying transparent 9I: images. This support often doesnot extend to printing, especiay to printing devices 3such as 2ost$cript5 "hich do not

incude support for transparency in the device or driver. 'utside the "ord of "eb bro"sers

support is fairy hit6or6miss for transparent 9I: fies.

20/21
http://en.wikipedia.org/wiki/Transparenthttp://en.wikipedia.org/wiki/Imagehttp://en.wikipedia.org/wiki/PostScripthttp://en.wikipedia.org/wiki/Transparenthttp://en.wikipedia.org/wiki/Imagehttp://en.wikipedia.org/wiki/PostScript


21/26

2. Edge imitations of transparent pixes - The edges of characters and other images

"ith transparent bac!ground shoud not have shades of grey these are normay

used for intermediate coors bet"een the coor of the etterCimage and that of the

bac!ground, typicay shades of grey being intermediate bet"een a bac! etter and a

"hite bac!ground. &o"ever, "ith e.g. a red bac!ground the intermediate coors

"oud be dar! red, and grey edge pixes give an ugy and uncear resut. :or a

variabe bac!ground coor there are no suitabe fixed intermediate coors.

3. 2artia transparency by apha channe - 279 and TI:: aso ao"s partia

transparency, "hich soves the edge imitation probem. &o"ever, support is even

more patchy. Microsoft Internet Exporerdoes not support partia transparency in a

279 graphic. 8ery fe" appications correcty process TI:: fies "ith apha channes.

A ma-or use of partia transparency, but not the ony one, is to produce Qsoft edgesQ

in graphics so that they bend into their bac!ground. The process of combining a partiay

transparent coor "ith its bac!ground 3QcompositingQ5 is often i6defined and the resuts may

not be exacty the same in a cases. :or exampe, "here coor correction is in use, shoud

the coors be composited before or after coor correction

4.Transparency by cipping path

-An aternative approach to fu transparency is to

use a cipping path. A cipping path is simpy a shape or outine, that is used in

con-unction "ith the other graphics. Everything inside the path is visibe, and

everything outside the path is invisibe. The path is inherenty vector, but can

potentiay be used to mas! both vector and bitmap data. The main usage of cipping

paths is in 2ost$cript fies.

User Interface Design

The process of ergonomicay and strategicay presenting media in order to

communicate a message.

It*s about designing an entire experience for peope. It invoves 4 aspects.

A. 2sychoogica H such as buiding a menta picture in a user*s mind of ho"

something "or!s.

21/21
http://en.wikipedia.org/wiki/Shades_of_greyhttp://en.wikipedia.org/wiki/Microsoft_Internet_Explorerhttp://en.wikipedia.org/wiki/Shades_of_greyhttp://en.wikipedia.org/wiki/Microsoft_Internet_Explorer


22/26

?. Ergonomic H such as navigation and "ays in "hich mutimedia responds to a

user*s actions.

2rovides a structure and an environment that best communicate contents.

22/21


23/26

$teps in Designing A User Interface

. Identify your Audience and Message

- The first step is to determine "ho your audience is and "hat you are trying to say

to them.

4. Determine the $etting

- Designers need to !no" ho" and "here users "i be interacting "ith a

mutimedia tite.

;. #reate an Experience

- Another decision you need to ma!e is about the !ind of experience that you "ant

users to have.

IH :orm and :unction

:igure out ho" to impement the tite in terms of actua functionaity.

The foo"ing guideine are hepfu "hen thin!ing about @uestions of functionaityK

. Less is more H determine ho" much functionaity users reay need especiay at one

time.

4. #onsistency H decide on the functions that users shoud a"ays be abe to access

"herever they are in the tite.

;. Three $teps A"ay H do not bury functions and paces so deep in a tite that they are

more than three cic!s a"ay from one ocation.


24/26

II H ?ars, 2anes and Dra"ers

A common "ay to hande functionaity in tite is to group functions in a specia

ocation such as a navigation bar, a contro pane, or a dra"er.

. 7avigation ?ar H provide a dedicated space for navigationa functions such as

@uitting, going bac!, and moving from pace to pace.

4. #ontro 2anes H provide a dedicated space for goba functions 3functions the user

has access to at a times5.

;. Dra"ers H coapsed, cosedF state.

III H Ergonomics

The scientific study of human factors in reation to "or!ing environments and

e@uipment design.

The a"s of "or!F.

2roperties that faciitate interactionJ

a. 8isibiity 6 8isuas pay a !ey roe in user interface design because peope rey

heaviy on eyesight to interact "ith the "ord.

b. #onceptua Mode H Metaphorica modes hep peope navigate through

mutimedia by giving them a strong $ense of 2aceF.

c. :eedbac! H Ghen peope interact "ith machines, they expect some form of

ac!no"edgement to hep them determine that "hat they are doing is correct

or that everything is in proper "or!ing order.

d. Mapping H Designers need to present interface functions in such a "ay that

the user*s expectations of "hat "i happen match the actua resuts "hen

cic!ed. The best "ay to find out ho" "e your interface functions map to

peope*s expectations it to conduct user test.

24/21


25/26

I8 H &ot $pots

The areas on the screen that is currenty interactive.

2art of the user interface design probem is to thin! of "ays to identify these

areas by using not ony metaphorica visua cues but it aso audio and animated

feedbac!.

. :eedbac!

- An important part of mutimedia user interface design, feedbac! not ony ets

users !no" "hether or not the computer is responding, but it aso may hep to

guide the fo" of user interface.

4. (o6over and &ighights $tates

- To hep identify hot spots, a common user interface design practice is to provide

animated ro6overF states. These are atered graphics that dispay themseves

"hen the user simpe rosF over a hot "ith the cursor.

8 H Metaphors and Affordances

. Metaphors

- (evea a tite*s conceptua mode of interaction. ?ecause interacting "ith a

computer can be an abstract "ay of information, it heps to use famiiar

conceptua modes to orient users.

4. Affordances

- The itte detais that te us specificay "hat the images are and ho" "e shoud

use them.

8I H Music and $ound

Music and sounds can contribute immensey to interface design. Metaphors and

affordances are not imited to visua cues but can aso be estabished "ith

sounds.

. $ounds Effects

25/21


26/26

- Mutimedia designers can use music and sound effects not ony to hep carify an

interface, but aso to add depth to a user*s experience.

4. ?ac!ground $core

- The bac!ground score heps estabish the pace of the action, set the mood, and

can even buid anticipation and suspense.

8II H Agents, 9uides and #haracters

The use of personaitiesF in mutimedia provides a very different feeF to the

experience. 2ersonaities can ma!e a tite seem more personaiBed or service6

oriented, or they can add an eement of humor or cynicism.

. Agents

- An Agent is a character or ob-ect that carries out interactions for the user6 much

i!e a persona attendant.

4. 9uides

- A 9uide is a simpified version of an agent that offers suggestions or hep during

an interaction.

;. #haracters

- #haracters are personaities that ive "ithin a tite.

- #haracters are part of the content of a tite. $ometimes they respond to the

user*s interactions, but mosty, they are -ust part of the sho".

Documents

MELJUN CORTES MANUAL Multimedia CCIT01