Advanced Interactive Design Task 2
- September 22, 2025
September 21,2025
21/09/2025 - 31/12/2025(Week 1 - Week 14 )
ZHANG TIANYAO/0376838
Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Task 2
LIST
1. Lectures
2. Instructions
3.Task 2
4. Feedback
5. Reflections
Instructions
Lectures
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
and in the main scene you animate the Santa moving across the stage,
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 and Spider Exercise
This week, we explored hierarchical animation structures, where scenes, graphics, groups, objects, and frames can each contain their own animations, allowing layered motion and precise control. During a practical exercise, I created a spider animation, which helped me understand object drawing, symbol logic, and how to organize multiple elements efficiently. This exercise reinforced how structured animation workflows enable more complex and controlled motion designs in 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.
1. Change or remove the background color to make the composition cleaner and easier to view.2. 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.3. Create another text element, letting it move upward after the first text moves out.4. Draw a rectangle frame, convert it into a filled shape, and set it as the mask for the text.5. Use the shape tool to adjust the mask area, and repeat the same operation for the lower lines to produce consistent masking effects.
Task 2
In Task 2, I developed the visual and interactive design plan based on my Task 1 proposal. I focused on an interactive educational website about protected animals in Malaysia, highlighting their habitats, characteristics, and conservation importance.
At this stage, my goal is to translate the concept into a visual prototype showing layout and interaction. The plan includes detailed Figma layouts for the intro page, species information cards, habitat maps, and interactive sections. Each element incorporates animations or motion cues to demonstrate transitions, hover effects, and user interactions.
Throughout the process, I aimed to maintain visual consistency, intuitive navigation, and engaging storytelling. The overall design emphasizes educational value while remaining visually appealing and culturally relevant.
I designed all the pages of the “Natural Treasures of Malaysia” interactive website in Figma, which includes six core artboards corresponding to the website’s main sections:
-
Home Page – Features the prominent title “Explore the Natural Treasures of Malaysia” along with visuals of Malaysia’s landscapes and national animal distributions, capturing visitors’ attention immediately.
-
History Page – Introduces the background and historical distribution of Malaysia’s national animals, highlighting the deep connection between species and the local ecosystem.
-
Timeline Page – Shows key milestones in the changes of national animal habitats, covering distribution shifts from the 1930s to the 2010s.
-
Map Section – Presents the distribution of national animals across Malaysia, with visual markers linking species to regions, clearly distinguishing their habitats.
-
Species Card Page – Interactive cards providing detailed information about rare animals such as the Malayan tapir and Malayan tiger, including habitat, conservation status, and species characteristics.
-
Conservation Actions Section – Modular cards showcase various protection initiatives, such as anti-poaching patrols and habitat restoration, presenting details in an engaging and organized manner.
Each page is carefully structured using a grid layout to ensure visual consistency and balanced composition. I applied a fresh green color palette to reflect Malaysia’s natural environment and emphasize the theme of wildlife protection. This layout planning process helped me organize species information and conservation actions logically, providing a solid foundation for the next stage of interactive animation design.
Home Page — Visual & Animation Design
For the home page of the Natural Treasures of Malaysia website, the title “Explore the Natural Treasures of Malaysia” creates a vivid atmosphere, evoking the idea of uncovering Malaysia’s ecological wonders — simple yet full of natural tension. The fresh green background reinforces the vitality of the native ecosystem and aligns closely with the website’s wildlife conservation theme.
When users click the “Enter” button, the scene transitions smoothly to the species distribution module. A guiding message, “Discover the Habitats of Wildlife,” fades in, while key national animal markers, such as the Malayan tapir and the long-tailed macaque, appear gradually on the map. Clicking each marker triggers the corresponding animal sounds, clearly presenting their habitats and unique characteristics. The animations are designed to be engaging and intuitive, giving users the sense of “unlocking” natural discoveries with every interaction.
I implemented these effects using Figma Prototype’s smart animations and easing transitions, with durations ranging from 0.6 to 1.2 seconds to maintain a comfortable rhythm without feeling rushed or slow. The overall flow — from the map rising to the placement of species markers — aims to simulate the experience of “stepping into nature and connecting with wildlife habitats.” Though simple, these animations enhance the homepage’s lively ecological atmosphere, perfectly reflecting the website’s conservation-focused theme.
History Page
On the History Page, the complete story of Malaysia’s national animals, such as the Malayan tiger and long-tailed macaque, is presented — from their origins to conservation efforts. Instead of using automatic scrolling, I designed a click-based navigation, allowing users to explore each story card by clicking the “Next Chapter” button. Each chapter focuses on a core aspect: species origin, conservation journey, and ecological significance.
When users first open the page, the key animals appear on the timeline. Clicking on an animal reveals its description with a smooth transition, maintaining continuity in the animation. This approach creates a concise and fluid storytelling experience, encouraging users to actively engage with the content while learning about the protection of endangered species.
On the “More” Page, users can click the “Learn More” button to access additional information about each animal. When clicked, the text gradually emerges from the image, creating a smooth and visually appealing animation. This subtle motion not only draws users’ attention to the content but also encourages them to engage actively with the information. The design balances interactivity and readability, ensuring that users can explore details without feeling overwhelmed. By combining imagery with animated text, the page reinforces the educational and immersive experience of the website, allowing users to learn more about Malaysia’s protected wildlife in an intuitive and engaging way.
I also designed the “Our Work” Page, which presents a comprehensive view of our conservation efforts. This page highlights several aspects: how we protect endangered animals, the equipment and tools we use, the activities of our rangers, and educational programs for children. Users can navigate between different sections by clicking to switch to the second page, ensuring that content is organized and digestible. Additionally, clicking “Learn More” reveals more detailed information about each conservation initiative, such as anti-poaching patrols, habitat restoration projects, and community education programs.
The interactive design encourages users to explore at their own pace, combining concise overviews with optional deeper dives into specific topics. Animations and smooth transitions maintain engagement and help users understand the processes behind animal protection. Overall, this page reinforces the educational and participatory focus of the website, making it both informative and interactive, while emphasizing the real-world impact of conservation work.
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 the website’s story — presenting information clearly while guiding users through the content.
Through this process, I learned to use Figma Prototype more effectively, utilizing features such as Smart Animate, frame linking, and interactive triggers. Although the animations are still at the prototype stage, they effectively demonstrate the flow and rhythm of the user experience I aim to achieve in the final version.
Overall, this task deepened my understanding of interactive storytelling in web design. I realized how subtle motions and transitions can make information more engaging and memorable. The experience also strengthened my planning skills, helping me consider each interaction step carefully before building the actual website.
Presentation Video
Feedback
Week 5
Specific Feedback:
Mr. Hamimi introduced Graphic Symbols in Adobe Animate and explained how they can be used to create simple animations within the main timeline. He demonstrated converting drawn objects into symbols and applying Classic Tween to generate motion. During the spider animation exercise, he emphasized organizing layers clearly, using Object Drawing Mode, and efficiently duplicating elements to streamline workflow.
General Feedback:
This week’s lesson helped me understand nested animation structures, where animations can exist within other animations. Creating the spider and animating it across the stage gave me hands-on experience coordinating multiple layers. I also gained confidence in using Adobe Animate tools and recognized the importance of planning the timeline for complex movements.
Week 6
Specific Feedback:
General Feedback:
This class deepened my understanding of composition timing and layer coordination. Through exercises such as the countdown and the “Welcome → Enter” intro animation, I learned to manage multiple elements precisely on the timeline. I also developed a better awareness of visual rhythm, understanding how movement speed and spacing influence the overall flow of an animation.
Week 7
Specific Feedback:
Mr. Hamimi introduced Action Layers and Button Symbols in Adobe Animate. We learned to use stop() to control animation flow and add click or hover triggers for scene changes. He emphasized clear layer naming and organized hierarchy to keep projects manageable. This lesson showed me how interactivity shapes user experience and why planning layers is essential for smooth workflow.
General Feedback:
Combining animation with user interaction, I learned how motion design enhances web usability. Creating a clickable “Welcome” animation showed me how visual effects and functional elements work together. This week’s practice improved my ability to plan interactive structures, which will be valuable when developing my website prototype.
Week 8
Specific Feedback:
Mr. Hamimi showed us how to extend basic animation into interactive motion using Action Layers and Button Controls in Adobe Animate. He explained timeline structuring with keyframes and blank frames, and the use of stop() to prevent automatic looping. He also emphasized optimizing button hit areas and hover states to improve usability and make interactions more intuitive.
General Feedback:
Reflections
During this task, I improved both my design thinking and technical skills through continuous exploration and feedback. Under guidance, I developed my project from a simple concept 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. Using Figma, I practiced building transitions, hover effects, and smart animations that enhance content presentation in a modern and educational way.
Observation
I observed that interactive design requires clear structure and planning before focusing on visual details. Wireframes, flow diagrams, and prototypes are essential tools to organize user paths and page connections. I also realized that motion and storytelling should complement each other — animation is not just decorative, but a way to guide and engage users. This approach helped me create a consistent rhythm between interaction, story, and design.
Findings
I learned that good interaction design is about balance — between creativity and clarity. Each motion, transition, and layout choice should serve a purpose. Applying usability principles such as consistency, feedback, and clear navigation strengthens storytelling and enhances user experience. This made my website more user-friendly while maintaining a cohesive and engaging design.
Conclusion
Overall, 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 content. Through this project, I improved my skills in layout planning, animation, and user flow. Moving forward, I aim to refine my prototype with smoother navigation, better interaction timing, and a more cohesive user experience.
Comments
Post a Comment