ADVANCED INTERACTIVE DESIGN - FINAL PROJECT

23/05/2025-13/06/2025 (Week 05-08)

Chan Suet Yee 0358427

Bachelor of Design (Honours) in Creative Media

Advanced Interactive Design | DST60804 | Sec 02

Task 2 | Interactive Design Planning & Prototype

---

 LIST 

TABLE OF CONTENTS:

1. INSTRUCTIONS

2. EXERCISES

3. TASKS

4. REFLECTION

---

 INSTRUCTIONS 

---

 EXERCISES 

WEEK 9 - MOVE SCREENS NAVIGATION

In week 9, I learned how to create a screen navigation effect in Adobe Animate by moving a large Movie Clip that contains multiple sections of content. Each section was arranged side by side in one big canvas, and buttons were added with instance names (e.g., btnPart1, btnPart2) to navigate between them. By applying simple Tween animations to the Movie Clip’s x position, clicking a button smoothly shifted the screen to the desired section, creating an interactive scrolling experience within a single page.

Fig 1.0 Week 9 Exercise 01 Process

Fig 1.1 Week 9 Exercise 02 Process

Fig 1.2 Week 9 Exercise 02 Process

WEEK 11 - ADD SOUND

In week 11, I learned how to add sound in Adobe Animate and control it using buttons. I imported an audio file into the library, dragged it onto the stage, and converted it into a symbol for better control. Then, I assigned instance names to buttons, such as playBtn and stopBtn, and added simple code to play or stop the sound. For example, this.playBtn.addEventListener("click", ()=>{createjs.Sound.play("bgMusic");}); allows the music to play when the play button is clicked, while another button can stop it using createjs.Sound.stop(). This made it possible to add background music or sound effects interactively.

Fig 1.3 Week 5 Exercise 02 Process

---

 TASKS 

FINAL PROJECT - COMPLETED THEMATIC INTERACTIVE WEBSITE 

 Instructions 

Description
Students will synthesise the knowledge gained in tasks 1 and 2 for application in task 3. Students will create integrated visual assets and refine the prototype into a complete working and functional product experience, a minimum of 5 working pages.
Deploy the final website to Netlify or GitHub. Add the link to your blog (e-portfolio). As a backup plan, upload the project folder to Google Drive as well. Make sure that the Google Drive link is set to public. No video walk-through is required for this submission.

 Page Structures & Setup 

All the pages were placed on the Main Timeline, each assigned a frame label for navigation (home, thenVsNow, whatsInside, stores, store1–store12, photoSpots).
Each page was then converted to a Movie Clip so I could animate elements (fade-in, scrolling, etc.) inside the Movie Clip timeline without affecting the Main Timeline.

Fig 1.4 Final Project Process

Fig 1.5 Final Project Process

 Adding Frame Labels & Instance Names 

I added frame labels to the Main Timeline for navigation and gave important elements instance names (e.g., burgerBtn, menuPanel, galleryMC, rightArrow, leftArrow, etc.).
Instance names were crucial for attaching ActionScript/JavaScript events to buttons, galleries, and page transitions.

Fig 1.6 Final Project Process

Fig 1.7 Final Project Process

 Button Interactions & Page Navigation 

I used simple gotoAndStop("label") codes to switch between pages.
For example, clicking images on the Home page navigates to the Then vs Now page, and each store image in the gallery navigates to its respective store detail page.
The burger menu was made interactive by toggling the menuPanel.visible property.

Fig 1.8 Final Project Process

 Scrollable Galleries 

Horizontal galleries were implemented using arrow buttons that moved the gallery Movie Clip (galleryMC or storeMC) with Tween animations.
Scroll limits were calculated to prevent scrolling beyond the gallery bounds.

Fig 1.9 Final Project Process

 Animations 

Animations were added to make the experience visually engaging:

• Fade In & Fade Out: Adjusted the alpha property (0 → 100%) in Classic Tween keyframes to create smooth transitions when elements appeared or disappeared.

• Position Animation: Inserted keyframes at different timeline positions to move objects from one point to another (e.g., sliding images or text into the page). For example, an image starts off-screen, then moves to its final position with a tween.

• These animations were done inside the Movie Clip timelines so they wouldn’t affect other pages on the Main Timeline.

Fig 1.10 Final Project Process

Fig 1.11 Final Project Process

 Final Project - Completed Thematic Interactive Website Link 

Inside Zhongshan

---

 REFLECTION 

Experience

Working on this thematic interactive website in Adobe Animate was a challenging yet rewarding experience. At the beginning, I had to familiarize myself with structuring pages on the Main Timeline and managing multiple Movie Clips for different sections. Planning the navigation flow and setting up frame labels required careful organization, but once I understood the logic of gotoAndStop() and instance naming, the workflow became smoother. The process also improved my understanding of how coding and animation can work together to create an interactive experience.

Observation

Throughout the project, I observed how important hierarchy and proper instance naming were in ensuring buttons and galleries worked correctly. Placing the wrong code in either the Main Timeline or inside a Movie Clip often caused navigation or scrolling functions to fail. I also noticed that classic tweens and alpha animations significantly improved user experience by making page transitions feel more natural. Testing each component page by page was essential to identify and fix issues, especially with clickable elements inside nested Movie Clips.

Findings

One of the key findings was the importance of balancing design and functionality. While designing the pages in Figma helped establish a strong visual foundation, implementing those designs in Adobe Animate required optimization to ensure smooth performance. Breaking the project into smaller tasks—such as setting up navigation first, then adding animations—made it easier to manage. I also learned how frame labels, keyframes, and classic tweens can be combined to create a seamless storytelling experience, making the website both visually engaging and interactive.