Advanced Interactive Design | Tutorials & Exercises
23/04/26 - /04/26 [ Week 1 - Week 14 ]
Nicco Chew Jin Xun (0366563)
Advanced Interactive Design | Bachelor of Design (Hons) In Creative Media | Taylor's University
Tutor: Mr. Shamsul
Table of contents
1. Instructions
3. Feedback
4. Reflection
Instructions
Project & Process Work
Google Drive Link:
Exercise 01: Asset Creation
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.
Before starting this asset creation, I searched for various
inspirations on Pinterest to explore and identify the style I
wanted to create.
After that, I came up with several character ideas and showed
them to Mr. Shamsul for selection. He chose Character No. 5,
which is a piggy, as he said it was very cute, and he also
selected Characters No. 2 and 3 which has potential.
Progress in Adobe Animate
During Week 4, the lecturer taught us how to transform
sketches into digital characters using Adobe Animate. We
learned how to use the Shape Tool and apply Object Drawing
Mode to keep shapes clean, organised, and easier to edit. I
referred back to the notes I recorded during Week 4 to guide
me throughout the exercise, which helped me work more
smoothly and understand the process better.
Finally, I completed the character by making some adjustments
to the details, adding shadows, and using gradient colours to
make the design look more visually appealing.
These are all the layers that have been properly
named.
Class Tutorials
Exercise 02: The Motion
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.
Reflection
Through this exercise, I gained a better understanding of the process of transforming sketches into digital characters. I learned how to use tools such as the Shape Tool, Object Drawing Mode, and Distribute to Layers to create a more organised workflow. Although some parts required attention to detail, the exercise helped improve my technical skills and understanding of character creation in Adobe Animate. I also learned the importance of refining details, adding shadows, and using gradient colours to enhance the overall design.






Comments
Post a Comment