Advanced Interactive Design
EXERCISES - ADVANCED INTERACTIVE DESIGN
Week 01 - Week 14
Aina Ahmed Aleem | 0355701
Advanced Interactive Design | Mr Shamsul
Exercise 01: Asset Creation – Smart Assistant Avatar
Deadline: 10 May
Objective
Requirements
For this exercise, I designed and developed a smart assistant avatar
using Adobe Animate. The main objective was to practice vector
illustration techniques, effective layer organisation, and converting
artwork into Movie Clip symbols for animation.
Design Concept
I chose to create a simple robot assistant with a clean, minimal visual style. The design relies on basic geometric shapes such as circles and rectangles to ensure clarity, readability, and a functional appearance suitable for digital interfaces.
Step 1: Layer Organisation
I began by organising the artwork into separate layers for each movable element, including the head, body, right arm and left arm. This follows the animation workflow principle that every element intended for movement should be placed on its own layer, making future animation more efficient and easier to manage.
Step 2: Drawing with Object Drawing Mode
I enabled Object Drawing Mode to ensure that each shape remained separate and did not merge with other elements. This helped maintain a clean structure and made the artwork easier to edit and manage throughout the design process.
Step 4: Converting to Symbols (F8)
After completing the character, I converted each part into Movie Clip symbols using the F8 shortcut. This step allows every element to be animated independently, making the animation process more flexible and efficient.
Step 5: Final Organisation
I ensured that all layers and symbols were clearly named and arranged properly in the timeline. This organized structure makes the project easier to navigate, edit, and animate in later stages.
Exercise 02: The Motion
This exercise helped me understand how nested animations work and how animating within a symbol's own timeline can make the animation process more flexible and efficient. I also learned that even very subtle movements, such as slightly scaling a character up and down, can make it appear more lifelike and engaging. In addition, I discovered the importance of easing in animation. Applying ease settings made the movement feel smoother and more natural, whereas the animation appeared stiff and mechanical without it. Overall, this exercise improved my understanding of animation principles and how small details can greatly enhance the final result.
Week 01 - Week 14
Aina Ahmed Aleem | 0355701
Advanced Interactive Design | Mr Shamsul
EXERCISES
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Feedback
4. Reflection
2. Instructions
3. Feedback
4. Reflection
LECTURES
INSTRUCTIONS
Exercise 01: Asset Creation – Smart Assistant Avatar
Deadline: 10 May
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. The "Symbol Rule": Select each part and convert it to a
Movie Clip Symbol (F8).
Design Concept
I chose to create a simple robot assistant with a clean, minimal visual style. The design relies on basic geometric shapes such as circles and rectangles to ensure clarity, readability, and a functional appearance suitable for digital interfaces.
Process
Step 1: Layer Organisation
I began by organising the artwork into separate layers for each movable element, including the head, body, right arm and left arm. This follows the animation workflow principle that every element intended for movement should be placed on its own layer, making future animation more efficient and easier to manage.
Step 2: Drawing with Object Drawing Mode
I enabled Object Drawing Mode to ensure that each shape remained separate and did not merge with other elements. This helped maintain a clean structure and made the artwork easier to edit and manage throughout the design process.
Step 3: Creating the Character
I used basic tools such as the Oval Tool and Rectangle Tool to construct the character. Each body part was drawn on its own layer to keep the file organized and to prepare the design for animation.
I used basic tools such as the Oval Tool and Rectangle Tool to construct the character. Each body part was drawn on its own layer to keep the file organized and to prepare the design for animation.
After completing the character, I converted each part into Movie Clip symbols using the F8 shortcut. This step allows every element to be animated independently, making the animation process more flexible and efficient.
I ensured that all layers and symbols were clearly named and arranged properly in the timeline. This organized structure makes the project easier to navigate, edit, and animate in later stages.
FINAL OUTCOME
Exercise 01: The Motion – Giving My Character Life
Deadline : 30 May
Process
Step 1: Converting to Symbol
After completing the character design, I selected all 19 layers and
used Ctrl + A to select
all the elements on the stage. I then went to
Modify → Convert to Symbol, named the symbol
"Robot", and set its
type to Graphic.
Converting the character into a symbol helped keep the project organised
and made it easier to animate the character as a single object.
Step 2: Entering the Nested Timeline
After converting the character into a symbol, I
double-clicked on the robot to enter the symbol's
internal timeline. The breadcrumb navigation at the
top changed to show
robot confirming that I was now working inside the
symbol rather than on the main stage. This allowed me
to animate the robot's individual movements while
keeping the main timeline organised and easy to
manage.
Step 3: Adding Keyframes
I added keyframes at frames 1, 20, and 40 to establish the beginning, middle, and end points of the animation loop. Frame 20 represented the robot's "inhale" movement, where I slightly increased its size to create the effect of gentle breathing. This helped make the character appear more alive and natural while remaining in an idle state.
I added keyframes at frames 1, 20, and 40 to establish the beginning, middle, and end points of the animation loop. Frame 20 represented the robot's "inhale" movement, where I slightly increased its size to create the effect of gentle breathing. This helped make the character appear more alive and natural while remaining in an idle state.
Step 4: Applying Classic Tweens
To create smooth movement between the keyframes, I right-clicked on the timeline spans between Frames 1 and 20, and Frames 20 and 40, then selected Create Classic Tween. The timeline changed to purple with arrows, indicating that the tween was successfully applied. This allowed Adobe Animate to automatically generate the in-between frames, creating a smooth breathing animation for the robot.
To create smooth movement between the keyframes, I right-clicked on the timeline spans between Frames 1 and 20, and Frames 20 and 40, then selected Create Classic Tween. The timeline changed to purple with arrows, indicating that the tween was successfully applied. This allowed Adobe Animate to automatically generate the in-between frames, creating a smooth breathing animation for the robot.
Step 5: Adding Easing and Looping
To make the animation feel smoother and more natural, I applied Classic Ease In/Out through the Properties panel. This allowed the robot's movement to gradually accelerate and decelerate, creating a more realistic breathing effect. I also ensured that Loop was selected so the idle animation would play continuously without stopping, resulting in a seamless and repetitive motion.
To make the animation feel smoother and more natural, I applied Classic Ease In/Out through the Properties panel. This allowed the robot's movement to gradually accelerate and decelerate, creating a more realistic breathing effect. I also ensured that Loop was selected so the idle animation would play continuously without stopping, resulting in a seamless and repetitive motion.
REFLECTION
Exercise 01: Asset Creation – Smart Assistant Avatar
Through this exercise, I learned the importance of organising layers properly when preparing assets for animation. At first, converting objects into Movie Clip symbols was challenging, but it became easier as I gained more practice. I also learned how Object Drawing Mode helps keep shapes separate and organised, making the editing process more efficient. Overall, this exercise gave me a strong understanding of the asset creation workflow in Adobe Animate and prepared me for future animation tasks.
Through this exercise, I learned the importance of organising layers properly when preparing assets for animation. At first, converting objects into Movie Clip symbols was challenging, but it became easier as I gained more practice. I also learned how Object Drawing Mode helps keep shapes separate and organised, making the editing process more efficient. Overall, this exercise gave me a strong understanding of the asset creation workflow in Adobe Animate and prepared me for future animation tasks.
Exercise 02: The Motion
This exercise helped me understand how nested animations work and how animating within a symbol's own timeline can make the animation process more flexible and efficient. I also learned that even very subtle movements, such as slightly scaling a character up and down, can make it appear more lifelike and engaging. In addition, I discovered the importance of easing in animation. Applying ease settings made the movement feel smoother and more natural, whereas the animation appeared stiff and mechanical without it. Overall, this exercise improved my understanding of animation principles and how small details can greatly enhance the final result.
Comments
Post a Comment