Advanced Interactive Design - Final Project
80/01/2025 - 13/11/2025 (Week 8 - Week 14 )
WANGJIHENG / 0378904
Bachelor of Design (Honours) in Creative Media / Taylor's University
Advanced Interactive Design / Final Project
In the final phase of the semester, Mr. Hamimi taught us how to turn our static assets into interactive elements.
Interactive Navigation: We learned how to use Button Symbols and ActionScript/JavaScript code snippets (e.g., this.gotoAndPlay) to create clickable navigation menus that jump to specific frames.
Audio Integration: A key part of the lectures was learning how to import audio files into the library and control their playback using code. This allows for background music or sound effects triggered by user actions.
Publishing: We also learned how to publish our Animate projects as HTML5 Canvas files so they can be viewed in a web browser without plugins.
Project Overview:
This Final Project represents the culmination of the Advanced Interactive Design module. It is a comprehensive synthesis where I have integrated the conceptual research from Task 1 and the high-fidelity prototyping from Task 2 into a fully functional digital product. The primary goal of this stage was to transform the "Inside Out 2" creative concept into a seamless, interactive user experience.
Technical Implementation:
In this final phase, I focused on bridging the gap between static design and dynamic engagement. By utilizing Adobe Animate’s HTML5 Canvas engine, I developed a website consisting of a minimum of five functional pages. Each page was meticulously crafted to ensure visual consistency and intuitive navigation. Key technical milestones included:
Asset Synthesis: Converting Figma UI components into optimized interactive symbols.
Interaction Logic: Implementing JavaScript-based navigation and audio controls to create a responsive environment.
Experience Refinement: Adding micro-interactions and idle animations to enhance the thematic immersion of the Inside Out 2 universe.
Deployment & Accessibility:
The final product has been successfully deployed online via Netlify, ensuring a live, browser-based experience for the intended audience. In accordance with the submission requirements, the live link is provided below, and a full project directory has been uploaded to Google Drive as a public backup to ensure technical transparency.
1. Preparation and Workflow
The development of the "Inside Out 2" interactive website required a structured workflow to bridge the gap between visual design and technical implementation.
Asset Optimization:
I started by analyzing the high-fidelity UI assets. In Adobe Animate (HTML5 Canvas), managing file size is critical for web performance. I organized all assets into a strict folder structure within the Library to keep the workflow clean. Unlike static design, every button and character state had to be converted into Symbols to allow for interaction.
Timeline Architecture:
To manage the navigation of 5 distinct pages (Home, Music, Characters, Self-Care, Shop) within a single scene, I set up a "Label-Based" navigation system.
Labels Layer: I assigned frame labels to specific keyframes to act as anchors.
Actions Layer: I kept all JavaScript logic on a dedicated layer to prevent code conflicts.
Assets Layer: Backgrounds and UI elements were separated to allow for independent animation.
2. Advanced Animation Techniques
To meet the "Advanced Interactive Design" criteria, I moved beyond simple page transitions and implemented Movie Clip internal animations.
Idle Animations (The "Breathing" Effect):
On the Home Page, the characters are not static images. I converted them into Movie Clip symbols. Inside the symbol's timeline, I used Classic Tweens combined with Ease-In-Out easing curves to create a subtle floating motion. This "Idle Animation" makes the interface feel alive and immersive.
Interactive Feedback (Vinyl Entry Animation):
For the "Music Page," I designed a dynamic entrance animation where the vinyl record slides out of its sleeve upon loading.
Technique: I utilized Classic Tweens to animate the position properties (X-axis translation). Instead of a static image, the record smoothly glides into view.
Purpose: This "Slide-in" motion serves as a visual cue, drawing the user's attention to the player interface and inviting them to interact with the music controls.
Ambient Background Animation (Floating Bokeh Effect) To prevent the Music Page from feeling static, I designed a subtle background loop featuring floating orbs.
Visual Style: I created circular symbols and applied a Gaussian Blur Filter (Quality: High) in the Properties panel. This mimics a camera's "bokeh" effect, adding depth to the 2D interface.
Motion Logic: I used slow-moving Classic Tweens to animate these orbs drifting across the screen. The movement is kept gentle and non-intrusive to ensure it adds atmosphere without distracting the user from the main player controls.
Dynamic Character Reveal (Sequential Pop-up) For the "Characters" selection screen, I implemented a staggered entrance animation. Instead of appearing simultaneously, the five emotion icons pop up one by one.
Technique: I applied Classic Tweens to the Scale property (transforming the symbols from 0% to 100%). By offsetting the starting keyframes for each character layer on the timeline, I created a sequential flow.
Visual Polish: I added an Elastic Ease-Out curve to the tweens. This gives the icons a bouncy, energetic feel as they appear, matching the playful personality of the Inside Out characters.
 |
| Fig 2-5. Staggered pop-up animation created by offsetting keyframes on the timeline. |
Character Detail Interaction (Unified Pop-up System) For the character profile section, I implemented a consistent Pop-up Overlay system for all five emotions. Instead of navigating away to a new page, the detailed profile cards dynamically appear over the current scene.
Technical Implementation: I utilized Classic Tweens to control the Scale properties (X/Y). As demonstrated in the workflow (see Fig below), the content cards expand from the center (0% to 100%) when triggered.
UX Consideration: This "Modal Window" approach keeps the user focused. By using a unified animation logic across all characters, I ensured a consistent and intuitive user experience throughout the application.
 |
