Advanced Interactive Design / Exercises

20.04.26 - ..26 (Week 1-4)

PAN RUINING (0378138)

ADVANCED INTERACTIVE DESIGN / Bachelor of Design (Honours) in Creative Media

EXERCISES

---

CONTENT LIST

· INSTRUCTION

· LECTURES

· EXERCISES

     EXERCISE 1 - ASSET CREATION

     EXERCISE 2

     EXERCISE 3

· FEEDBACK

· REFLECTION

---

INSTRUCTION

---

LECTURES

Week 2 - Adobe Animate Tutorial

This week, Mr. Shamsul introduced us to the usage and tools of Adobe Animate. He also guided us in drawing a beach ball, which helped us become familiar with how to use Adobe Animate to create shapes.

Fig 1.1 Screenshot of beach ball on An

After that, Mr. Shamsul gave us a vector image of a sailboat and asked us to trace it using Adobe Animate.

Fig 1.2 Screenshot of sailboat on An

Week 4 - Animate Tutorial

This week, we learned how to use Adobe Animate to create simple animations.

First, we created a simple bouncing ball animation. Mr. Shamsul taught us how to add keyframes and use create shape tween.

Fig 1.3 Screenshot of bouncing ball on An

Next, Mr. Shamsul taught us how to draw a spider and how to create an animation for it.

Fig 1.4 Screenshot of spider on An

---

EXERCISES

Google Drive: Click here

Exercise 1 - 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.

Process:

I really like the Tamagotchi character “Paintotchi,” especially the upside-down paint on its head.

Fig 2.1 Reference image

The paint on its head reminded me of a bee’s antennae, so I used a bee as the base to design my own character.

Fig 2.2 Character draft on Procreate

Next, I drew the character in Adobe Animate based on my sketch and separated its different parts into multiple layers.

Fig 2.3 Screenshot of character on An

FINAL OUTCOME

Fig 3.1 Final outcome

---

Exercise 2 - 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.

Process:

I selected all the layers of the character, grouped them, and then converted them into a symbol.

Next, I double-clicked the character and created separate layers for the wings and eyes that needed changes inside the movie clip. Then, I created the animation on the timeline. 

In addition, I added easing effects to the tween animation to make the movement look less mechanical and smoother.

Fig 4.1 Screenshot of motion on An

FINAL OUTCOME

Fig 4.2 Final outcome

---

FEEDBACK

WEEK 4: Mr. Shamsul said that my character design was fine and suggested that I could animate the bee’s wings in the next step.

WEEK 5: No feedback.

---

REFLECTION