Advanced Interactive Design - Final Project
17/06/2025 - 22/07/2025 (Week 9 - Week 14)
Home Page
On the Home page, I animated the memory orbs using motion tweens to vary their size across the timeline, creating dynamic movement. I also added an interactive hover effect by changing the button’s color when clicked.
Below is the ActionScript I used for the “Learn More” button, which links to the official Pixar YouTube video introducing Joy. The same script was applied to the other emotions as well, each linking to its corresponding video.
Subscribe Page
Chong Wee Han 0368863
Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Final Project - Completed Thematic Interative Website
JUMPLINK
LECTURES
WEEK 9
 |
| Figure 1.1 |
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/1nU-vNiCyCZStvR-zJIBMCMACyVCnYy-H/preview" width="640" height="480" allow="autoplay"></iframe>
TASK 3 - COMPLETED THEMATIC INTERACTIVE WEBSITE
In Task 3, we are required to complete a synthesis of the knowledge gained in Tasks 1 and 2 for application in Task 3. We will create integrated visual assets and refine the prototype into a complete, working, and functional product experience, comprising a minimum of 5 working pages.
Adobe Illustrator
To begin the process, I used Adobe Illustrator to create the visual elements and illustrations for my website, as I’m more comfortable with the software. I illustrated the headquarters and memory orbs from Inside Out to align with my concept, using gradients to evoke a dreamy and colorful atmosphere. I also designed brain elements for the About page background and included icon illustrations to enhance user understanding when explaining the emotional insights.
 |
| Figure 2.1 |
Thus, I prepared all background visuals and illustrations in Adobe Illustrator before importing them into Adobe Animate. The character images were sourced from Pinterest and edited in Photoshop to blend into the background of the Emotions page. Additional images and introductory descriptions were gathered from Pinterest and the Inside Out website: https://www.pixar.com/inside-out.
 |
| Figure 2.2 |
Loading Page
I started by designing a 1920px x 1080px website layout. For the loading page, I wanted to create an interactive animation, so I applied a classic tween to the loading elements to bring them to life.
I started by designing a 1920px x 1080px website layout. For the loading page, I wanted to create an interactive animation, so I applied a classic tween to the loading elements to bring them to life.
 |
| Figure 2.3 |
On the Home page, I animated the memory orbs using motion tweens to vary their size across the timeline, creating dynamic movement. I also added an interactive hover effect by changing the button’s color when clicked.
 |
| Figure 2.4 |
 |
| Figure 2.5 |
 |
| Figure 2.6 |
About Page
In the About page, I implemented interactive effects on each card element that respond when hovered over, enhancing user engagement.
In the About page, I implemented interactive effects on each card element that respond when hovered over, enhancing user engagement.
 |
| Figure 2.7 |
Emotions Page
This page includes interactive buttons linked to each emotion's introduction: Joy, Sadness, Anger, Disgust, and Fear. The characters were taken from Inside Out to help users connect emotionally and intuitively understand the definitions of each emotion. For those familiar with the movie, the visuals offer an easy and engaging reference point.
This page includes interactive buttons linked to each emotion's introduction: Joy, Sadness, Anger, Disgust, and Fear. The characters were taken from Inside Out to help users connect emotionally and intuitively understand the definitions of each emotion. For those familiar with the movie, the visuals offer an easy and engaging reference point.
 |
| Figure 2.8 |
 |
| Figure 2.9 |
 |
| Figure 2.10 |
Reflect Page
In the Reflect page, users begin by selecting their current emotion. Each button links to a corresponding mission room, where they can receive a personalized task. I also applied hover effects to the emotion buttons to improve interactivity and visual feedback.
 | ||
Figure 2.11
|
Subscribe Page
For the Subscribe page, I added interactive effects to the background memory orbs, making them appear as if they are glowing by applying motion tweens. Additionally, a hover effect was applied to the Subscribe button to make it more engaging.
 |
| Figure 2.13 |
 |
| Figure 2.14 |
SUBMISSION - TASK 3
Link to Submission - Inside Emotions (Please wait a moment while the page loads, thank you! )
FEEDBACK
No feedback given.
REFLECTION
Throughout these 14 weeks, my journey in Advanced Interactive Design has been both challenging and enjoyable. The in-class exercises were especially helpful in guiding me through Adobe Animate, a software I was completely new to. Although the process was often complex and difficult, I’m proud of the outcomes I achieved.
Creating an interactive website experience pushed me to grow my web design and development skills. From managing animations and timelines to focusing on design details, this project taught me how much effort and precision go into building a functional and engaging website. Despite facing failures and setbacks during the development of the website, I’m truly grateful for the guidance and support from our lecturer, Mr. Shamsul. I’ve gained valuable and meaningful learning experiences from this module.
One of the key takeaways for me is the importance of consistency, which is an area I recognize I still need to improve. There’s still much to learn, and I look forward to continuously developing my skills throughout my academic journey. Overall, it was a fun and rewarding experience, and I’m excited for more opportunities like this in the future.
Comments
Post a Comment