Advanced Interactive Design - Weekly Journal

Jump Link

• Week 1 - Introduction to Advanced Interactive Design
• Week 2 - Introduction to Adobe Animate
• Week 3 - Animation and Timeframe
• Week 4 -
• Week 5 - Motion
• Week 6 - 
• Week 7 -
• Week 8 -
• Week 9 - Introduction to GSAP

Week 1 (28/4/2025)

Today was the first class of this module, Advanced Interactive Design. We were introduced to the module, where the learning outcome is to incorporate user interaction with audiovisual information through conventional UI layouts and interactive experiences. We were also introduced to the tool we will be using, which is Adobe Animate. I am so happy that we can choose the type of website we want to create for ourselves, giving me so much inspiration and freedom.

Lecture Notes

• Amazing Website Reference: https://thefwa.com/awards/page/1/
• Each of us propose 3 ideas for website ideas for our upcoming assignment

< back

Week 2 (2/5/2025)

n today’s class, we jumped straight into the tutorial on how to use Adobe Animate. We learned about the basic tools for creating simple illustrations, such as the line tool, shape tools, paint bucket, selection tool, and more. The method of illustration in Adobe Animate is slightly different from Adobe Illustrator, but it feels more user-friendly, as the tools follow a similar logic for creating simple visuals. As the outcome of this tutorial, I successfully traced a reference image and created a high-quality sailboat illustration!

Lecture Note

• New document: Web > Very High > Create
• Background colour: Right panel > Properties > Doc > Change "stage" colour
• Tools we learnt: Selection tool, Free transform tool, Shape tool, Paint bucket tool, Snap align/Snap to object
• Align object: Select objects > Window > Align 
• Easy way to make vector illustration: Use line and shape tool to trace the outline (make sure to connect all point together), select all the outline, right click and select "break apart", use paint tool to fill in the colour, double click on the outline to delete the outline.

Figure 2.1 Document file selection

Figure 2.2 Simple beach ball 

Figure 2.3 Sailboat tracing

The illustration tools in Adobe Animate are simple and straightforward, so I was able to trace the sailboat illustration in less time. Since I finished my work early, I took the opportunity to consult Mr. Shamsul about the website proposal I have in mind. Although my proposal wasn’t very detailed, just a rough visual idea, he allowed me to proceed with my chosen theme: Puella Magi Madoka Magica. However, he advised me to be more "realistic" about how I plan to create the animations, as my initial ideas were quite ambitious, even though they were visually aesthetic.

Considering we only have three months to learn from scratch and complete the final production, he suggested I focus on simpler animations and transitions that are manageable for a beginner. More complex animations might require coding or advanced tools, which could be overwhelming. I understood his concerns and promised to present a more detailed and refined proposal in the next class. I’m still happy though because I get to work on a topic I really love!

< back

Week 3 (9/5/2025)

In today's class, we learned how to create simple animations using Adobe Animate. At first, I found it complicated because the timeline works differently compared to other software, so I wasn’t familiar with it. However, after understanding the method, it became more manageable, though still a bit challenging. We completed two animation exercises by the end of the class.

Lecture Note

• select the object > align at right panel
• F5 - insert keyframe
• F7 - blank keyframe
• right click on keyframe > "create shape tween"
• click "test movie" to review
• publish settings > more settings > tick "center stage", "make responsive", "include preloader"
• effect > choose the ease

Figure 3.1 Align

Figure 3.2 Publish Settings

Figure 3.3 Timeframe

Figure 3.4 Tweening

Figure 3.7 Shape Changing animation exercise

Figure 3.6 Countdown exercise

< back

Week 5 (23/5/2025)

Lecture Note

• Create an element > go to "insert" > "new symbol" > rename the symbol, select "graphic", choose "center"
• At the layer (panel below) > add "classic motion guide"
• On this layer > use pencil tool > Draw the bouncing line > Use smoothen tool to smooth the line

Figure 4.1 Making Symbol

• Set the first frame of the ball at the beginning of the line, set the last frame of the ball at the end of the line.
• Select the keyframe > right click "create classic tween"
• Tick "orient to path" to make the object rotate with the line
• Ball guideline: Insert frame, Ball symbol: Insert keyframe

Figure 4.2 Timeline

Figure 4.3 Tick "Orient to path"

• How to do simple mask: Add a layer > Make the shape > Right click "mask"

Figure 4.4 Masking

Figure 4.5 Exercise 1

Week 6 (30/5/2025)

• To make button: Create the button > select all > make it into symbol > Set "button"
• To animate the button > double click the button > insert keyframe under "over", "down", "hit"
• Add a layer on top > right click and choose "action" > "add using wizard"
• Label button name at the right panel
• For each scene/page, add a label name > in "action", add "go to frame number and play" > replace the number to the "label name"

Figure 6.1 Button animation

Figure 6.2 Timeline

Figure 6.3 Javascript

Figure 6.4 Outcome

< back 

Week 9 (20/6/2025)

• Create three rectangles, arrange them side by side > make them into symbol in movie clip (individual and group)
• On timeline > right click "action" > global > include > add file > "gsap.min.js"
• X-position - click on the Mc-screen > align (left, center right) to get the x- position

Figure 9.1 File source

Figure 9.2 Gsap code

• Make buttons > set to symbol
• Right click > actions > code snippets > html5 canvas > event handlers > mouse click event
• Remember to set instance name under properties 

Figure 9.3 Code snippet

Figure 9.4 Adobe Animate

Figure 9.5 Final Outcome

< back