Unit 7 · Session 1
Multimedia Systems and Elements
IT 231: IT and Applications (BBA)
🎯 Learning Objectives
By the end of this session, you will be able to:
- ✅ Define multimedia and identify its five core components.
- ✅ Differentiate between interactive multimedia and hypermedia.
- ✅ Explain the role of multimedia in various applications, including business and the web.
- ✅ Recognize the building blocks of a multimedia project.
An Introduction to Multimedia
What is Multimedia? 🖼️🔊🎬
Definition: The integration of multiple forms of media (text, graphics, audio, video, animation) into a single, cohesive, and often interactive digital presentation.
Think of it as storytelling with a digital toolkit.
- It combines different media types.
- It is delivered via computer or other electronic devices.
- It is often interactive, giving the user control.
The 5 Core Elements of Multimedia
These are the fundamental building blocks of any multimedia experience.
- ✍️ Text
- 🎨 Graphics
- 🎧 Audio
Each element plays a unique role in conveying information and engaging the user.
🔎 Activity: Spot the Elements
For each product, which of the five elements does it use? Which one matters most?
1. A YouTube cooking video Video, audio, text (titles and captions). Video matters most.
2. The eSewa app home screen Text, graphics (icons), animation. Graphics and text matter most.
3. A news article on a website Text, graphics (photos), sometimes video. Text matters most.
4. A Duolingo lesson All five: text, cartoon graphics, spoken audio, animation and short video. Audio matters a lot for pronunciation.
5. Google Maps directions Graphics (the map), text, spoken audio, animation (the moving arrow).
6. A podcast Mostly audio. Is it still multimedia? Discuss.
Element 1 & 2: Text & Graphics
✍️ Text
The foundation for conveying detailed information.
- Provides context, navigation, and explanation.
- Readability is key (font, size, color).
🎨 Graphics
The visual heart of multimedia.
- Includes photos, illustrations, icons, and charts.
- Makes content more engaging and easier to understand.
Graphics Deep Dive: Raster vs. Vector
Raster Graphics (Bitmaps)
- Made of pixels.
- Loses quality when scaled up.
- Ideal for photographs.
- Formats: JPEG, PNG, GIF
Vector Graphics
- Made of mathematical paths.
- Scales perfectly without quality loss.
- Ideal for logos and illustrations.
- Formats: SVG, AI
Key Takeaway: Choose the right graphic type for the job to ensure quality and performance.
Image File Formats (Exam Table)
| Format | Type | Use |
|---|
| JPEG | Lossy raster | Photos; poor for sharp logos |
| PNG | Lossless raster | Screenshots, transparency |
| GIF | Limited color | Simple animation |
| SVG | Vector | Scalable web logos |
| BMP / TIFF | Large raster | Legacy / print quality |
🧪 Activity: Which Format Would You Use?
1. A company logo that must look sharp on a website and on a billboard SVG: it's a vector, so it scales to any size
2. A product photo for a Daraz listing JPEG: it's a photo and the file stays small
3. A screenshot of an error message to send to IT support PNG: it's lossless, so the text stays crisp
4. A logo on a transparent background for a slide PNG (or SVG)
5. A short, silent looping reaction for a chat GIF: simple animation (today often a short MP4)
6. A scanned land-ownership document for a print archive TIFF: high-quality and lossless
🧮 Worked Example: How Big Is a Photo?
A raster image stores a colour for every pixel. Standard colour uses 3 bytes per pixel (one each for red, green and blue).
Full HD screenshot
- 1920 × 1080 = 2,073,600 pixels
- × 3 bytes = 6,220,800 bytes
- ≈ 6.2 MB uncompressed
12-megapixel phone photo
- 4000 × 3000 = 12,000,000 pixels
- × 3 bytes = 36 MB uncompressed
- Saved as JPEG: usually only a few MB
That's why compression exists. Lossy JPEG throws away detail your eye barely notices. Lossless PNG keeps every pixel, but the files are bigger.
Element 3 & 4: Audio & Video
🎧 Audio
Adds emotion, narration, and atmosphere.
- Sound effects (SFX)
- Music
- Spoken dialogue
🎬 Video
The most powerful element for engagement.
- Combines graphics, audio, and motion.
- Highly effective for storytelling and demonstration.
Note: Both audio and video are data-intensive and require careful consideration for web delivery (file size, compression).
📦 Why Audio and Video Need Compression
🎧 One minute of audio
- CD quality: 44,100 samples per second × 16 bits × 2 channels
- = 1,411,200 bits per second ≈ 10.6 MB per minute
- MP3 at 128 kbps ≈ 1 MB per minute (about 11× smaller)
🎬 One minute of Full HD video
- 6.2 MB per frame × 30 frames per second
- ≈ 187 MB per second ≈ 11 GB per minute uncompressed
- Streamed at about 5 Mbps ≈ 38 MB per minute (about 300× smaller)
Software called a codec (for example MP3 and AAC for sound, or H.264 for video) squeezes the data so it can stream over a normal internet connection.
🎬 How Video Compression Works
Element 5: Animation 🏃
Definition: The illusion of motion created by displaying a sequence of static images (frames) in rapid succession.
- 2D Animation: Simple motion on a flat plane (e.g., a logo moving, a character walking).
- 3D Animation: Adds depth and realism, common in movies and video games.
- Purpose: Can simplify complex topics, draw attention to key elements, or provide visual feedback in a user interface.
🎞️ How Many Frames Is That?
- Cinema shows 24 frames per second (fps). Games and phone videos often use 30 or 60 fps.
- A 10-second animation at 24 fps = 240 frames.
- A 90-minute hand-drawn film: 90 × 60 × 24 = 129,600 frames.
- Animators often draw "on twos" (each drawing is held for 2 frames), which halves the work to 64,800 drawings. That's still a lot!
Your turn: A 15-second animated logo for a bank's app runs at 30 fps. How many frames is that? (15 × 30 = 450 frames. This is why computers, not hands, do most animation today.)
Interactive Multimedia vs. Hypermedia ⚡
These concepts define how a user navigates and controls multimedia content.
Interactive Multimedia
The user has direct control over the experience. Their actions (clicks, key presses) determine what happens next.
Example: A flight simulator game or an educational quiz where you select answers.
Hypermedia
A non-linear structure of information. Content is connected via links, allowing users to navigate freely.
Example: The World Wide Web. Clicking a link on this page to go to another is a hypermedia action.
All hypermedia is interactive, but not all interactive multimedia is hypermedia.
🧪 Activity: Interactive, Hypermedia, or Neither?
1. A Wikipedia article full of links Hypermedia (and so also interactive)
2. Playing PUBG Mobile Interactive multimedia
3. Using an ATM touch screen Interactive, but not hypermedia: it's a fixed set of menus, not linked content
4. Watching a film on TV Neither: it's linear and you have no control
5. An online course page linking videos, notes and quizzes Hypermedia
6. A museum touch-screen kiosk with a simple menu Interactive
🧱 Building a Multimedia Project
The four stages
- Planning and costing: the goal, audience, budget and schedule
- Designing and producing: script, storyboard, then create the media
- Testing: does it work on every device? Do real users understand it?
- Delivering: the web, an app, a kiosk, a USB drive or a TV broadcast
What you need
- Hardware: computer, camera, microphone
- Software: image, audio and video editors (for example Canva, Audacity, Premiere Pro or CapCut)
- Content: the five elements
- People: project manager, writer, designer, video and audio editor, programmer
A storyboard is a sequence of rough sketches showing each screen or shot, and it's the cheapest place to fix mistakes.
🛠️ Activity: Plan a Multimedia Kiosk
The Nepal Tourism Board wants a touch-screen kiosk at the airport's international arrivals to welcome tourists and help them plan their first day.
In groups of 3–4, take 3 minutes to decide:
- Which elements will you use, and why? (Remember the noise and the many languages at an airport.)
- What can the user do? Is it interactive, hypermedia, or both?
- Who do you need on the team?
- What is one thing to test before launch?
Two groups share their plan in 30 seconds each.
Practical Applications of Multimedia 🎯
📊 Business
- Marketing Ads
- Product Demos
- Employee Training
- Video Conferencing
🎓 Education
- E-Learning Courses
- Interactive Textbooks
- Virtual Labs
- Educational Games
🕹️ Entertainment
- Video Games
- Movies & TV Shows
- Streaming Services
- Virtual Reality (VR)
🌍 Real Case: Multimedia Doesn't Need a Film Crew
- In 2004, Sal Khan, a financial analyst in the US, began tutoring his young cousin in maths over the phone, from another city.
- In 2006 he started recording short lessons for YouTube: just his voice and handwriting on a digital blackboard, with no face and no studio.
- His cousin said she preferred the videos, because she could pause and replay them without feeling embarrassed.
- In 2008 he founded Khan Academy, a non-profit that now offers free lessons and practice in many languages.
Think: Which two elements did Khan use? Why can simple audio plus graphics sometimes teach better than a fancy video?
Multimedia in Nepal 🇳🇵
Multimedia is integral to many digital services we use daily.
Local Examples:
- Digital Wallets (eSewa, Khalti): Use a combination of text, graphics (icons), and animation to create an intuitive user interface for financial transactions.
- Ride-Sharing Apps (Pathao, inDrive): Use interactive maps (graphics), text, and animations to connect drivers and riders.
- Tourism Promotion: The Nepal Tourism Board's website and social media use high-quality video, photos, and text to showcase the country's beauty.
✅ Good Multimedia Design: Do's and Don'ts
✅ Do
- Add captions to videos. They help deaf viewers and the many people who watch on mute.
- Add alt text to images, so screen readers can describe them to blind users.
- Use strong contrast between text and background.
- Compress files so they load quickly on mobile data.
❌ Don't
- Autoplay videos with sound.
- Use animation that doesn't help the message.
- Put long paragraphs on screens or slides.
- Use music or photos you don't have the rights to.
Quick check: Which of these do the eSewa, Pathao and NTB examples on the last slide get right?
Key Takeaways 🔍
- Multimedia is the powerful combination of text, graphics, audio, video, and animation.
- Each of the five elements has a distinct purpose in creating an engaging digital experience.
- Interactivity gives users control, while hypermedia (like the web) provides non-linear navigation.
- Multimedia is a fundamental technology driving innovation in business, education, and entertainment worldwide, including in Nepal.
💬 Discussion Questions
- A photo of a rhino in Chitwan and the Nepal Rastra Bank logo: which should be raster and which vector? Why?
- Why do apps like YouTube and TikTok show a lower-quality picture when your connection is slow?
- Is a podcast multimedia? Is a WhatsApp voice note? Defend your answer.
- Think of an app or website you find hard to use. Which multimedia element is it getting wrong?
Image & Video Credits
Images
- Shibuya Crossing at night: Kakidai, CC BY-SA 4.0, via Wikimedia Commons
- Bitmap VS SVG: Yug et al., CC BY-SA 2.5, via Wikimedia Commons
- Rgb-raster-image: Gringer, CC0, via Wikimedia Commons
- Signal Sampling: Д.Ильин, CC0, via Wikimedia Commons
- The Horse in Motion: Eadweard Muybridge, public domain, via Wikimedia Commons
- Storyboard sheet: Iván López Fuente, CC BY-SA 4.0, via Wikimedia Commons
- Patan Durbar Square: Sworna Maharjan, CC BY-SA 4.0, via Wikimedia Commons
Videos (YouTube)
- FlikliTV, "What are Vector and Raster Graphics?" (3–84 s)
- Leo Isikdogan, "How Video Compression Works" (18–97 s)
📖 Related chapter notes
Read first, then revise with this deck: