Advanced Interactive Design Exercise 01: Asset Creation

on

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.

  • Draw a draft and edit movie components

Sketch🐱

Draw a body that remains stationary
Layered drawing
Body Prototype
  • However, simple colors are not enough to support the three dimensionality of an AI assistant, so I designed some color levels for him to enrich the picture and make objects more lively
  • The tail can swing up and down in the later stage, so a separate layer is created
tail
  • I want this eyeball to be able to change left and right, so I distinguish the layer between the right eye and the left eye.
  • In addition, as mentioned earlier, this is an AI assistant that helps children understand right and wrong, so it will have two faces, one is unhappy when answering incorrectly, and the other is a happy smile when answering correctly
Eyes
Another expression
  • Since I knew that we would need to add dynamics in the future, I drew different frame changes in advance, but overall it was based on this.
part 1

part 2


CoCo Smart Assistant



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.

 Google Drive

Comments

Post a Comment