Advanced Interactive Design | Exercises

 

Advanced Interactive Design

23/04/2026 - 30/05/26 | Week 01 - Week0 06

Jesslyn Octavia Tjong / 0374562 / Bachelor of Design (Honours) in Creative Media

Information Design / Exercises / Taylor's University

Table of Contents

I. INSTRUCTION

II.  EXERCISE 1 

III. EXERCISE 2

IV. EXERCISE 3

V. FEEDBACK & REFLECTION

VI. QUICK LINKS

Exercise 1

Exercise 1 was about designing a Smart Assistant character/avatar or UI widget using Adobe Animate’s vector tools, while keeping each movable part on separate named layers.

INSPIRATION

For this exercise asset, I looked through my Pinterest references and noticed that I already had a clear visual direction in mind. I wanted to create a cute, feminine, and soft pink bunny character with a sweet, charming personality, similar to the gentle aesthetic of characters like My Melody.

SKETCH

The figure above is the sketch done in Procreate, taking the character's anatomy and drawing style that is similar to character My Melody without bunny ears. Instead, I added accessories to showcase a bit of personality.

At first, I drew out with the pen tool and oval shape to check out the proportions of my character. Here, I have established hair, face, collar, shirt, skirt, legs, and shoes layers.

SHADING

Using the line tool to divide a section, Ctrl B to break apart and add color to show shading, I've done it to the hair and the bottom part of the skirt to show.

I've added shading to the following layers:

• Hair
• Bow
• Skirt
• Legs
• Hands
• Nose
• Cone

In addition, I've tried to do it to the eyes with the grey color; however, I scrapped the idea once I realized how horror-looking it would be.

ACCESORIES

Later on, I worked on providing a few small accessories to add in her dimension as a character and as a prop to use in Exercise 2. Here, I opted out the hat for a bow, and I changed the inspiration look of the normal-looking ice cream into a melody-shaped ice cream.

Submission:

Submission : Character Asset Adobe Animate File

Exercise 2: Idle Animation

IDEA

During my consultation with Mr. Shamsul, he said the ice cream melting idea worked well for my idle animation. Since my character is holding an ice cream, the melting effect feels natural and fits the theme. The small drip movement adds life to the character without making the animation too distracting.

LAYERING & ANIMATING

In this animation, I used up 60 frames, where 42 frames are for the melting ice cream stage and the 20 frames left show how fast the droplet falls into the puddle near her left leg. Hence, there are only two layers for this idle animation.

Falling Droplet

The falling droplet was the easiest part to animate. It starts around frame 42 to frame 60. I created the droplet using a circle shape, placed it below the ice cream cone, then slowly moved it downward while scaling it smaller to make it look like it was falling naturally.

I also changed the droplet shape twice: once near the ankle area and once when it reached the floor pattern. This helped the droplet look more organic rather than remaining a perfect circle. After that, I added a tween between the keyframes and used ease in "quad" to make the motion smoother and more natural.

Melting on Cone

For the melting part of the ice cream cone, I had to animate it frame by frame because the shape tween did not work properly. The melting shape kept changing too much, so I manually adjusted it every 10 to 15 frames.

Although the changes were small, they helped show the ice cream slowly melting until the droplet formed and fell. After the droplet dropped, I adjusted the melting part so it slowly disappeared and returned closer to its normal shape.

Submission: