Advanced Interactive Design / EXERCISES
.gif)
Daphne Lai Yu Cheng / 0366380
DST 60804 / Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylors' University
- Lectures
- Instructions
- Exercise 1: Asset Creation
- Exercise 2: The Motion
- Exercise 3
- Feedback
- Reflection
LECTURES
Week 1 (23/4/2026):
For our first week, Mr Shamsul introduced us to the module and the expected outcomes. He briefed us on the first task which is a thematic website proposal. We were to brainstorm and think of possible topics, it could be:
- A specific product of a particular brand launch/special (i.e.: Nike brand new shoe), Beauty product launch (i.e.: Sephora compact powder)
- Movie promotion Game release promotion.
- Gallery/Museum exhibit launch.
- Band/Artist latest release.
- Or anything else you have in mind (subject to the module coordinator’s approval).
Week 2 (30/4/2026):
_%202_7_2026%204_41_11%20AM.png)
_%202_7_2026%204_42_43%20AM.png)
_%202_7_2026%204_41_46%20AM.png)
_%202_7_2026%204_42_24%20AM.png)
Figure 1.1 Tracing process
Below is the final outcome of the boat illustration completed in Adobe Animate. This class activity is also a tutorial to what we are going to do for Exercise 1.
Figure 1.2 Boat illustration final outcome
Week 3 (7/5/2026):
Week 4 (14/5/2026):
Our class activity for week 4 is to illustrate a simple spider and animate is using motion tween and classic tween.
%202_7_2026%204_33_00%20AM.png)
_%202_7_2026%204_37_56%20AM.png)
%202_7_2026%204_32_11%20AM.png)
_%202_7_2026%204_38_27%20AM.png)
Figure 1.3 Animation process
Below is the final outcome of the spider animation completed in Adobe Animate. This class activity is also a tutorial to what we are going to do for Exercise 2 & 3.
Figure 1.5 Spider animation final outcome
Week 5 (21/5/2026):
On week 5, Mr. Shamsul taught us how to create a loading page. We animated the text by adjusting the position and opacity.
Lastly, we had to create an animated border for the enter button which also uses the same position and opacity effect.
%202_7_2026%204_54_50%20AM.png)
%202_7_2026%204_55_36%20AM.png)
%202_7_2026%204_57_49%20AM.png)
%202_7_2026%204_59_31%20AM.png)
%202_7_2026%204_59_43%20AM.png)
Figure 1.6 Process
Below is the final outcome of the loading page animation completed in Adobe Animate. This class activity is also a tutorial to what we are going to do for our final project if needed.
Figure 1.7 Outcome
The class activity for week 6 is to add a hover effect onto the enter button and make it functional when clicked.
%202_7_2026%205_00_04%20AM.png)
%202_7_2026%205_00_09%20AM.png)
%202_7_2026%205_00_13%20AM.png)
Figure 1.8 Enter button hover effect
Next, Mr. Shamsul gave us an example of a home page as we had to create it using Animate.
%202_7_2026%205_02_15%20AM.png)
Figure 1.9 Example
On week 7, we used the home page example by Mr. Shamsul and make the navigation bar buttons functional and make each of them direct to their assigned pages.
_%204_6_2026%202_26_39%20PM.png)
%202_7_2026%205_00_34%20AM.png)
Figure 1.10 Functions
Below is the final outcome, this activity gave me a better understanding on how to create my final website with Adobe Animate.
Figure 1.11 Outcome
On week 8, our class activity is to create a timeline layout. I started by downloading images on pexels and imported them into Animate library.
Next, I created buttons for the timelines years and added the hover effect on them.
%202_7_2026%205_16_09%20AM.png)
%202_7_2026%205_16_13%20AM.png)
%202_7_2026%205_16_19%20AM.png)
Figure 1.12 Timeline layout process
To make the timeline buttons work, I added codes that direct each button to their assigned images.
%202_7_2026%205_16_42%20AM.png)
Figure 1.13 Function
To make the interaction smoother, Mr. Shamsul taught us how to use GSAP which is to add animation to the button interactions.
I downloaded the GSAP file and import it into the action tab in Animate.
%202_7_2026%205_19_27%20AM.png)
%2011_6_2026%203_24_52%20PM.png)
Figure 1.14 GSAP
Below is the final outcome, this activity gave me a better understanding on how to create my final website with Adobe Animate as my website proposal has a timeline page.
Figure 1.15 Final Outcome
INSTRUCTIONS
Exercise 1: Asset Creation
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. Convert to movie clip.
Submission Requirement:
Upload the .fla file in your Google Drive, attach the link in your e-portfolio and submit your e-portfolio link.
Figure 2.1 Inspirations and References
The colour palettes I've selected are more towards earthy and pastel tones to convey the nature theme.
.jpg)
Figure 2.2 Colour Palettes
Figure 2.3 Rough Sketches (11/5/2026)
After deciding which character features to combine, I drew the final sketch and added colours to further visualise how my smart assistant would look like. I also decided to name my smart assistant Mori! It means forest or woods in Japanese.
Figure 2.4 Final Sketch (14/5/2026)
I started by placing the sketch onto the canvas and trace according to the sketch. Unfortunately, my Adobe Animate keeps crashing and I had to switch to Adobe Illustrator to start over.
%204_7_2026%204_41_56%20AM.png)
Figure 2.5 Adobe Animate
I placed all the references I needed and proceed to work on it.
%20%204_7_2026%204_52_15%20AM.png)
Figure 2.6 Transferring to Adobe Illustrator
For my character's leg, it was difficult to slowly trace them out as tracing them out will also result in inconsistency. I used the shape tool to create the shape of the leg. Then, I used shape builder tool to join the shapes together.
Figure 2.7 Shape Builder Tool
Next, I moved on to creating the details of the character.
Figure 2.8 Illustrating Character from sketch
I added gradient on the character instead of shadows because I want my character to look 'dreamy'.
Figure 2.9 Adding colours & gradient effect
Below is the character design for exercise 1:
I consulted with Mr. Shamsul on the final outcome and he said it was much better after applying colours to it.
The feedback I received was the character's arms are too stiff and could make it bend more, the legs (especially the feet) looked very out of place, the outline is weird and the toes should be facing down instead.
Mr. Shamsul roughly sketched out how the arms and legs should look like:
After that, I sketched the arms and legs according to Mr.
Shamsul's feedback and used it as a guide to refine the character
design in Adobe Illustrator.
%20%204_7_2026%204_44_32%20AM.png)
Figure 2.13 Arms & Legs Refinement
After everything is done, I separated the body parts into different layers and imported it into Adobe Animate. Below is the final outcome for Exercise 1, honestly the character looks less stiff and rigid after the refinement.
SUBMISSION
Figure 2.15 Final Outcome for Exercise 1 (22/5/2026)
Exercise 2: The Motion
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.
For exercise 2, I created the idle animation for my character. I animated the leaves, hands and wand to move. I added a few stars after my character move its arms and the wand.
After the movements are done, I applied classic tween and set quad ease in effect to make the animation smoother.
%2014_8_2026%205_12_52%20AM.png)
Figure 3.1 Process
SUBMISSION
Figure 3.2 Final Outcome for Exercise 2 (MP4) (29/5/2026)
Figure 3.3 Final Outcome for Exercise 2 (GIF) (29/5/2026)
Exercise 3
For our final exercise, we are required to create an impactful animation for our character, along with a button to play the animation. The idle animation will be played after the impactful animation is completed.
Instructions
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.
You will also required to upload the .fla file into your Google Drive. Update your e-portfolio with all the processes.
Submit your e-portfolio link for submission.
I created a copy of my exercise 2 and continued working on the impactful animation. For my impactful animation, I made the stem rise up and grow. The next animation was to make my character jump and shake the wand where there will be stars appearing.
Next, I put in codes in the action tab for the animation to play idle and the impactful animation.
%2014_8_2026%205_14_37%20AM.png)
%2014_8_2026%205_15_43%20AM.png)
Figure 4.1 Process
%2014_8_2026%205_14_23%20AM.png)
%2014_8_2026%205_15_21%20AM.png)
Figure 4.2 Button action
After double checking the animation, I proceeded to upload the index.html in Netlify.
Figure 4.3 Netlify Upload
SUBMISSION
Figure 4.4 Final Outcome for Exercise 3 (GIF) (14/6/2026)
Link to Google Drive : Click here!
Link to Netlify: Click here!
Week 4 (14/5/2026)
- Character design is cute and acceptable but need to think of possible movements for the character for exercise 2 & 3. Maybe can animate the wand with a "swoosh!" movement.
- Change the arm and bend them because current one looks stiff.
- Change the foot because it looks a little weird, the toes should be at the bottom.
- Exercise 2 idle animation idea is alright.
- Exercise 3's animation needs more animations other than just sparkles from the wand.
- Exercise 3 animation idea is okay.
- Idle animation is already good.
Overall, I found the process for this exercise enjoyable as it allowed me to explore Adobe Animate in more depth. However, I found it challenging to adapt to the tools because they are slightly different from Adobe Illustrator.
The most difficult part was creating and refining the shapes for my smart assistant character which required more trial and error. Despite these challenges, I still enjoyed the experience and gained valuable skills. I look forward to improving further in upcoming exercises.
Exercise 2:
From this exercise, I really enjoyed the animation process because it was fun and exciting to see my character moving which made the experience feel rewarding and cute.
Although I faced some challenges while using the software, I was still able to learn a lot and had fun throughout the exercise. Overall, it was a valuable experience that helped me improve my animation skills further.
Exercise 3:
This final exercise was definitely the trickiest one because I kept messing up my layers and occasionally made mistakes while working on the animation. Despite the challenges, I was able to slowly learn from these errors and gained a better understanding of the software. Overall, it was a fun learning experience on how to use Adobe Animate by animating a UI character.
Comments
Post a Comment