Advanced Interactive Design / Final Project – Completed Thematic Interactive Website

 Final Project – Completed Thematic Interactive Website

• 40% individual 
• Week 09 – Week 14 

1. ASSIGNMENT BRIEF

• For this final assignment, we are required to combine the knowledge and skills developed from Tasks 1 and 2 to produce a fully functional website prototype. The project must include at least 5 working pages and feature integrated and refined visual assets to deliver a complete user experience.

2. PROCESS

2.1 Button & Asset Preparation

To begin the assignment, I prepared all the pages in Adobe Animate. I started with the button designs, creating both hover and pressed states. I also made sure the clickable area covered the entire button shape, not just the text itself — this ensures the user can easily interact with the whole button for a smoother experience.

Button Design Process:

• Normal State: Basic button appearance.
• Hover State: Slight change to indicate interactivity.
• Pressed State: Gives feedback when clicked.

Here’s an overview of the button design process:

Figure 2.1.1 Example of the button in its normal state.

Figure 2.1.2 Example of the button when hovered.

Figure 2.1.3 Example of the button when pressed.

2.2 Home Page Animation

After completing the buttons, I started animating the home page. My initial idea was to create a slide-in effect triggered after clicking on the band logo — the page would slide inward from side with low opacity and then fade fully visible. However, during testing, this motion felt awkward, almost like a door opening.

So I adjusted it for better flow:

• Replaced the awkward slide with a smooth fade-in effect and slide up instead of slide in.
• Adjusted the layout for better balance:
• Reduced the page height.
• Repositioned the home button to align with the navigation buttons.

Figure 2.2.1 Home Page Timeline Example

2.3 About Album

For the About Album section, I added subtle fade-in and fade-out hover effects on each song cover to create interactivity and encourage exploration.

However, this effect only appears on the first page of the "About Album" section. After clicking "Enter," only one specific song cover retains the hover effect to reveal more details.

Figure 2.3.1 Create Fade in and out when hover song Image

2.4 Alignment Between Adobe Animate & Browser Preview

One of the biggest challenges I faced was alignment issues between Adobe Animate’s preview and how the website rendered in the browser after export. Some objects shifted out of place, so I had to constantly adjust between Animate and the browser to achieve precise alignment.

Figure 2.4.1 Adobe Animate Look 

Figure 2.4.2 Website Look (At browser)

2.5 Linking All Pages Together

At first, I linked pages by frame numbers within Adobe Animate. But as I refined animations, these numbers changed frequently, making navigation harder to maintain. To solve this, I switched to frame labels, which made the project much easier to manage, even as content shifted to different keyframe.

Figure 2.5.1  Example of Frame Labels (showing one page for reference)

2.6 Linking Buttons and Pages (Problem & Solution)

Problem 1: Button Not Working

While working on linking buttons and pages, I encountered several small but frustrating issues during the process.

At first, I noticed that some buttons didn’t work correctly after linking. After troubleshooting, I discovered the main cause was related to the button instance names in Adobe Animate. For example, when I duplicated navigation buttons across pages, they accidentally kept the same instance names. This caused conflicts because Adobe Animate requires each button instance to have a unique name for the actions to work properly.

• Solution:
• To fix this, I went through each button one by one and assigned a unique instance name — even for repeated navigation buttons. Once I made sure that every button had its own name, the linking started working smoothly.

Problem 2: Navigation Stopping Halfway

I also faced another issue in one of the sections. I designed a long navigation button animation across frames. However, somewhere in between those frames, I added an action that stopped the timeline halfway. Because of this, the navigation button wouldn’t work — it couldn’t reach the end of the timeline to trigger the link properly.

• Solution:
• To solve this, I moved the action code to the beginning of the timeline rather than the end. This ensured that the navigation worked smoothly throughout the entire section, without being interrupted halfway.

2.7 Final Timeline Overview

Below are my final timelines after completing all pages and animations

Figure 2.7.1  Overall Timeline View

2.8 Adding External Links

• Lastly, I embedded external links for specific buttons ( Official Purchase Store, Band Wikipedia, Social Media) to make the site feel more complete and functional.

Figure 2.8.1  Adding Links For all Necessary button to link to its official website(social Media / Shop)

3.FEEDBACK

Week 11

• Add a footer to the website for better structure and balance.
• Make the animations feel less static—he recommended using a staggered fade-in effect for elements, where each part fades in slowly one by one.

Week 13

• After hover, change the “Exit” button to a “Close” button for better clarity.
• Add a dedicated Product Details page under Merchandise.
• Complete Band Member Information for the About Band section.
• Overall : Add more page for a more complete user experience

4.FINAL OUTCOME

• Google Drive - CLICK HERE (Adobe Animate Folder)
• Final Outcome - CLICK HERE 

Pages Completed (can be clicked)

• Home Page
• About Album:
• Hover Effects on Song Covers
• Page 2: Specific Song Details (Matter +)
• Page 3: In-Depth Song Information
• About Band:
• Main Page
• Individual Member Info Pages (x4)
• Upcoming Events
• Merchandise:
• Product Details Pages (x2)

5.REFLECTION 

Through this final project, I gained a deeper understanding of interactive web design, particularly how animation and user interaction can enhance engagement. Adobe Animate posed some challenges, especially with alignment issues between the software preview and browser outputs. These challenges taught me the importance of careful testing and iteration.

I also learned the value of structuring navigation clearly through frame labels rather than frame numbers, which made the project much more manageable as it grew more complex.

Beyond technical skills, this project strengthened my problem-solving abilities and gave me a deeper appreciation for the importance of user-centered design. I now understand how thoughtful animations, clear navigation, and interactivity contribute to a more enjoyable user experience.