Intro to Multimedia | Multimedia Fundamentals


Course Developer: Bruce Bicknell
Instructor: Claire Boger
Editors: Gordon Drummond, Tara MacKay, Rachel Sokol


Bruce Bicknell

Hello! In this class, you'll learn about the wonderful world of multimedia and the impact it has on Web design. So many advances in technology allow us to become more Web-savvy and more creative than ever before and we've only just begun. Hope you enjoy the class!

Multimedia Fundamentals

Thongs and throngs. Over 10 years ago, Victoria's Secret held a video fashion show on the Web that was so wildly popular that their servers couldn't handle it. Since then, sites and servers have learned how to keep up as the demand for multimedia has grown.

Are you trying to find a way to make your projects come alive and stand apart from all the others? Well, get ready to do just that! In this course, we explore a wide range of digital media and how multimedia is deployed in today's world. From the Web to video games and motion graphics, the possibilities are greater than ever before.

Some of us remember the days when the Web consisted of plain text and links. Times have certainly changed. With the introduction of the graphical Web browser and digital image formats (JPEGs and GIFs) in the early '90s, the Web began to take shape as the medium of the future. With the advances in technology today, designers are bringing Web sites to life with interactivity, sound, video, and animation.

Multimedia is more than just a Web phenomenon, however. As you'll discover, it's also used in video presentations, television, video games, CDs and DVDs, and much more. The possibilities are endless and the only limitations are your own creativity. So, let's get started!

In this lesson, you can expect to:

Learn about multimedia and how it relates to the digital world.
Explore the many uses of multimedia on the Web.
Examine examples of online multimedia projects.
Discover the growing uses for multimedia offline.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

The new media edge: fully digital recording and reproduction.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Multimedia is literally the combination of two or more media.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Digital media is never physically recorded—instead, digital snapshots are taken and information is stored as binary code, which never loses quality.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Web images are low resolution (72 ppi, or pixels per inch), whereas magazines images are high resolution (300 ppi).

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Flash files have the .swf extension.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Most multimedia files online require a browser plug-in or player to display the content, but this is often transparent to the user.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ATMs and other kiosks are a challenge for user interface designers; they must be easily understood and navigated by the widest possible audience.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Understanding Multimedia

 

Old vs. New Media

The analog era

To really understand what multimedia is, we need to take a step back to the days when we actually had to manually place the needle on the disc in order to hear it play.

You know what I am talking about—you see them in bins at flea markets or at your folks' house in the attic. They are phonograph records that look like CDs on steroids. This is an example of analog technology, sometimes considered "old media."

Analog recording uses a mechanical process to record and reproduce an audio signal on a disc that will be used for playback. This process was refined a bit with technologies like the audio and video cassette tapes that recorded and stored sound and video digitally. However, these approaches still relied on the mechanical process for reproduction. That's why the recordings never quite matched the quality of the original, live performances.

The main factor that separates old media from new media is the quality and ease of reproduction. Remember when you tried to make copies of a cassette tape or VHS tape for all of your friends? The quality diminished each time you copied another tape, and no copy matched the quality of the original. Even if you were the lucky owner of the original, the more you played it, the more the tape wore down. This made the quality of the sound and picture deteriorate as well, so you ended up with a box of cassettes and VHS tapes that just collected dust in your closet. Another example of analog reproduction is making a copy of a printed page on your photocopier and making further copies of the copy. The quality of the image deteriorates progressively.

Now the exact opposite is true for today's digital media. A project created in Photoshop, Premiere, or your program of choice can be copied as many times as you want without losing any quality. Even better, the output will last forever. You can also make copies of existing materials like your favorite CD or DVD. Unlike the "old media" results, you can copy these a thousand times and not have one problem with the quality. (But you may have a problem with copyright laws, so don't do that!)

As you will learn in this lesson, digital technology has evolved into the more reproducible form we all take advantage of today. The advances made in recording and reproducing content allowed for dramatic changes in the communication world. Today, that digital content can be transmitted and experienced all over the world through the Internet.

This where multimedia enters the picture. Multimedia is any combination of two or more media used to create a product. Your favorite movie, interactive DVD, and video game are all examples of this. Multimedia is not new, but dates back to the beginning of "talking" movies, as they combined both audio and video. So, the concept has been around quite some time. It's just that nowadays, the technology has greatly improved.

