Advanced Interactive Design - Final Assignment

on


🎓 Final Project Process Blog – Thematic Interactive Website

Coursework Weight: 40% Individual
Duration: Week 09 – Week 14
Assignment: Create a fully functional interactive website prototype with a minimum of 5 working pages, refined visuals, and engaging user experience.

🌀 1. Loading Page – Scroll Animation


To kickstart the project, I began working on the Loading Page, which features a unique middle mouse scroll effect. The concept: when the user scrolls, light cycles move toward a futuristic city in the background.

  • 🧪 After multiple test runs and adjustments, I successfully implemented the scroll-based animation.

  • 💻 I added code that detects the end of the scroll animation and automatically transitions the user to the About Us page.

To maintain better organization, I decided to separate each page into its own .fla and HTML file instead of placing them all on different timelines in one file.

🎬 2. About Us Page – Trailer Section

Next, I developed the About Us page, with a focus on promoting the Tron movie trailer:

  • 🧱 Built the header layout first so it could be reused across all pages.

  • 🎨 Added hover effects to the trailer button using alpha changes.

  • 🔗 Linked the trailer button to the official YouTube video using basic JavaScript.

🚧 Issue Faced:

Initially, I wanted to include more content vertically. However, due to a limitation in Animate where vertical scrolling wasn’t working, I could only display content within the stage height. After consulting with the lecturer, I was advised to use horizontal scrolling sections to reveal more content instead — which I later applied on other pages.

🧭 3. Explore Element Page – Swipe Navigation

This page was more challenging. I aimed to build a left-right swipe interface where users could explore different Tron elements:

  • 🌀 I animated each item to create a seamless loop effect as users click the left or right buttons.

  • 🔁 Each swipe changes the visual and maintains a smooth transition between them.

Achieving the visual continuity and the logic for looped swiping required careful synchronization of animation and code.

🎧 4. Music Page – Daft Punk Integration

This page was one of the most enjoyable parts of the project. As a fan of Daft Punk, I integrated their most iconic albums into an interactive playlist:

  • 🎵 I created 5 playlists, but implemented full functionality for 3 of them due to time constraints.

  • ✅ Functional Playlists:

    • Tron: Legacy

    • Random Access Memories

    • Discovery

  • 🖱️ Each playlist, when clicked, reveals 5 popular tracks the user can interact with.

  • 🎚️ I implemented hover effects and click-to-play functionality using CreateJS sound controls.

Sir agreed that 3 fully functional playlists would be sufficient, as the logic would be repetitive for the remaining two.

🖼️ 5. Visual & Download Page – Image Interactivity

This page presented another set of technical challenges:

  • 🖱️ Users can click on thumbnails to preview the full image, which appears centered on the screen.

  • 🔁 The bottom section features looping image clips that are also clickable.

To achieve this:

  • I converted every image into a button symbol for click detection.

  • Used a custom popup system to show the full image preview and prevent overlaps between popups.

🔊 6. Button Sound Effects – Final Touch


As a finishing detail, I added sound effects to all interactive buttons across all pages:

  • 📁 Imported a universal button click sound from the library.

  • 🔊 Registered the sound using createjs.Sound.

  • ⚙️ Used a helper function to apply the sound to every relevant button.

This made the website feel more responsive and polished.

🎛️ 7. Audio Control Logic – Back Button & Playlist Sync

While testing the music page, I noticed that tracks kept playing even after navigating back. I updated the script to ensure that any currently playing song stops immediately when users return to the main menu—improving audio management and avoiding overlap. This helped me understand event lifecycles in CreateJS and user behavior expectations.

🪟 8. Daft Punk Popup Logic


Daft Punk Spotlight – Popup Interaction
I added a special interactive feature for Daft Punk fans—a popup that appears when clicking the music background and disappears when clicking anywhere on the stage. This helped me explore conditional event listeners and stage-level interactions, allowing more immersive user experiences.


🧠 Final Reflection

Throughout this assignment, I combined animation skills, interactive scripting, sound integration, and user interface design into one cohesive project. While there were technical hurdles — especially with Animate's limitations on scrolling — I found ways to adapt and deliver a complete experience.

This project taught me not just about tools, but also how to problem-solve creatively, organize code, and think from a user experience perspective.



Netlify Website Link

Backup Project Folder


Comments

Post a Comment