Advanced Interactive Design | Exercise 1: Asset Creation

23/4/26 - 13/5/26 (Week 1 - Week 4)

Kimberly Miaw Jya Nee | 0366836

Bachelor of Design (Honours) in Creative Media | Taylor's University

Advanced Interactive Design

Exercise 1: Asset Creation (10%)

---

Table of Contents

1. Lectures

2. Instructions

3. Exercise

4. Feedback

5. Reflection

6. Quick Links

---

Lectures

Week 2 Classwork

During the tutorial session, Mr. Shamsul introduced us to the basics of using Adobe Animate. We started by drawing a beach ball to familiarize ourselves with the tools and functions of the software.

Fig. 1. Beach Ball Shading & Colouring Exercise (Adobe Animate)

After completing the beach ball tutorial, we were asked to recreate an image of a sailboat by ourselves while following its exact details as closely as possible.

Fig 2. Sail Ship Reference Image

I continued tracing the sailboat for the rest of the class. By then, I had started getting used to the shape and drawing tools. Although it is slightly different from using Illustrator, it became quite easy once I got familiar with the shortcuts and tools.

Fig. 3. Sail Ship Drawing & Shading Exercise (Adobe Animate)

Week 4 Classwork 

This week, Mr Shamsul taught us how to animate our drawings in Adobe Animate.

Fig. 4. Animation Exercise (Adobe Animate)

After that, we tried animating a spider on our own using the methods that sir had taught us earlier in class.

Fig. 5. Process of Animating a Spider (Adobe Animate)

Basic Animation Steps

1. Select the first keyframe and insert the object
2. Move to frame 15, insert a new keyframe, then make the necessary changes to the object

Disable Auto Keyframe

• Click the 4-line menu on the timeline panel
• Select Customize Timeline Tools
• Disable Auto Keyframe

Importing an Illustrator (AI) File

1. Go to Import to Library
2. Select Import to Stage
3. Choose Single Animation Layer
4. Press Q to resize the object

Converting Graphics into Symbols

1. Convert the graphic into a symbol
2. Select Classic Tween for the animation process
3. Double-click the graphic to enter the symbol
4. Since the elements are grouped together: Right-click and select Distribute to Layers

• Add a keyframe to the selected layer
• Add regular frames for unanimated elements
• Additional NotesTasks 2 and 3 use the same file
• Convert the object into a Movie Clip

---

Instructions

---

Exercise

Objective: 

Design a functional "Smart Assistant" avatar or UI widget using vector tools.

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.

Ideation

I decided to create a bug avatar inspired by the term “software bug.” After exploring different types of bugs I could design, I chose to create a firefly avatar

Fig. 6. Inspiration & References from Pinterest

Sketch

I started sketching the avatar on Procreate and created two style variations of the firefly character. One version had a more rounded appearance, while the other featured a boxier style.

Fig. 7. Smart Assistant Avatar Initial Sketch - Firefly

During Week 4 class, I showed my sketch to Mr. Shamsul. He approved the concept and advised me to proceed with it. He also suggested that I adjust the firefly’s wings to be more spread out to make the pose look more dynamic.

Fig. 8. Smart Assistant Avatar Final Sketch - Firefly

Digitisation

Fig. 9. Animating Firefly Smart Assistant Avatar in Adobe Animate

Fig. 10. Animating Firefly Smart Assistant Avatar in Adobe Animate

Using the same method I learned in class, I converted the graphics into symbols and distributed them into different layers. I also renamed each layer so it was easier for me to locate specific body parts and manage the animation process later on.

Fig. 11. Distributed to Layers & Renaming Each Layers 

The Motion

Next part of the exercise is to animate our character.

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.

Fig. 12. Animating Firefly Avatar 

Google Drive:

https://drive.google.com/drive/folders/12iO6kCCiCTQdHmxrskN56Lr9cigmi7Yf?usp=sharing

---

Feedback

Week 1 (23/4/26)

General Feedback:

Module and tasks briefing. Mr. Shamsul showed us examples of senior work to give us an idea of the expected outcome for the module.

Specific Feedback:

Mr. Shamsul advised us to start thinking about and exploring possible topics for our website project.

Week 2 (30/4/26)

General Feedback: 

This week, we learnt how to use Adobe Animate, and we started out by drawing out a beach ball guided by Mr Shamsul. Then, we had to trace an image of a sail ship to try on our own.

Specific Feedback:

Week 3 (7/5/26)

General Feedback:

[No class this week]

Specific Feedback:

This week, I continued finishing up my sailboat drawing exercise and also started sketching my idea for the Smart Assistant Avatar.

Week 4 (14/5/26)

General Feedback:

Mr Shamsul gave us a tutorial on how to animate in Adobe Animate. We did a spider exercise on our own.

Specific Feedback:

I also got my Smart Assistant Avatar sketch approved and began digitalising it in Animate. 

Week 5 (21/5/26)

General Feedback:

spider animation + smart assistant avatar

Specific Feedback:

Week 6 (28/5/26)

General Feedback:

[Online Class] Adding button, 

Specific Feedback:

---

Reflection

Experience

Observation

Findings

---

Quick Links

Advanced Interactive Design: Exercise 2

Advanced Interactive Design: Exercise 3

Advanced Interactive Design: Exercise 4

Advanced Interactive Design: Task 1

Advanced Interactive Design: Task 2

Advanced Interactive Design: Final Compilation & Reflection

Thank You