CSC413 INTRODUCTION TO INTERACTIVE MULTIMEDIA
GROUP ASSIGNMENT (ANIMATION)
UNIVERSITI TEKNOLOGI MARA
FACULTY OF SCIENCE COMPUTER & MATHEMATICS
Prepared by
Ahmad Luqman Hakim Bin Anas
2025433786
Khairil Haziq Bin Khairil Nizam
2025422842
Muhammad Hakimi Bin Baharuddin
2025423972
Muhammad Habib Ikhwan Bin Mohd Fadil
2025433824
Prepared for
Dr. Prasanna
Date of Submission
20th January 2026

The Real World Awaits

An interactive animation addressing phone addiction among teenagers

Project Team

Ahmad Luqman

Ahmad Luqman Hakim Bin Anas

Scriptwriter

Matric: 2025433786

Reflection

"Mastered weaving social messages into compelling animated stories through rhythmic script delivery."

Muhammad Hakimi

Muhammad Hakimi Bin Baharuddin

Scenes Designer

Matric: 2025423972

Reflection

"Learned visual storytelling by sketching from imagination to design unique animation scenes."

Khairil Haziq

Khairil Haziq Bin Khairil Nizam

Audio Editor

Matric: 2025422842

Reflection

"Developed comprehensive workflow for animating with sound, ensuring precise and reactive sound design."

Muhammad Habib

Muhammad Habib Ikhwan Bin Mohd Fadil

Animator

Matric: 2025433824

Reflection

"Developed ability to breathe life into ideas through character movement and pacing."

Group Information

Group Name: Pendidikan Kesihatan
Selected Topic: Phone Addiction among Teenagers
Target Audience: Teenagers aged 13 – 18
Animation Style: 2D Flat Animation

Concept Summary

This project focuses on raising awareness about digital addiction among teenagers. The animation highlights the overuse of mobile phones and neglection of real life living through a narrative storyline and a short interactive question.

Tools & Technical Specifications

Software and technical details used in the project

Tools Used

Open Toonz

We utilized OpenToonz as our primary production software to construct the core visual elements of the project. This powerful 2D animation tool allowed us to build and animate all the scenes from scratch. Its robust timeline and keyframe features were essential for organizing our narrative flow, ensuring that character movements—such as the "distracted walking" or "scrolling" actions—were fluid, natural, and timed perfectly to match the intended pacing of the story.

Capcut

I used Capcut to professionally layer the narration, sound effects, and background music. I focused on precise timing to sync the audio with the animation. This final editing process tied everything together into a polished animation.

Canva

We used Canva to assemble all seven scenes into one video. We applied technical skills in timeline editing and transitions to merge the clips smoothly, ensuring the story flowed well from start to finish. This final step allowed me to organize the entire project into a professional awareness animation.

Clipchamp

On Clipchamp, we utilized the auto-caption feature to add subtitles to our project. This made the awareness content more accessible and ensured that the message was easy for the audience to follow along with the narration.

Assets Used

Background

Gemini AI

Character Voices

ElevenLabs

Objects

Gemini AI

Sound Effects

YouTube/Pixabay

Fonts Used

System (Capcut)

Font size 8

Open Sans (Clipchamp)

Font size 22

Generated Assets

Characters (AI Generated)

2D flat-style teenagers and family members with expressive body language.

Backgrounds (AI Generated)

Dining Area
Bedroom
Traffic
Bus Stop

Objects (AI Generated)

Smartphone, School bag, Alarm Clock, Trees, Dining table, Window, Door, Study table/desk, Pillow, Tissue, Doorknob, Ball, Bookshelf, Coffee machine, Teapot, Food, Cutlery, Chair, Spectacles, Plant, Motorcycle, Helmet, Electric pole, Bed, Blanket, Figurines, Microwave

Design Specification

Color palette and design elements

Color Palette

Character & Skin Tones

#FFD1B5
#5D3A2A
#8C6239
#A3D8F4
#F9C8D9
#E6B0AA

Food & Dishware

#F8F9F9
#E67E22
#4B3621
#FFA500
#A93226

Interior & Furniture

#C19A6B
#D2B48C
#8D5524
#DAA520
#D1C4E9

Background & Environment

#D6EAF8
#FFFFFF
#228B22
#CD5C5C
#FFF176

Animation Presentation

"The Real World Awaits" - Our 2D animation about phone addiction

The Real World Awaits

A 2D animation about phone addiction among teenagers

Upload Animation Video

Note: To add your animation video, replace the video placeholder div with your video element in the HTML code.

Script Highlights

Opening Scene

Narrator

Storytelling Voice

"Once upon a time, while the rest of the world slept in quiet darkness, one boy stayed wide awake. Hidden beneath his blankets, he spent his nights lost in the endless glow of his screen."

Mom

Concerned Parent

"It's nearly three in the morning... You need to sleep, okay?"

Dad

Frustrated Parent

"Look at me for a second. You've been staring at that screen since you woke up. Put it down and eat your breakfast."

