Video & Animation: Frame Rates, Formats, Techniques

TAKEAWAYS:

• Video is a sequence of frames per second (fps); higher fps (e.g., 60fps) creates smoother motion but needs more storage.
• Keyframe animation (e.g., in Adobe Animate) defines start/end points; intermediate frames are interpolated automatically.
• Video formats (MP4, AVI, MOV) differ in compression, quality, and compatibility—MP4 (H.264) is the most widely used.
• Motion graphics (e.g., logos, UI animations) combine text, shapes, and effects for dynamic visuals.
• 3D animation (e.g., Blender, Maya) uses rigging, rendering, and lighting to create realistic or stylized scenes.
• Compression (e.g., MPEG-4, H.265) reduces file size by removing redundant data without losing quality (lossless) or slightly (lossy).

---

1. Video Fundamentals: Frames, Resolution, and Compression

Video is a time-based medium composed of frames displayed in rapid succession. The frame rate (fps) determines smoothness:

• 24fps: Standard for films (cinematic look).
• 30fps: Common for TV broadcasts (NTSC standard).
• 60fps: Used in gaming and high-end videos (smoother motion).

Resolution (e.g., 1080p, 4K) defines pixel count per frame. Higher resolution = sharper but larger file size.

How Video Works: Interlaced vs. Progressive Scan

Video Compression Techniques

Compression reduces file size by:

1. Spatial Compression: Removes redundant pixels in a single frame (e.g., JPEG for images).
2. Temporal Compression: Exploits similarities between consecutive frames (e.g., MPEG).
3. Lossless vs. Lossy:
   • Lossless (e.g., FFV1): No quality loss, but larger files.
   • Lossy (e.g., H.264): Sacrifices minor quality for smaller files (used in 90% of videos).

Real-World Example: YouTube’s H.264/H.265 YouTube uses H.264 (MP4) for standard videos and H.265 (HEVC) for 4K/8K streams. H.265 compresses files ~50% smaller than H.264 at the same quality, saving bandwidth for global users.

---

2. Video Formats: MP4, AVI, MOV, and More

Different formats suit different needs. Compare the most common:

Worked Example: Choosing a Format for a Daraz Ad

• Scenario: Daraz wants a 15-second ad for Facebook (1080p, 30fps).
• Solution:
  • Format: MP4 (H.264 codec) for cross-platform compatibility.
  • Bitrate: 5 Mbps (balance of quality and file size).
  • Why not AVI? Too large for quick uploads.
  • Why not MOV? Not natively supported on Facebook.

---

3. Animation Techniques: 2D vs. 3D vs. Motion Graphics

Animation brings static elements to life. Three main types:

A. 2D Animation (Keyframe-Based)

• How it works:
  1. Keyframes define start/end states (e.g., a ball moving from A to B).
  2. Tweening (interpolation) fills gaps between keyframes.
  3. Tools: Adobe Animate, Toon Boom.
• Example: Khalti’s animated transaction confirmation uses 2D to show money moving between accounts.

B. 3D Animation (Rigging, Rendering, Lighting)

• Process:
  1. Modeling: Create 3D objects (e.g., a character in Blender).
  2. Rigging: Add bones/joints for movement (e.g., a walking robot).
  3. Rendering: Calculate lighting/shadows (e.g., cycles in Blender).
  4. Compositing: Final touches (e.g., adding effects in After Effects).
• Example: Pathao’s 3D driver animations in their app show real-time vehicle movement.

C. Motion Graphics (Text, Shapes, Effects)

• Tools: Adobe After Effects, Cinema 4D.
• Techniques:
  • Tracking: Attach text/shapes to moving objects (e.g., a logo following a car in a race).
  • Masking: Hide/reveal parts of a video (e.g., NTC’s animated ads).
  • Effects: Glow, blur, particle systems (e.g., fireworks in NEPSE’s annual reports).
• Example: Google’s "Lorax" ad uses motion graphics for the talking trees.

---

4. Tools for Video and Animation

---

5. Real-World Applications in Nepal

A. eSewa’s Transaction Animations