I'm sure all of you know the Internet mega-hit YouTube. This peer-to-peer video network site has exploded because of multimedia. The video clips that you see there are products of someone incorporating video, audio, text, motion graphics, and even animation into a project.

Check out this amateur piece at YouTube:

"Pancakes!" by user GIR2007. YouTube is open mic night on the Web. Millions are posting video content, often with audio, motion graphics, and other multimedia elements.

Try this—watch your local news one night. You will see multimedia everywhere, from the intro animation with audio and scrolling text, to the preview graphic that has the upcoming news on it. It's all multimedia and motion graphics!

Movie title sequences are multimedia too. The finest animators, audio engineers, and effects artists come together to create the first two minutes that introduce a movie.

One of the finest movie title sequences in the last ten years was the animated introduction to the 2002 Dreamworks film Catch Me If You Can, starring Leonard DiCaprio and Tom Hanks. We can watch this now courtesy of the miracle of YouTube:

The Catch Me If You Can opening is a triumph of multimedia: animation, music, and text.

Your favorite Web site may have an opening animation or a video clip on its home page. This can certainly be considered multimedia as well. Multimedia is everywhere today and if you look carefully you will see it. It's a great thing and it's only getting better!

To get a good grasp of the concept, let's take a look at how it all came about.

The Earliest Days of New Media

In 1990, the electronic code that made up digital sound and video was not at all mobile. Instead, it was thought of as a stationary object housed either on a computer's hard disk, or on a portable disk, like a floppy or CD-ROM.

For digital media, the compact disc represented a big step forward. A single compact disc held more information than the average computer could store less than a decade before. Better still, all information on a CD was stored digitally, so it could be instantly accessed.

Nevertheless, while the technical quality of this early new media was superior to its old media counterparts, its accessibility was so limited it almost didn't matter. What good did it do to have amazingly high quality sound and image files if you couldn't deliver their message to your audience? A new media developer in New York who had a client in Nepal would have to physically deliver a CD of his or her work halfway around the world in order for the client to see it.

The world was ready for the free transmission of digital information from one computer to another—and it first came in the form of email.

Telephone networks provided the first step toward higher bandwidth.

But it was the old media technology of the telephone that allowed new media to make a global impact. In the mid-1990s modem connections to the growing World Wide Web started sprouting up all over the world, almost overnight.

Suddenly people were connected in ways they never were before. The media developer in New York still needed to physically send a CD to the client in Nepal, but could now email the client to say the CD was on its way. As electronic communication became more common, and people got used to exchanging messages and information in the form of ones and zeros, people loved the idea of sending media files across the Internet as well.

Why email the Nepal client and separately FedEx the media files? Why not send everything at the touch of a button? Wouldn't that make the world smaller? Driven by these forces, the World Wide Web took its first steps towards becoming the media-rich environment it is today.

Those first steps, however, were pretty small. At first, the ability to deliver text on a gray background was quite impressive. If you could make the text blink, you were really doing something special. (Really!) Few believed that high-quality sound and video would ever be possible online.

The Digital Revolution
How it Works

Digital media works on a different principle than analog media. The source material (an image, or a sound) is never physically recorded—instead, digital snapshots are taken and the signal's information is stored as binary code, or ones and zeros. Once the information has been converted into digital format, or digitized, it never loses quality. Those ones and zeros can be replicated and manipulated an infinite number of times without any loss of quality.

Here's a brief overview of how it works, in different media:

Audio is digitized by taking thousands of digital snapshots, or samples, each second. The number of times the audio is sampled each second is called the sample rate. CD-quality audio is recorded at a sample rate of 44100 Hz (also called 44.1K), which means that almost 45 thousand separate audio samples are taken each second. A compact disc can hold 74 minutes of stereo music at 44100 Hz—that's about as much information as a whole shelf of encyclopedias.

Digital audio tracks are put together from many thousands of samples per second.

Digital images are broken down into two categories: bitmap and vector.

