Advanced Interactive Design | Final Project

10/06/2025 - 22/07/2025 ( Week 8 - Week 14)

Lam Hui Zhen / 0374770
Advanced Interactive Design /  Bachelor of Design (Honors) in Creative Media / Taylors University
Advanced Interactive Final Project 

Table of Contents

  1. Instructions
  2. Project 3

Instructions

Fig 1 Module Info Booklet Advanced Interactive Design pdf

Project 3

After the consultation I improve some of my prototype and start develop the website in Animate.
For the loading page I create a simple cat walking animation and come with a reminder words with Color Fade Animation. 

Fig 2.0 Cat Walking Animation timeline

Next move to the starting page. I use masking effect as my transition. I also create a small animation at the background such as star glowing etc.
Fig 2.1 Masking

Move introduction page, to achieve the effect of a cat walking on a rotating Earth animation.
I apply a rotate animation on it. Besides that there is also previous and next buttons allow users to freely navigate between pages. The buttons are located at the bottom left and bottom right of each page.
Fig 2.2 rotating animation

Fig 2.3 symptoms page and action timeline


Move to the symptoms page I wanted the image of the polaroid enlarge while clicking it and introduction of different symptoms will show up. I also create a hover effect to enhance the visual feedback when the user hover over it.



I'm trying to include background music into the webpage, so I when to Youtube to look for a tutorial. However when I try to put in the background music there become an error for webpage to preview. After a few try I decide to let's not go with this idea.

Fig 2.6 Error page

Final Outcome

https://gleaming-cupcake-dd7ed6.netlify.app/

Google Drive Link

https://drive.google.com/drive/folders/1VzKBhMwSRY4aQFuuhDT7-zvxq7EQHQkm?usp=sharing

Reflection

I successfully completed my final project safely and on time. After taking this course, I realized that the process behind those highly interactive websites we often see is actually much more complex than I thought.

Even small animations on a single screen often require multiple rounds of adjustments to get just the right effect. And it’s not just the animations the preparation tasks like designing transitions can take a lot of time too. If not done carefully, the transitions may end up feeling awkward or jarring.

The entire process was a bit challenging for me.
I constantly had to revisit tutorials to make sure I wasn’t making any mistakes.
One particular challenge I faced was with the interactive buttons—sometimes they suddenly stopped working. It took me a while to troubleshoot and fix the issue. Thankfully, I managed to get everything running smoothly in the end.

This course has been very interesting, and I truly enjoyed it.Even though I struggled to keep up at times during class, Mr. Shamsul was always willing to help and support me, which I really appreciate. Although my final product isn't perfect, I'm genuinely happy because I learned a lot of new skills. It’s been a valuable experience.