Advanced Interactive Design - Exercises
20/04/2026 - 28/05/2026 (Week 1 - Week 6)
Anggia Tsani Rachmadiyanti, (0368487)
Advanced Interactive Design DST60804 / Bachelor in Design (Hons) in Creative Media / Taylor's University
Advanced Interactive Design DST60804 / Bachelor in Design (Hons) in Creative Media / Taylor's University
Exercises 1,2,3
CONTENT LIST
- Instructions & Brief
- Lecture notes
- Exercises
- Exercise 1 - Character making on Animate
- Exercise 2 - Idle state animation
- Exercise 3 - Button & Movement
- Feedbacks
- Overall Reflection
Module Brief:
(Fig 1.) - Module brief, PDF
Lecture Notes
Week 1: Briefing and Intro
- Mr Shamsul briefed us about the module and what we will be doing this semester
- He then gave example for the good thematic website ideas from fwa.awards.com.
- This week we have to start installing adobe animate and find a topic and ideas for the Task 1 Proposal.
- In class, we had to start on our first task which was choosing a topic to do for our website later on
- Inspiration websites: https://thefwa.com/
- I further read and checked this webiste sir recommended us to go to: https://lawsofux.com/
Week 2: Class Exercise & Intro to Animate exercise
- Mr Shamsul introduced us how to start using Adobe Animate & the tools
- On animate we only use HTML5 Canvas file
- Choose web preset > Choose very high resolution
- 30 frames per second. The more, the more detailed but file size is bigger
- When you publish the website, the software will automatically save the html and javascript file too.
- Always look at properties panel when drawing
- Always use drawing mode
- In class, we did a full exercise on Adobe Animate to draw a beach ball and sailboat, to first get used to the software.
- We learnt tools such as: Break apart, to divide parts and fill colours.
(Fig 2.) - screenshot of Class exercise on Animate, beach
ball
(Fig 3.) - Screenshot of Class exercise on Animate, sailboat
Week 3-4: Class Exercise - Animating
- Right click in between frames to create shape tween (dont need to convert to symbol)
- Uncheck auto keyframe
- Shape tween & Classic tween
- Class Notes:
- Shape tween > if you dont want to convert something from a symbol
- Align to stage > check align to stage
- When putting animation on an object, object need to be in one layer
- Click on sec 15 and click “Insert keyframe”
- Dont double click the object
- Reshape in the sec 15 frame
- Copy the original shape
- Click Insert blank keyframe and > Edit > place in place
- Black dots are keyframes
- Grey colour is the frame
- Blank keyframe needed when you want to make an action happen
- Right click on the grey frames, and click Create shape tween
- Ease In for smoother animation
- Shape tween is disabled for symbols
- Exercise: deforming a ball & animating spider:
(Fig 4.) - Screenshot of Class exercise on Animate, inflating ball
(Fig 5.) - Screenshot of Class exercise on Animate, spider movement
Week 5: Class Exercise
- Important:
- Graphic only work in Movie Clip symbol
- Insert classic tween at the beginning of the timelines frame
- Mask is always on top
- We have to ungroup all things to use shape tween.
- Easier to use movie clip instead of graphics
- In class, sir gave us a tutroial on making animated web openings with text, shape tween, classic tween, alpha fade, layers and masking too.
(Fig 6.) - Screenshot of Class exercise on Animate, text animation
(Fig 7.) - Screenshot of Class exercise on Animate, text animation, masking, animating box outline
Week 6: Class Exercise - Homepage & Hover
- In class, we did a practise on how to add hover states to a button symbol, where it leads to the homepage.
- Important: If you want to insert hover button, you need to add keyframe inside of the btn and enter double click.
- We learnt how to add Instance name, use Action property and wizard with the Javascript.
- In the button, we can edit the states: Up, Over, Down, Hit..
(Fig 8.) - Screenshot of week 6 Class exercise on hover buttons
(Fig 9.) - Screenshot of editing the hover buttons states
Exercise 1: Drawing a Character in Animate
Requirements:
We had to make any character we want on Animate, by using layers, and the drawing tools in Adobe Animate.
Progress...
I have gotten used to the pen tool, so I used mainly the pen tool
to draw my character. Before that, I sketched out my character. I
wanted it to look like a music student playing a guitar but also a
monster character. Inspired by monster inc.
After sketching, I put the sketch as my tracing layer and begin
starting making the character on Animate using the pen tool.
(Fig 10.) - Initial Digital Sketch of character
(Fig 11.) - Animate Pen tool process screenshot
I separated, named and label the layers for each parts of the
character, so that it will be easier to animate later on. Once
I was done, I selected each layer part and convert it to
Symbol > Movie Clip symbol.
(Fig 12.) - Animate process screenshot
Final exercise 1 outcome:
(Fig 13.) - Final Character Exercise 1
Exercise 1 Submission File Link:
Exercise 2: Moving the character (Idle State)
In week 4, I started making the layers to Symbols > Movie clip and played around with keyframes, animating some parts so that the character moves and looks like it is playing the guitar while stomping the feet. I used tweening animation for some parts, and left some without as it looks more better solid sometimes, eg: the feet stomping.
(Fig 14.) - Screenshot of doing idle state frames
Final exercise 2 outcome:
(Fig 15.) - GIF Final Ex. 2
Exercise 2 .fla File Link:
Exercise 3:
(Fig 16.) - Screenshot of ex. 3 progress (wizard action codes)
(Fig 17.) - extending keyframes/movements after button is pressed
(Fig 18.) - adding the hover button (on)
In week 6, I tried finishing on my task 3 where we had to add a play button to move our characters from our previous ideal state in exercise 2. This part was quite technical and hard, so there were many trial and errors I did especially on the codings.
Here, I started extending the keyframes and adding new movements form my idle state. I wanted the character playing the guiter to walk to the mic while also singing and opening his mouth when the ON button is clicked.
I fist had to made a new layer for the action and use Action > Wizard tool to make the button work
Sir said make sure the maximum layer is just 2, don't double click into a third sub layer.
(Fig 19.) - adding walking and mouth movements after button is pressed
(Fig 20.) - adding floor colour of the stage
Final exercise 3 outcome:
Here is my final screen record of how the final task 3 button plays and work, which will move my character:
(Fig 21.) - Final working button and moving character, exercise 3, MOV screen recording
Exercise 3 .fla File Link:
Feedbacks
Week 1:
General Feedback: Mr Shamsul introduced us to the module brief and what
we will be doing in this module this semester.
Week 2:
General Feedback: Mr Shamsul gave us an intro tutorial on drawing
and the tools on Adobe Animate. In class we did an
exercise on drawing a boat using Animate. And then he
briefed us our first exercise where we have to make a
character in Animate.
Specific Feedback: I told Mr Shamsul that my final chosen topic
for my task 1 project is on a beginners' guide
educational website about f1 for younger audiences.
He said it's a good idea, but i need to show him my
design style direction.
Week 3:
General Feedback: no class
Week 4:
General Feedback: Start making and animating the characters we are doing. Makesure it is not too simple, and can move in its still position with minor animations.
Specific Feedback: Sir said my character is good to go and I can start animating. He said to makesure the movement stomping of the foot is accurate. get some references.
Week 5:
General Feedback: We will start making the buttons next week. Sir tutored us on how to use masking, shape tween, and animating text
Specific Feedback: Sir said I need to start my project wireframe already and sketching my web flow. My exercise 2 animation is ok, exercise 3 start next week.
Week 6:
General Feedback: Try to finish exercise 3 with the character and button. Try to make it abit nice, not too simple. We should rewatch the online recording to get familiar with the instructions
Specific Feedback: Sir said my problem is that i have extra one sub layer. I should have all the character movements not in scene one but in the double click symbol avatar character layer to makesure it works. Once i was done, sir said it was good already to be submitted.
Reflections
Experience:
For this Advanced Interactive module, I completed three exercises using Adobe Animate to create character interactions and movements. Throughout the exercises, I learned how to use tween tools, keyframes, wizards, hover buttons, actions, and other animation functions to make movements more interactive and smooth. At first, I found the software very difficult and technical because there were many detailed steps needed just to create one simple movement. I spent almost one whole day trying to fix mistakes and understand what I did wrong. Even small errors could affect the whole animation process, which made the exercises challenging and time-consuming.
Observations:
While doing the exercises, I realised that Adobe Animate requires a lot of patience, precision, and understanding of timelines and layers. Every movement depends on proper keyframe placement and correct settings. I also noticed that interactive elements like buttons and actions need careful organisation to work properly. Although it was frustrating at times, I slowly became more familiar with the workflow and tools. Repeating the steps helped me understand how animations are built frame by frame and how interactive elements respond to user actions.
Findings:
From these exercises, I learned that animation and interaction design are more technical than I expected, but they are also very important skills for creating engaging digital experiences. Even though the process was difficult, I believe these exercises helped improve my problem-solving skills and understanding of motion design. I also realised that practice is very important when learning Adobe Animate, and over time I hope to become more confident using it. These exercises will be useful preparation for my next task, where I need to create an interactive website using Adobe Animate.
Comments
Post a Comment