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

Week 8

             In Week 8, first we had to go on Unsplash to find 4 images; once our images were found, 

             we then had to import it to Adobe XD. Our task this week was to have the action go to 

             each specific image. 

Figure 5.1 Process in Adobe XD (Horizontal)

Figure 5.2 Process in Adobe XD (Vertical)

Figure 5.3 Codes

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

             Exercise 3 : Idle State

             ・Requirements : 

                     1. Upload the file to netlify; In order to make it work, you need to remane the html 

                     file as index.html (You know the drill). Upload the entire folder that contains the 

                     html file, js file and images folder. Please do not upload the .fla file to netlify.

                     2. You will also required to upload the .fla file into your Google Drive. Update your 

                     e-portfolio with all the processes.

                     3. Submit your e-portfolio link for submission.

             ・Process :

Figure 3.1 Added Blinking Animation for Idle State

             Since my animation only consisted of a jumping motion, I felt that it lacked movement 

             when the character was standing still, so to make the character appear more natural, I 

             decided to add a blinking animation as part of the idle state. 

Figure 3.2 Codes pt. 1

Figure 3.3 Codes pt. 2

Figure 3.4 Codes pt. 3

             ・Final Idle State :

Figure 3.5 Final Idle State Gif

           Link to Google Drive

           Link to Netlify