ADVANCED INTERACTIVE DESIGN - FINAL PROJECT / THEMATIC INTERACTIVE WEB APPLICATION

ADVANCED INTERACTIVE DESIGN - FINAL PROJECT / THEMATIC INTERACTIVE WEB APPLICATION

 28/4/2024 - 28/7/2024 (Week 10 - Week 14)

Xing Yu / 0361463
Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Final Project / Thematic Interactive Web Application

---

INTRODUCTION

---

Final Project - Thematic Interactive Web Application

I separated the layers of the images I had created in Adobe Illustrator and imported them into Adobe Animate.

fig 1.1

fig 1.2

fig 1.3

First, I made the two clouds move towards the middle and added the effect - Ease in. Then I scaled the four planets up and down, added keyframes, and used the hue and alpha in the effect to give it a simple animation effect. Finally, I added the four plates, and the animation was complete.

fig 1.4

After finishing all the animations, I started to add action scripts. I planned to use the cartoon character "Jay" I drew as a button component, and then converted each "planet" into a component button, and then added the action script code to complete it.

Press Ctrl + Enter to preview my animation, and I tried to click the button to check whether it can successfully jump to the specified frame and web page.

fig 1.5

Fig 1.6 Publishing

Fig 1.7 Netlify upload

Final Submission

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

Website Walkthrough: https://youtu.be/enWQQK6ynh4

Fig 1.8 Jay Chou Website Walkthrough 

---

Reflection

It is not easy to make website animation with Adobe Animate. I encountered many difficult problems and difficulties in the process, but with the help of Mr. Razif, I successfully completed the website and published it. I am very grateful to Mr. Razif for this. This project also allowed me to accumulate a lot of experience in making animations and websites, which benefited me a lot.