Advanced Interactive Design | Exercises
23 Apr 2026 - 14 Jun 2026 (Week 1 - Week 9 )
Chan Xiang Lam | 0358400
Advanced Interactive Design | Bachelor of Design (Honours) in Creative
Media
Exercises
TABLE CONTENT
1. Module Information Booklet (MIB)
2. Exercise 1: Asset Creation
3. Exercise 2: The Motion
4. Exercise 3: Asset Creation
Module Information Booklet (MIB)
Exercise 01: 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.
Ideation Concept
My ideation concept is a Cute Floating AI Assistant designed with a simple
and friendly appearance. The idea was inspired by futuristic smart
assistants and minimal robot mascots commonly seen in modern UI and
technology products.
Inspiration / Research
Before starting the sketches, I researched different AI assistant mascots,
floating robots, and futuristic user interface designs. Most of the
references used rounded shapes, glowing effects, and simple facial
expressions to create a friendly appearance. These references helped me
understand the visual style and overall design direction.
Fig.1.1 Visual references collected from Pinterest
Sketches
During the sketching process, I explored different body shapes, face
designs, and arm positions. I experimented with circular and rounded
forms to make the character look softer and more approachable. I
selected the round floating design because it looks simple, balanced,
and suitable for animation.
Fig.1.2 Sketches#1
Fig.1.3 Sketches#2
Fig.1.4 Sketches#3
Process
After completing the sketch, I imported it into Adobe Animate and used it as a
guide for the digital drawing process. I recreated the character using simple
vector tools such as the Oval Tool and Rectangle Tool to build the overall
shape and structure.
Fig.1.5 Digital character development in Adobe Animate
Fig.1.6 Final character design
Final Outcome
Google Drive link:
Fig.1.7 Final outcome
Exercise 02: The Motion
Instructions:
The objective of Exercise 2 was to bring the character to life by
creating a continuous idle animation. Instead of appearing as a static
illustration, the character was designed to have a subtle floating and
breathing motion to create a more engaging and friendly
appearance.
Process:
After completing the character asset, I converted the individual body
parts into symbols and organised them into separate layers. The
animation was created using Classic Tweens across a 40-frame timeline.
The character was animated to move slightly upward and downward to
simulate a floating effect, while the body and hover ring were
adjusted to create a breathing motion.
To improve the smoothness of the animation, easing was applied to the
tweens so that the movement appeared more natural and less mechanical.
Multiple tests were conducted to ensure that the animation looped
seamlessly without any noticeable interruptions.
Fig.2.1 Creating animation using Classic Tween
Final Outcome
The final idle animation successfully created a gentle floating and
breathing effect. The character continuously moves in a smooth loop, making
it appear active and responsive even when no interaction occurs.
Fig.2.2 Final animation
Exercise 03
Instructions:
The objective of Exercise 3 was to introduce interactivity by creating a
button that triggers a character reaction. The interaction was designed
so that the character performs a wink and smile animation whenever the
user clicks the button.
Process:
To create the interaction, an additional animation sequence was added after
the idle animation. New keyframes were inserted to create the wink and smile
facial expressions while maintaining the character's original design.
A button was then created and converted into a Movie Clip. Frame labels were
used to organise the animation sequence, including an "idle" state and a
"start" state. JavaScript code was implemented in Adobe Animate to detect
button clicks and trigger the wink animation.
The animation was programmed to return to the idle state after the wink
animation finished playing, allowing the character to continue its breathing
and floating motion.
Fig.3.1 Creating button
Final Outcome
The final interactive animation allows users to click the button and trigger
a wink and smile animation. After the animation is completed, the character
automatically returns to its idle floating and breathing state. This
exercise helped me understand the basics of interactive animation, frame
labels, event handling, and user-triggered actions in Adobe Animate.
Netlify link: https://exercise3netlify.netlify.app/
Reflection
Throughout these exercises, I gained valuable experience using Adobe
Animate to create both animated and interactive content. I learned how to
organise assets using layers, create smooth movements with keyframes and
Classic Tweens, and apply easing to make animations feel more natural. In
addition, I explored basic interactivity by using buttons and simple
coding to trigger animations.
One of the challenges I faced was understanding the timeline structure and
managing different animation states. However, through practice and
experimentation, I became more confident in using Adobe Animate and
troubleshooting animation issues. I also learned the importance of
planning, testing, and refining the animation to achieve a better user
experience.
Overall, these exercises helped me improve my technical skills in
animation and interaction design. They provided a strong foundation for
creating more engaging and interactive digital experiences in future
projects.
Comments
Post a Comment