Advanced Interactive Design - Exercises

Week 1 - Week 8 (23/06/25 -11/06/26))
Felice Jolin (0373636)
Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media 
Exercises

---

TABLE OF CONTENT

Instruction

Lectures

Task

Feedback 

Reflection

---

INSTRUCTION

 
Module Information Booklet

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. The text will be sliding from the left to right and fades. Then he also taught us to make a box animation and help us to do a masking.

 

The sentence will be 'Welcome to my website'. 
Start with typing 'welcome' in the centre as the first keypoint. Then convert it into graphic symbol.  
Next, add a keyframe in frame 15. 
The keyframe in frame 0, slide the text slightly to the left. (Properties - object - color effect - alpha 0%)
In between the keyframes, add classic tween and quad ease out effect. 

Let the text pause for 15 frames until frame 30 (put keyframe here).

Next on frame 45 add another keyframe and slide the text slighly to the right. (this keyframe apply color alpha 0%)

In between frame add classic tween and quad ease out effect. 
*Apply this to the rest words.

 

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

 

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

 

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

Next is to do masking. 
Firstly make box or rectangle with only stroke, the size should be slightly bigger than the word "website" as it is the last word appear. 

Next, click the rectangle on each side and separate by break apart (control b)
After breaking, then individually group each side of the line (There will be 4 grouped lines, can name it left, right, top, and bottom)

Next, select all lines - right click - distribute into different layers.

 

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

Next step is to animate each line. 
Start with the left stroke, add keyframe 15 frame ahead. 
Move back 15 frame before - click the left stroke - ungroup the line - deleted the stroke leaving short line on top.
In between keyframe, add motion tween. (gives effect of moving down line)

*Apply this to the rest line. 

 

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

 

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

 

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

 

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

 

After 10 frames, I add the word 'enter'.

Convert the text into graphic 

The animation will be the word 'enter' slide up into the box. 

Add new layer to do masking. Draw box as big as the outline box. 

Right click the rectangle layer - mask (The word 'enter' will be masked/dissapear)

Add classic ease effect 

 

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

 

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

  

Fig 3.10 Text Animation Video Preview (Week 5, 21/05/26)

Week 6

Today we had online class on making button proceed to next page. 

 

Firstly, make new layer 'button'

Add blank keyframe after the 'enter' frame ands.

Copy and paste in place previous enter button/left-right-top-bottom stroke to this layer.

Convert into button symbol.

 

Fig 4.1 Button Animation (Week 6, 28/05/26)

 

Since the enter button texbox is only outline, it will not be responsive when we click on the space. Therefore, we double click the button layer, add new keyframes, change the text colour and add a square inside the line when hovering. 

 

 
Fig 4.2 Button Animation (Week 6, 28/05/26)

 

Moving on, I add new layer called 'action'. 

Add blank keyframe on the same frame as the button.  

Press F9 and add action. 

Add using wizard - stop - this timeline - with this frame. 

 

Add new keyframe next to it. (On properties name label as 'start', this is where the page turn into when click the button)

Add action code F9 - add using wizzrd - go to frame label and play - this timeline - On mouse click. 

 

Add stop action code at the end of the keyframe.

 

Fig 4.3 Button Animation (Week 6, 28/05/26)

 

Now, we add a background image in the background layer 1 frame after the button is placed, then we insert new layers for each button that we will make. For the first layer named "home" we add a logo in text, convert it to graphic and animate like previous tutorial by using Ease-out Effect and make the alpha to be 0 as the appear and disappearing animation effect. 

 

Next, provide image with navigation bar, so when we click the 'ENTER' button, it refer to this page. 

 

One frame after the button frame, add background image keyframe in new layer. 

Add 'logo' layer - convert to graphic

Add 'about' layer - convert to button

Add 'news' layer - convert to button

Add 'services' layer - convert to button 

Add 'contact' layer - convert to button

Animate the logo, about, news, services, and contact text as the method previously 'Welcome to my website'

Fig 4.4 Button Animation (Week 6, 28/05/26)

 

Fig 4.5 Button Animation Preview Video (Week 6, 28/05/26)

Week 7

Exercise to make navigation bar button work. Mr.Shamsul gave us his file practice the button tutorial. 

 

