Advanced Interactive Design - Exercise 3: Button Animation

04/06/2026 - 14/06/2026 / Week 7 - Week 8

Brenda Wynn / 0372128

Advanced Interactive Design / Bachelors of Design (Hons) in Creative Media / Taylor's University

Exercise 3



JUMP LINKS



LECTURES

Week 7
This week we were given a exercise based on last week's tutorial where we had to make the navigation work. We had to use "Action" tool and add the codes to the navigation.

Results:

Week 8
We were given a tutorial by Mr. Shamsul on how to create a navigation animation for a website. He told us to compile images and add buttons. Then using the code to animate it.

Results:


INSTRUCTIONS


<iframe src="https://drive.google.com/file/d/1OhJvwPizBbma-LeDC3b67bNyg_n7yPwh/preview" width="640" height="480"></iframe>


TASK

For task 3, we had to create a major animation for the avatar that we created previously. We had to make the avatar make the move once a user clicks the button and make it turn back to it's idle state.

The first thing I did is to create the button. Then I created the major animation inside the movie clip. After completing the frames, I added the classic tween and ease out effect to make the animation look more smooth. Once the animation was set, I continued by adding labels and actions to make the button work. Lastly, I added the hover effect to the button.

Results from Netlify:

Google Drive Link:


FEEDBACK

Week 7
Mr. Shamsul approved the idle animation of my avatar and the idea that I have for the button animation.


REFLECTION

For this exercise, it was a bit difficult to make the animation since the concept was quite hard to grasp. But, once I understood the concept, it was not as difficult to create it. Though, I still feel like the process became a bit messy due to my lack of skills using the software. Nevertheless, I had fun creating this exercise and was quite happy when the button animation worked. I have also seen a few of my peers button animation with their avatars and I think that their results looked smooth and matches their avatars. Overall, this exercise was the most difficult compared to the first two exercises, but I am quite satisfied with the results. Through this exercise, I got to learn more about the software and skill concepts.

Comments