Advanced Interactive Design: Final Project
Completed Thematic Interactive Website
Lectures
Final Project: Completed Thematic Interactive
Website
- Upload the website to a web server
- Record a video walkthrough
- Online posts in your E-portfolio as your reflective studies
- Make sure to embed or provide a link to the website and video from the blog post
-
Landing Page
In the landing page, I have 3 main elements (Animal Crossing Sign, Background, Start)
I first did the animal crossing sign on Adobe Illustrator, and learnt to replicate the original sign from the game. I then imported this photo into Adobe Animate and used Classic Tween to begin animating the enter transition.
Figure 3.4 Animal Crossing Sign in AI
Figure 3.5 Animal Crossing Adobe Animate
I used the same method of Classic Tween to animate the background to move from the left to the right very slowly.
Figure 3.6 Landing Page Background in Adobe Animate
Finally, I added a button which is Press to Start, this allows users to hover and click onto it and be navigated to the next screen, Home Page. The hover effect is a line at the bottom, this is inspired by the original game itself.
Figure 3.7 Press to Start in Adobe Animate
Attached below are the final layers for Landing Page.
Figure 3.8 Landing Page Layers in Adobe Animate
-
Home Page
In the second page, which is the Home Page. My original idea is to have a globe in the center and a progress bar around the bottom of the speech bubble that is in the middle. However after some feedback, I decided to make good use of the empty space on the left, and included the Progress Bar there.
I first included the plain background which is static, and went ahead and added the waves that uses Classic Tween to animate actual waves that moves from the right to the left.
Figure 3.9 Waves in Adobe Animate
After that, I added the static globe image and made sure the rest of the imported images are turned into symbol, as Movie Clip.
Figure 3.10 Globe Static Image
To animate the pop in effect of the characters, I used classic tween and use lesser frames to make the character animate from small to big in a short time.
Figure 3.11 Character in Adobe Animate
I also made sure to turn the speech bubble into a button and added a hover option which makes the speech bubble slightly expanded.
Figure 3.12 Speech Bubble Button in Adobe Animate
For the progress bar to work, I used Classic Tween and animate the bar to slightly expand longer to the next "Season Icon" to indicate the page is loading to the next season soon. This is timed perfectly for each season, making each season information pop in on the Home Page in equal screen time.
Figure 3.13 Progress Bar
I repeated these steps repetitively for the next 3 seasons, Summer + Fall + Winter.
Attached below are the final layers for Home Page.
Figure 3.14 Home Page Layers in Adobe Animate
-
Seasons Information Page
In the final and most important page that includes all the information for each season, I spend the most time on figuring out how I want the buttons to work, so each part took awhile, and after figuring out everything for 1 season, I repeated the process for all 4 seasons in total.
I first used Classic Tween to animate the background of the seasons to move in from the right to the left.
Figure 3.15 Seasons Background
After that, I started figuring out how I want the seasons navigation bar to work. As I tried using different layers for each season, I found out that I cannot keep the "Current Page' Icon: Spring" with the text as after hovering onto the other icons, the text for Spring will overlap with the Summer text. So, I end up removing the text and changed the icon to a seperate colour so that the indicator is still there.
Figure 3.16 Seasons Navigation Bar
Figure 3.17 Spring to Summer Button
Figure 3.18 Spring to Fall Button
Figure 3.19 Spring to Winter Button
Next, I had to do the buttons and phone interface, NookPhone. So I first added a static NookPhone Image in a new layer. Then, I exported each phone app icon into different layers, and turned each of them into seperate buttons which its own hover, and down effect too.
Figure 3.20 Hover Effect
Figure 3.21 Down Effect
Figure 3.22 Hit Area
After all the buttons are completed, I started adding the layers for the information for hemisphere, weather, and seperate pages for the critters (Bugs, Sea, Fish)
Figure 3.23 Hemisphere Layer
Figure 3.24 Weather Layer
Figure 3.25 Critters: Bugs Page
Figure 3.26 Critters: Fish Page
Figure 3.27 Critters: Sea Page
I also added a back button layer that allows users to press back from any 3 of the critter pages.
Figure 3.28 Back Button in Critters Pages
To make sure all the buttons work, I added instance names to all buttons and made use of Labels and Actions layer to bring it all together.
Figure 3.29 Labels & Actions Layer
Figure 3.30 Actions Panel
I repeated these steps repetitively for the next 3 seasons, Summer + Fall + Winter.
Attached below are the final layers for Seasons Information Page.
Figure 3.31
To make each season organised, I made sure to add the dedicated season layers into seperate folders that can be toggled to view when needed.
Figure 3.33 HTMLFile Folder
Learning to use Adobe Animate was initially quite confusing, especially as it was my first time working with the software. However, through Mr. Shamsul’s weekly tutorials, I was able to gradually grasp the tools and techniques needed to complete this assignment. His guidance was incredibly helpful, and whenever I found myself stuck or unsure, I turned to YouTube tutorials to refresh my memory or learn new approaches. This combination of structured lessons and self-directed learning really helped me improve my skills over time.
For the concept of my interactive website, I drew inspiration from the game Animal Crossing, particularly its seasonal themes and user-friendly design. I conducted a lot of research on the game’s UI and UX—watching gameplay, reading articles, and even playing the game myself. This helped me understand how to create an engaging and intuitive experience, which I then applied to my own project titled Seasons in Animal Crossing.
The whole process was quite lengthy and at times challenging, but seeing my work evolve and come together was incredibly rewarding. I’m genuinely proud of the final outcome, and it’s exciting to see how much I’ve grown throughout this project.
Overall, I had a lot of fun working on this module. I’ve learned a lot—not just about Adobe Animate, but also about design thinking and user experience. I’m grateful for Mr. Shamsul’s continued support and guidance, which played a big part in helping me complete this project successfully.