First, change the text into a button symbol (F8)

Add a label name for each page at the begining of the keyframe.

Next, add action code for the buttons (F9)  

When keyframe is ending in one page, add another keyframe (add stop action code)

Fig 5.1 Navigation Button Animation (Week 7, 04/06/26)

Fig 5.2 Navigation Button Animation Preview Vidoe (Week 7, 04/06/26)

 

Week 8

Today Mr. Shamsul also gave us tutorial on how to make a carousel animation. 

 

First, find 4 pictures with same size 

Create file size 1280 x 720px.
Import image to library.

Drag and drop image to canvas.

Adjust image size to canvas size. 

Place image beside each other on right side, then allign all to top 

Don't leave gap in between images.

Select all 4 images, convert into movie clip and name it 'mc_img'.

Name layer as img 

 

Fig 6.1 Carousel Animation X Axis (Week 8, 11/06/26)

 

 

Make new layer, name as 'nav'

Create button in this layer.

Draw rectangle and add text. 

Select the rectangle and text - convert to button symbol - name btn_img01.

Copy until 4 button. 

 

*Because I copy the button, i have to right click the new button - duplicate symbol - name 'btn_img02'

Apply this to the other 2 buttons

 

Next, I need to download a file from GSAP.

Press F9 - global - include - + - add a file -  (find the GSAP java script file, go to minified - gsap.min.js) 

 

Fig 6.2 Carousel Animation X Axis (Week 8, 11/06/26)

 

Next add a new layer 'action' and add the code: gsap.to(this.mc_img, {x: -1280, duration: 1 });
X point, is based on the x position when the last image is placed in the artboard. 

 

Fig 6.3 Carousel Animation X Axis (Week 8, 11/06/26)

 

 If we stop here, it will just be infinite scrolling to the left. 

 

Fig 6.4 Carousel Animation X Axis (Week 8, 11/06/26)

 

For the button work, we need to code another action. 

Click F9

Click < > - HTML5 Canvas - Event Handlers - Click button - Mouse Click Event

 

You will be given a code, change the instance name same as the image. 
Then add this code - gsap.to(this.mc_img, {x: -1280, duration: 1 }); 

 

*Duplicate the code for the 4 images based on the instance name and x position. 

 

 

  Fig 6.5 Carousel Button Animation (Week 8, 11/06/26)

 

Fig 6.6 Carousel Button Animation (Week 8, 11/06/26)

Today we had the 2 tutorial. The second one we should make the carousel moving in Y axis. 

 

First, make file size 1280x720

 

Draw 4 rectangle of that size with different colors

Add line, circle and text for timeline design. 

Select all elements - convert into movie clip - 'mc_img' 

*These are in one layer 'images'

 

Fig 6.7 Carousel Animation Y Axis (Week 8, 11/06/26)

Add new layer 'nav' 

Draw button 

Convert to button symbol

Fig 6.8 Carousel Animation Y Axis (Week 8, 11/06/26)

 

Next step is to put the javascript file like before.

Then add new layer 'action'

Add code then added a code on the action layer, 

 

Click F9

Click < > - HTML5 Canvas - Event Handlers - Click button - Mouse Click Event

 

You will be given a code, change the instance name same as the image. 
Then add this code - gsap.to(this.mc_img, {y:1440, duration: 1 }); 

 

*Duplicate the code for the 4 images based on the instance name and y position. 

y point, is based on the y position when the image is placed in the artboard.  

y position because this carousel is moving downward. 

 

Fig 6.9 Carousel Animation Y Axis (Week 8, 11/06/26)

 

Fig 6.10 Carousel Animation Y Axis (Week 8, 11/06/26)

Week 9

Today Mr.Shamsul showed us how to link separate file page into one. He suggested us to make each page in different file. Then apply code to link them all, where all the pages can be open with only one tab. Mr.Shamsul provide us zip flder with all the 5 pages files and did the turorial in class. 

 

To link all the pages, we need to add action code. 

 

Start in the index page. Below is the way to link home page to about page.

• F9 (action)
• Add using wizard
• Go to web page *change into 'about.html' and '_parent'
• Next
• On mouse click
• btn_about
• Finish and add 

 

