Advanced Interactive Design - Exercises

24.09.2024 - 29.12.2024  / week 1 - week 14

Velicia Raquel Dewi Setiawan | 0369188 | Bachelor of Design (Honours) in Creative Media

Advanced Interactive Design 

JUMPLINK:

1. Lecture
2. Instruction
3. Exercises
• Week 1 
• Week 2
• Week 3 
• Week 4 
• Week 5 
• Week 6
• Week 7 
• Week 9
4. Reflection

1. LECTURE

2. INSTRUCTION

3. EXERCISES

Week 1 - F2F (24 Sep, 2024)

1. Mr said this week is free

Week 2 - F2F (1 Oct, 2024)

2. Shape Tool

Eight Major Variations

This week, Mr. taught us how to use the rectangle tool both with and without object drawing. We learned how to apply it for fills and strokes, as well as how to draw within a fill. 

Fig 1.1 Shape Tool Example, Week 2 (1/10/2024)

For our practical assignment, we were tasked with replicating a boat image in as much detail as possible. I utilized object drawing, the shortcut Ctrl+B, and the bucket tool to complete this.

Fig 1.2 Shape Tool Task, Week 2 (1/10/2024)

Week 3 - F2F (8 Oct, 2024)

3. Car Animation

Eight Major Variations

In our second week, Mr. instructed us on creating simple animations using a car on a map. We drew the line to define the car's path, allowing us to visualize its movement. This exercise helped us understand the basics of motion in animation.

This is my attempt:

Fig 1.3 Car Animation, Week 3 (8/10/2024)

Fig 1.4 Car Animation, Week 3 (8/10/2024)

Week 4 - F2F (15 Oct, 2024)

4. Crab Animation

Eight Major Variations

This week, Mr. focused on the concepts of ease in and ease out in animation. We were assigned a task to create a spider animation. However, I ended up making a crab instead, as I coincidentally chose a blue background and an orange ellipse that resembled a crab.

This is my attempt: https://veliciaexercise-bb0398.netlify.app/

Fig 1.5 Crab Animation, Week 4 (15/10/2024)

Week 5 - F2F (22 Oct, 2024)

5. Button Animation

Eight Major Variations

During this week's lesson, Mr. taught us how to create a simple enter button animation using green screen techniques. He also introduced us to animating the button to respond to cursor hover. Additionally, we learned some Java coding to ensure the animation only occurs when the program opens, transforming the button into an interactive element.

This is my attempt:

Fig 1.6 Button Animation, Week 5 (22/10/2024)

Fig 1.7 Button Animation, Week 5 (22/10/2024)

Week 5-6 - F2F (22-29 Oct, 2024)

1. Button Animation

We continued working on the button animations from last week, this time adding a welcome message using masks before displaying the buttons with animation.

Fig 1.1 Button Animation Progress, Week 6 (29/10/2024)

Fig 1.2 Button Animation Result, Week 6 (29/10/2024)

Week 7 - F2F (5 Nov, 2024)

1. Screen and Button Animation

For this exercise, I used the file that Sir shared on Google Classroom because my laptop kept crashing whenever I tried to open Animate. Overall, we learned how to navigate the timeline using buttons and actions. The buttons changed color when hovered over. We were also instructed to turn off the auto-insert keyframe feature and to name our symbols appropriately.

Fig 1.3 Screen and Button Animation Progres, Week 7 (5/11/2024)

Fig 1.4 Screen and Button Animation Result, Week 7 (5/11/2024)

Week 9 - F2F (19 Nov, 2024)

1. Transition Animation

In Week 9, we learned how to move and animate the stage to correspond with the color of the button.

Link

Fig 1.5 Transition Animation Progress, Week 9 (19/11/2024)

Fig 1.6 Transition Animation Result, Week 9 (19/11/2024)

2. Navigation Animation

We learned how to use GSAP to navigate by zooming in and out. I was really struggling with this one and found out the reason the button kept failing was because I didn't put the instance name on the symbols.

Link

Fig 1.7 Navigation Animation Progress, Week 9 (19/11/2024)

Fig 1.8 Navigation Animation Progress, Week 9 (19/11/2024)

4. Reflection

1. Experience

Throughout these weeks, I’ve learned a lot about animation and how to work with various tools, especially with the shape and button animations. At first, it was challenging to get the animations right, especially with some technical issues like my laptop crashing or figuring out how to implement hover effects. But the hands-on approach helped me grasp the concepts. I made mistakes along the way, like with the navigation animation, but it gave me an opportunity to solve problems and improve.

2. Observation

One thing I noticed is that simplicity is key when animating. For example, creating smooth transitions and button animations required careful timing and understanding of how elements interact with each other. The more I worked on these tasks, the more I realized how crucial it is to manage the timeline properly and name symbols correctly to avoid confusion. Also, I learned how much trial and error plays into getting the right result, especially with tools like GSAP or using masking techniques.

3. Findings

From these tasks, I learned that patience is vital when working on animations. I also found out that small details, like naming symbols or adjusting the instance names, can make a huge difference. Additionally, I realized that mistakes, while frustrating, are part of the learning process. They helped me identify weaknesses, like missing steps in the animation process, and figure out ways to improve. Moving forward, I’ll pay more attention to timing and naming conventions to streamline my workflow.