1

Web Resources: Multimedia Building Blocks

Introduction

Multimedia is a combination of various elements, such as text, images, video,

sound, and animation. Interactive multimedia allows the user to control what and when the

elements are delivered (Vaughan, 2001). With the rapid changes in the field of technology,

the interactive multimedia has become increasingly popular in education, business,

entertainment, and public places. Now multimedia, which has the capability of

incorporating various media from text to graphics and from video to sound, is a new way

to present information.

Significance of the Topic

As indicated above, various elements, such as text, graphics, video, sound, and

animation, are essential components of a multimedia product. Using authoring tools these

individual multimedia elements can be sewn together into a project (Vaughan, 2001).

Whereas most authoring tools have functions of creating and editing text, images, and

animations, there are also particular editing tools dedicated to sounds and video. Therefore,

understanding how to create each of these pieces of multimedia is an important part of the

design and production process. However, for maximum effect it is crucial to understand

how to weave these elements of multimedia together (Vaughan, 2001).

Therefore, in this paper, I will provide various resources available on the Web in

order to understand specific topics related to the design and production aspects of

interactive multimedia technology. I will organize these resources into the categories of

text, images, video, sound, and animation.

 2

Discussion of the Topic

§ Using Text in Multimedia: With the recent explosion of and increasing demand

for the Internet and the World Wide Web, text is an essential aspect of presenting the

information. Like each element of the multimedia design, effective use of text can either

direct users/readers attention or divert it. The following articles discuss some typography

concepts that can enhance Web page quality:

http://www.fortressdesign.com/typography.html: [Effective Typography] The first

part of the article focuses on type consistency and use of white space for better results in

Web page design.

http://www.fortressdesign.com/typography2.html: [Effective Typography] The

second part of the same article discusses other typographic considerations, such as

captions, credits, and some tips for creativity.

Since using the Web is mostly about reading information, we also need to consider

readability and legibility of text (Williams & Tollett, 2000). In that case, you may want to

look at the following “Web Typography Tutorial”:

http://hotwired.lycos.com/webmonkey/design/fonts/tutorials/tutorial3.html: [Web

Typography Tutorial] This tutorial provides a good introduction to typography with a

basic overview of how type works and also addresses some important questions; such as,

“How to make type legible on a computer screen?” “Which type technologies do you need

to master to control the fonts on the Web?”

 3

http://html.about.com/library/weekly/aa051898.htm: [Anti-alias information] This

article talks about the anti-alias concept used for font smoothing on Web images. The

content includes such important concerns as what aliasing is, how anti-aliasing works, pros

and cons of anti-aliasing, and when we need to use text anti-aliasing.

§ Using Sound in Multimedia: Sound is one of the most powerful elements of

interactive multimedia presentation. How you use the power of sound, either linking text or

image with sound, can enhance the multimedia presentation. For any computer application,

such as Web pages, audio resources need to be digitized. There are some important

considerations in order to do that: quality, file formats, and file size considerations;

digitizing process; and understanding constraints and limitations. I think the followings are

very good resources to look at it:

http://www.cit.cornell.edu/atc/materials/dig/digav.shtml: [Digitizing Audio and

Video] Workshop on digitizing audio and video for use in Web pages and other computer

applications. Related topics: Digitizing Audio-Definitions and Quality Considerations, File

Formats for Digital Audio, Delivering Media Through the Web, and References for More

Information.

http://www.usask.ca/education/coursework/edcmm898_01/sound/1intro/intro1.htm:

[Sound] A nice overview of sound element in multimedia, which includes basic sound

concepts, advantages and disadvantages of using sound in multimedia presentation,

 4

functions of sound in interactive multimedia instruction, and tips for producing sound for

instructional multimedia.

http://www.cortland.edu/flteach/mm-course/sound.html: [Digital Sound Recording]

Links to an article on basic concepts of and some editing programs for digital sound

recording: digital vs. analog sound, Windows 95/98 built- in multimedia accessorie s, and

Cool Edit.

http://twist.lib.uiowa.edu/radio/Resources.html: [Technical tips and texts-Sound]

Contains more topics on sound: From the nature of sound to the physics of sound, from

acoustic to human ear, and from analog/digital recording to digitizing and editing audio.

• Using Images in Multimedia: Graphics are the visual elements that make up a

multimedia screen (Vaughan, 2001). The images, such as pictures, clip art, 3-D graphics,

animations, are widely used in designing for both multimedia and the Web. Hence,

understanding of various graphic formats, that is how the particular image formats work,

and where to use each type of image in your web pages. There is a great number of

resources about graphic formats on the Web. The following tutorials discuss different

aspects of multimedia graphics:

http://www.elated.com/tutorials/graphics/general/image_formats/: [Understanding

Image Formats] This tutorial is about understanding three common image formats used

on the Web: GIF, JPEG, and PNG. It provides a summary of key differences between

those.
 5

http://webdevfp.uwyo.edu/webdesign/graphics/04-tech/bit- vect6.html: [Bitmapped

vs. Vector-based] Two forms of multimedia images: Bitmap vs. Vector-based. The

