Labels

ADVANCED INTERACTIVE DESIGN - FINAL PROJECT: THEMATIC INTERACTIVE WEBSITE

14/6/26 - 24/7/26 (Week 8 - Week 14)

Nicole Ng Ying Yan  0382412

Bachelor of Design (Hons) in Creative Media

DST60804 Advanced Interactive Design

Final Project: Thematic Interactive Website 

TABLE OF CONTENT


1.0 INSTRUCTIONS

2.0 PROCESS WORK

[ Website Structure ]
  • index.html - First page with a marquee text scroll
  • origin.html - Explains the history of Teh tarik using an image slider
  • the-pull.html - Animation of teh tarik pouring into a cup and its mechanism 
  • trivia.html - Flash cards of some fun facts of teh tarik
[ index.html ]

For this page, I followed a YouTube tutorial on how to create the marquee text scroll and added a GSAP script to loop it. I also added a teh tarik drink animation that expands from small to big.

Fig. 1.0 Marquee scroll script

I also added a video clip of steam behind the teh tarik drink, however HTML5 canvas does not support videos, so I could only add it from components. The tricky part is that I used blend mode for my video clip in the prototype to make the background of the video clip is transparent. This is impossible using the component feature as it only imports the video clip as it is.

In the end, I opened the html file in VS code and had to manually insert the code for the video clip and the background image as well for the video clip layer (with transparent background) to be in front of my background image. (thanks claude) This was very troublesome because every time after I make changes and publish the page, the code is overwritten. So I had to manually insert the code for the video clip and background image in VS code whenever I make a new change in Adobe Animate.

Because I manually inserted the background image into the html file, I could not add animation to it as I had to remove the background image in Adobe Animate in order for the steam video clip to be visible.

Fig. 1.1 Manual code in VS code

[ origin.html ]

In this page, I applied the image slider code which was taught in class, so I didn't encounter too much difficulty. The only challenge was keeping the active state of the buttons in the right colour, I used the help of claude to solve this issue. 

Fig. 2.0 Image slider script

Fig. 2.1 Script for image slider buttons

[ the-pull.html ]

For this page, the animation flow is:

tea leaves go into the jug > jug moves higher > a stream of tea pours out > tea goes into teh tarik drink > mechanism cards appear from below

I used wizard to add the "go to frame number and play" script so whenever I click on the navigation button, it goes to the frame I want and plays the animation in the nested movie clip of that frame. 

Fig. 3.0 "Go to frame number and play" script

For the stream of tea pouring, I wanted the stream to flow slowly instead of the whole stream of tea appearing as I click the button, so I added a mask to the tea stream, whatever that appears behind the white box will show. Then I added motion tween and easing to the mask for the tea to flow out smoothly.

Fig. 3.1 Tea stream masking

[ trivia.html ]

In this page, there are 4 flashcards that show fun facts about teh tarik. The answer reveals when the cursor hovers on the card. I converted the cards into buttons and added the hover state design on the "Over" frame. Here's a comparison of the cards on "Up" and "Over" state. 


Fig. 4.0 "Up" vs "Over" state of flashcards

Then I used the same image slider concept in the origin.html page and modified the code to match the x-position of the cards.

Fig. 4.1 Card slider script

When I tested this page through Adobe Animate, none of the animations were working. I kept changing the script and publishing settings and nothing worked. I opened it through Finder in Chrome and it still didn't work. Then I opened this file in VS code and run it through a live server extension and all the animations work fine. (lol what)

[ Navigation bar ]

I created each page in different HTML5 canvases, so I used wizard to add the "go to web page" script to link all the pages together as taught in class. I also made the logo clickable and it navigates back to index.html.

Fig. 5.0 Navigation bar script

[ BGM & Button Trigger/Hover Sound ]

Audio used in the website:
For the BGM, I initially wanted to add a mamak ambience to make it more immersive, but it wasn't a good idea at all as the ambience sound is very unpleasing and has a lot of muffled sounds in it. In the end I just choose a cute BGM audio. 

Then I applied the same script provided by chatgpt to all pages. The only downside is that the BGM does not autoplay because modern browsers block autoplay. The BGM only plays when I click anywhere on the page. Besides that, since my pages are not in the same HTML5 canvas, the BGM also replays from the start when I navigate to another page. 

I also added a script button trigger sounds so whenever I click on any navigation buttons, the sound plays to indicate you are navigating to the next page/ animation. This script is applied in all pages as well.

And for trivia.html specifically, I added a script for hover sound to the flashcards. Whenever the cursor hovers over the card, a "whoosh" sound will play to make it more interactive.

Fig. 6.0 BGM, button trigger & hover sound script

3.0 FINAL WEBSITE SUBMISSION

Final Website Netlify Link:

**Note: 
  • Please wait a while for the pages to load. (5-10 seconds) Once you revisit a page that has been visited it won't load long again.
  • Please click anywhere on the page to play the BGM as browsers do not allow autoplay. Since each page is created on different HTML5 canvas, the BGM will replay from the start every time you click into a new page. 


Website Walkthrough Video:


4.0 REFLECTION

This is the most challenging project out of all modules in this semester. Adobe Animate is really not an easy software to learn, let alone to master it. It has suddenly quit on me so many times before I could even save my progress and I had to redo some parts which was frustrating. I was also feeling very hopeless whenever a button or animation does not work even after hours of debugging attempts. Nevertheless, I got to learn many new things such as tweening, how each symbol has different functions, action scripts, etc. What makes this project hard is that it requires a lot of trial and errors and testing, and if the animations doesn't work you gotta redo the whole part and find the exact code why it's not working. Whenever I encounter these problems and I have no other ways to fix it, I used chatgpt or claude for assistance. It is helpful at times, but the code provided might still not work so in the end it's really up to ourselves to solve them. 

To be completely honest, the process was not fun at all. But being able to make something that's not fun to work properly is what's rewarding about this module. I was so glad and relieved when the website and animations were functioning well after exporting through Netlify, it really made my efforts pay off. Of course, I still have a lot of room for improvement and I admit the website could be executed even better, but I'm thankful that with my current skills and the complexity of the software, I was able to complete this project without any unexpected errors in the end.


Labels:

Comments

Post a Comment

Popular Posts