Advanced Interactive Design Exercise 03

on

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



 Introduction / Class Summary

In Week 6 of our Adobe Animate course, we officially stepped through the gateway of "Interactive Web Animation (HTML5 Canvas)", moving beyond traditional linear animation. This week's core content was highly technical, focusing primarily on how to utilize JavaScript to make animations respond to user commands.

Through our lecturer's live demonstrations, I systematically learned and mastered the following core concepts:

  • Application of Frame Labels: Using meaningful names (e.g., idle, on) on the timeline to mark specific animation segments instead of relying on rigid frame numbers. This makes code control significantly more precise and flexible.

  • Timeline Playhead Control: Learning the foundational interactive control statement this.gotoAndPlay('labelName') to achieve accurate transitions and loops between different animation states.

  • Event Listeners: Gaining a deeper understanding of the essence of web interaction. I mastered using addEventListener("click", function(){...}) to capture user mouse clicks and drive components on the stage to respond accordingly.




🐱 My Class Exercise 3: Kitten "Play & Pause" Interaction Experiment

After grasping the classroom concepts, I independently completed Exercise 3. I designed an illustration of a cute kitten holding a sign and added a "Play" button above it, aiming to implement a dual-functional "Play/Pause multi-action" interactive feature.



💡 Production Insights & Highlights

In this exercise, instead of rigidly copying the single-action controls demonstrated in class, I applied the concepts adaptively. By utilizing a boolean toggle switch (isPlaying), I implemented a dual-state button with more complex logic.

This not only creates a much smoother user experience (click once to play, click again to pause) but also gave me a deeper understanding of how conditional statements (if-else) function within animation development. On the stage, I ensured that this button's Instance Name was strictly configured as btnPlayPause to guarantee that the code executes flawlessly.


Video

Netlify

Netlify link     https://exercise-cat-button-animate.netlify.app/


Google drive

Comments

Post a Comment