Advanced Interactive Design - Task 2: Interaction Design Planning and Prototype
21/10/2025 - 11/11/2025 / Week 5 - Week 8
Aquela Zefanya Soares / 0374377
Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
TABLE OF CONTENTS
LECTURES
Week 5
This week, Mr. Shamsul taught us how to create a rubber animation. To make the line move like rubber, we need to use keyframes and adjust the line accordingly. Then, in between the keyframes, we add a shape tween, and the app will generate the in-between animation so it looks like it’s moving.
After the rubber practice, we had to create a bouncing ball using the squash and stretch concept. First, I drew a line to guide where I wanted the ball to move, then I added keyframes to show its position at different points. After that, I applied a shape tween and converted it into keyframes so I could adjust the ball using the squash and stretch technique we learned earlier.
I consulted Mr. Shamsul, and he told me to add more bounces because it looked weird and unnatural. The ball still had the "momentum", but I ended the animation too suddenly. So to fix it, I added another bounce and made the ball bounce three times before it stopped.
Week 6
This week, we learned how to create a spider animation. Before animating, Mr. Shamsul instructed us to create a spider using basic shapes. For the legs, he told us to use separate shapes or drawings. This is because, to make the spider look like it’s walking, each leg needs its own pivot point. If all the legs were drawn as a single shape, the movement would look stiff and unnatural. After creating the spider, we animated its walk by moving the legs and even the eyes.
After finishing the leg movements, the next step was to make the spider follow a path. First, we created a line (the guide), which can overlap. Then we added two keyframes: one for the starting position and one for the ending position. After that, we attached the spider to the path so that it "snaps" to the line. Once the spider is snapped to the path, moving it along the timeline will make it follow the guide. Then, we added a classic tween between the two keyframes, the fewer frames, the faster the spider moves. Finally, to make sure the spider’s body rotates according to the path, we checked the "Orient to Path" option under Properties → Frame.
Fig 1.3 Spider practice (28/10/2025)
Week 8
Fig 1.4 Website animation practice (11/11/2025)
INSTRUCTION
<iframe src="https://drive.google.com/file/d/1qg8pJCAsxm8aEWvJKnaWURJp0xOy-u2J/preview" width="640" height="480" allow="autoplay"></iframe>
TASK
In this assignment, Mr. Shamsul told us to continue the previous task, which is to create a prototype based on the wireframe we created earlier.
Tutorial
Animation References
To understand the animation better, these are the videos that I used as references for my prototype.
Prototype
After learning and applying all the tutorials and references, this is the prototype.
Presentation
REFLECTION
In this assignment, I learned how to communicate my ideas better through my prototype. Although it doesn’t fully match my initial concept, I feel satisfied with my work. I also enjoyed the learning process, it was fun to explore animation in Adobe Animate, and it felt cool to see that I could animate almost my entire website there. However, there were many steps involved, so I struggled a bit in the beginning. I also learned how to create a loading screen and parallax animation in Figma. Overall, it has been a fun journey for me.
Comments
Post a Comment