Advanced Interactive Design / Exercises
Advanced Interactive Design, Bachelor of Design (Honours) in Creative Media
Table of Contents
- Module Information Booklet (MIB)
- Exercise 1: Asset Creation
- Exercise 2: The Motion
- Exercise 3
- Reflection
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 |
Exercise 2: The Motion
Instructions
Objective: Give your character "life" through a continuous looping idle animation.
The Task: Create an "Idle State" for your character/avatar so it doesn't look like a static image.
Requirements:
- Nested Animation: Double-click your main symbol to animate inside its own timeline.
- The "Breathe" Effect: Use Classic Tweens to create a 40-frame loop.
- Polishing: Apply Easing (Classic Ease In/Out) to the tweens so the movement feels organic and high-end, not mechanical.
For this exercise, I focused on creating an idle animation that would make the smart assistant feel more alive instead of appearing as a static character. Since the robot does not have legs and is designed to float, I decided to create a gentle floating animation by moving the character slightly up and down. To make the movement feel more natural, the robot’s hands also move subtly together with the floating motion.
I animated the glowing antenna on top of the robot to make the assistant appear active even during its idle state. To achieve the glowing effect, I used the Colour Effect > Alpha setting in Adobe Animate to create a brightening and dimming animation loop.
|
| Fig.2.1 Glowing Effect |
One of the main challenges I encountered was with the robot’s right arm animation. During playback, the arm kept floating away from its original position unexpectedly. At first, I was unsure what caused the issue, so I searched online for possible reasons.
After troubleshooting, I discovered that the problem happened because the center point (the white dot shown when using the Free Transform Tool) was at the center of the arm at the beginning frame, and I place it to the top left part of the arm in the 20th frame. This caused the arm to rotate and animate incorrectly, making it appear as though it was flying away from the robot.
To fix the issue, I repositioned the center point correctly so the arm would rotate from the intended pivot point. After adjusting it, the animation became stable and the arm movement looked natural again.
|
| Fig.2.2 Floating Animation |
The animation was created using a 40-frame looping animation with Classic Tween. Initially, I experimented with keyframes on the 10th, 20th, 30th, and 40th frames. However, after previewing the animation, I felt that the movement appeared too fast and less smooth. Since the animation loops continuously, I simplified the timing by mainly focusing the movement around the 20th frame to create a slower and more comfortable floating motion.
To polish the movement further, I added Classic Tween between keyframes and applied Ease Out - Quad to the tween animation. This made the robot’s movement feel softer and more organic instead of mechanical.
At the 20th frame, I moved the entire robot slightly downward by holding Shift + Down Arrow twice. This creates the main floating transition before the animation loops back to the original position, resulting in a smoother looping animation.
Additionally, the shadow beneath the robot was animated to scale larger whenever the robot floated downward. This helps strengthen the illusion of depth and floating motion, making the animation feel more dynamic and believable.
As its Idle State, the robot was just floating not speaking, I decided to switch the waveform on its body to a flat line.
|
| Fig.2.3 Adding Classic Tween |
Final Outcome
Google Drive link:
https://drive.google.com/file/d/1HJQ9PCXzGYnwTe_fMwg4lb-sQHoAg811/view?usp=sharing
Exercise 3
Instructions
- Upload the file to netlify;
- In order to make it work, you need to remane the html file as index.html (You know the drill).
- Upload the entire folder that contains the html file, js file and images folder. Please do not upload the .fla file to netlify.
- You will also required to upload the .fla file into your Google Drive. Update your e-portfolio with all the processes.
- Submit your e-portfolio link for submission
As a continuation of the previous tasks, this exercise focused on creating an interactive button to activate my robot character. Since the robot's idle state was already a gentle floating animation, I decided that when the button is clicked, the robot would fly away for a short moment before coming back and continuing its idle floating state.
I first sketched out the battery button on paper. Since the character is a robot, I felt that a battery would make sense as it represents powering up the robot.
 |
| Fig.3.1 Sketch |
After finalizing the idea, I recreated the button in Adobe Animate using the same colour palette and linear gradient style as the robot so that both elements looked consistent. Next, I converted the battery into a button symbol and assigned it the instance name btn_on.
 |
| Fig.3.2 Battery button in Adobe Animate |
I added a new layer above all the existing layers and inserted keyframes to separate the two animation states, which I labelled as 'idle' and 'start' for easier organization. I then created the activation animation by adding keyframes and applying Classic Tween under the 'start' label, allowing the robot to fly away and return to its original position.
Initially, I set the action to stop and play the 'start' label directly when the button was clicked. However, the animation stopped awkwardly, and I could not figure out why. After trying a few different methods and testing the animation several times, I realised that I should let the 'idle' label play first, and only go to the 'start' label when btn_on was clicked. After making this adjustment, I was then able to complete the task successfully. |
| Fig.3.3 Action |
Netlify link: https://ex3smartassistant.netlify.app/
Google Drive link:
https://drive.google.com/drive/folders/1sTbhOLwzBXSX94Yb9ajQkPOZbP2mKSit?usp=drive_link
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.
Through this exercise, I learned that even simple idle animations require careful attention to detail. Small elements such as subtle hand movements, a glowing antenna, and a responsive shadow helped make the robot feel more alive and engaging.
I also improved my problem-solving skills when I encountered the issue of the robot's arm moving out of place. By researching and experimenting, I discovered that the problem was caused by an incorrect centre point placement. This experience taught me the importance of troubleshooting and paying attention to technical details.
Overall, this task strengthened my skills in Adobe Animate and helped me understand how timing, easing, and small design decisions can greatly improve the quality of an animation and the user experience.
Through this task, I learned that creating interactions involves more than just making animations play. I had to think about how the button design related to the character and how the transition between different animation states would affect the overall experience. Designing the battery button also helped me understand the importance of maintaining a consistent visual style.
I also improved my problem-solving skills when the animation stopped awkwardly after clicking the button. At first, I could not figure out why it happened, but after several rounds of testing and experimenting, I realised that the animation sequence needed to start from the idle state before moving to the start label. This experience taught me the importance of patience and debugging when working with interactive animations.
Overall, this task strengthened my understanding of both animation and simple interactivity in Adobe Animate. It showed me that small technical decisions, such as organising frame labels and controlling animation flow, can have a big impact on creating a smoother and more enjoyable user experience.
Comments
Post a Comment