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

3. Feedback


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.




After completing all the shapes, I used the “Distribute to Layers” function to organise each element into separate layers for a cleaner and more structured workflow.


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.


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.



Class Tutorials 






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