Labels

Advanced Interactive Design / Exercises


14/05/2026 - 30/05/2026 (Week 6)

Chang Wing / 0367807 

Advanced Interactive Design / Bachelors of Design (Honours) in Creative Media / Taylor's University

Exercises

TABLE OF CONTENTS


INSTRUCTIONS 




Exercise 1: Asset Creation

Character Design

I sketched out a character that fits my website’s theme: "Malaysian Food Adventure". The character is designed as a local motorbike rider, which Malaysians affectionately refer to as "Abang". In Malaysia, these riders are often seen as friendly and helpful people who would stop to offer assistance when someone is having trouble on the road. Inspired by this warm local culture, the character acts as a friendly guide who accompanies and interacts with users throughout the website experience.



Figure 1.1 Sketch

Figure 1.2 Character Design Moodboard




Illustration Process

Then, I proceeded to trace the illustration based on the sketch produced.


Figure 1.3 Illustrating


Figure 1.4 Illustrating


To quickly adjust the colours, I used the Recolor Artwork feature in Adobe Illustrator.


Figure 1.5 Recoloring Artwork


After completing the illustration and colouring process, I grouped the movable parts to make it easier to separate them into layers later in Adobe Animate.


Figure 1.6 Grouping animate layers


Next, I imported the .ai file into Adobe Animate and renamed all the layers according to each body part and animation element for better organisation during the animation process.

Figure 1.7 Importing.ai file into Adobe Animate



Figure 1.8 Renamed layers



Final Outcome

Figure 1.9 Final Character Design









Exercise 2: The Motion

In this exercise, I focused on animating different elements to create motion for the motorbike scene. To achieve this, I converted several objects into symbols so they could be animated independently and reused easily within the timeline (Figure 1.10). This also allowed me to organise my layers better and loop animations without disrupting the main composition.

I had multiple elements such as the leg, motorbike body, tyre, handle and palm. Since each part needed to move differently (for example, the vibration of the motorbike and the movement of the rider), converting them into symbols made the animation process more manageable.


1. Convert to Symbol -> Converts selected objects into reusable symbols (Graphic, Button, or Movie Clip), also enables internal animation within the symbol, which can loop automatically in the timeline preview.

2. Classic Tween -> Creates animation between keyframes for position, scale, rotation, and transparency. Commonly used for simple, traditional frame-by-frame style motion. However, it cannot be used to animate shape changes.

3. Shape Tween -> Used to animate changes between vector shapes, allowing one shape to gradually transform into another.


Figure 1.10 Convert to symbol


I used shape tween to animate the pupil moving from right to left and back to the right (Figure 1.11).


Figure 1.11 Pupil Moving Animation


Figure 1.12 Shape Tween


I reillustrated the smoke's animation to give a more realistic feel (Figure 1.13).
Figure 1.13 Initial Smoke Illustration (Right) and Enhanced Smoke Illustration (Left)



Figure 1.14 Smoke Animation


Figure 1.15 Tyre

Figure 1.16 Tyre Animation


For the exit transition, I first copied frames from the main timeline and placed them into a graphic symbol. This allowed me to animate the entire scene as one unit. After that, I used classic tween to move the whole composition to the left and out of frame without affecting the internal animation inside the symbol (Figure 1.17).

Figure 1.17 Classic Tween


Final Outcome

Figure 1.18 Idle State Animation


Figure 1.19 Wheel Rotation Animation


Figure 1.20 Idle State + Transition Out Animation



Link to Google Drive (Exercise 2: The Motion)






Exercise 3

Process

I created three layers in the main timeline and renamed them “action”, “play”, and “avatar” to organise the animation structure more clearly.

  • Action layer → Contains JavaScript actions that control timeline behaviour at specific keyframes
  • Play layer → Contains the interactive play button
  • Avatar layer → Contains the movie clip for the character animation (Idle and On states)

Figure 1.21 Action, Play and Avatar Layers

Inside the Avatar layer (Figure 1.22), the Idle and On animations were converted into a single MovieClip symbol, named “avatar”.

  • The first frame of the Idle animation was labelled “idle”
  • The first frame of the On animation was labelled “On”

Figure 1.22 Inside the Avatar layer

At the end of both animations, the following action was added:

var _this = this;
_this.gotoAndPlay("idle");

This ensures that after each animation cycle completes, the movie clip automatically loops back to the Idle state, looping a continuous idle animation when no interaction occurs (Figure 1.23).


Figure 1.23 Loop Action javascript


On the Play layer, the play button was converted into a Button symbol and its instance was named “btnOn”.

On the Avatar layer, the movie clip instance was renamed to “mcAvatar” and an event listener was added to detect mouse click interaction:

var root = this;

root.btnOn.addEventListener("click", function() {
    root.mcAvatar.gotoAndPlay("On");
});

This code triggers the animation change from Idle → On state when the user clicks the play button.


Figure 1.24 Event listener Action javascript


REMEMBER TO RENAME INSTANCE NAME!

Figure 1.25 Rename Instance Name

Lastly, the project was renamed as index.html, and deployed to Netlify to launch the final web version (Figure 1.25).

Figure 1.26 Final Outcome


Link to Google Drive (Exercise 3)

https://drive.google.com/drive/folders/1Xbrsd3BVncPMSZMSSkXkfcCg4YY9LQPt?usp=drive_link





FEEDBACK

Exercise 1: Asset Creation

Week 4 (14/05/2026)

Feedback: Liked the character illustration style and animation moodboard, can proceed with the current direction. You can add small animation details, such as foot stepping on the floor during idle states and a step-back motion onto the motorbike before transitioning out of the screen so the animation feels more realistic.


Exercise 2: The Motion

Week 5 (21/05/2026)

Feedback: Idle State: Pupil stares into the screen with occasional eye blinks, the helmet subtly moves, while the motorbike lightly vibrates, smoke drifts continuously, and one foot rests against the floor; Moving State: The foot lifts onto the motorbike, then the motorbike swooshes forward and exits the frame.


Week 6 (28/05/2026)

Feedback: -



Exercise 3

Week 8 (11/06/2026)

Feedback: Nice! So cute! Yes, proceed to submit.






REFLECTION

This project helped me understand how symbols, movie clips, and ActionScript work together to create interactive animation in Adobe Animate. I learned how to control symbols using instance names and event listeners, and how user interaction can trigger animation changes. It also improved my technical workflow from design to export and web deployment through Netlify.







Labels:

Comments

Post a Comment