ADVANCED INTERACTIVE DESIGN / FINAL PROJECT / DST60804

on

 

17/11/2025 - 28/12/2025 / (Week 9 - Week 14)

Aricia Man Yi Xuan / 0375026

Advanced Interactive Design / DST60804 / Final Project

Bachelor of Design (Hons) in Creative Media

Google Drive Link

TABLE OF CONTENT

1. Lectures

2. Instructions

3. Task 3: Final Project

5. Reflection

LECTURES
WEEK 9 / (19/11/2025)
This week, we did an animate exercise: 5-page timeline website by ourself in class.
  • Instruction:
    - Build 5 labeled, static frames that pause, and use persistent buttons to jump between them with a 5-frame fade/slide animation.
Fig.1.1.1 Screenshot of process / (Week 9, 19/11/2025)

Fig.1.1.2 Timeline / (Week 9, 20/11/2025)
  • Steps:
    -     Convert to Symbol > Name it (button)
    - Action timeline > Label > Name it
Fig.1.1.3 Final Outcome - Screen Record / (Week 9, 20/11/2025)

WEEK 10 / (25/11/2025)
This week, we learned how to use gsap.com to create simple animations with JavaScript into Adobe Animate. Mr. Shamsul guided us through the GSAP website and showed how to apply basic animation properties.

Steps:
1. Download the file in gsap
2. Draw 4 square > Convert to Symbol (Movie Clip: mcScreen)

Fig.1.1.4 Convert to Movie Clip / (Week 10, 25/11/2025)

3. Copy gsap (timeline) into actions 
4. Change the "x" & "mcScreen", add "this." (Fig.1.1.5)

Fig.1.1.5 Actions / (Week 10, 25/11/2025)

Fig.1.1.6 Actions  / (Week 10, 25/11/2025)

Fig.1.1.7 Final Outcome - Screen Record  / (Week 10, 25/11/2025)

INSTRUCTIONS

- MIB -
Fig.2.1.1 Module Information Booklet

FINAL PROJECT

Description:
Complete thematic interactive website by creating integrate visual asset and refine the prototype into a complete working and functional product experience.

Requirements:
- Complete functional product experience, min 5 working pages
- Upload the website to Netlify/ GitHub


ADOBE ANIMATE DEVELOPMENT
- Page illustration & layout setup -
Fig.3.1.1 Different Pages / (Week 10)

To begin, I started by redrawing every page in Adobe Animate, following the structure and visuals from my Figma prototype (click here to view in Figma). I used separate layers to organize backgrounds, characters, UI elements, and text to match the original wireframes. Each pages were created in different files.

- Designing the Animation -
Fig.3.1.2 Animation elements in Figma / (Week 11)

Fig.3.1.3 Animation of Seal #1 / (Week 11)

Fig.3.1.4 Animation of Seal #2 / (Week 11)

Fig.3.1.5 Animation of Seal Blinking Eyes - Timeline / (Week 11)

Fig.3.1.6 Animation of Seal Bump into Screen - Timeline / (Week 11)

Tools used: Asset Warp Tool, Symbols Panel, Classic Tween, Onion Skin
Next, I converted some elements into Movie Clips symbols. I animated small loops such as blinking eyes (Fig.3.1.5), swimming (Fig.3.1.3), jumping (Fig.3.1.4), inside each symbol so the website feels more lively and interactive. I developed the intro animation, including the loading sequence and the crawling seal bump into screen (Fig.3.1.6). For the seal animation, I first animated the sequences in Figma (Fig.3.1.2), then exported and placed them directly into the Animate timeline. After importing, I refined the motion using the Asset Warp Tool, adding extra squash & stretch to bring the characters to life.

- Adding Interactivity & Button Actions -
Fig.3.1.7 Examples of buttons / (Week 11-12)

Fig.3.1.7 Examples of ActionScript / (Week 11-12)

Tools used: ActionScript, Buttons
With all visuals ready, I added actions to connect buttons to different frames and ensure smooth page transitions throughout the experience.

- Adding Audio & Sound Effects -
Fig.3.1.8 Adding audio in buttons / (Week 13)

I imported hover sound effects for all of the buttons such as navigation bar, icons, CTA, information buttons, and so on. 

Fig.3.1.9 Animal's sound button / (Week 13)

I created a sound button that plays an audio when the user clicks on it. I placed the audio under the "Down" state of the button and set the sound sync to Event with Repeat = 1 so it will plays immediately when the button is clicked.

- Exporting Issues -
Fig.3.1.10 Landing Page Animation / (Week 14, 2/1/2025)

Fig.3.1.11 Remove Landing Page / (Week 14, 2/1/2025)

Fig.3.1.12 Problems encountered / (Week 14, 2/1/2025)

While I tried to open the index.html generated by Animate locally, the browser displayed a gray page instead of my animation. Upon checking the warnings from Animate, I found that my page used bitmaps, complex filters, and unsupported radial gradients, and some animated objects had “cache as bitmap” applied.  This showed that the FLA page could not be correctly exported to HTML5 Canvas due to unsupported features, preventing proper rendering in the browser and making it impossible to deploy to Netlify.

Solution:
To solve this, I decided to remove the landing page (original index.html) and change the homepage to "index.html", which felt quite regrettable as I had spent a lot of time designing it.

- Final Outcome (Pawsonality) -

Fig.3.1.13 Pawsonality pages - PDF / (Week 14, 2/1/2025)

Fig.3.1.14 Netlify / (Week 14, 2/1/2025)

Google Drive Link: click [here]

FEEDBACK

Week 13:
Specific Feedback: You can change the icon in the library. The reason there's 2 icons is because it is necessary.

REFLECTION

Experiences:
During this project, I think it's a rewarding experience. Adding the audio on hover was quite challenging, especially since I had a turn on/off button for the background music. I watched a lot of tutorial videos but still had trouble, but I finally managed to fix it. The process in the beginning was fun, creating in Figma first, then converting to Adobe Animate. At first, I thought Adobe Animate was very difficult to learn, but I taught myself and gradually got used to it, learning many new skills along the way. However, during the final stage, I encountered technical limitations when publishing the project to HTML5, which caused my landing page to fail to load properly. Even though I felt a bit disappointed having to remove the landing page, the process helped me understand the importance of technical compatibility in web design.

Observation:
I noticed that users respond better to clear visual cues and intuitive buttons. Alignment in Animate is very important, Mr. Shamsul always remind us to align elements to the stage ensures everything looks neat and well-organized.

Findings:
I think creating an interactive website is completely different from designing a normal static website. It’s not easy at all, because it requires thinking about how users will interact with every element, from buttons to animations to audio feedback. Unlike a normal website where content is mostly read or viewed, an interactive website needs careful planning to make sure actions feel smooth, intuitive, and enjoyable. Through this project, I learned that creating an interactive website requires patience, testing, and continuous adjustments, but it is also very rewarding to see users engage with your design.





Comments

Post a Comment