Advanced Interactive Design / Exercises
Advanced Interactive Design, Bachelor of Design (Honours) in Creative Media
Table of Contents
Module Information Booklet (MIB)
Module Information Booklet (MIB)
Exercise 1: Asset Creation
Instructions
Objective: Design a functional "Smart Assistant" avatar or UI widget using vector tools.
The Task: Using the drawing tools in Adobe Animate (Pen, Oval, Rectangle), create a character or a central UI hub.
Requirements:
- Use Object Drawing Mode to keep shapes clean.
- The "Layer Rule": Every part that needs to move (eyes, arms, glowing core) must be on its own named layer.
Submission Requirement:
- Upload the .fla file in your Google Drive
- Attach the link in your e-portfolio
- Submit your e-portfolio link.
For this exercise, my task was to create a smart assistant character using Adobe Animate. My concept was a floating AI assistant with a friendly and futuristic look. I first started with an initial sketch (Fig.1), which was a simple rounded-rectangle robot head with an antenna on top.
 |
| Fig.1.1 Initial Sketch |
However, I later realized that the character would need to be animated, and having only a head design would limit the animation possibilities. Because of this, I decided to redesign the character into a floating robot. I wanted it to feel more digital, lightweight and non-restrictive in movement, allowing it to fly in and out freely instead of walking with legs like a human character.
 |
| Fig.2 Final Sketch |
I added a headphone to the character to represent the smart assistant listening to the user's feedback or commands. Besides that, I also added a pulse-wave display on the body of the robot. This waveform will moves when the assistant speaks, symbolizing communication and making the character feel more alive, interactive and responsive. The flame underneath the character to show that it is floating, helps making the design feel more dynamic.
After finalizing the sketch design, I imported the sketch into Adobe Animate. I then started tracing the character digitally using the Rectangle Tool and Oval Tool to build the basic outline and body shape of the character.
Fig.1.3 Tracing Digitally
I chose this combination of colours to reflect a futuristic and digital aesthetic. The darker tone (#04213A) is used as the "screen" on its face and body to give contrast and depth, while the brighter cyan and light blue are used to represent technology and energy of the smart assistant feel.
 |
| Fig.1.4 Colour Palette |
I planned to use gradient colours for most parts of the character to create a high-tech feel, while keeping the head and main body in solid colours. For the antenna, I wanted it to have a glowing effect but since I'm new to Adobe Animate, I searched YouTube tutorials to learn how to achieve this effect. I convert the circular part of the antenna into a symbol and then applied a Glow Filter to create the luminous effect. This helped the antenna stand out visually and made it feel like an active signal indicator.
 |
| Fig.1.5 Colouring Process |
Moving, to avoid the pulse-wave display appearing too flat, I added subtle graph lines behind it to give it more depth and structure. I also reduced the opacity of the background lines so they will not visually compete with the main pulse-wave lines.
 |
| Fig.1.6 Pulse-wave Details |
Similar to the antenna, I also applied a Glow Filter to the pulse-wave display to helps the waveform stand out more clearly.
 |
| Fig.1.7 Glowing Pulse-wave |
For the flame element at the bottom, I used gradient colours and designed it with three layered shapes to add depth. I personally feels this layering helps enhance the sense of movement and reinforcing the idea that the character is floating. In addition, I added a shadow underneath the flame to ground the effect visually.
 |
| Fig.1.8 Fire Flame |
After completing the colouring process, I felt that the background graph lines were too faint and not visible enough to support the design. To improve clarity, I increased the opacity from 5% to 20%.
 |
| Fig.1.9 Updated opacity for background lines |
Google Drive link:
https://drive.google.com/drive/folders/1sTbhOLwzBXSX94Yb9ajQkPOZbP2mKSit?usp=sharing |
| Fig.1.10 Final Outcome |
Reflection
Exercise 1:
Overall, I found this exercise to be enjoyable and engaging, as it allowed me to explore character design while also learning how to use Adobe Animate more effectively. Through this process, I gained new technical knowledge, especially in applying effects such as the glow filter.
Although I'm still new to the software, experimenting with different tools helped me better understand how simple shapes and effects can be combined to create a more polished character design. I'm now looking forward to the next stage, which is animating the character. I'm excited to see how the design will look like through animations.
Comments
Post a Comment