ADVANCED INTERACTIVE DESIGN - EXERCISES COMPILATION
07/05/2026 - 11/6/2026 (Week 3 - Week 8)
Madeline Ordelia Tjahjadi (0376920)
Bachelor of Design in Creative Media
Exercises Compilation
Table Of Content
1. Lectures
2. Instruction
3. Process Work
4. Feedback
5. Reflection
1. Lectures
all lectures recorded in
Task 1 blog
2. Instruction
3. Process Work
Exercise 1: Asset Creation
In this exercise, we will design a functional "Smart Assistant" avatar or
UI widget using vector tools. We will use the drawing tools in Adobe Animate
(Pen, Oval, Rectangle).
To ensure the design remains organized, there are technical
requirements:
- Object Drawing Mode: Enable this mode to keep shapes clean
- Layer Rule: create each component (eyes, arms, glowing core) on its own dedicated layer.
- Symbol Rule: once each part is drawn, convert it into a Movie Clip symbol (F8)
I started by searching for references on Pinterest. I stumbled upon these
characters and decided to combine their aesthetics and features for my own
character.
Figure 3.1: References #1.
(Source: https://pin.it/3Pj1X162l,
https://pin.it/5O2Pvm6px, https://pin.it/3dHOoFkNG, https://pin.it/43btM2X5K, https://pin.it/4ayi646Gm)
I want the character to project a futuristic aesthetic. I've introduced a
touch of 'abnormality' by giving the character a humanoid form paired with
bunny ears.
Figure 3.2: Character Sketch.
Once I complete my sketch, I will import it into Adobe Animate to trace it.
I'll focus on using shapes to create a vector design. Here's the process
work:
Figure 3.3: Tracing in Adobe Animate.
After tracing the character using different layers, I've started adding color.
I'm aiming for a robotic, futuristic aesthetic, so I'm using a
combination of light blue and purple. Below is my reference: (ps. I also added
star for her eyes as a pupil)
.jpg)
Figure 3.4: Color reference.
Figure 3.5: The process.
Below is my final attempt #1 for smart assistant character in vector style:
Figure 3.6: Final character design (attempt #1).
After reviewing my character design, Mr Shamsul said it was too simple and
lacked movement for animation. Therefore, I tried to create another sketch.
When thinking about movement, I envisioned a puppet or marionette, so I
searched for reference images and tried sketching it again.
Figure 3.7: References #2.
I'm thinking of adapting the style or color palette from
Coraline into my marionette character. I want to keep the head
from my first sketch and modify it to fit this new direction.
Figure 3.8: Character sketch #2.
I kept the bunny ears and added the Coraline button eyes. I also added a bit
of a circus vibe by placing a star in the middle of the design and ruffles
on the shirt. The strings on her hands are cut off for now, but this is just
a rough sketch to show that she is a puppet. I will develop the design
further when I trace and refine it.
Once I completed the sketch, I consulted with Mr. Shamsul. He liked the
ballerina puppet reference and asked me to make her as a ballerina. I will
change the sketch later on when I trace it.
Figure 3.9: The progress for tracing.
As you can see from my progress above, I changed a lot of things along the
way. I removed the bunny ears because I felt they ruined the direction of my
marionette theme. I also included a ballerina-style skirt using Coraline
color palette and style. Lastly, to finish up, I added strings to emphasize
the puppet concept.
.jpg)
Figure 3.10: Final character design (attempt #2).
Google drive link for .fla file:
Exercise 2: The motion
After completing the asset creation, we moved on to the animation phase to develop the character's idle state. The technical requirements included implementing nested animations, where individual symbols are animated within their own isolated timelines. We also utilized classic tweens to build a seamless 40-frame loop. Finally, to polish the animation, we applied classic ease-in/ease-out curves to ensure the character's movement felt organic and natural.
For my character, I implemented an idle state where the marionette does a retirè, a classic ballet movement.
Figure 3.11: Movement reference.
Below is the progress:
Figure 3.12: Motion progress.
Figure 3.13: Final Idle state.
Google drive link for .fla file:
Exercise 3
We need to create another animation so that when the button is clicked, it triggers a new motion for our character. Since my character is a marionette, I want the action to show the attached strings being cut. The strings will fall down, and the marionette will collapse or fall over as well.
First I create a new object: scissor, to cut the strings. After that I convert the layers into symbol to create the cut movement.
Figure 3.14: Scissor progress.
Figure 3.15: Creating the cut strings.
After finishing the second animation, I followed the tutorial to create two new layers in Scene 1: "button" and "action". Next, I created a button on the button layer and converted it into a button symbol. Inside the symbol, I edited the colors for the "hover" and "hit" states. After that, I added the code provided by Mr. Shamsul to the actions layer. Finally, I made sure to give both the button and the character layer their instance names so the code would work properly.
Figure 3.16: Button progress.
After I consulted my exercise, He told me to add more movement after the string cut, so I added the marionette to fall.
Figure 3.17: Added movement.
Figure 3.18: Final outcome for exercise 3
Netlify link:
Google drive link for fla. file:
4. Feedback
Week 3
No class
Week 4
My initial character design looked too simple and felt too static to
animate effectively. Mr. Shamsul asked me to create another sketch before
the class ended. Fortunately, I managed to gave him a new sketch, and
it was approved.
Week 5
I need to create looping and make it inside a movie clip
Week 7
My animation already looking good, I just need to have more movement and I'm done.
5. Reflection
Doing this exercise was kind of draining. Adobe animate is entirely new to me, and it kept crashing until i finally had to downgrade to the 2023 version. But overall, once I figured out how to use it, I actually started having fun exploring all the things you can only do in Adobe Animate. Mr. Shamsul also gave us a lot of tutorials covering the basics, which helped me understand the software a lot better.
.jpg){kind=link}
Comments
Post a Comment