Advanced Interactive Design - Exercises

Week 1 - Week ... (23/06/25 - .....)
Felice Jolin (0373636)
Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media 
Task - 1 Proposal

---

TABLE OF CONTENT

Instruction

Lectures

Task

Feedback 

Reflection

---

INSTRUCTION

 

back to top

---

LECTURES

Week 1
During the first week, Mr.Shamsul briefed us about the task and project throughout the semester. He assigned us to think of a theme and topic for our website project. Mr.Shamsul also reminded us to download Adobe Animate to prepare for next week.  

Week 2
During offline class, Mr.Shamsul showed us tutorial to draw beach ball and boat in Adobe Animate. He introduce us with the common tools used for making the vector art. First of all, we can use shape like circle or rectangle then modify it with the selection tool. For the sailing boat, Mr.Shamsul gave us the reference picture. As there are many parts of the boat, Mr.Shamsul suggested us to draw each part in separate layers to easier manage the process. 

Fig 1.1 Drawing ball (Week 2, 30/04/26) 

 
Fig 1.2 Reference Image (Week 2, 30/04/26) 

Fig 1.3 Drawing Process (Week 2, 30/04/26) 

Fig 1.4 Final Work (Week 2, 30/04/26) 

Week 4

During offline class, Mr.Shamsul showed us tutorial to do simple circle animation and spider walking animation which will be our exercise too in class. 

To make animation, we should remember to insert keyframe.

Afterward, right click on the timeline and create shape tween. (This is applicable for shape). 

Howeer, for symbol, we could use create classic tween. 

In order to make the animation smooth, click on the timeline and in the property (frame) pannel, click effect (ease in / ease out)

 

Fig 2.1 Circle Animation (Week 4, 14/05/26)  

 

Fig 2.2 Circle Animation (Week 4, 14/05/26)  

 

For the spider, first I draw all the body parts
Select all - modify - convert to symbol - movie clip - put in the centre
Right click on character - distribute to layers

 

Fig 2.3 Spider Animation (Week 4, 14/05/26)  
 

 

Fig 2.4 Spider Animation (Week 4, 14/05/26)  

Week 5

During offline class, Mr.Shamsul showed us tutorial to do simple text animation and masking.

 

Fig 2.5 Text Animation (Week 5, 21/05/26)  

back to top

---

TASK

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. 
• The "Symbol Rule": Select each part and convert it to a Movie Clip Symbol (F8).

First, I begin to look for inspiration in Pinterest. I am planning to go with animals theme. Then I have options of duck, penguin and avocado. 

 

Fig 2.1 Reference (Week 2, 30/04/26) 

After gathering some character, I decided to go with avocado. However, to make it more fun, I will draw the hands and leg, then the chacracter will be hearing music from headphone. I name this character Avron I started off with the sketch.

 

 

 

Fig 2.2 Sketches (Week 2, 30/04/26) 

Next I pick the colors green and brown suitable for my character. 

Fig 2.3 Color Palette (Week 2, 30/04/26) 

Moving on, I started to draw the character in Adobe Animate. I used shape tool and selection tool to modify the shapes. Below is the progress, however one of the progress where shot by my phone as I forgot to screenshoot from my laptop. 

 

I started with the body, hands and legs. I also made option for the hair/stem (1 or 3). However, I just stick to 1 as it is more relevant to the real fruit. For the eyes I made 2 options of the smiley face then I add the nose with oval shape. Not to forget, I made the headset into 2 color tone to add colors. 

 

 Fig 2.4 Progress (Week 2, 30/04/26) 

 

 

Fig 2.5 Progress (Week 3, 05/05/26) 

 

From the progress above, I feel that I will just eliminate the nose and change it with mouth. I also decided to add the music icon to show the flow of the melody. Moving on, I makesure all the character parts is in separate and clear layer. Then I convert it into movie clip (F8) and distibute to layers.

 

Google Drive Link

 

Fig 2.6 Final Work (Week 3, 07/05/26) 

Exercise 2: The Mtion

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. 

From the character file, 1 After modifing the character into movie clip in the previous exercise, now I can double click on it to enter the nested layer for animation editing. 

To begin, I would like to make the dancing movement. I do it per 10 frames. The first frame has the left hand below and right hand above. The second frame is vice verca, left hand above and right hand below but ina dition with stomping right leg. I repeat this order until 40 frames.

 Fig 2.7 Hand Animation (Week 4, 15/05/26) 

 

  Fig 2.8 Hand Animation (Week 4, 15/05/26) 

To make the animation flow, I add classic tween between keyframes. Inddition, I also apply easing so the movement feels smooth. For the hands, I apply just ease quad ease-out because if I apply both in and out it bounce back too fast. 

 Fig 2.9 Easing (Week 4, 15/05/26)

 

 Fig 2.10 Easing (Week 4, 15/05/26)

 

However, for the leg animation, I do it per 5 frames. I tried with both quad ease-in and quad ease-out and turns out it is quite smooth. So I proceed with it for the right leg. 

  Fig 2.11 Easing (Week 4, 15/05/26)

 

 

   Fig 2.12 Easing (Week 4, 15/05/26)

In addition, as to show the character is happy, he is blusing and I would like to animate the blush slightly up and down. 

Fig 2.13 Blush Animation (Week 4, 15/05/26)

 

 Fig 2.14 Blush Animation (Week 4, 15/05/26)

After satisfied witht he body parts animation, I would like to make the melody as if flowing out from the headset. The melody on the left side starts from the first up to 25th frame. While the melody on the right side starts from 10th to the 40th frame. Then I also added quad ease-out for smoother effects.

Fig 2.15 Melody Animation (Week 5, 20/05/26)

 

Fig 2.16 Melody Animation (Week 5, 20/05/26)

 

 

Google Drive Link

Fig 2.17 Final Animation (Week 5, 27/05/26)

back to top 

---

FEEDBACK

Week 2
I propose 3 ideas for the website design. 1.Molly (Popmart) and I will be sharing about the history, evolution and collaborations. 2. Southern Xinjiang and I will be sharing about the hiden spots. 3. The 7 wonders of the world and I will be sharing about the history of each places. Mr. Shamsul liked the idea 2 and 3 and told me to proceed with either of that. 

Week 4
I have made the character Avron and had consultation with Mr.Shamsul. As I mentioned that I have convert each layers into movie clip, Mr.Shamsul helped me to resolve the issue by cut and paste it into one single layer and convert it again into movie clip, then distribute to layers in order to see all the previous layer. Overall he said that my work is good and I can proceed.  

back to top 

---

REFLECTION 

back to top