3.1 Introduction to Multimedia
The word multimedia is derived from two distinct terms:
“Multi”: Meaning many or multiple.
“Media”: Refers to different types of communication forms or channels used to transmit information.
Therefore, multimedia is the integrated computer-controlled presentation of multiple media types—including text, graphics, audio, video, and animation—within a single interactive platform.
Multimedia Technology
The tools, software, and systems used to create, process, edit, and deliver multimedia content are collectively referred to as multimedia technology.
Real-World Applications:
Duolingo: Language learning software that integrates written text, audio speech engines, interactive sound effects, and animated progress characters.
TikTok: A mobile content platform driven by user-generated videos, real-time filters, text overlays, and audio tracks.
YouTube: An online streaming environment combining video files, audio tracks, thumbnail graphics, and real-time text chats.
Google Earth: A geographical mapping tool combining vector/raster satellite images, alphanumeric text descriptions, and 3D topographic terrain.
3.2 Core Components of Multimedia
There are five fundamental components that build any multimedia system:
Text: The alphanumeric characters displayed on a screen. It forms the foundational layout of messaging, instructions, and factual data.
Graphics: Visual representations, diagrams, pictures, digital photographs, or illustrations.
Audio: Any sound, speech, voiceover, music, or auditory sound effect.
Video: A sequence of digital frames (photographic images) displayed at high speed to create the illusion of real-world motion, accompanied by synchronized audio.
Animation: The computer-generated movement of drawn, painted, or modeled graphics/images.
3.3 Major Applications of Multimedia
Education: Multimedia learning resources (e-books, interactive virtual labs, simulated science experiments) improve retention and help students grasp complex concepts.
Entertainment: Powers interactive video games, movies, digital music platforms, and virtual reality (VR) environments.
Business: Captures target audience attention through highly engaging commercials, social media advertisements, and product simulations.
Communication: Modern video conferencing (Zoom, Teams) and social media platforms rely on rich media elements to enable remote collaboration.
Content Creation: Social media content creators use videos, animated graphics, and background tracks to boost user interaction and online presence.
3.4 Text
Text is the most basic component of multimedia, represented as alphanumeric characters on a screen. Modern multimedia software allows text to be displayed in a variety of styles, weights, colors, sizes, and orientations to match layout designs.
Common Text Editors
Notepad: A basic plain-text editor that strips out all font styles and metadata.
WordPad: A basic word-processing tool that supports rich text formatting.
Microsoft Word: An advanced, professional word-processing suite designed for complex documents.
Text File Formats
TXT (Plain Text): The standard text format. It contains only raw, unformatted characters without any information about fonts, colors, or page layouts.
RTF (Rich Text Format): Developed by Microsoft, this format stores raw text along with standard formatting metadata (such as font face, color, alignment, and sizing).
DOCX (Microsoft Word Document): Introduced by Microsoft in 2007, this XML-based format supports complex formatting, tables, images, and advanced page designs. It is the most widely used word-processing format today.
3.5 Graphics
Graphics refer to the non-textual visual elements displayed on a digital screen. This includes digital photographs, drawings, logos, and geometric shapes.
Raster (Bitmap) vs. Vector Graphics
Computer graphics are categorised into two primary technologies:
1. Raster Graphics (Bitmap)
Composition: Formed by a structured grid of tiny, individual square dots called pixels (short for Picture Element).
Characteristics: Each pixel contains specific color values. When combined, these pixels form detailed, realistic photographic images. The higher the number of pixels, the higher the resolution and detail of the graphic.
Scaling Behavior: Scaling a raster graphic up stretches the existing pixels, resulting in blurriness, distortion, and a pixelated look.
Common Formats:
PNG (Portable Network Graphics): Supports transparency, making it ideal for web design and icons.
GIF (Graphics Interchange Format): Supports simple web animations and allows up to $256$ colors. It is commonly used for short, looping clips.
JPG/JPEG (Joint Photographic Experts Group): Uses high lossy compression to significantly reduce file size while maintaining good image quality. It is the standard format for digital photography.
2. Vector Graphics
Composition: Built using mathematical formulas that define shapes, points, lines, and Bezier curves.
Characteristics: Instead of coloring static pixel coordinates, vector software calculates paths relative to the canvas size.
Scaling Behavior: Because vector files use mathematical calculations, they can be scaled up or down infinitely without losing any quality or sharpness.
Common Formats:
SVG (Scalable Vector Graphics): The standard, highly versatile vector format used for web-based illustrations, logos, and icons.
PDF (Portable Document Format): A versatile document container that can store both raster photos and vector graphics depending on how it was saved.
3.6 Graphics Editing: Pixlr X
Pixlr X is a free, web-based image-editing application that utilizes AI tools to edit photos, add overlays, crop images, and design graphics.
A. Main Areas of the Pixlr X Interface
Canvas Area: The central workspace where you view, edit, and arrange your graphics and images.
Tools Panel: The left sidebar containing editing tools (such as Crop, Arrange, Text, Draw, and Cutout).
Layers Panel: Located on the right-hand side, this manages and organizes stacked layers of text, shapes, and images.
Navigation Tools: Located in the bottom menu, this area controls zoom, panning, and rotational options.
B. Step-by-Step Operations in Pixlr X
Creating a New Project:
1. Navigate to the website www.pixlr.com and select Pixlr Express or Pixlr Editor.
2. Click on Create New on the start page.
3. In the dialog box, name your project (e.g., “Class 10 Project”).
4. Enter your custom dimensions (e.g., Width: $1920\text{ px}$, Height: $1080\text{ px}$) or select a preset, then click Create.
Working with Text:
1. Click the Text Tool (represented by the capital letter T) on the left toolbar.
2. Select Add New Text to generate a sample text box on your canvas.
3. Type your text directly into the box.
4. Select the Arrange Tool to access formatting options, including font family, size, color, alignment, and letter spacing.
5. Use the control handles on the edges of the text box to resize, drag to move, or rotate the text using the top circular handle.
6. Manage your text layer (lock, hide, or duplicate) using the right-hand Layers Panel.
Working with Shapes:
1. Click the Arrange Tool on the left toolbar and select Shape.
2. A default square shape will appear on the canvas.
3. In the left panel, change the shape type (e.g., from Square to Circle).
4. Adjust the fill color, outline thickness, and shadow properties using the options panel.
5. Resize or rotate the shape using its control handles.
Working with Layers:
1. Access the Layers Panel on the right side of the screen.
2. Click the “+” icon to open the Add Layer dialog box.
3. Select the layer type you want to add (e.g., Image, Text, or Shape).
4. Click the three-dot button on any layer to rename, lock, or hide it.
5. Adjust the transparency slider and blend modes to control how stacked elements look.
6. Reorder elements by dragging layers up or down in the list.
Inserting Images:
1. Click the Element Icon on the bottom-left corner of the screen.
2. Select Add Media from the options list.
3. Browse your local files, choose an image, and click Open to add it to your project as a new layer.
Using the Cutout Tool:
1. Select your image layer, then click the Cutout Tool icon on the left menu.
2. Choose your preferred cutout type (e.g., Magic Cutout, Shape, Draw, or Lasso).
3. Adjust the softness level slider to control how sharp the cutout edges are.
4. Drag your cursor over the parts of the image you want to keep or remove.
5. Refine your edges using the Keep and Remove toggle options.
Exporting the Project:
1. Click the Save button in the bottom-right corner.
2. In the pop-up window, name your file and choose your export format:
JPG: Best for photos; features small file sizes.
PNG: Preserves transparent backgrounds.
WEBP: Modern web format with high quality and high compression.
PXZ: Pixlr’s native layered format, which saves your edit history and layers for future use.
3. Adjust the quality slider to balance image sharpness against file size.
4. Click Save As, select your save location, and confirm.
3.7 Audio
Audio is the representation of sound waves stored as digital files in a computer system. It includes music, voice recordings, instrumental tracks, and sound effects.
A. Audio Waveforms and Digital Sampling
Sound changes over time. To visualize this change, we use an audio waveform graph.
Amplitude: The height of the wave crest, representing the physical loudness or volume of the sound.
Wavelength: The distance between wave peaks (width), representing the pitch or frequency of the sound.
Digital Sampling: Because computers cannot store continuous analog sound waves directly, they take “snapshots” of the waveform at precise, rapid time intervals. This process is called sampling, and these digital points are saved to build the audio file.
B. Audio File Formats
MP3 (MPEG Audio Layer 3): A compressed audio format. It revolutionized digital music by using compression algorithms that significantly reduce file sizes without noticeable loss in audio quality.
AAC (Advanced Audio Coding): Developed as an improvement over MP3, it uses more advanced compression algorithms to deliver better sound quality than MP3 at the same file size.
WAV (Waveform Audio File Format): An uncompressed audio format. It stores raw audio exactly as it was recorded, providing maximum quality at the cost of exceptionally large file sizes.
C. Audio Editing: Audiomass
Audiomass is a free, web-based digital audio workstation (DAW) designed to record, trim, and apply digital effects to audio waveforms.
Main Areas of the Audiomass Interface:
Menu Bar: The top bar used to access file, editing, view, and effect options.
Waveform Display: The central window showing the audio wave, where you can select, cut, copy, paste, and trim audio segments.
Control Panel: The play, pause, stop, record, and volume controls.
Step-by-Step Operations in Audiomass:
Recording Audio:
1. Open the website https://audiomass.co.
2. Click the Record button (or press R on your keyboard).
3. In the recording box, select your input microphone.
4. Click Start Recording to begin capturing audio.
5. Click Finish Recording to stop.
6. Click Open Recording to load the captured track onto the Waveform Display.
Importing Audio:
1. Click File in the top-left menu and select Load from Computer.
2. Browse your local folders, select your audio file, and click Open to display the waveform in the editor.
Cutting Audio:
1. Click and drag your cursor over the Waveform Display to highlight the section of audio you want to remove.
2. A blue selection box will highlight your selected area.
3. Click the Scissors icon on the toolbar to cut and remove that section.
Applying Audio Effects:
1. Select the segment of the waveform you want to modify.
2. Click on the Effects menu at the top.
3. Select an effect from the list (such as Normalize, Fade In, Fade Out, Reverse, Pitch Shift, or Reverb).
4. Adjust your settings (for example, in Reverb, adjust the time decay and wet levels), then click Apply.
5. Play your audio back to hear the changes.
Exporting Audio:
1. Click on File in the top menu and select Export/Download.
2. In the options box, name your file and choose your format (MP3 or WAV).
3. Set your preferred quality (bitrate) and channel settings, then click Export to download the file.
3.8 Video
Video refers to a rapid sequence of digital photographic images (called frames) displayed over time to create the illusion of smooth, real-world movement, usually paired with synchronized audio.
A. Key Video Concepts: Frame Rate and Resolution
1. Frame Rate (Measured in FPS – Frames Per Second)
Frame rate is the number of individual image frames displayed in one second of video.
– Higher frame rates (e.g., $50\text{ fps}$, $60\text{ fps}$) produce exceptionally smooth, realistic motion.
– Lower frame rates (e.g., $24\text{ fps}$ for cinema, $25\text{ fps}$ for PAL broadcast) produce standard motion. If the frame rate drops too low, the video looks choppy and laggy.
2. Resolution
Resolution is the total count of individual pixels making up each video frame, typically measured as Width × Height. Higher resolutions contain more pixels, providing sharper details at the cost of larger file sizes.
SD (Standard Definition): $720 \times 480$ pixels. A low-resolution standard used for older analog television sets and DVDs.
HD (High Definition): $1280 \times 720$ pixels. A medium-resolution format used for television broadcasts and web streaming.
FHD (Full High Definition): $1920 \times 1080$ pixels. The modern high-definition standard used for computer monitors, streaming platforms, and console gaming.
B. Video File Formats
MP4 (MPEG-4 Part 14): The most popular video format online. It uses highly efficient compression to deliver excellent video quality at small file sizes, making it ideal for streaming platforms like YouTube and Netflix.
MOV (QuickTime Movie): Developed by Apple, this format stores high-quality video and is used for both compressed and uncompressed files in professional video editing.
AVI (Audio Video Interleave): A classic Microsoft format that stores uncompressed or compressed video data. It offers excellent playback quality but features very large file sizes.
C. Video Editing: CapCut
CapCut is a free, web-based and mobile video editing application designed to arrange clips, trim footage, add transitions, overlay text, and apply filters.
Main Areas of the CapCut Interface:
Timeline Area: The bottom workspace where you stack, order, split, and sync your video clips, audio tracks, and text overlays over time.
Tools Panel: The left-hand panel used to access media uploads, templates, audio, transitions, and visual effects.
Preview Area: The central monitor showing a real-time preview of your edited video.
Export and Share Options: The top-right menu used to render and save your finished video.
Step-by-Step Operations in CapCut:
Creating a New Project:
1. Open www.capcut.com in your browser.
2. Click on Create new video.
3. Choose your project aspect ratio (e.g., select 16:9 for standard widescreen computers/TVs).
4. Click on Untitled Project in the top-left corner and type a custom name for your file.
Importing Videos:
1. Click the Media tab on the left panel.
2. Click the Upload button.
3. Select From this device to open your file explorer.
4. Select your video clips, then click Open to add them to your project library.
Working in the Timeline:
1. Click on a video clip in your library, or drag and drop it directly onto the timeline tracks.
2. To reorder your clips, click and hold a video segment and drag it left or right to a new position.
3. Use the timeline zoom slider to inspect frames closely.
4. Press the Spacebar (or click the Play button in the preview area) to play back your video.
5. Drag the vertical playhead cursor to jump directly to any timestamp.
Trimming and Cutting Videos:
To Trim: Click a clip on the timeline, then click and drag its left or right edges inward to shorten its duration.
To Cut/Split: Position the playhead at the exact frame where you want to make a cut, then click the Split button to divide the clip into two separate segments.
To Delete: Select the unwanted clip segment and click the Delete button (trash can icon) to remove it.
Adding Transitions:
1. Hover your mouse in the gap between two video clips on the timeline and click the Add Transition button.
2. Browse the transition categories on the left panel (e.g., Fade, Overlay, Slide).
3. Click a transition to apply it between the clips.
4. Drag the edges of the transition slider on the timeline to speed up or slow down the transition effect.
Adding Video Effects:
1. Click the Effects button on the left tools panel.
2. Browse through the category list to find an effect you want to use.
3. Place your timeline playhead cursor at the exact frame where you want the effect to start.
4. Click the effect to apply it.
5. Double-click the effect block on your timeline to open its settings panel, where you can adjust properties like strength, speed, and scale.
6. Drag the edges of the effect block to change how long it stays on screen.
Adding Text:
1. Click the Text tool icon on the left panel.
2. Select either plain text (e.g., Add Heading) or choose a stylized text template.
3. Double-click the text box in the Preview Area and type your words.
4. Adjust your font styling, sizing, colors, shadows, and alignments using the properties panel on the right.
5. On the timeline, drag the edges of the text layer block to set exactly when the text appears and disappears.
Exporting the Project:
1. Click the Export button in the top-right corner.
2. Select Download from the list of options.
3. Set your export properties: Choose your quality (bitrate), resolution (e.g., 1080p), and frame rate (e.g., 30fps or 60fps).
4. Click Export to start rendering.
5. Once complete, click the Download button to save the finished MP4 video file directly to your device.
3.9 Concept of Animation
Animation is the computer-generated movement of drawn, painted, or modeled graphic elements. It operates by displaying a sequence of slightly different static images at high speed to trick the human eye into seeing fluid motion.
Psychology in Animation
Animators use psychological principles to create connection and emotion. By understanding how the human brain processes sights and feelings, they design animations that are engaging and easy to understand:
Attention Management: Using bright colors and sudden, exaggerated movements to instantly grab viewer attention (especially used in children’s programming and cartoons).
Emotional Connection: Giving characters highly expressive facial animations (exaggerating eye movements and mouth shapes) to help the audience relate to their feelings and story.
Timing & Appeal: Smooth, well-timed physical movements make the animation feel natural and satisfying to watch, making information easier to absorb.
Two Primary Types of Animation:
2D Animation: Made in two-dimensional space. These graphics are flat, possessing only width and height. Traditionally, 2D animation is drawn frame by frame using digital vector or raster software.
3D Animation: Made in three-dimensional space, possessing width, height, and depth. Animators model characters as 3D objects, build a digital skeleton (rigging), and define coordinates in a virtual environment to create realistic movement and perspective.