Advanced Interactive Design / Final Project

 17/6/2025--27/7/2025 (W9-W14)

LIU YITONG (0370907)

Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University

Project 3

---

INSTEUCTION

---

LECTURE & TUTORIAL

Week 9

·Exercise 1
This week, we learned how to use the GASP code to edit interactive buttons. First, we used these codes to create a color page-turning effect.

Fig.1.1 Progress of week 9 GASP exercise1

Fig.1.2 Week 9 GASP exercise1

·Exercise 2

After that, we began to independently explore the production of the scaling interaction effect. Due to time constraints, I only created a few buttons and did not make the return button.

Fig.1.3 Progress of week 9 GASP exercise2

Fig.1.4 Week 9 GASP exercise2

---

TASK

After my prototype was approved, I began importing assets into Adobe Animate (An) and officially started developing the interactive website.

I first created a loading Page, using the graphics I had drawn in Adobe Illustrator. These were imported into Animate and animated accordingly.

While creating the graphic animation, I also produced the text "Ready to start the journey" with a typing effect.

Fig.2.1 Production of the Loading Page

Next, I moved on to building the Home page. To enhance the user experience, I created hover animations for each arrow button. When the user hovers over a button, a dynamic visual feedback is triggered.

Fig.2.2 Production of the arrow button

The biggest challenge came from the Gallery page and the interactive pages for the four tropical plants. On the Gallery page, I wanted the image on the right to change depending on which plant icon the mouse was hovering over. To achieve this, I had to create many frame-based animations and transitions. During this stage, I encountered several bugs and performance lags, which made the process frustrating and time-consuming.

Fig.2.3 Gallery Page's action timeline

Fig.2.4 Animation of images change

Fig.2.5 Gallery Page's action page

For the individual plant interaction pages, I designed custom buttons for each species. When hovered over, a mask animation would reveal the text “Explore Plant,” creating a more guided and engaging user experience.

Fig.2.6 Button animation production timeline

Fig.2.7 Preview effect

I also added a home logo button at the top-left corner of the website, which allows users to return to the homepage. Additionally, click sound effects were implemented for all interactive buttons to improve tactile feedback.

Fig.2.8 Home logo button timeline

I initially tried to implement a background music toggle button, but unfortunately, every time I added music, the Animate preview threw an error. After multiple failed attempts, I decided to drop the idea.

---

FINAL SUBMITION

However, due to some export issues with An, my HTML file couldn't be exported properly, so I was unable to upload the website using Netlify.

So, with the approval of Mr. Shamsul, I only uploaded Animate source file to Google Drive for submission.

Fig.3.1 Proof

Source File:https://drive.google.com/drive/folders/1MczEbzy2UAA4uIBkZUTjtc8JbufuZK-4?usp=drive_link

Demonstration video

---

REFLECTION

The result of this project turned out to be far more surprising than I initially expected. At first, I thought, “I’ll just import the images, add some animations, and that’s it.” Nope. Even something that seemed as simple as creating a clean hover animation for an arrow button ended up taking a lot of time—adjusting the timing, positioning, and making sure different states didn’t flicker or overlap in weird ways.

The real challenge lay in the Gallery page and the four interactive plant pages. I wanted the image on the right to change when the mouse hovered over a plant icon. It sounds like a minor feature, but in reality, it required building a series of frame-based transitions and making sure everything stayed in sync. There were frequent issues—lags, crashes, and times when the animation just wouldn’t behave the way I expected. But every time I managed to fix a problem, I’d get a little “yay!” moment that kept me motivated to continue.

I also added a home button logo and implemented click sound effects for all interactive buttons—small touches like these brought more life to the interface. I tried to add background music with a toggle button too, but every time I did, the Animate preview would throw an error. Eventually, I had to give up on that feature. I realized that not everything needs to be included—stability should come first.

Looking back, this was truly a learn-as-you-go experience. Now I understand that good interactive design is a careful balance of visual effects, timing, sound elements, and… lots of debugging. It’s not perfect, but it’s something I created from start to finish, and I’m proud of the effort I put into it.