content of this source includes characteristics of bitmap and vector-based images and

benefits and drawbacks of each type of graphics.

http://tech.irt.org/articles/js206/#3: [Choosing the Right Format For Your Web

Images] This tutorial explains different types of images for the Web as well as some basic

related concepts, such as bit depth and DPI (Dots Per Inch). It gives an idea for choosing

right graphic format for the Web images.

http://archive.devx.com/projectcool/developer/gzone/optimizing/antialias.html: [Anti-

Alias with Care] In this tutorial you can learn about anti-aliased graphics and how to anti-

alias a graphic in Fireworks.

§ Using Animations in Multimedia: There is no doubt that animation adds visual

impact to interactive multimedia and Web pages. Besides traditional animation methods

made famous by Walt Disney, there are computer- generated animation programs which

typically follow the same logic and procedures using layer, keyframe, and tweening

(Vaughan, 2001). Available multimedia authoring tools, which usually have the capability

of creating animations, make it easier to create computer animations for the Web.

http://info.med.yale.edu/caim/manual/multimedia/gif_animation.html: [GIF

Animation] This article is about GIF animations for the Web. This short essay talks about
 6

how GIF animation works and some important considerations regarding the file size and

good use of animation on the Web.

http://encarta.msn.com/encnet/refpages/RefArticle.aspx?refid=761567360:

[Animation] This is a very broad review of animation topic. It provides a solid

background about the history of animation, different types of animation, and the current

trends in the animation industry.

§ Using Video in Multimedia: Carefully planned and high-quality video in which

one can perceive text (title), image, animation, and sound all together can make an

amazing difference in an interactive multimedia product. With the digital video technology

we can use the power of video for multimedia and Web delivery. In order to make the best

use of this technology in multimedia design, we need to understand basic concepts, such as

streaming video and video compression. Therefore, I think the following resources will be

helpful for beginner multimedia designers.

http://searchnetworking.techtarget.com/sDefinition/0,,sid7_gci213055,00.html:

[Streaming video] This is a good start to learn about streaming video. The content

includes the definitions of streaming video and streaming media and a short overview of

the major streaming video and streaming media technologies.

http://smw.internet.com/gen/tutor/whatis/: [What is streaming media?] This tutorial

introduces the basic concepts behind streaming media. I think it is a good place to start in
 7

order to understand streaming media. It also provides a brief discussion on streaming

quality, the format wars, and the future of streaming media.

http://howto.lycos.com/lycos/step/1,,5+24+26114+25377+3109,00.html:

[Compression Basics] It provides a bunch of tutorials for variety of video compression

topics. Some of the topics are: methods of compression, lossy video compression, about

AVI. and MPEG., compression considerations, lossless compression and so on.

Summary

This paper basically focuses on various elements of multimedia. Rather than

explaining each pieces of multimedia, I aimed to categorize them into groups, such as text,

image, animation, sound, and video, and to provide beginner multimedia designers several

Web resources for some kind of brief idea on each topic. When choosing these particular

sources on the Web, I considered them to highlight the critical areas to understand each

component of multimedia. Therefore, I emphasized effective typography, anti-aliased text

and graphics, different graphic formats, good use of images, digitizing audio and video,

GIF animation, streaming video and media, and compression basics in order to understand

fundamental concepts related to interactive multimedia design.

 8

References

Vaughan, T. (2001). Multimedia: Making It Work. (5th Ed.) New York: Osborne/McGraw-

Hill.

William, R. & Tollett, J. (2000). The Non-Designer’s Web Book. (2nd Ed.) California:

Peachpit Press.

Related Links on the Web

Multimedia Glossary:
http://www.forums.pctechguide.com/glossary/bycat.php?catSelected=7&catSearchSubmit
=View+Category

Seven rules for Web building

http://www.shorewalker.com/pages/seven_rules-1.html

Useful Web design tips

http://www.colin.mackenzie.org/webdesign/

Web page design resource for “designers”

http://www.wpdfd.com/index.htm

Web Development Elements

http://www.december.com/web/develop/elements.html

Audio/Video Streaming Tool Ratings

http://cws.internet.com/avstream.html
 9

Streaming video quality

http://smw.internet.com/video/tutor/videotips/index.html

http://smw.internet.com/video/tutor/streambasics1/

http://www.streamingmediaworld.com/video/tutor/imoviestream_1/
http://www.streamingvideos.com/streamingvideos/strmhome.html

Common Image Formats

http://archive.devx.com/projectcool/developer/gzone/reference/ref-gif.html
http://www.desilva.biz/grafix/giforjpg.html

Graphic Design Resources

http://www.fortressdesign.com/graphics_r.html

Sound Resources
http://www.fortressdesign.com/sounds_r.html

Fonts and Typography Resources

http://www.fortressdesign.com/fonts_r.html

Web Site Design Tutorials

http://www.fortressdesign.com/design_r.html

Adobe Type Library

http://www.adobe.com/type/browser/C/C_sans.html

* This paper is written by Sibel Kazak for the course EDC385G Interactive Multimedia Design and

Production at the University of Texas-Austin.