Advanced Interactive Design - Final Project / Thematic Interactive Web Application

2/11/2023 - 30/11/2023 (Week 10 - Week  14)

Anna Chin Siaw Fong / 0354370 
Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Final Project / Thematic Interactive Web Application

---

INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/1RrMvIjHOKH0_8PZSNGACQR2r6WvXuHcu/preview" width="640" height="480" allow="autoplay"></iframe>

Final Project - Thematic Interactive Web Application

For this task, we were to create the interactive website using Adobe Animate. I completed my website design on Adobe Illustrator for Task 2. Therefore, before I started animating my website, I went to Adobe Illustrator to separate my layers.

Fig 1.0 Separating Layers

After separating my layers, I imported my files into Adobe Animate and started animating. I started off my animating my login screen. I animated the password as if someone was typing in their password.

Fig 1.1 Animating

I continued by animating my homepage. I animated my buttons by making it bound when it is hovered over. After that, I animated my pop ups where it will appear when the buttons are clicked on. I also added ease to make my animation smoother.

Fig 1.2 Hoverable Button

Fig 1.3 Animating Pop-up

Once I was done animating everything, I went to add action scripts to make my animation work.

Fig 1.4 Action Script

The last thing I had to do was to animate the bubbles for my website. I used motion tween to animate the bubbles to make it smoother. 

Fig 1.5 Animating Bubbles

I previewed my website to see if it works and then published it on netlify. And with that, my website is done!

Fig 1.6 Publishing

Fig 1.7 Netlify upload

Final Submission

Netlify Link: https://newjeanswebsite.netlify.app/

New Jeans Website Walkthrough: https://youtu.be/hVkdcwvgW28

Fig 2.0 New Jeans Website Walkthrough

---

FEEDBACK

• Everything looks good.
• Keep up the good job!

---

REFLECTION

Having to animate a website on Adobe Animate was not easy at all especially when I had no prior knowledge on how to animate. It was kind of stressful when I cannot seem to find what is the problem and why the animation was not working. However, I am very grateful for Mr.Razif for helping me throughout this whole process. He was there to guide me and help me resolve my problem I faced on Adobe Animate. I am very proud of myself for be able to finish this task. Seeing my website come to life made me feel a sense of accomplishment and all my hard work has paid off.