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
Lectures are documented in Task 1 - Final Task blogs.
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 1.1 Inspirations and References
The colour palettes I've selected are more towards earthy and pastel tones to convey the nature theme.
.jpg)
Figure 1.2 Colour Palettes
Figure 1.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 1.4 Final Sketch (14/5/2026)
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 Animate.
Below is the final outcome for Exercise 1, honestly the character looks less stiff and rigid after the refinement.
SUBMISSION
Figure 1.11 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.
SUBMISSION
Figure 2.1 Final Outcome for Exercise 2 (MP4) (29/5/2026)
Figure 2.2 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.
After double checking the animation, I proceeded to upload the index.html in Netlify.
Figure 3.1 Netlify Upload
SUBMISSION
Figure 3.2 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 becauseI 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