Advanced Interactive Design - Exercises

23/04/26 - 00/00/26 (Week 1 - Week )
Andrea Choo Qin Hui (0366959)

Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media

Exercises

---

INSTRUCTIONS

---

CLASS EXERCISES

Week 2

             In the second week, to get used to the Adobe Animate, we were tasked to draw a ball 

             and trace an artwork of a boat.

Figure 1.1 Ball

Figure 1.2 Boat

Figure 1.3 Reference of the Boat

Week 4

             In week 4, we started to practice animation on Adobe Animate, at first it was kinda 

             hard to get used to the app, but eventually I got the hang of it. We were tasked to create 

             an animation of a spider. 

Figure 2.1 Process in Adobe Animate

Figure 2.2 Animation of Spider Gif

Week 5

             In Week 5, Mr. Shamsul started to teach us on how to make an animated web opening, 

             where we learnt how to mask objects, tween and so much more that I didn't know we 

             could do with Adobe Animate. 

Figure 3.1 Process in Adobe Animate

Figure 3.2 Animated Web Opening Gif

Week 6

EXERCISES

             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.

             ・References :

Figure 1.1 References for Asset Creation 

             ・Final Asset Creation :

Figure 1.2 Final Asset Creation 

           Link to Google Drive

             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 : 

                     1. Nested Animation : Double-click your main symbol to animate inside its own 

                     timeline.

                     2. The "Breathe" Effect : Use Classic Tweens to create a 40-frame loop.

                     3. Polishing : Apply Easing (Classic Ease In/Out) to the tweens so the movement 

                     feels organic and high-end, not mechanical.

             ・Process :

Figure 2.1 Animating Process in Adobe Animate 

Figure 2.2 Animating Process in Adobe Animate

             ・Final Motion :

Figure 2.3 Final Motion Gif

           Link to Google Drive