23.04.2026 - 21.10.2026 / Week 1- Week 5
Angelique Svetlana Pekasa / 0377365
Advanced Interactive Design / Bachelors Of Creative Media / Taylor's University
Task 1: Exercise 1
Table of contents
Lectures
Week 1
Introduction to the module, Shir shamsul told us what is expected on each task and the what the final outcome will look like.
Week 2
adobe animate can publish 2 different kind of file, but for this project
publish it as HTML5 not .SWF, because it can't be open in netflify Use web
preset very high or high, nothing lower. For making a new file always use
Website, high resolution with the preference shown below.
Fig 1.1, New file preference, (30/04/2026, Week 2)
In class we were introduced to the shape tool and how to use them. Shown
below is the exercise we did during class.
Fig 1.2, ball exercise, (30/04/2026, Week 2)
After making the ball, we were tasked to trace a boat that was given by Sir. Shamsul. Shown below is the screenshot of the boat that I made.
Fig 1.3, boat exercise, (30/04/2026, Week 2)
Week 3
(No class was held)
Week 4
Lecture notes:
- all black dots are keyframe, the grey area is the frame, blank keyframe is needed when u want to make the action heppen, can add script later
- don't double click object (makes timeline disabled)
- (uncheck auto keyframe)
- Right kick in between the frame > create shape tween (dont need to convert to any symbol), to change from shape tween to normal circle copy the shape and then go to the nect frame > right click insert keyframe > delete the next keyframe>
- Use shape tween if u want to convert something
- 3 diff type of symbol
- registration=pivot point of an object
In class we were tasked to try making an animation. Shown below
is the animation that I made.
Fig 1.4, boat exercise, (13/05/2026, Week 4)
Week 5
Introduction starts from left to right because you read from left to right. To make the text dissapear and then appear on the next frame, use color then change the alpha to 0 in the first frame and make it 100 in the next one.
Fig 1.5, boat exercise, (21/05/2026, Week 5)
Fig 1.5, boat exercise, (21/05/2026, Week 5)
make the rectangle, select all and break them apart, and select each side and group each of the side individually, and then right click distribute to layers
Week 6
Week 7
Instructions
Exercises
Part 1:
For the first task, we were instructed to make a Smart Assistant avatar or UI widget using vector tools. I wanted to make a robot, so I first sketch my idea in Procreate. Shown below is the robot that I made along side the references used.
Fig 2.1, Sketch and reference, (08/05/2026, Week 3)
Fig 2.2, Process work, (08/05/2026, Week 3)
Shown below is the final outcome of my robot.
Fig 2.3, Final Robot Design, (14/05/2026, Week 4)
After finishing the robot, I group each separate part of the robot, made it all a symbol and then separate them into different layers inside the symbol. Shown below is the screengrab of it.
Fig 2.4, Process work, (14/05/2026, Week 4)
Here is the link to the AI file: https://drive.google.com/file/d/1netIexhey1zyuSQNE9NJ03DtYGvL3IUM/view?usp=sharing
Part 2:
After that we were task to animate our character in an idle state. I first animated the eyes using the shape tween. Then I animate the body by enlarging it a bit and going back to it's original state, after that I made both arms move a bit. Shown below is the screen grab of the process.
Fig 2.5, Process work, (19/05/2026, Week 5)
Then I made a bit more animation which I learned from week 5's tutorial. I added an electric line which appears from top to bottom and move it a bit. Shown below is the screen grab of the process.
Fig 2.6, Process work, (19/05/2026, Week 5)
To make the animation smoother, I also didn't forget to put ease in and ease out on the animation which uses shape tween, Shown below is the screen grab of the process.
Fig 2.7, Process work, (19/05/2026, Week 5)
After that I exported the animation, shown below is the final animation made.
Here is the link to the AI file: https://drive.google.com/file/d/15kRKBbu40pnwQ6MxHO_J7bLX1zH6svw_/view?usp=drive_link
Part 3:
In this part we were task to make out avatar move, I made my robot moves by moving the legs and changed the size of the body a bit to give more effect when it walks, I also added a slight change in angle of the bolt. In addition to that I add some hand waving movement at the end and made the bolt dissapear and appear again as how it was from the start. Shown below is the screen shot of the process.
Fig 2.7, Process work, (29/05/2026, Week 6)
Fig 2.7, Process work, (30/05/2026, Week 5)
Shown below is the screen recording of the final work.
Here is the link to the AI file: https://drive.google.com/file/d/1GDqvmv5Pa1lIyhklQ1j4b3vd8Ne_hYj8/view?usp=drive_link
Feedback
Week 5: The robot's hands moving up is too much animation, it should be an idle state. In addition to that, u should decrease the movement on each frame to make the animation smoother.
Week 4: Robot is good to go, make sure that you seperate the layers in the symbol not outside it. to search for tutorials on Youtube as there are little tutorials uploaded there.
Week 1-3: No feedback given (no task yet)
Reflection
On the first week, I didn't know what Adobe Animate is before this module, I have actually never heard of it. But by paying close attention in class and doing the tutorials given in class, I started to learn all the basic requirements needed. It was also a bit hard to search for tutorials on Youtube as there are little tutorials uploaded there. The tutorials in class was very helpful as it gives practical example on how to draw and make assets in Adobe Animate, so after it I was able to make my own robot.
On part 2 of the exercise I started to get a hang of it, although I am still confuse from time to time, I began to understand slowly on how to animate it. I learned from week 5's tutorial and apply it to my robot's idle state, it could be seen that I used the technique on the lighting symbol.
Comments
Post a Comment