Fig 3-1. The unified "Scale-up" interaction logic applied to all character profile cards (Demonstrated here with Anxiety). |
3. Coding and Interaction Logic (JavaScript / CreateJS)
The core functionality of the website relies on JavaScript snippets written in the Actions Panel. I avoided using timeline navigation alone and instead implemented code-based control for better stability.
Global Control:
I placed a this.stop(); command at the beginning of the timeline to prevent the project from auto-playing like a movie. This forces the website to wait for user interaction.
Navigation Logic:
I used Event Listeners to handle mouse clicks. The code listens for a "click" event on the specific button instance and triggers a function to jump to the corresponding Frame Label (e.g., this.gotoAndPlay("Music")).
Audio Management System:
Handling audio in HTML5 Canvas requires precise state management. As seen in the code structure, I ensured that sound instances are registered and controlled via code to allow users to play specific character theme songs.
 |
Fig 3-2 JavaScript logic in the Actions Panel controlling navigation and playback. |
4. Deployment and Web Optimization
The final stage involved publishing the project as an HTML5 Canvas package.
Code Integration:
As shown in the final output file (index.html), the project uses the CreateJS library to render animations on the Canvas element. The initialization script (init()) handles the preloading of assets to ensure the website loads smoothly on web browsers.
Final Verification:
The project was successfully deployed to Netlify. I conducted cross-browser testing to ensure that the audio features and animations perform consistently across different devices.
5. Final Outcome
Project Name: Inside Out 2 - Interactive Experience
Platform: Web (HTML5 Canvas)
The final website consists of 5 fully functional pages:
Home: Featuring idle animations for characters.
Music: Integrating the "Emotion Soundtrack" feature with vinyl animation.
Characters: Detailed profile cards.
Self Care: Interactive check-in feature.
Shop: Merchandise slider.
Week 9
Specific Feedback: Mr. Hamimi guided us through the HTML5 Canvas structure, emphasizing the use of Frame Labels and this.stop(); to prevent the movie from auto-playing. He also reminded us that in an interactive project, a clean Actions layer is essential for debugging.
General Feedback: I learned how to transition from linear animation to interactive navigation. By applying frame-based control, I successfully structured my "Home" and "Music" pages. This week helped me understand the logic of "Event Listeners" and how they bridge the gap between user clicks and timeline movement.
Week 10
Specific Feedback: Mr. Hamimi introduced advanced animation concepts and suggested exploring more fluid transitions. We discussed how to use Classic Tweens combined with filters like Gaussian Blur to create a sense of depth, which I later applied to my "Bubble" background animation.
General Feedback: This week shifted my focus from simple movement to Visual Polish. I learned that subtle details, like the "Floating Bokeh" effect, can significantly improve the atmosphere of a UI. It taught me to think about how animation can reflect the "mood" of the characters.
Week 11–12
Specific Feedback: During the final development of Final Project – Completed Thematic Interactive Website, the focus was on System Integration. Mr. Hamimi provided guidance on managing multiple assets (Audio, Spritesheets, and JS files). He particularly emphasized the importance of Deployment testing—ensuring that the index.html and its associated images folder are correctly structured for hosting on platforms like Netlify.
General Feedback: Completing Final Project – Completed Thematic Interactive Website was a rewarding challenge. I integrated the Character Pop-up system and the Emotion Sound Player into a cohesive experience. The biggest takeaway was learning how to troubleshoot deployment errors, such as the 404 Page Not Found error, by fixing file naming conventions. I now feel confident in my ability to deploy a functional, code-driven interactive website from scratch.
Project Title: Completed Thematic Interactive Website – Inside Out 2 Experience
1. Achievement of Objectives:
I have successfully developed a fully functional, 5-page thematic interactive website based on the movie Inside Out 2. By integrating design principles from Figma with technical execution in Adobe Animate, I created a seamless user experience that allows visitors to explore different "Emotions" through interactive character cards and a dedicated music player.
2. Key Technical Learnings:
Interaction Logic: I moved beyond simple timeline playback by implementing JavaScript control (this.stop();) and event listeners. This ensured the website only progressed based on user input, creating a true "interactive" feel rather than a movie.
Visual Consistency: To maintain the "thematic" aspect, I used Gaussian Blur filters and staggered animations to match the airy, bubbly aesthetic of the film’s "Headquarters" environment.
Responsive Deployment: Learning to deploy the site on Netlify was a major milestone. I overcame initial "404 Page Not Found" errors by learning the strict file-naming conventions required for web hosting (e.g., changing the main file to index.html).
3. Challenges & Solutions:
The biggest challenge was ensuring the website scaled correctly across different screen sizes. Initially, the layout appeared cropped on larger monitors. By adjusting the Publish Settings to "Make Responsive" and "Scale to Fill," I ensured the thematic experience remained immersive regardless of the user's browser dimensions.
4. Conclusion:
Task 3 has been the culmination of all the skills I've gathered this semester. It taught me that building a "Completed Thematic Interactive Website" requires a balance of creative storytelling and rigorous technical troubleshooting. I am proud to have a live, functional URL that showcases my work to a global audience.
恒哥nb
ReplyDelete