Bitmap images are digitized by dividing the frame into very small areas that approximate the tiny squares in your computer monitor, which are called pixels. Pixels get turned on and off individually to form images, shapes, and text. The number of pixels used in an image is referred to as the resolution. The more pixels used, the higher the resolution, and the sharper the image. Images on the Web have a resolution of 72 ppi, or pixels per inch. Printed images can have resolutions that are much higher. Newspaper images are usually 180 ppi; magazines are printed at at least 300 ppi.

Vector images are digitized through mathematical calculations that create areas of color or shapes like text or illustrations.

Text animation

Animations and video images are broken into individual frames, and each frame is digitized as a still image. Frames played quickly one after another look like they're moving. (Remember those tiny flip books designed with one image per page, where flipping the pages makes it look like the image is animated? It's the exact same principle.)

A vector animation program like Adobe Flash works a little differently. Flash can use mathematical calculations to create different kinds of animations between one still frame (still image) and the next.

The number of frames played per second is called the frame rate. The higher the frame rate, the more frames there are per second, and the smoother the motion looks on screen. Televisions display material at a rate of approximately 30 frames per second. You can set computers to playback at frame rates as slow as one per second, and go from there all the way up to broadcast quality. The still images in video are generally bitmap images, while animations can use either vector or bitmap still images.

Multimedia on the Web

As we discussed earlier in the lecture, we see multimedia everywhere on the Web today. From your favorite band site to streaming movies posted by amateurs on YouTube, multimedia is everywhere! The creativity behind multimedia projects gets more amazing every day. Digital elements can even be combined to create three-dimensional virtual tours of theme parks or houses for sale by realtors.

A quick word of warning, though. To view most multimedia content online, your browser may require extra software to deliver it, depending on the information being transferred. This software usually comes in the form of plug-ins or players that the user downloads and installs. We'll discuss plug-ins and players more in the next lesson.

Here, we'll take a look at just a few of the ways that multimedia is presented online.

The A/V Club Is Cool?

Some of you may remember the days when being a part of the A/V (audio/visual) club in school was very "uncool" (I, for one, always thought it was cool). Well, those days are long gone with the technology and "cool" stuff that is being created today. Everyone seems to be getting in on it in some form. Whether it is by creating a MySpace page or shooting a video for the Web, more and more people are getting into multimedia without really knowing it.