Friend

Concerned Friend

"Dude, watch out! You almost just ended up in the hospital over a video on your screen."

Narrator (Ending)

Storytelling Voice

"He now lives with his head held high, his phone silent and set aside. He discovered that life isn't something to be watched through a lens, but something to be lived with every sense."

Animation Storyboard

"The Real World Awaits" - Scene by scene breakdown

1

Late Night Doomscrolling

Visual Description

In this scene, the kid is laying on the bed while doomscrolling through his phone. The scene showed his eyeballs reflecting the screen of his phone. The alarm clock showed that it was 2.47 am telling that it was late in night, but the boy was still awake, addicted to his phone.

Audio

Deep atmospheric music

Interaction

None

Visual Sketch

Scene 1 Sketch

Upload image for visual sketch

2

Mother's Concern

Visual Description

In this scene, his mom is trying to hold the doorknob trying to open the door to his bedroom. The mother told him to sleep because it is already late.

Audio

None

Interaction

None

Visual Sketch

Scene 2 Sketch

Upload image for visual sketch

3

Morning Exhaustion

Visual Description

In this scene, the kid was seen laughing through his phone, still awake and addicted to his phone despite having class in the morning. The alarm clock showed that it was 7.00 am in the morning, and the boy had to wake up to go to school. This scene showed that the boy is too tired and sleepy to get up, his eyes was red and tired.

Audio

Groggy morning sound

Interaction

None

Visual Sketch

Scene 3 Sketch

Upload image for visual sketch

4

Ignoring Family at Dinner

Visual Description

On the dinner table, the boy was seen still addicted to his phone despite his father talking to him. He still ignored his father and continued scrolling through the phone.

Audio

None

Interaction

None

Visual Sketch

Scene 4 Sketch

Upload image for visual sketch

5

Danger on the Road

Visual Description

In this scene, the boy is shown walking to school while crossing a road. He is distracted by his phone and doesn't notice the motorcycle coming toward him.

Audio

None

Interaction

None

Visual Sketch

Scene 5 Sketch

Upload image for visual sketch

6

Friend's Intervention

Visual Description

In this scene, a friend notices the danger and quickly steps in to warn the boy. As the motorcycle speeds past him. This moment shows that while the boy was too distracted by his phone to notice the road, his friend's quick reaction saved him from a serious accident.

Audio

None

Interaction

None

Visual Sketch

Scene 6 Sketch

Upload image for visual sketch

7

Ending Message

Visual Description

On this scene, it is just a black with a narration voice as the background sound giving the ending message.

Audio

Inspirational final music

Interaction

None

Visual Sketch

Scene 7 Sketch

Upload image for visual sketch

Use the navigation arrows to view all 7 scenes of our animation storyboard.

Narrative Flowchart

The journey from addiction to awareness

Scene 1

Late Night Doomscrolling

Scene 2

Mother's Concern

Scene 3

Morning Exhaustion

Scene 4

Ignoring Family

Scene 5

Danger on the Road

Scene 6

Friend's Intervention

Scene 7

Ending Message

Final Message

"To everyone listening: the world is happening out here, not in the palm of your hand. Don't let a small screen make you blind to the big, beautiful world right in front of you."

Development Process

From idea to final animation

Development Log

Visual Sketch Gallery

Concept sketches and visual ideas developed during the planning phase.

Scene 1: Bedroom

Late Night Doomscrolling

Boy scrolling phone at 2:47 AM

Scene 2: Door

Mother's Concern

Mother at the bedroom door

Scene 3: Morning

Morning Exhaustion

Tired boy at 7:00 AM

Scene 4: Dinner

Ignoring Family

Boy on phone at dinner table

Upload your actual sketch images by replacing the placeholder divs with img tags.

Submission Checklist

Animation

Final rendered animation video

MP4 File

Video file in MP4 format

Documentation

Complete project documentation

Storyboard, Script & Flowchart

All planning materials included

Development Log

Detailed timeline of development

Members Reflections

Individual learning reflections

All Requirements Completed ✓

All submission checklist items have been completed and are ready for submission.

The Real World Awaits

An interactive multimedia project addressing phone addiction among teenagers through engaging 2D animation

Objective

Raise awareness about digital addiction among teenagers through compelling narrative animation.

Impact

Encourage teenagers to reflect on their phone usage and prioritize real-world connections.

Learning Outcome

Mastery of interactive multimedia principles through practical animation project development.

Project Summary

"He now lives with his head held high, his phone silent and set aside. He discovered that life isn't something to be watched through a lens, but something to be lived with every sense."

The Real World Awaits

CSC413 Introduction to Interactive Multimedia

© 2026 Group Assignment - All Rights Reserved

Universiti Teknologi MARA | Faculty of Science Computer & Mathematics

Group: Pendidikan Kesihatan | Topic: Phone Addiction among Teenagers

Prepared for: Dr. Prasanna | Submission Date: 20th January 2026