ADVANCED INTERACTIVE DESIGN: EXERCISES

 23/04/2026 - dd/mm/yyyy (Week 1 - Week 14)
Valerius Ethan Wirawan / 0372774
Advanced Interactive / Creative Media / The Design School
Exercises

---

TABLE OF CONTENT

1. Instruction
2. Process Work
3. Final Outcome
4. Feedback
5. Reflection

---

1. INSTRUCTION

Fig. 1.1. Module Information Booklet (MIB)

---

2. PROCESS WORK

WEEK 2: ADOBE ANIMATE INTRODUCTION

We were introduced to Adobe Animate during the briefing session. Mr. Shamsul emphasized multiple times that we should consistently use the “HTML5 Canvas” format throughout the semester. He also reminded us to enable Object Drawing Mode when creating shapes, as it allows the shapes to be treated as individual objects and provides additional features for editing.

We were being demonstrated a tutorial on how to create a simple beach ball using Adobe Animate.

Fig. 2.1. Drawing Beach Ball on Adobe Animate

He then provided us with a sailboat image on Microsoft Teams for practice. We were instructed to trace the image to help us familiarize ourselves with Adobe Animate.

Fig. 2.2. Drawing Sail Ship on Adobe Animate

At the end of the class he briefed us about exercise 1, to make a character for next week.

WEEK 3

For this exercise, we were assigned to design and create a functional “Smart Assistant” avatar or UI widget using vector drawing tools in Adobe Animate. The task required us to use tools such as the Pen Tool, Oval Tool, and Rectangle Tool while applying Object Drawing Mode to maintain clean and organized vector shapes. We were also required to follow the “Layer Rule,” where every movable element, including the eyes, arms, and glowing core, had to be separated into individually named layers. Through this exercise, I developed a better understanding of asset creation, layer management, and proper workflow preparation for animation projects.

Exercise 1: Asset Creation

WEEK 4: ANIMATING A CHARACTER IN ADOBE ANIMATE

First we trace an image of a spider all in a layer.

Then we select all of the asset and modify them into graphics. Inside the graphics we animate the legs to move.

Exit from the graphics, get back into the single graphic, move the whole spider from top to bottom right. Here is the outcome.

---

3. FINAL OUTCOME

 this is a lorem ipsum dummy text. 

---

4. FEEDBACK

Week 1
this is a lorem ipsum dummy text. 

---

5. REFLECTION

Observation
this is a lorem ipsum dummy text. 

Experience
this is a lorem ipsum dummy text. 

Findings

this is a lorem ipsum dummy text.