• Idea Used: 2D motion graphics + keyframe animation.
• How:
  • When you pay via eSewa, the app shows a smooth transition of money from your account to the merchant.
  • Technique: Pre-rendered MP4 clips embedded in the app.
  • Why? Reduces user confusion and adds a "digital cash flow" visual metaphor.

B. NTC’s Animated Public Service Ads

• Idea Used: Motion graphics + text animation.
• Example: An ad showing electricity flowing into homes uses:
  • Particle effects for sparks.
  • Masking to reveal a "power outage" message.
  • Format: MP4 (H.264) for TV and digital screens.

C. Daraz’s Product Demo Videos

• Idea Used: 3D animation + video compositing.
• Example: A video showing a smartphone unboxing might:
  1. Use real footage of hands holding the phone.
  2. Composite a 3D-rendered "glow effect" when buttons are pressed.
  3. Export as MP4 (H.265) for fast loading on Daraz’s site.

D. Kathmandu Traffic Simulations

• Idea Used: 3D animation + physics simulation.
• Example: The Kathmandu Metropolitan City uses Blender/Unity to simulate traffic flow for:
  • New road designs (e.g., ring road expansions).
  • Accident reconstructions (e.g., analyzing crash points).
  • Output: Rendered as interactive 3D videos for public meetings.

---

6. Worked Example: Creating a Simple Animation in Adobe Animate

Scenario: Design a loading spinner for a mobile app (e.g., Khalti’s payment processing screen).

Steps:

1. Draw the base shape:
   • Create a circle (radius: 20px) in Adobe Animate.
2. Add a keyframe:
   • At Frame 1, draw the circle.
   • At Frame 24, rotate the circle 360° (for 1-second loop at 24fps).
3. Tweening:
   • Right-click Frame 24 → Create Classic Tween.
   • The software auto-generates 23 intermediate frames.
4. Add color effects:
   • Use color animation to pulse between white and blue.
5. Export:
   • Format: GIF (for web) or MP4 (for app integration).
   • Optimize: Reduce colors to 16-bit for smaller file size.

Result:

---

7. Common Mistakes and How to Avoid Them

---

8. Exam Tip: How This Unit is Tested

This unit is theoretical + practical, so expect:

1. Short Questions (2–5 marks):

   • Define frame rate, keyframe, or tweening.
   • Compare MP4 vs. AVI (1 mark each for 3 points).
   • Example:

     "Differentiate between spatial and temporal compression in video." (Answer: Spatial = within a frame; temporal = between frames.)

2. Long Questions (10–15 marks):

   • Describe the workflow of creating a 2D animation (steps + tools).
   • Calculate file size given fps, resolution, and bitrate.
     • Example:

       "A 1080p (1920×1080) video at 30fps uses H.264 at 4 Mbps. Calculate the file size for 1 minute." (Answer: $\frac{4\times 10^6\text{ bits}}{8}=0.5\text{ MB/s}\times 60=30\text{ MB}$.)

   • Design a simple animation (e.g., a bouncing ball) and explain keyframes/tweening.

3. Practical (if applicable):

   • Trace a video’s compression steps (e.g., how MPEG-4 reduces size).
   • Identify tools used in a given scenario (e.g., "Which tool would you use to animate a logo for NTC?" → After Effects).

Key Formulas to Memorize:

• File Size = $\text{Bitrate (bps)}\times \text{Duration (s)}÷8$ (to convert bits to bytes).

• Frame Count = $\text{FPS}\times \text{Duration (s)}$.

• Expect diagrams like:

  • Frame-by-frame animation steps.
  • Video compression block diagrams.
  • 3D rendering pipeline stages.

---

Final Checklist for Full Marks: ✅ Define terms clearly (e.g., "Keyframe animation is a technique where only critical frames are drawn..."). ✅ Use real-world examples (e.g., Khalti, Daraz, NTC) to illustrate concepts. ✅ For calculations, show steps (e.g., bitrate → MB conversion). ✅ Compare formats/tools in tables for clarity. ✅ Draw Mermaid diagrams for processes (e.g., animation workflow).