3.12.25 - 11.1.25 (Week 9 - Week 15)
Chin Jia Wei (0379807)
Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor University
Task 3 - Completed Thematic Interactive Website
List
1. Lectures
2. Instructions
3. Task 3
4. Reflection
LECTURES
22/9/2025 (Week 09)We were given a task to create a 5 page timeline website with smooth transitions, using persistent buttons to control navigation between multiple frames.
Although I didn’t manage to complete all the detailed content for each page yet, but I managed to complete the navigation, which was the main goal for the class.
26/5/2025 (Week 10)We learned how to use the GSAP plugin in Adobe Animate to create interactive tween animations using JavaScript. This gives us smoother and more flexible control than the standard timeline.
22/9/2025 (Week 09)
We were given a task to create a 5 page timeline website with smooth transitions, using persistent buttons to control navigation between multiple frames.
Although I didn’t manage to complete all the detailed content for each page yet, but I managed to complete the navigation, which was the main goal for the class.
26/5/2025 (Week 10)
We learned how to use the GSAP plugin in Adobe Animate to create interactive tween animations using JavaScript. This gives us smoother and more flexible control than the standard timeline.
Exercises
Exercise 1: Multi-Page Sliding Navigation
We created four different colored pages that each page can be moved left or right depending on which button the user clicks, using GSAP tweening to animate the position of each page, simulating a horizontal slider.
Exercise 2: Click to Move Image Interaction
We were tasked to create an an image with multiple clickable areas with the same concept we learned. When clicking a specific part, the image would enlarge or move around.
INSTRUCTIONS
Task 3
Prototype Refine
I refined the prototype by combining the most suitable elements from three previous sketches. I also made some changes to make it less cluttered by keeping only the nutritional facts in the ingredient page, and added a personality quiz This helped create a more and interactive layout while ensuring the design was suitable for development and matches the theme.
Overall Look and Feel
Home Page
The home page design was inspired by the classic Apollo advertisements, with a mix and match of illustration and real images. The cloud images are real photos while the cakes are illustrated.
While, I was working on it, I realize Adobe Animate does not support Z-axis rotation in HTML Canvas. Hence, I simulated the flipping effect by scaling and adjusting animation speed.
.gif)
HeaderThe interactive headers with hover and click states was inspired by Apollo packaging. The hover colour is yellow to represent the classic flavor packaging. The Apollo logo guides user back to home page.
.gif)
Personality Test Quiz Page
This was the most challenging section to me. The idea of this page is a simple game to show Apollo cake does the user represent based on their personality. The animate logic is:
ask 5 questions > based on the user click > show different result (the personality result was define by 1 of the questions)
Initially, I tried to 1st question > 2nd to 5th questions > show result(collect data) (doesn't affect result) (set active on related Apollo cake and and play result, so only 1 result animation is needed)
However, I faced technical issues that prevented proper data storage. To resolve this without dragging it more, I redesigned the quiz so that the final question determines the result directly, leading users to one of several predefined result animations.
1st to 4th questions > 5th question > show result(click on any ans to move on) (go to related frame and play)
This approach simplified the logic and improved stability, but took more times as I have to make the result animation 5 times. I really like how it turns out.
.gif)
Sound effect on result animationI added a drum roll and reveal sound effect to the result animation to build anticipation and make the reveal more engaging.
Each Apollo represents a different personality, allowing users to associate with the brand and feel more interested in trying the cake.
Ingredient PageI designed the ingredient information section using a aluminum foil texture as the background. I presented the nutritional information per serving instead of per 100 grams which is on their package and website to reduce clutter, and more relatable to most of the people who calculate their calories.
The visuals and text update with a fading animation based on the selected cake flavor.
.gif)
Recipe PageThe challenges of this page is focusing on smooth navigation using next and previous buttons.
Steps like step 1 requires 1 button while step 2 to 4 requires 2 button each page that has different functions without animation of moving in and out.
For example, buttons in step 2 guide users to step 1 and 3 while same buttons in step 3 guide users to step 2 and 4.
To manage complex step transitions, I used continuous frames with different instance names, allowing the buttons to appear consistent while changing their functionality behind the scenes.
.gif)
Fun Fact PageI researched real images such as Apollo kiosks, ads and create a fade slideshow. The flag is a movie clips with different images to create a frame by frame looping animation.
Then, I completed the transition using GSAP animations.
.gif)
Website Walkthrough
Final Submission
Recommended to use Microsoft Edge, as text may default to Times New Roman when using Chrome.
INSTRUCTIONS
Task 3
Prototype Refine
I refined the prototype by combining the most suitable elements from three previous sketches. I also made some changes to make it less cluttered by keeping only the nutritional facts in the ingredient page, and added a personality quiz This helped create a more and interactive layout while ensuring the design was suitable for development and matches the theme.
Overall Look and Feel
Home Page
The home page design was inspired by the classic Apollo advertisements, with a mix and match of illustration and real images. The cloud images are real photos while the cakes are illustrated.
While, I was working on it, I realize Adobe Animate does not support Z-axis rotation in HTML Canvas. Hence, I simulated the flipping effect by scaling and adjusting animation speed.
.gif)
Header
The interactive headers with hover and click states was inspired by Apollo packaging. The hover colour is yellow to represent the classic flavor packaging. The Apollo logo guides user back to home page.
.gif)
Personality Test Quiz Page
This was the most challenging section to me. The idea of this page is a simple game to show Apollo cake does the user represent based on their personality. The animate logic is:
ask 5 questions > based on the user click > show different result
(the personality result was define by 1 of the questions)
Initially, I tried to
1st question > 2nd to 5th questions > show result
(collect data) (doesn't affect result) (set active on related Apollo cake and and play result, so only 1 result animation is needed)
However, I faced technical issues that prevented proper data storage. To resolve this without dragging it more, I redesigned the quiz so that the final question determines the result directly, leading users to one of several predefined result animations.
1st to 4th questions > 5th question > show result
(click on any ans to move on) (go to related frame and play)
This approach simplified the logic and improved stability, but took more times as I have to make the result animation 5 times. I really like how it turns out.
.gif)
Sound effect on result animation
I added a drum roll and reveal sound effect to the result animation to build anticipation and make the reveal more engaging.
Each Apollo represents a different personality, allowing users to associate with the brand and feel more interested in trying the cake.
Ingredient Page
I designed the ingredient information section using a aluminum foil texture as the background. I presented the nutritional information per serving instead of per 100 grams which is on their package and website to reduce clutter, and more relatable to most of the people who calculate their calories.
The visuals and text update with a fading animation based on the selected cake flavor.
.gif)
Recipe Page
The challenges of this page is focusing on smooth navigation using next and previous buttons.
Steps like step 1 requires 1 button while step 2 to 4 requires 2 button each page that has different functions without animation of moving in and out.
For example, buttons in step 2 guide users to step 1 and 3 while same buttons in step 3 guide users to step 2 and 4.
To manage complex step transitions, I used continuous frames with different instance names, allowing the buttons to appear consistent while changing their functionality behind the scenes.
.gif)
Fun Fact Page
I researched real images such as Apollo kiosks, ads and create a fade slideshow. The flag is a movie clips with different images to create a frame by frame looping animation.
Then, I completed the transition using GSAP animations.
.gif)
Website Walkthrough
Final Submission
Recommended to use Microsoft Edge, as text may default to Times New Roman when using Chrome.
FEEDBACK
24/11/2025 (Week 10)General Feedback- Make sure all animations and elements are relevant to the Apollo theme
- Keep the layout simple and uncluttered
- Make sure all animations and elements are relevant to the Apollo theme
- Keep the layout simple and uncluttered
REFLECTION
ExperienceI realized that asking for help and exploring different solutions is important, especially when facing technical challenges such as the quiz logic and the 3D front rotating effect on the home page. Using AI tools helped me identify possible issues and solutions in a shorter time. However, I also learned that not every solution works as expected, and it is important to rely on personal judgment to decide when to change approaches instead of forcing a solution.
ObservationI observed that time management is extremely important in interactive projects. Although some animations appear simple, refining them to look smooth and ensuring all buttons function correctly takes a big amount of time. I also encountered an issue where the background music stopped due to an action script conflict, and after testing several solutions, I decided to remove it due to time constraints and I plan to refine it during the semester break. This experience taught me to allocate more time for testing, tweaking, and debugging in future projects.
FindingThis project gave me valuable hands-on experience with Adobe Animate. I learned how to apply the techniques taught in class, such as import Gsap and using it on a project or create page to page animation with 1 timeline. These skills helped me better understand how planning affects execution in interactive design.
Experience
I realized that asking for help and exploring different solutions is important, especially when facing technical challenges such as the quiz logic and the 3D front rotating effect on the home page. Using AI tools helped me identify possible issues and solutions in a shorter time. However, I also learned that not every solution works as expected, and it is important to rely on personal judgment to decide when to change approaches instead of forcing a solution.
Observation
I observed that time management is extremely important in interactive projects. Although some animations appear simple, refining them to look smooth and ensuring all buttons function correctly takes a big amount of time. I also encountered an issue where the background music stopped due to an action script conflict, and after testing several solutions, I decided to remove it due to time constraints and I plan to refine it during the semester break. This experience taught me to allocate more time for testing, tweaking, and debugging in future projects.
Finding
This project gave me valuable hands-on experience with Adobe Animate. I learned how to apply the techniques taught in class, such as import Gsap and using it on a project or create page to page animation with 1 timeline. These skills helped me better understand how planning affects execution in interactive design.
Comments
Post a Comment