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
.jpg)
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:
Exercise 3 : Idle Animation
For Exercise 3, the goal was to show what a button can do to a character after creating the idle animation in Exercise 2. My character already had a looping idle animation, so I added a Tap button that triggers a wind reaction. When the button is clicked, the wind appears, the character tilts, then she returns back to her idle animation.
One mistake I made earlier was turning the character into a Graphic symbol. This caused problems because Graphic symbols are not suitable for interactive animation with code. To fix this, I changed the character into a Movie Clip so it could have an instance name and be controlled properly.
Idea & Process
The idea was that when the button is pressed, a gust of wind comes in, causing the character to tilt before slowly returning to her normal idle animation. So before proceeding into the movie clip animation, I gave my character a background to establish the ice-cream shop environment and give more context to why the wind reaction happens in the scene.
INSIDE MOVIECLIP
Inside the character Movie Clip, I added an action layer to label the wind and idle animation. I created a new label called “blow” so the button on the main scene could send the animation to that part. In this section, I added a wind layer and drew a wind swoosh, then used a classic tween to make it move across the character and fade out.
I also animated the character’s reaction to the wind. Since the body parts are grouped together (by a previous mistake), the character could only tilt as one whole body instead of moving piece by piece. I used Ctrl + B to provide some separation, then I adjusted the pivot point near the feet and animated the character leaning into the wind before returning to her normal position.
At the end of the wind reaction, I added code to send the animation back to the idle loop. This makes the character return to her calm idle animation after the button action is finished.
SUBMISSION :
Comments
Post a Comment