Even home appliances are cool when multimedia is involved. Blendtec hilariously demonstrates its blenders (with iPhones, glow sticks, and other things you really oughtn't blend) via a/v.

Since today's computers are built to embrace multimedia both from a visual standpoint and for the ability to download or stream media, we are able to see results faster than ever. These clips can be your music MP3s, videos, animations, or any combination of the above—multimedia.

Various audio and video players are available to download in order to deliver this content, but most users have at least one player installed.

News sites use audio and video clips to regularly present interviews with important people, footage of timely events, and even live broadcasts. Music, television, and movie sites take full advantage of audio/video to provide previews, reviews, full episodes, archived content, and other clips that entice viewers into their programming or films.

TV shows viewed on Hulu entice users to view commercials, watch the shows on television, and purchase DVDs.

Even the most basic e-commerce sites offer audio and/or video clips of their products whenever possible. Audio and video give users a broader Web experience than text and images alone.

Animation

At almost every turn on the Web today, it is possible to find animation. From simple rollover buttons that change to complex Flash animations, animation is everywhere. Quite a few Web sites will have a Flash intro with audio playing to draw you in. Animated introductions can be very complex, but if not done correctly, can be a negative for a site.

As you discovered earlier, animations are made up of individual frames that come together when played in order. These can be utilized as a standalone piece or you can include other elements like audio and text. Or with the capabilities of programs like Flash or SWiSH, you can create complete multimedia clips that will wow your viewer.

Jimmy is a friendly animated character created by Sessions instructor Chris Georgenes for globalprotection.com.

Why use animation, you might ask? Many Web sites incorporate basic animation to attract attention to a certain part of a page. Other sites use animation throughout an interface to engage users—such as when a splash page introduces a site, like the one shown here. Still others use animation as the main source of communication, creating immersive new worlds online.

Complex animations on the Web are often created in the form of Flash files—animation and rich-media formats that require browser plug-ins to display. Smaller, more basic animations are sometimes delivered in the GIF file format, which is viewable on any browser without a plug-in, but the wide acceptance of the Flash plug-in by most browsers make Flash an extremely popular animation format on the Web.

Let the Games Begin!

Seriously, what would the Web be without games? Pretty boring, I would guess! These games offer an escape from the day-to-day frustrations we all face. Many times I have been frustrated and gone online to play a quick round of "Battle Golf" to relieve the stress of the day.

Want to play some games? At miniclip.com, you can find games for all age ranges. This site has interactive games that are both fun and great examples of multimedia.

There is a wide range of games on the Web, from casino style, to video trivia, to multi-player war games that use complex animation sequences and almost lifelike graphic rendering.

Using a wide range of digital media elements, these games represent a large population of media on the Web. Entire server farms are dedicated to keeping the multi-player game World of Warcraft running.

With the high levels of animation and audio, the demands on the user'ss computer becomes more critical. With advancements in technology and bandwidth, online games will surely become more complex and visually appealing. This is one field that will definitely continue to grow!

Online games can be created through a multitude of technologies. As with animations, many simple games are created using Flash. Flash allows for complex animation, inclusion of audio files, and high levels of user interaction. The Flash plug-in is used to display these games in your browser.

Java is a complex programming language found frequently on the Web in the form of downloadable "applets," and is another means of delivering high-level, full-featured, multimedia gaming. Mid-level and more basic online games can be created using JavaScript, a more limited programming language that works together with HTML to run small programs on a Web user's computer. Both Java and JavaScript games require browsers equipped with JavaScript and Java capabilities to run them. Almost all browsers come equipped with these capabilities (though users can turn them off) so there's no need for user downloads.

Feel Like Walking Around?

Walk around the Louvre, view a rock star's pad, or stalk the Amazon jungle without leaving your chair—and without any annoying tour guides!

Take a virtual tour of the Louvre at the museum site.

We're talking about virtual tours, a common feature on the Web. You'll often find them on sites for tourist destinations or as a way of offering new views of products on e-commerce sites.

These still image-based scenes give the user the feel of walking through an actual 3D environment and looking around with 360-degree vision. Users can click certain areas to zoom in, out, or change their perspectives and see the environment from different angles.

The software used to create these interactive panoramas varies, but QuickTime VR and iPIX are currently big names in virtual tours. Both use similar technology, including cameras that take 180 degree or 360 degree photos of a scene.

After the pictures are taken (and "stitched" together digitally if each shot captures less than 360 degrees), specialized software is used to add "hotspots" that allow the user to move around in the panorama. To view a virtual tour, a browser plug-in is usually required, depending on what technology was used to create the tour.

Multimedia Without the Web?

Does today's multimedia extend beyond the World Wide Web, to real life? Absolutely! We are seeing it more and more in our everyday lives, most of the time not even knowing it. CD-ROMs, DVDs, kiosks, video games, art galleries, and even traditional outlets like TV and the movies, all constitute multimedia delivery platforms.

Try going to Las Vegas and walking down the strip. Everywhere you look multimedia runs amok! From the animated marquees to the games you play in the casino that have animation, audio and even video—it's there. These types are different types of multimedia that don't operate using the Web...

CD-ROMs and DVDs

We encountered CD-ROMs earlier in this lesson. In addition to fulfilling their conventional role as a medium for storing music, movies, or games, CD-ROMs and DVDs are often created and distributed as informational presentations, educational demonstrations, artist and musician portfolios, business cards, and infinite other possibilities.

CDs and DVDs demand a higher quality presentation than offered online.

CD-ROM/DVD delivery offers some clear advantages over Internet delivery. For one, the quality of any presentation on a CD/DVD can be much higher because it doesn't depend on Internet transfer. Utilizing new technology and multimedia, a CD-ROM or DVD can introduce the latest software application from a high-tech company, demonstrate how to build a patio, or show off a band's latest music video.

The basic ingredients of the CD-ROM or DVD aren't that different from a Web site: Text, still images, and animation are usually compiled to create these discs. Nevertheless, users generally expect a higher quality of multimedia presentation than you'll find online. Sound effects are often added to jazz up the content as you navigate your way through the material. Audio/video clips can be included as well, such as an introduction from the CEO or a tour of a faraway city.

Kiosks

Kiosks are stand-alone structures that are often found in public areas, many of which contain computers and monitors, such as ATMs at the bank or information consoles in a shopping mall. Like CD-ROMs, computer kiosks can employ text, images, animation, audio, and video to convey their content.

EZ airline check-in kiosks are a recent successful example of kiosk design.

While the technologies used in kiosks are the same or similar as a CD-ROM or DVD, their purpose can differ. Some kiosks offer non-interactive displays of public information, while others allow the user to input questions or inquiries to receive information.

For most of us, the most common interactive kiosk is the ATM. Using text, images, and occasionally sound, an automatic teller machine uses multimedia and interactivity to allow the user to access various banking services. The multimedia provides the cues for the user, guiding their movements.

You may have also come across kiosks at the mall, in a record store, or a movie theatre, helping you to get your tickets without having to stand in the long lines. These kiosks are quickly replacing standard directories and manned information booths.

Some design firms focus exclusively on the specialty of kiosk design. Check out the site for Arc Design Consulting to see some outlandish kiosk creations.

Video Games

One of the most popular examples of offline multimedia is video gaming, mostly delivered through a home game console, handheld system, or a computer. The gaming industry has never been bigger and of course it will continue to grow. You can probably guess the digital media elements that are used in offline video games—all of them!

The Microsoft Xbox competes with Sony Playstation and Nintendo Wii to be the leading game console platform.

While the video game is based around the animation aspect, we cannot forget that sound and text play an integral role in making the gaming experience what it is. You need direction through text and dialogue while sound effects set the mood and make the experience more realistic. The games today incorporate many technologies that make the game play closer to reality than ever before. With the use of motion capture we can take a ball player's actual style and characteristics right into the game, allowing us to become that player. The future of video games will become even more realistic as technology advances.

Some offline video games are created for CD-ROM or DVD as interactive Flash animations. Most offline video games, whether purchased for home use or played in an arcade, are created using very sophisticated, high-level programs that create still images, animations, 3D graphics, sound, video, and incorporate increasingly-complex user interaction.

In the Arts

Though it's debated by some as to whether digital multimedia pieces can be considered fine art, more and more artists, galleries, and critics are accepting multimedia as a credible art form. In particular, video is making its way to the forefront of the multimedia art revolution. Over time, as video became less expensive to create and edit by a single person, rather than a large team, video blossomed into an avenue for artistic expression.

Multimedia Museum. Paul Pfeiffer's The Long Count (I Shook Up the World) was a multimedia sculpture/video piece on display at the Whitney Museum of American Art.

Many galleries and museums, including the renowned Whitney Museum in New York City, have accepted and showcased video and other multimedia pieces from various fine artists. Pieces of multimedia artwork are often presented as part of a larger art installation such as a painting or sculpture, creating an interesting blend of old and new media.

Check out this link for a listing of the Whitney's current exhibitions. Many exhibits are previews for visitors using multimedia elements like slideshows or podcasts.

TV and Movies

Nickelodeon's Jimmy Neutron television cartoon is created entirely in a digital environment, the first fully digital "Nicktoon."

As soon as fully digital audio, video, and animation began to emerge, aspiring filmmakers and animators embraced them and got right to work. The low costs, ease-of-use, and independence of digital media paved the way for amateurs to create professional-quality work.

Then the television and movie-making professionals said, "Wait a sec... if this digital stuff's so great, why are we doing things the hard way?" There are still many advantages to working in analog film for television and movies (both live-action and animated) but digital filmmaking and animation are getting more and more technologically versatile and are going head-to-head with professional analog equipment.

We've already seen many cartoons done digitally, like Jimmy Neutron on Nickelodeon and Wall-E on the big screen. This lowers production costs and allows for visuals that could never be created with old media. TV and Hollywood movies have jumped on this bandwagon as well, and are working partially or totally in digital format. We may even live to see the day when traditional 35mm filmmaking becomes obsolete.

   
 
Understand the concept of bandwidth as it relates to the transfer of multimedia files.
Learn about compression, and streaming as means of speeding up delivery of files online.
Examine the rules for implementing multimedia on the Web.
Explore examples of sites that make excellent use of multimedia content.
 

Exercise
You will create a multimedia strategy for a fictional company.

Discussion
Share your thoughts and opinions with other students at the Discussions Board.