Fig 7.1 Linking Page (Week 9, 18/06/26)

 

*repeat above steps to link home page to other pages and change name accordingly. (e.g. 'news.html' and '_parent'.

Fig 7.2 Linking Page (Week 9, 18/06/26)

 

Now all the navigation buttons on the home page can work already. Each button can direct you to the intended page. However on other page than home page, the button is not working yet. In order to make all the navigation work in all pages, repeat the steps above to add action code in the other 4 files.

 

 

  Fig 7.3 About Page (Week 9, 18/06/26)

 

Fig 7.4 News Page (Week 9, 18/06/26)

 

Fig 7.5 Services Page (Week 9, 18/06/26)

 

Fig 7.6 Contact Page (Week 9, 18/06/26)

 

Fig 7.7 Linking Page (Week 9, 18/06/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)

Exercise 3: Action Button 

We were required to make a button and makesure our character move in action. 

A moving on to the 3rd exercise, I think it will feel to much if I add more animations to my character. Therefore I change the idle position into waving hand and when the button is clicked, the character will dance (hand opposite movement & leg stomping movement) and the melody comes out. 

First I extend the frame from 40 into 80. Then I will only animate the right hand for the idle position. I also insert classic tween and add Quad Ease Out for each keyframe.

Fig 3.1 Hand Animation (Week 7, 04/06/26)

Then after frame 40, I prepare for the action. I animate both hands and legs, and add classic tween. For the hands, I add Quad ease out. While for the legs, I add simultaneously quad ease out and quad ease in. In addition, I also add the music animation towards the end with quad ease out.

Fig 3.2 Hand Animation (Week 7, 04/06/26)

 

Fig 3.3 Leg Animation (Week 7, 04/06/26)

 Fig 3.4 Music Animation (Week 7, 04/06/26)

 

The next step is fr the button to work.  
 

Add a new layer 'action' On frame 39, where the idle position stop, insert blank keyframe and add action code (F9).   
Add using wizard -  go to frame and play - this timeline - frame (1) - with this frame.   
On frame 40, add a label name on top right corner, name as 'on'.   

At the last keyframe of the animation, add 1 keyframe on 'action' layer.  
Add action code like in frame 39. 
*so animation will return to idle positon/frame 1

 Fig 3.5 Action Code in Nested Layer (Week 7, 04/06/26)

As the previous steps are all done in the nested layer, now go to the 'Scene 1' layer.

Add new layer 'button' 
Draw circle shape and add 'ON' text. 
Select both elemetns - convert into button - btnOn
Press v (selection tool) - double click on the button to get into nested layer (create hover effect here)
*The original button is green color and while hover it will turn into brown. 

Fig 3.6 Button up (Week 7, 04/06/26)

 

Fig 3.7 Button hover (Week 7, 04/06/26)

 

Next,  I add new layer 'action' 

Rick click - action - type in this code: 
var root = this; root.btnOn.addEventListener("click", function() {   root.mcAvatar.gotoAndPlay("on"); });

 

Fig 3.8 Button Action Code (Week 7, 04/06/26)

After some animations, I feel that the background looks too plain, therefore I search for stage-like background. The image I found were blue color, the image suit my character already but the color doesn't. So I decided to edit the color into green.  

Fig 3.9 Background before edit (Week 8, 11/06/26)

 

 Fig 3.10 Background after edit (Week 8, 11/06/26)

 

 Fig 3.11 Final (Week 8, 12/06/26)

 

 Final Outcome

 

Fig 3.12 Final Outcome (Week 8, 12/06/26)

Netlify link: exercise3felice.netlify.app

Drive Link: https://drive.google.com/drive/folders/1FDLE-TRci5ZhsDAXCnB6mbTgQK0JwOcz?usp=sharing

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.  

Week 5
The idle position is ok, can proceed. 

Week 6
Online class, button tutorial.

Week 7  
Initially, after the idle position, I add more hands and legs animation for the character. However, Mr.Shamsul mentioned that I can just swap the idle animation and the action. Necause right now the idle looks too much movement than the action. 

Week 8
After refinement I can proceed to upload to netlify and submit.  

back to top 

---

REFLECTION 

back to top