MELJUN CORTES MANUAL Multimedia CCIT01
-
Upload
meljun-cortes-mbampa -
Category
Documents
-
view
227 -
download
0
Transcript of 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
-
8/13/2019 MELJUN CORTES MANUAL Multimedia CCIT01
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
-
8/13/2019 MELJUN CORTES MANUAL Multimedia CCIT01
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
-
8/13/2019 MELJUN CORTES MANUAL Multimedia CCIT01
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
-
8/13/2019 MELJUN CORTES MANUAL Multimedia CCIT01
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.
-
8/13/2019 MELJUN CORTES MANUAL Multimedia CCIT01
6/26
4. Ease of understanding
;. A pictureJ a "ords
-
8/13/2019 MELJUN CORTES MANUAL Multimedia CCIT01
7/26
-
8/13/2019 MELJUN CORTES MANUAL Multimedia CCIT01
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
-
8/13/2019 MELJUN CORTES MANUAL Multimedia CCIT01
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
-
8/13/2019 MELJUN CORTES MANUAL Multimedia CCIT01
10/26
-
8/13/2019 MELJUN CORTES MANUAL Multimedia CCIT01
11/26
-
8/13/2019 MELJUN CORTES MANUAL Multimedia CCIT01
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
-
8/13/2019 MELJUN CORTES MANUAL Multimedia CCIT01
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
-
8/13/2019 MELJUN CORTES MANUAL Multimedia CCIT01
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.
-
8/13/2019 MELJUN CORTES MANUAL Multimedia CCIT01
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.
-
8/13/2019 MELJUN CORTES MANUAL Multimedia CCIT01
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
-
8/13/2019 MELJUN CORTES MANUAL Multimedia CCIT01
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.
-
8/13/2019 MELJUN CORTES MANUAL Multimedia CCIT01
18/26
-
8/13/2019 MELJUN CORTES MANUAL Multimedia CCIT01
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 -
8/13/2019 MELJUN CORTES MANUAL Multimedia CCIT01
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 -
8/13/2019 MELJUN CORTES MANUAL Multimedia CCIT01
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 -
8/13/2019 MELJUN CORTES MANUAL Multimedia CCIT01
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
-
8/13/2019 MELJUN CORTES MANUAL Multimedia CCIT01
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.
-
8/13/2019 MELJUN CORTES MANUAL Multimedia CCIT01
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
-
8/13/2019 MELJUN CORTES MANUAL Multimedia CCIT01
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
-
8/13/2019 MELJUN CORTES MANUAL Multimedia CCIT01
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".