Advanced Interactive Design: Final Project

17/6/2025 - 22/7/2025 (Week9-Week14)

Amber Tan Jing Jing (0372746)

DST60804 / Advanced Interactive Design / Bachelor of Design in Creative Media

Final Project / Interactive Design Planning and Prototype

---

TABLE OF CONTENTS

1. Lectures

2. Instructions

3. Final Project

4. Reflection

---

LECTURES

Week10

This week we learned about GSAP.

Figure 1.1 Adobe Animate - Exercise 7, Week10 (24/6/2025)

---

INSTRUCTIONS

---

FINAL PROJECT

First, I wanted to make the planet revolve around the Earth. I found some similar tutorials on youtube and followed them.

Figure 1.1 Landing page progress

After that, I tried to make the text rotate around the planet in a circle and pause when the user hovers over on the planet. I couldn’t find any relevant tutorials on youtube, so I asked chatgpt. After many tries, it finally worked.

Figure 1.2 Screenshot of code progress for the Home page

Figure 1.3 Screenshot of code progress for the About page

I wanted to make the character and the product get bigger when I hover over it, but I couldn’t find any tutorials. So I try asked chatgpt, and after trying a few times, it worked.

Figure 1.4 Screenshot of code progress for the Character page

Figure 1.5 Screenshot of code progress for the Merchandise page

Then I added the link to the button so that when it is clicked, it opens a new webpage.

Figure 1.6 Screenshot of code progress for the Behind BT21 page

Netlify link: https://bt21website1.netlify.app/

* It might take some times to load

Final Project Google Drive: 

https://drive.google.com/drive/u/0/folders/1XnAEsAs6cLi96OeQICwFRzO9sLmkVUf8

BT21 website walkthrough video (youtube link):

https://youtu.be/O4WmJzjNfIE

Figure 1.7 BT21 website walkthrough video

---

REFLECTION

Through this project, I really learned how to create an animated website. Even though I faced some challenges, especially with JavaScript and some animation effects, I managed to solve them with the help of tutorials and chatgpt.

I also realized that the timeline is one of the most important parts. I had to be clear about which timeline and which layer I was working on, especially when stopping or starting animations.

Overall, this project was quite difficult for me, but it pushed me to try new things and I managed to solve the problem on my own. I have gained more confidence in using Adobe Animate. Although the process was quite hard because the layout was not consistent at first, I found some references and refined it. In the end, I am quite satisfied with the result.