Advanced Interactive Design Exercise 01: Asset Creation

GE XIANJING / 0377636 / Bachelor of Interactive Spatial Design (Honours)

Exercise 01 – Asset Creation

Task Summary

For this exercise, we are required to design a functional “Smart Assistant” avatar or a central UI hub using vector tools in Adobe Animate while following proper animation structure rules such as Object Drawing Mode, layer separation, and Movie Clip Symbol conversion.

CoCo Smart Assistant – Production Process & Animation Workflow

Character Production Process

After confirming my project direction for children’s safety education, I started developing a smart assistant character called “CoCo”, a small cat teacher designed to guide children through interactive learning activities. The purpose of this exercise is not only to practice Adobe Animate techniques, but also to prepare reusable animation assets for my future full project.

Following the workflow taught in class, I first designed CoCo using vector drawing tools in Adobe Animate. Instead of creating the character as a single flat illustration, the lecturer emphasized separating every movable body part into independent components. This method allows each element to be animated individually later in the production process.

Sketch🐱

Therefore, the character was divided into multiple layers and components, including:

Head
Eyes
Arms
Tail
Body
Correct / Wrong sign boards

Each movable part was then converted into a Movie Clip Symbol (F8). The lecturer explained that Movie Clips are important because they contain independent timelines, allowing different animations to run separately while still functioning together as one complete character.

Animation Structure & Principles

One of the most important concepts taught during class was the idea of modular animation production. Instead of animating the whole character directly on a single timeline, each component should have its own independent animation workflow.

For example:

The eyes can blink repeatedly inside their own Movie Clip timeline
The tail can continuously swing left and right
The arms can independently switch between the✅ and ❌ signs

These smaller animations are then combined together on the main stage to create a more complete and dynamic character.

The lecturer also demonstrated how proper layer separation improves animation control and prevents editing conflicts later in the workflow. By keeping each movable object on a separate layer, it becomes easier to adjust keyframes, movement timing, and motion direction individually.

Another important technique introduced in class was adjusting the pivot point before animation. For rotational movement, such as arm lifting or tail swinging, the pivot point must be placed near the correct joint position to create natural motion. This principle was especially useful for creating CoCo’s hand-switching animation and tail movement.

Final Animation Outcome

The final concept for CoCo includes several simple interactive animations:

Left hand holding a green “Correct” (✓) sign（Smiling facial expression）
Right hand holding a red “Wrong” (✕) sign （Angry facial expression）
Alternating hand movement
Blinking eyes
Tail swinging motion

Although the animations are relatively simple, they demonstrate the professional workflow introduced during class, including vector construction, layer organization, Movie Clip nesting, timeline separation, and modular animation design. This exercise also acts as an early foundation for my future interactive children’s safety learning platform.