Advanced Interactive Design - Task 3

18/06/2026 - 31/07/2026 (Week 9 - Week 15)
Carren Yeliandi / 0376990
Advanced Interactive Design / Bachelor of Design (Hons.) in Creative Media
Task 3 - Final Project

TABLE OF CONTENTS

1. Lectures

2. Instructions

3. Feedbacks

4. Reflections

Lectures

Refer to Task 1 - Exercises

BACK TO TABLE OF CONTENTS

Instructions

TASK 3 - FINAL PROJECT

Following Task 2, I proceed to consult Mr.Shamsul just to confirm if everything is good to proceed. After receiving approval and recommendations to watch the GSAP Scroll Trigger video. I started to do the assets for the rest of the pages, the History and the Nutrition, in Adobe Illustrator.

Fig 1. Assets Created in Adobe Illustrator (18/07/26)

In the meantime, I also started to watch the tutorial video given as well as the documentation itself. I was a slightly confused on this part as it felt a bit different than the one in Adobe Animate. It also didn't help that there is very minimal tutorial for Adobe Animate itself, some tutorial that can be found is usually for Adobe XD instead. It didn't help that I wanted to trigger multiple animation depending on the state the user is in. However thankfully, with the help of Gemini, I was able to create a functional scroll trigger block code.

Fig 2. Scroll Trigger Code (17/07/26)

For the multiple animation I mentioned, I wanted Agent O to move left and right depending on the user scroll direction but goes idle when no scrolling is involved. To do so, I used the 3 view of Agent O created in Task 2 and tween the legs, the arms or even the body to create a "Walk Right", "Walk Left" and "Idle" motion. This takes quite a bit of time to make but I was pretty happy with how it turned out.

Fig 3. Agent O Multi Animations (17/07/26)

The rest of the code, such as one for the buttons and sounds, was given by Mr.Shamsul either in class or in Teams. Initially, the sound work but for some reason the icon was a bit weird, so I consulted Gemini on why it's the icon is not changing properly and funnily enough it was because the container was a button, not a movie clip. I didn't thought to check that because I had thought I had changed it previously. After fixing that, everything works out fine.

Fig 4. Audio Code (27/07/26)

One of the example is for the Type page, I used a button to trigger the appearance of a card and then to dismiss the card itself. Midway, I found that I can click the button multiple times even without dismissing the card, after some research, I found that I can toggle enable the button which help to not accidentally trigger the card animation multiple times despite the card not being dismissed.

Fig 5. Card Animation (28/07/26)

During the process, I found that the Navbar was not fixed in place and despite all my efforts in trying to do so either by using the same code that managed to fixed "Agent O" in place or some other code that I found online, it still doesn't stay fixed. I tried opening the html itself but found that it looks different than the one I know. So after consulting with Mr.Shamsul, he suggested an alternative of adding a back to top button instead. I managed to find a tutorial on Youtube and Stack Overflow and decided to follow them.

Fig 6. Back to Top Button (28/07/26)

I encountered some issues with the assets in the Adobe Animate where they glitched out or cut off itself. I found that separating the content into 2-3 layers helped, I suspect that it's due to the heavy load if it's compiled within one layer hence if separated will load just fine.

Fig 7. Asset Error (28/07/26)

For the world map asset, I have both the close up and the overall map. At first I thought of using the same mechanic as the one for the cards itself but decided to use hover instead, so when they hover, they'll view the enlarged and viewable version of the map.

Fig 8. Map Hover (28/07/26)

After that, I tested it one more time just to make sure that everything works out fine and went ahead and published it in Netlify.

NETLIFY LINK

(Warning : Very slow to load, please be patient)

Google Drive Link

BACK TO TABLE OF CONTENTS

Feedbacks

Week 9 :

Everything looks okay, but fix the homepage to be center align instead since everything else is center align. For the scroll trigger, check out the GSAP Scroll Trigger video.

Week 13 :

If the script is too complicated, additional code can cause an error. Some fix it directly in the html but if it's not possible, add a back to top button instead.

BACK TO TABLE OF CONTENTS

Reflections

I feel like because the theme is something that we actually like and wanted, the task didn't feel too bad. I had fun creating the assets and learning about the coding process in class, I even got an extra mark once. However, for the more complicated code that is not taught in class and we have to learn our own, not so much, because I had a hard time making sense of what to do especially with the limited amount of Adobe Animate tutorial online. Gemini helped me with the scroll trigger as well as checking my codes when an error occurred, sometimes it help sometimes it doesn't, it can only do so much.

Overall, I'm quite satisfied with the results. I did hope I could do more for the website but as I said, I can only do so much with how much I understand JS right now. Perhaps one day I can make a more dynamic and interactive website. I'm looking forward to the day that I look back and not have my brain being foggy every time I look at the codes.

Carren Yeliandi (0376990)

Search This Blog