Advanced Interactive Design - Final Project

24 April 2024 - 29 July 2024 / Week 10 - Week 14
Sim Jia Min 0349784
Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Task 3: Final Project

---

INSTRUCTIONS (MIB)

Final Project: Thematic Website

Figure 1.1: Code for animate timeline with scroll

I was browsing online for some mouse scroll event code to animate the horizontal scroll motion but unfortunately, they didn't work well.

Figure 1.2: Left and right button for horizontal navigation

Solution for horizontal webpage: I made a left and right arrow button on the menu bar for easier navigation.

Figure 1.3: A sample action code of right button

The right button is for navigating to the next page, while left button is for navigating to the previous page, trigger the action with mouse click.

Figure 1.4: Actions for creating transition through different frames

Figure 1.5: Timeline keyframes

For animation, I mostly apply classic tween to create motion pan effect with easy ease and fade in/out effect by applying alpha colour.

Below is a vid recording to showcase how the timeline works in adobe animate:

Figure 1.6: Adobe animate recording

FINAL SUBMISSION

Drive file (animate, html, java, images): https://drive.google.com/drive/folders/1hY-J-a-1bpRsF288bH6vB2ZSUx7gi8DB?usp=sharing (I was having some issue to upload it on Netlify, it shows "page not found")

Below is a walkthrough vid recording of the final website, it showcases the animation and navigation of the website:

Figure 1.7: Website walkthrough video

REFLECTION

For the final task, building a website with Adobe Animate, I encountered challenges with implementing mouse scroll events for horizontal scrolling. Despite browsing online for solutions, the code didn't work out quite well, and I didn't quite understand the logic of the code that I found online, it was a bit beyond the range of my abilities already. To solve this quickly, I added left and right arrow buttons on the menu bar for the transition and navigation. Although this solution makes the website feel a bit traditional and less exciting, it was the best option I could come up with at the time. Working with Adobe Animate was a learning experience, I found that the logic of Adobe Animate is quite like After Effects. I discovered its potential for creating interactive elements and animations, even though some aspects were challenging.