Advanced Interactive Design The Motion

 

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

Process Record

• Convert the parts that need to be moved into layers into components

• Insert keyframe moving parts and create interstitial animations

Eye bead dynamic interstitial animation (left to right)

Classic Ease out

Loop animation of tail

• Based on what we learned in the previous class, where we created a traditional tween animation by converting text into a symbol and animating it from transparent to visible before fading out, I intend to apply the same technique in this project.

• After testing, it was found that there were insufficient details, so we added colors to the shaded areas

• Preview animation. Press the shortcut key Ctrl+Enter to play

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.