Advanced Interactive Design Exercise 02 ：The Motion

on

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


Final Animation Outcome

• Left hand holding a green “Correct” (✓) sign (Smiling facial expression). When the sign appears, corresponding green letters will be displayed to match the positive feedback.

• Right hand holding a red “Wrong” (✕) sign (Angry facial expression). When the sign appears, corresponding red letters will animate into the scene. The entry effect utilizes an alpha change, transitioning smoothly from transparent to solid (Alpha: 0% to 100%, moving from light to dark).

• Alternating hand movement.

• Blinking eyes.

• Tail swinging motion.



Process Record

  • Layer & Component Organization: Convert all the body parts that need to be animated into separate layers, and then turn them into components (Movie Clips) for better control.







  • Keyframe & Interstitial Animation: Insert keyframes for the moving parts and create smooth interstitial animations:
  • • Eye bead dynamic interstitial animation (moving from left to right).
  • • Loop animation for the tail swinging motion.
Eye bead dynamic interstitial animation (left to right)
Set separate groups for left and right hands

Classic Ease out
Loop animation of tail
  • Applying Easing: Apply a Classic Ease out (or Ease In/Out) to the keyframes to make the movements, such as the character's breathing or actions, look more natural and organic rather than robotic.
  • Traditional Tweening: 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 applied the same technique in this project to control the text elements.




  • 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.

Google Link

Comments

Post a Comment