ADVANCED INTERACTIVE - TASK 2

21 / 10 / 2025 - 11 / 11 / 2025 (Week 5 - Week 8)

Lai Weng Yan (0385170)

Advanced Interactive | Bachelor of Design (Honours) in Creative Media | Taylor's University
Task 2

---

LECTURES

Week 5

https://www.animaker.com/hub/12-principles-of-animation/

Principles of animation

Lecturer explain principle of animation to let us know more what is animation and their motion. After that we have do some easy exercise animation bouncing ball and line movement.

Onion skin: can see next and previous movement 

Figure 1.0 Onion skin

Figure 1.1 Practice movement animation 1

Create shape tween: It transforms shapes by automatically creating in-btween frames.

Figure 1.2 Shape tween

Figure 1.3 Practice movement animation 2

Week 6

First draw a spider and convert to a graphic sysmbol first and double click to go edit mode inside and do motion so it will continuously move on the main stage.

Modify -> Convert to symbol -> Graphic 

Figure 1.5 Create a spider

Using pencil to draw a smooth line in new layer.

Figure 1.4 Pencil and make smooth line

Add a classic motion guide to the line, snap the spider to the start so it will follow the path smoothly last u can adjust and play the timeline.

Figure 1.5 Spider on the guide

Also I have add another spider and add bouncy effect on the spider.

Figure 1.6 Add bouncy effect on another spider

Figure 1.7 Final outcome

Week 7

Masking

• Convert text to graphic 
• Draw a rectangle in new layer and right click, click mask

Figure 1.8 Masking

Classic tween

Right click and select classic tween,then set Ease-out quart at the start and Ease-in quart at the end. Insert a stop frame between each animation to pause the movement before it continues.

Figure 1.9 Classic tween 

Seperate line in different layer and make classic tween then adjust the movement and timeline. Last make dissapear and go to next page.

Figure 1.10 Movement of line

Figure 1.11 Final outcome

Week 8

Make Enter to a button by make it modify to button > double click 

and change colour, add layer for hit background > insert instance name

Add stop motion, so it can stop motion at that timeline

Stop motion

• New Layer for action
• Right click select action
• Add using wizard > stop > this timeline

Figure 1.12 Stop motion java

Figure 1.13 Stop motion icon

After that add start motion and name

Name the instance name of the button 

Action layer > Add using Wizard > Go to frame label and play > This timeline > Change label name > with mouse click

Figure 1.14 Play motion java

So when press the enter it can go to another page

Figure 1.15 Final outcome

---

INSTRUCTIONS

Task 2

Students are required to work on their visual design and start planning their website’s interactive design elements and features. Unlike traditional static website, when it comes to interactive design where animations are present, the plan not only should include the layout visuals but also the animation example or reference. Students can build their animation or user-reference animation to demonstrate the intended idea.

Requirements:

• Walkthrough Video presenting the plan and showing the animation examples and/or references. (Compulsary)
• Online posts in your E-portfolio as your reflective studies with links to any resource involved in the creating of the plan. (i.e.: Figma link, Miro link, etc.)

Work in progress:

Figure 2.0 Sketch

Figure 2.1 Work in progress

Final Proposal:

Final Proposal Presentation

Canva Link:

https://www.canva.com/design/DAG4Y7O32uA/d-4kS1NL-LD7aAZzQZu-Rg/edit?utm_content=DAG4Y7O32uA&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

Final Presentation Video

Google drive link: 

https://drive.google.com/drive/folders/1_XHdkdHQWtf-JE-el1IZ54Q8HHaWdtaH

Wireframe link

Figma link:

https://www.figma.com/design/ticZmAlGSBglExM6HDe3eq/Interaction-Design?node-id=0-1&t=9x2el46HEfc8Yp3S-1

---

FEEDBACK

No feedback

---

REFLECTION

Experience

Using Adobe Animate was a fun and interesting experience since I don't use it often. I was surprised to discover that animations can be converted to Java which made the process seem easier than I expected. Still, it was challenging for me as a first-time user. For the final project, the hardest part was creating the illustration which took a lot of time and careful planning to bring the animation to life.