Advanced Interactive Design - Task 2
ZHOU BOYING / 0369087
Bachelor of Design (Honours) in Creative Media / Taylor's University
Advanced Interactive Design / Task 2
LIST
1. Lectures
2. Instructions
3.Task 2
4. Feedback
5. Reflections
6. Further Reading
Lectures
week 5
Part 2: Introduction to Symbol Types
In Adobe Animate, there are three main types of symbols:
- Graphic
- Button
- Movie Clip
This lesson focuses on Graphic Symbol, which is mainly used for static or simple animations.
Why Convert an Object to a Symbol?
Converting an object into a symbol allows users to:
Reuse the same object multiple times;
Add actions or code references through an Instance Name;
Build animations inside animations by using nested timelines.
Features of Graphic Symbol
A Graphic Symbol can contain animation, but it plays according to the main timeline.
There are three playback options:
- Loop
- Play Once
- Single Frame
it creates the effect of animation within animation.
For example, if a Santa character runs within the internal timeline of a Graphic Symbol,
Demonstration – Creating and Editing a Graphic
Steps demonstrated by the lecturer:
Open the Assets Panel.
Drag an object (e.g., Santa, Wolf, or Zombie Walk) onto the stage.
Each object automatically creates a new layer.
Double-click the Graphic to enter Isolation Mode for editing.
Use the Classic Tween to create motion along the timeline.
Control how each Graphic plays using Loop, Play Once, or Single Frame.
Hierarchical Animation Structure
The structure of nested animation can be described as:
Scene → Graphic → Group → Object → Frames
Each level can contain its own animation, allowing multiple layers of motion and control.
Practical Exercise – Spider Animation
Mr. Hamimi demonstrated a simple spider animation exercise to help students understand object drawing and symbol logic.
Steps:
Enable Object Drawing Mode.
Draw the spider’s body and eight legs (two segments per leg).
Use Alt/Option + Drag to duplicate legs.
Adjust leg directions with Free Transform Tool.
Mirror the other side with Modify → Transform → Flip Horizontal.
Select all elements → Convert to Symbol → name it Spider.
Apply Classic Tween to make it move on the stage.
In Week 5, Mr. Hamimi taught us how to create and control Graphic Symbols in Adobe Animate.During the lesson, we learned to use Object Drawing Mode and Classic Tween to build simple animations. The main exercise was to draw a spider and animate its leg movements. Later, we extended the task by making the spider walk across the stage, combining several layers of motion to form a complete animation.This session helped me understand the structure of nested animations (animation inside animation) and the importance of organizing symbols clearly within the timeline. It also improved my practical skills and confidence in using Adobe Animate.
week 6
In this week’s class, Mr. Hamimi guided us through the process of setting up an HTML5 Canvas project in Adobe Animate and creating a series of simple yet effective animations — including a countdown, a “Welcome → Enter” intro page, and an animated line frame.
The main learning goals were:
- Understanding project setup and publishing for HTML5 Canvas
- Practicing text animation with ease and masking
- Building composition timing and element coordination
Part 1 — Countdown Animation (10 → 0)
This exercise used one single layer to create a 10-second countdown. Each number lasted exactly 1 second (≈ 30 frames). Using consistent keyframe spacing helped me control rhythm and avoid unnecessary complexity.
Part 2 — Intro Page with Text Masking & Line Frame Animation
This section records the step-by-step process used to create the masking effect in the “Welcome → Enter” intro animation.
Change or remove the background color to make the composition cleaner and easier to view.
Create a new text element, then apply a classic tween to adjust its movement path.
Move it to the target position, then move it back to the start and add a mask layer.
Create another text element, letting it move upward after the first text moves out.
Draw a rectangle frame, convert it into a filled shape, and set it as the mask for the text.
Use the shape tool to adjust the mask area, and repeat the same operation for the lower lines to produce consistent masking effects.
This process deepened my understanding of how masking and motion layers interact in animation.It also helped me manage multiple layers and time sequences more efficiently when building interactive compositions.
week 7
In Week 8, we extended our previous animation exercise by adding interactive functions through Action Layers and Button Controls in Adobe Animate.
Building on last week’s motion tween practice, I learned how to create a “welcome” entry animation and convert the text object into a button symbol that responds to user interaction.
The lesson focused on creating a structured timeline and using keyframes, blank frames, and action scripts to control animation flow. I understood the importance of the Stop() action for interactive control — it prevents the animation from looping automatically and allows users to trigger the next scene or page via a click event. We also explored how to adjust the hit area of a button to improve usability and create micro-interactions such as hover color changes and fade effects.
By combining visual design with code-assisted interaction, I gained a better understanding of how motion and usability work together in interactive web design. This knowledge will help me design more dynamic intro pages for my own website prototype.
Instructions
Task 2
In Task 2, we are required to develop the visual and interactive design plan based on the proposal we created in Task 1.
After receiving approval and feedback from Mr. Hamimi, I officially continued developing my Task 1 proposal — an interactive educational website about Musang King Durian, focusing on its history, origins, and cultural identity.
At this stage, my goal is to transform the conceptual proposal into a visual prototype that demonstrates both layout composition and animation interaction. The plan includes detailed Figma layouts for the intro page, historical timeline, information cards, and customer feedback section. Each section is supported by animation references or motion examples to show how transitions, hover effects, and user interactions will work.
Through this process, I focus on maintaining visual consistency, intuitive navigation, and engaging storytelling. The overall design tone follows the Musang King brand’s character — natural, warm, and culturally rich — creating a website that is both educational and visually appealing.
First, I designed all my website pages in Adobe Illustrator to visualize the overall layout and hierarchy before moving into Figma prototyping. The design includes six main artboards, representing each key section of the Musang King interactive website:
Intro Page – featuring a bold “PEEL IN / BITE INTO GOODNESS” title with large durian imagery to capture attention.
The Origin – introducing the background and early growth of the Musang King cultivar.
Timeline Page – presenting major milestones such as discovery, registration (D197), genome sequencing, and export growth.
Map Section – showing cultivation areas across different Malaysian states with animated map transitions.
Nutritional Value Cards – interactive cards explaining health benefits and flavor characteristics.
Customer Voices Section – a horizontal slider displaying real user reviews to enhance engagement.
Each page was carefully aligned using a grid-based structure to ensure consistency and balance. I used bright yellow and deep green tones to reflect the freshness and natural character of Musang King durians. This layout planning process helped me organize the flow of information and prepare for the next stage of interactive animation design.
Home Page — Visual & Animation Design
For my Musang King website, I designed the Home Page as one long, connected animation that tells a short story about the brand. When the page first loads, the durian slides up from the bottom of the screen, and the title “PEEL IN” slowly fades and grows bigger. I wanted it to feel like the durian is being opened in front of the viewer — simple but lively. The bright yellow background makes everything look fresh and energetic, just like the real fruit.
After that, when users click the “Explore More” button, the scene changes smoothly to the second part. The new title “BITE INTO GOODNESS” appears, and the durian drops from the top with a little bounce before settling in the center. Around it, five short text boxes fade in one by one to describe the durian’s values — Taste Like Royalty, Grown with Care, Culture Inside, 100% Authentic, and Nature Only. I tried to keep the animation fun and easy to follow, like a small surprise after each movement.
I built all the motions in Figma Prototype using Smart Animate and Ease Out Back transitions. Each effect lasts about 0.6–1.2 seconds, so the page doesn’t feel too fast or too slow. The whole animation — from the slide-up to the drop — is meant to show the feeling of peeling and tasting a durian. It’s simple, but it makes the homepage feel more alive and playful, which really matches the Musang King brand personality.
About Page — Musang King Story Section
For the About Page, I designed an interactive storytelling section called “The Journey of Musang King.” It tells how the durian grew from a local fruit to Malaysia’s national pride. Instead of using auto slides, I made it click-based, where users can explore each story card by pressing the “Next Chapter” button. Each chapter focuses on one part of the story — The Origin, Growth & Culture, and The King’s Reputation.
When users first open the page, the durian image appears on the left and the title “The Journey of Musang King” fades in smoothly. After clicking “Next Chapter,” the next story card appears with a soft transition. The durian image also moves slightly to keep the motion connected, creating a simple and clean storytelling flow.
History Page — Interactive Origin Map
For the History Page, I designed an interactive origin map to show where Malaysia’s Musang King durians are mainly grown. This section builds on my Task 1 idea but adds interactivity to make it more engaging. I marked the key regions — Pahang, Johor, Penang, Sabah, and Sarawak — using red dots on the map.
When users click on a region, a short information card pops up with a short description about that area’s durian production. For example, Pahang is introduced as the birthplace of Musang King, while Johor and Penang highlight their farming culture and export growth. The layout is simple and clear, focusing on helping users explore the durian’s geographic story in an easy way.
History Page — Interactive Timeline
This part of my website continues the history section with an interactive timeline. Instead of scrolling, users can click on each year on the right side to reveal the story of that period. Each event highlights an important moment in Musang King’s journey — from its discovery to export success and sustainable future.
When a user clicks a year, the related story card appears smoothly with an image and short text. I designed each card to look clean and consistent, so users can easily follow the timeline step by step. The durian photo beside each story helps balance the layout and adds a warm, realistic touch to the history.
Nutrition Page — Interactive Value Cards
The Nutrition Page introduces the health benefits of Musang King durian in a more playful and visual way. I designed this section using interactive flip cards, where each card presents one nutritional highlight. At first, all cards show the durian pattern background. When users click on a card, it flips to reveal the text inside — creating a fun and engaging way to explore information.
There are three main cards in total. Card 1 talks about essential nutrients like vitamins C and B6 for energy and body health. Card 2 focuses on natural sugar as a quick energy source, and Card 3 highlights antioxidants that reduce stress and promote wellness. The bright yellow palette matches the fruit’s color and keeps the mood light and friendly.
Feedback Page — Customer Voices
The Feedback Page closes the website with a section called “Customer Voices.” It collects short comments from real or simulated customers who love Musang King durian. Each feedback card shows a short quote, the customer’s name, and a short label such as Rich aroma or Creamy texture. The idea is to let users see how people describe the taste and feeling of this famous fruit.
When users click the arrow buttons on either side, the cards slide horizontally to reveal more feedback. Each card appears with a soft transition to keep the motion smooth and easy to follow. I wanted this interaction to feel like flipping through a small review board — simple, friendly, and positive.
The animation prototype was built in Figma, using a click-to-slide transition between frames. Even though it’s only a prototype, it clearly demonstrates how the final version would display real customer stories in a light and engaging way, wrapping up the website with an authentic human touch.
Final Reflection & Figma Link
This interactive website planning project helped me understand how to design not only layouts but also meaningful user interactions. From static visuals to animated transitions, each page was designed to tell a part of Musang King’s story — from its history and origin to its cultural and nutritional values.
Through this process, I learned to use Figma Prototype more effectively — especially features like Smart Animate, frame linking, and interactive triggers. Although the animations are still at prototype level, they clearly demonstrate the flow and rhythm of user experience that I want to achieve in the final version.
Overall, this task deepened my understanding of interactive storytelling in web design. I realized how small motions and transitions can make information more engaging and emotional. The experience also trained my planning skills — thinking about each interaction step before building the actual website.
Presentation PPT
Presentation Video
Feedback
Week 5
Specific Feedback:
Mr. Hamimi introduced Graphic Symbols in Adobe Animate and explained how they are used to build simple motion sequences within the main timeline. He demonstrated how to convert drawn objects into symbols and how to apply Classic Tween to create movement. During the spider animation exercise, he reminded us to organize layers clearly, use Object Drawing Mode, and duplicate elements efficiently to save time.
General Feedback:
This week’s lesson helped me understand the logic of nested animation structures—animation within animation. Creating the spider and making it walk across the stage gave me hands-on experience in coordinating multiple layers. I also became more confident in using Adobe Animate tools and realized the importance of timeline planning when building complex movements.
Week 6
Specific Feedback:
In Week 6, Mr. Hamimi guided us to set up an HTML5 Canvas project and practice basic animation techniques such as countdown, text masking, and line-frame animation. He reminded us to maintain consistent frame spacing for smoother timing and to use masking layers to create clean visual transitions.
General Feedback:
This class deepened my understanding of composition timing and layer coordination. Through the countdown and “Welcome → Enter” intro animation, I learned to manage multiple elements precisely on the timeline. The exercise also improved my awareness of visual rhythm—how movement speed and spacing affect the overall flow of an animation.
Week 7
Specific Feedback:
Mr. Hamimi introduced interactive animation controls using Action Layers and Button Symbols in Adobe Animate. He demonstrated how to use the stop() action to prevent looping and how to assign click and hover interactions to trigger the next scene. He also emphasized clarity in naming and structuring layers for better usability.
General Feedback:
By combining animation with user interaction, I learned how motion design connects with web usability. Creating a clickable “Welcome” animation helped me understand how visual and functional elements work together. This week’s practice strengthened my ability to plan interactive structures, which will be very useful for developing my own website prototype later.
Reflections
Experience
During this task, I improved both my design thinking and technical skills through continuous exploration and feedback. Under Mr. Hamimi’s guidance, I developed my project Durian’s Adventure: Musang King Edition from a simple idea into an interactive storytelling website. This experience helped me understand how to combine layout, animation, and usability to create a smooth and engaging user journey. By using Figma, I practiced building transitions, hover effects, and smart animations that bring the durian story to life in a modern and educational way.
Observation
Throughout this process, I observed that interactive design requires clear structure and planning before visual details. Wireframes, flow diagrams, and prototypes are important tools to organize user paths and page connections. I also realized that motion and storytelling should support each other — animation is not just decoration, but a way to guide and engage the user. These lessons helped me build a more consistent rhythm between interaction, story, and design.
Findings
From this project, I learned that good interaction design is about balance — between creativity and clarity. Each motion, transition, and layout choice should have a purpose. I discovered that usability principles such as consistency, feedback, and navigation clarity make storytelling stronger, not weaker. By applying these principles, I made my website more user-friendly and meaningful, while still reflecting the natural and cultural beauty of the Musang King durian.
Conclusion
Looking back, this task strengthened my confidence in designing interactive storytelling websites. I learned that design is not only about appearance but also about connection — between story, user, and culture. Through this project, I improved my skills in layout planning, animation, and user flow. Moving forward, I will continue refining Durian’s Adventure to create smoother navigation, better interaction timing, and a stronger sense of Malaysian identity.
Comments
Post a Comment