Labels

Advanced Interactive Design / Final Project

15/06/2026 - 26/07/2026 (Week 9 - Week 14)
Shema Goldie Angwen / 0372129
Advanced Interactive Design
Bachelor of Design (Hons) in Creative Media / Taylor's University
Final Project

LECTURES

Please refer to Exercises Compilation Post for lecture notes.

TASKS

I have created all my assets since my previous Information Design modules task is creating agnolotti recipes infographic, recipe from Pasta Grannies. I asked Mr. Shamsul whether I need to make new assets in Adobe Animate. Since this project focuses on animation, I don’t want too spend my focus on recreating assets, I want to focus learning on the animation. Mr. Shamsul immediately agreed that there’s no need to redo them in Adobe Animate, just use the previous Information Design assets. So then I agreed to proceed with the first idea. (Click Here to Refer to the Information Design Asset Creation Blog)

Figure 1.1: Adobe Illustrator File

Figure 1.2: Adobe Illustrator File


INDEX PAGE
Since web browsers no longer allow audio to autoplay when a website is first opened, I decided to create a landing page before the homepage. On this landing page, Grandpa Andrea appears with a speech bubble that says, "Click here to begin." Once the user clicks it, the background music starts playing and they are redirected to the homepage.

I created two homepage files. The first is connected to the landing page, so users who first enter the website will see Grandpa Andrea and click "Click here to begin" before proceeding to the homepage and the backsound music will play. The second is a standalone homepage file that allows users to return to the homepage directly through the navigation menu without having to go through the landing page and Grandpa Andrea again.

In Frame 1, I added actions for the background music and the click sound effect.

Figure 2.1: Adobe Animate 'Index' Page

Figure 2.2: Adobe Animate 'Index' Page

In Frame 5, where all the nav menu and text start appearing, I added JavaScript code to handle the website's navigation and audio controls.

For the navigation buttons (Home, About, Ingredients, Tools, and Steps), I created a navigatePage() function. Whenever a button is clicked, the click sound effect is played first, followed by a short 300 ms delay before the website navigates to the selected page. This ensures the click sound is heard before the page changes.

I also implemented a sound toggle feature. The code checks whether the background music is currently muted and updates the sound button icon accordingly. When the sound button is clicked, it plays the click sound effect, switches the mute state on or off, and changes the button icon to reflect the current audio status.
Figure 2.3: Adobe Animate 'Index' Page

Figure 2.4: Adobe Animate 'Index' Page

In Frame 19, I added the following action code because the 'Discover the Tradition' button only appears from this frame onward. The button must be initialized after it exists on the timeline; otherwise, the click event will not work.

Figure 2.5: Adobe Animate 'Index' Page

In the last frame, I added the this.stop(); action to prevent the animation from looping, and I apply this same thing on all of my fla file. 
Figure 2.6: Adobe Animate 'Index' Page

HOME PAGE
Similar to the previous page, I added the navigation system and audio controls. The navigation buttons are connected to their respective pages with a click sound effect. Initially, the click sound did not play because the page transitioned too quickly. To fix this, I added a short delay before navigating to the next page, allowing the click sound to finish playing first. So there is short delay before changing pages to ensure the sound plays properly. 

Figure 3.1: Adobe Animate 'Home' Page


ABOUT PAGE
For the About page, the concept of the code is similar to the previous page. For the animation, I created a continuous camera strip animation effect. I organized the elements into a nested timeline, then added keyframes at the beginning and end of the animation, then added classic tween.
Figure 4.1: Adobe Animate 'About' Page

For this page there was a change from the previous layout. The first screenshot below is the original layout, but after receiving feedback from Mr. Shamsul in Week 13, I revised the design and updated it to the second version as the final layout.

Figure 4.2: Adobe Animate 'About' Page

INGREDIENTS PAGE
For this page, the concept of the code is similar to the previous page. For the animation, I wanted to create an interactive experience rather than just displaying a boring, static list. 

I designed a custom slider where the active ingredient takes center stage (scaled up), while the upcoming ingredients sit to the side. Users can browse through the 12 items using custom "Next" and "Previous" arrow buttons.

Instead of instantly snapping between ingredients, I utilized Classic Tweens. Whenever a user clicks next, the current ingredient smoothly shrinks and slides away to the bottom, while the next one glides into the center focus.

For the text, I set up individual text layers that perfectly sync with the slider's movement. As a new ingredient reaches the center, its specific description (e.g., "1.5 kg Pork Loin & Stewing Beef" or "Olive Oil") gradually appears by adjusting the opacity.

To make the user experience flawless, I implement custom JavaScript. While the "Next" button plays the timeline forward normally, the "Previous" button is programmed to smoothly play the animation in reverse, frame-by-frame, until it reaches the previous ingredient station.

Behind the scenes, the entire animation is placed inside a single main Movie Clip (mc_slider). I organized the timeline with separate layers for ActionScripts, Frame Labels (pos_1 to pos_12), dynamic texts, and individual image layers to ensure the animations run smoothly without interfering with each other.


Figure 5.1: Adobe Animate 'Ingredients' Page

TOOLS PAGE
For this page, the concept of the code is similar to the previous page. For the animations of "Tools" page, I wanted users to actually interact with the tools they would need for the recipe. Instead of a basic gallery, I built a clickable grid on the left and a dynamic display screen on the right using Adobe Animate.

Here is a quick look at how I put it together:
I turned all the little tool icons into like "smart buttons." When you click one, it lights up and gets a highlight border to show it is selected, while all the other buttons automatically reset to their normal state.

