Advanced Interactive Design - Final Website

07/06/26 - 31/07/26 (Week 7 - Week 15)

Andrea Choo Qin Hui (0366959)

Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media

Final Website

---

INSTRUCTIONS

---

Final Website

             Submission Requirement:

             Submit your final website using your E-portfolio Link (The final website link to be 

             attached in the E-portfolio).

             To demonstrate original authorship and verify that the project was not generated solely 

             by AI, your E-portfolio must include a Process Documentation Section featuring:

             ・Development Progress: Screenshots of your workflow, code snippets, or asset 

                 creation.

             ・Reflection / AI Disclosure: A brief narrative explaining your design decisions (and 

                a brief statement detailing any AI tools used and their specific role in your process).

Process Documentation Section

             Firstly, since I designed everything on Adobe XD, all I had to do was copy and paste 

             everything into Adobe Animate. Due to Adobe Animate not having the same features as 

             Adobe XD, I had to make some changes to the final website. I changed some of the layout 

             in Adobe Illustrator and imported them into Adobe Animate. 

Figure 1.1 Assets in Adobe Illustrator

             Once everything was imported, I faced my first problem; where it showed an error saying 

             that a JavaScript error occurred, and I was unable to preview my work. 

Figure 1.2 JavaScript Error on Adobe Animate

             Due to that, I decided to see Mr. Shamsul so hopefully he could help me figure the 

             problem out. He ended up telling me the file was corrupted and I had to redo everything 

             on a new file. 

             Thankfully on the new file, that error did not appear again but unfortunately here comes 

             the second problem. Using what Mr. Shamsul taught us with GSAP, I tried to use the 

             slider method. 

Figure 1.3 Script on Adobe Animate

             I followed the steps exactly from what was taught but when previewing it, the assets 

             doesn't move to the exact location I want it to. 

Figure 1.4 Previewed Work

             So instead of using GSAP, I animated everything myself. I decided to put every page on a 

             different file so that it wouldn't be too messy for me and so that the file wouldn't be 

             corrupted. 

Figure 1.5 Files

             Since most of my content were slideshows, I tried to find a tutorial on Youtube. 

             Unfortunately, the code didn't really work, as where you could go to the next image but 

             not the previous one. Therefore, I decided to ask ChatGPT for help.

Figure 1.6 Youtube Tutorial

             The codes that were given by ChatGPT didn't really work either so I had to regenerate 

             them until I found one that worked. 

Figure 1.7 ChatGPT Codes Pt.1

Figure 1.8 ChatGPT Codes Pt.2

Figure 1.9 ChatGPT Codes Pt.3

Figure 1.10 ChatGPT Codes Pt.4

             I had more codes generated but did not include them, but fortunately one did finally work

             and I copied and pasted them into each page that needed a slideshow. 

Figure 1.11 Movie Clip of Slideshow

Figure 1.12 Working Code for Slideshow

             ・Index Page Codes : 

Figure 2.1 Side Menu Codes Pt.1

Figure 2.2 Side Menu Codes Pt.2

Figure 2.3 Side Menu Codes Pt.3

Figure 2.4 Side Menu Codes Pt.4

Figure 2.5 Side Menu Codes Pt.5

Figure 2.6 Start Button Codes

             ・Game Description Page Codes : 

Figure 3.1 Next Page Button Codes

             ・Character Page Codes : 

Figure 4.1 Slideshow Codes

Figure 4.2 Next Page Button Codes

             ・Daily Life Codes : 

Figure 5.1 Slideshow Codes

Figure 5.2 Next Page Codes

             ・Phantom Life Codes : 

Figure 6.1 Slideshow Codes

Figure 6.2 Next Page Codes

             ・About the Game Codes : 

Figure 7.1 Slideshow Codes

Figure 7.2 Next Page Codes

             ・Gallery Codes : 

Figure 8.1 Slideshow Codes

Figure 8.2 Next Page Codes

---

FINAL SUBMISSIONS

Figure 9.1 Website on Vercel

              Link to Website

---

REFLECTIONS

Experience: Using Adobe Animate for the first time was definitely challenging, especially since I had to learn how to code everything as well. At first, I found it difficult to understand how everything worked, but with the guidance of Mr. Shamsul and YouTube tutorials, I was able to overcome the challenges. Although it took time and patience, I managed to complete the subject and gained valuable skills in using Adobe Animate.

Observations: Throughout this project, I observed that Adobe Animate is very different from other Adobe software because it combines both design and coding. Creating interactive elements such as buttons, page navigation and animations required the use of JavaScript, which was completely new to me. I also noticed that even a small mistake, such as an incorrect instance name or a missing bracket, could stop the entire interaction from working. This made me realise the importance of paying close attention to details and testing the project frequently.

Findings: From this project, I found that learning Adobe Animate requires patience, practice, and persistence. Troubleshooting became a major part of the development process, as many issues were solved through trial and error, online tutorials and guidance from Mr. Shamsul. I also found that understanding the relationship between the code and the visual elements was essential for creating a functional interactive project.