Advanced Interactive Design - Final Project & E-portfolio

 WEEK8-WEEK14

NAME: JIN RONG

I.D: 0361701

COURSE: Advanced Interactive Design / Bachelor of Design (Honors) in Creative Media

Advanced Interactive Design - Final Project & E-portfolio

---

INSTRUCTION

---

 Final Project & E-portfolio

Work Progress in Adobe Animate

I created a loading page in Adobe Animate using the Timeline to add keyframes and Symbols to create a loopable animation.

I imported a video into Adobe Animate and added a button icon with a click event. When the user clicks the icon, it navigates to the next page.

I imported the audio file and placed it in the "sounds" folder. Then, I created a button icon and added a click event using JavaScript (CreateJS). When the button is clicked, it toggles the music between play and pause.

A simple hover animation is added to the image. When the user moves the mouse over the image, the image moves slightly upwards and returns to its original position when the user moves the mouse away from it.

I also created a floating animation for the character's props in Adobe Animate. By adding keyframes on the timeline and applying motion tweens with easing, the props float up and down repeatedly, adding a sense of liveliness and visual interest to the scene.

Final Submission

Netlify Folder:

https://drive.google.com/drive/folders/1bDBK8WA_ydaRyJaJ8Ct5hOC4dr1vTlNu?usp=drive_link

Publish Website: https://finalwork-advinteractivedesign.netlify.app/

Adobe Animate project source files：https://drive.google.com/file/d/1l4EpcFqk8JuMd3OXZNlAPPTIhkngPIZQ/view?usp=drive_link

---

REFLECTION

In this stage of the interactive webpage assignment, I chose to work with Adobe Animate using the HTML5 Canvas mode to create a dynamic and engaging user experience. Unlike static design work I’ve done before, this task focused more on movement and interactive control, which brought a new set of challenges.

To start, I explored combining motion graphics with scene logic. By using the timeline and keyframes, I animated elements like floating character props and looping background visuals. These weren’t overly complex to build, but they gave me a clearer sense of timing and rhythm within animation.

I also experimented with adding a video player and creating a clickable button to navigate to another page. This visual transition approach felt more immersive compared to standard web navigation, and it made me more aware of how user interactions are influenced by pacing and flow.

To improve user control, I designed a music toggle button using CreateJS, allowing users to play or pause background audio. It was a small feature, but it was my first time combining sound with interaction logic. I had to learn how to manage audio file paths, handle loading issues, and trigger events correctly.

Additionally, I implemented a subtle hover effect where an image shifts upward when the mouse hovers over it. These small interactions may seem minor, but they greatly improve the sense of responsiveness and emotional feedback on the page.

One of the biggest challenges was file management and deployment. I encountered problems like missing assets, incorrect file paths, and audio that wouldn’t play. However, by carefully checking folder structures, debugging my project, and deploying it on Netlify, I gained practical experience in building a fully functional animated webpage.

Overall, this project deepened my understanding of Adobe Animate and highlighted the importance of combining visual design with technical execution. Good user experience doesn’t come from visuals or functionality alone—it’s when both work seamlessly together that the design truly comes alive.