On the right side, there is a big circle where the animation happens. I set up a timeline so that every single tool has its own animation. When a tool is selected, the tools that you clicked glides smoothly from the outside right into the center of the circle.

Then I wrote a clean JavaScript code to link the left side and the right side. When you click the "Knife" button, the code tells the display area (the right side) to play the slide-in animation for the knife.

In the timeline screenshot provided below, every tool's slide-in animation is placed in a layer which I add labels like show_board and show_knife, each finishing with a "stop" command so the tool stays on screen until you pick a new one.

Figure 6.1: Adobe Animate 'Tools' Page
STEPS PAGE
For this page, the concept of the code is similar to the previous page. For the animation of final steps page, I needed a way to guide the user without creating overwhelming layout with too much text. So, I build a 13-step carousel cooking guide. I can say this was the hardest page to create, I spent most of my time working on it. At first, I thought creating a carousel animation would be simple, but it turned out to be much more complicated than expected.

If you look at my timeline on the screenshot below that looks like a giant staircase, that is because I gave each of the 13 steps its own group of layers (like the text, the main visual in the middle, and the step indicators). With so many moving parts across 13 different stages, keeping the layers named and organized (like STEP1, MIDDLE1, STEP2, etc.) was crucial to making sure everything is working an easier to make adjustments.

I used Classic Tweens to create smooth animations between every single step. To make sure the animation doesn't just play all the way to the end like a movie, I placed (this.stop();) code at the end of every step.

Figure 7.1: Adobe Animate 'Steps' Page

I encountered many issues while working on this page, such as image overlays like the picture shown below, and misaligned elements. There were times when the images looked correctly positioned with the buttons in Adobe Animate, but after previewing the project, the images shifted and no longer aligned properly.

This page had the most problems compared to the others, but I gradually fixed each issue one by one. Thankfully, I was able to resolve all of them successfully.

Figure 7.2: Adobe Animate 'Steps' Page

In Week 13, I received feedback to add step descriptions directly onto the images on the Step page. However, after adding the text, I noticed that some images had elements overlapping with the text, which made the overall layout look messy and unorganized.

Honestly, I was already considering leaving it as it was because I was really tired after spending so much time working on this page. However, I reminded myself that I had already put so much effort into the project and come this far. I personally do not like leaving things that feel incomplete or not quite right, so I decided to continue improving it until I was satisfied with the result.
I went back to Adobe Illustrator and adjusted the positions of certain elements and images to create better spacing for the text. After making these changes, I updated on Adobe Animate. Initially, I tried to use the Swap Symbol function to replace the images, but it did not work don't know why. To avoid wasting more time to figuring on why doesn't work. Therefore, I decided to create again the timeline manually.

The image on the left shows the version before applying the feedback from Mr. Shamsul, while the image on the right is the updated version after making the changes and replacing the images. 

 
Figure 7.3: Steps Page


 
Figure 7.4: Steps Page


 
Figure 7.5: Steps Page

PRELOADER

I actually have created a preloader, but it failed to load properly and did not appear when the project was played. After receiving feedback from Mr. Shamsul, he suggested me to change it back to the default loading screen instead. So here below I wanna showed the preloader I have created. 


Figure 8.1: Adobe Animate 'Preloader'


Figure 8.2: Preloader (GIF)

FEEDBACK

WEEK 12
I showed Mr. Shamsul about the -page I finished working, the about page only. He said all is good, only timing. The grandpa shud appear once every agnolotti is on the plate, also add stop. bikin agnolottinya lebih lambat. he loves the layout is clean and clear

WEEK 13
Mr. Shamsul suggested to change a bit on the layout of About page, add step descriptions on step page, and reduced the volume of background music. He mentioned he like my layout, really clean.

REFLECTION

Throughout this project, I learned a lot about the process of creating an interactive website, especially in terms of animation, coding, and problem-solving. At the beginning, I underestimated the complexity of certain elements, especially the carousel animation. I thought it would be a simple task, but it became the most challenging part of the project and required the most time and effort. I had to carefully organize the timeline, layers, and animations to make sure everything worked smoothly without conflicting with each other.

One of the biggest challenges I faced was troubleshooting technical issues. I encountered problems such as images shifting during preview, image overlays, button alignment issues, sound effects not playing properly, and difficulties implementing the preloader. There were many moments where the result did not match my expectations, but I learned to solve each problem step by step instead of giving up. I also used AI as a learning tool whenever I encountered technical issues or was unsure how certain features in Adobe Animate worked. AI was helpful in explaining coding concepts, suggesting possible solutions, and helping me better understand the workflow of Adobe Animate. However, not every suggestion worked for my project. Since AI could not directly access my Adobe Animate file or understand the complete structure of my project, some solutions needed to be tested and verified manually. I often had to experiment with the suggestions, troubleshoot further, and refine them until they worked correctly. Despite these limitations, using AI gave me a better understanding of how Adobe Animate, ActionScript, and interactive elements function together. Rather than simply providing answers, it helped me learn the reasoning behind different approaches.

I also learned the importance of paying attention to small details in design. I personally dislike when a design looks unorganized or unfinished, so I continued refining my work even when I was already tired. There were moments when I considered leaving certain issues unresolved, but I reminded myself of the amount of effort I had already invested into the project. This motivated me to continue improving the details until I was satisfied with the final outcome.

Overall, this project taught me that creating an interactive website requires both technical skills, but moreover, requires patience. I gained more confidence in using Adobe Animate, implementing code, and solving unexpected problems. Although the process was challenging and time-consuming, I am proud of the progress I made and the effort I put into improving the project until the final result. I can say I am satisfied with my work.

Labels:

Comments

Post a Comment

Popular Posts