Advanced Interactive Design - Task 1 - Exercises

on
23/04/2026 - xx/xx/2026 (Week 1 - Week x)
Carren Yeliandi / 0376990
Advanced Interactive Design / Bachelor of Design (Hons.) in Creative Media
Task 1 - Exercises

TABLE OF CONTENTS






Lectures


Week 1 

Task briefing.

Week 2 

Introduction to Adobe Animate. We were tasked to replicate a boat drawing in AA. 


Week 3 

No class

Week 4 

We were taught how to use shape tween and classic tween. After that we were taught how to make symbols and utilize movie clip (nested animations) and graphics. We were tasked to make a spider moving across the screen with moving legs.


Week 5 

We were taught the difference between movie clips and graphics. After that, we were taught how to make animated website. Here, he only showed us halfway and asked us to complete the other half ourselves in which the 5 fastest student to finish will gain an extra marks which strengthen my resolves to do it as fast as possible and I managed to get it. 


Week 6 

We were taught about buttons and how to add actions. For the button, we were told to pull out our motion fla file and use that to do this exercise. Using half of the motion I made (fixing his glasses), I made that as the triggered or button motion and the idle animation is a very subtle breathing animation where only his shoulder is moving.


Using action, we made it so that the animation stopped at one frame before the button motion. Another action was added at the button motion to go back to the idle once it's done. The last action added was at the button outside of the movie clip where an action layer is added (crucial) and an action is added where if the button is click, the button motion will be triggered. Refer to Exercise 3 for the next steps.

The next exercise involves the website we made in week 5, using actions and buttons we made it so that it stops at the last frame and as the user click the button they'll be leaded to another page which is our homepage.

Week 7 

We were given a file and was tasked to make the buttons functional using what we learned from the previous week. We were then asked to show progress regarding the project proposal where I was tasked to complete the wireframes and make the color palette more clear as well as ensure that the mood board are consistent in terms of style.




Instructions


<iframe src="https://drive.google.com/file/d/1DAq9buijvP-O-nhm5epKKJpmGJmqSJ4F/preview" width="640" height="480"></iframe>

Submission :


Exercise 1 - Asset Creation 

We were asked to make some sketches for a functional "Smart Assistant" avatar or UI widget to be created using vector tools in Adobe Animate. I made some sketches based on ducks, carrots and bunnies and went ahead to ask for his opinion and approval to which he specifically chose the duck butler that I had sketched out. 

Fig 1-2. Left = With Drawing Mode ; Right = Without Drawing Mode

Using Adobe Animate, I started on my character creation. At first, I accidentally drew one without object drawing mode (which would make the shape not 'whole') however when I tried it again the same way I did it on the one without the mode on the one with the mode, I found that the add anchor tool doesn't work. So I had to use the rectangle shape and shape it the way I wanted using the selection tool.


Fig 3. Duck face

I then proceeded to use the rectangle and oval tool to make the face. With the help of direct selection tool, the selection tool and free transform tool, I managed to make the face seen on figure 3. 

Fig 4. Butler outfit reference

Using the same tools, I proceeded to make the vest, white shirt, collars and bow as well as the arms and legs. I separated all of those into multiple layer and multiple parts in each layer in order to be animated later on. For example, the leg layer has 6 parts, the left and right thigh, calf and shoes. The one of the arms is made up of the upper arm, forearm, elbow, the hand + thumb.

Fig 5-6. Duck reference & Final Duck Face

After I was done, I felt a bit weird with face so I went ahead and did some research only to find out that a duck head has a dent near the cheekbone and the beak is more of a straw hat shape rather than a beanie shape. I went ahead and fix that and I was done with my creation "Buck the Duck Butler".
Exercise 2 - Motion 

Continuing on from last week, we proceeded to make the idle animation for our character. I knew that I wanted to make my character do feet tapping and fixing his glasses movement which I thought would need something like rigging as when I tried it with classic tween it didn't go so well as the rotation was a bit wonky due to the arms being 3 separate parts. 

I did a little search on arms and legs movement and found something called the bone tool which would require me to combine both upper arms and forearms into one shape. to make the shoulder somewhat static, later on I used another shape just to make the shoulder area. I then proceeded to use the bone tool which proved to be easier to use and play with than I expected. 


I added up and down movement on the vest to mimic breathing and used classic tween along with quad ease in/out to smoothen the animation.


Using the exported video above, I asked Mr. Shamsul for feedback, in which he replied to make it simpler as idle animations are usually simple. So I suggested to only use one part of the animation which is the feet tapping and he agreed so I fixed the animations slightly and removed the glasses animation to make my final idle motion.




Exercise 3 - Triggered Motion 

From Week 6 Tutorial, we were to complete the idle animation and the animation triggered by the button. Uploading the files to netlify as our submission. At first I just renamed the all the files (html, js and atlas) as index however it didn't appear when I tried it on Netlify. As it turns out, you need to rename your output name as "index" inside animate in order for it to work.



Netlify Link



Feedbacks

Week 1 :
xxx

Comments

Post a Comment