ADVANCED INTERACTIVE DESIGN - TASK 2: FINAL WEBSITE

Continuing from Task 1 of our thematic website proposal, we will now deliver our final working website based on our Figma prototype and then publish it on Netlify.

Figure 3.1: Figma prototype.

In my prototype, I only completed the page for Kelereng because most of my layouts share the same structure. I used Adobe Animate to build the working website.

1. Homepage

Figure 3.2: Homepage in Illustrator.

To start with, I create the homepage first. I set up the file at 1280 x 720 px, but because I used the latest Macbook Pro screen size in Figma, there was a size differences. Since I created the homepage illustration in Illustrator, I had to resize it to fit.

Figure 3.3: Homepage layers in Animte.

Once I resize it in illustrator, I import it to adobe animate. I import to stage, so the layers stay and I can change the vector inside animate. I seperate the game elements in ground because that will be a button to go to another page, So I basically have different layer for different game elements just to be organized. Additionally, I put all of this layer in one symbol so the scene will not have to many layers, so everytime i fix something inside I edit in symbol.

Figure 3.4: One of the game elements hovered.

So, in homepage, I basically have 2 things to interact with. The navbar with about button and the game elements. For the game elements, I create the animation inside the symbol to indicate they are clickable by giving subtle up and down animation. I also added text when user hover, to know the name of each game elements.

This concept applies to every interactive element on the homepage. They all share the same structure and lead to separate page files that I'll be creating for the remaining elements.

Figure 3.5: About overlay design.

For the "About" in the navbar, I created an overlay instead of an entire new page. This overlay includes a close button and a window animation, which I created inside a separate symbol.

Figure 3.6: Window animation.

To make the overlay disappear before clicking the About button, I used a script. Here is the code below:

Figure 3.7: Script used.

All assets in animate, I created first in illustrator. I basically create the vector version of each traditional games and from that, I developed it to create icons for each how to play and fun fact buttons.

Figure 3.8: Every assets created in illustrator.

2. Loading Page

Figure 3.9: Loading page.

After I finalized the homepage, I created the loading page first before going to each page of the game elements. This loading page will be named "Index.html" to start the website.

I created a simple loading page with a clockwise motion tween to make the kelereng look like it's rotating. For the loading text, I added an animated dot effect. After I finished, I publish it to get the .html and .js file to put in netlify later on, same for my homepage as well.

3. Game pages

3.1 Kelereng

The first game elements that I created was kelereng. This section consists of three files: the main page, How to Play, and Fun Facts. I also built the gameplay in PlayCanvas. I started by creating the kelereng file as the main page. which contains general information about the game. will have 3 files: main page, how to play and fun fact. I also create the gameplay in playcanvas. I first created Kelereng file as the main page that will contain the information about kelereng in general.

Figure 3.10: Kelereng's files.

Figure 3.11: Kelereng's main page.

All of the pages feature an additional bottom navbar with a custom script used, allowing users to navigate to other game pages. For the script to work, I needed to assign an instance name to each symbol so I could reference it in the code. I made sure each instance name was unique so that clicking a button targets only one specific action at a time.

Figure 3.12: Script used for navigation bar.

Note: Some of the scripts inside the Actions panel were created with the assistance of Gemini AI.

Figure 3.13: Kelereng gameplay in PlayCanvas.

Next, I created the kelereng gameplay in PlayCanvas. I built the ground and surrounding walls using 3D box to keep the marble contained. Then, I created a ground material and applied it to the box, using ChatGPT to generate the grass texture.

Figure 3.14: Ground material.

Finally, for the kelereng itself. I used a sphere and applied a custom material to give it a texture. I designed the pattern in illustrator and mapped the image onto the material to apply it to the sphere. As for the script used, I have 2, one for the camera control and one to control the kelereng.

Figure 3.15: Script for camera control.

Figure 3.16: Script for kelereng control.

Note: Both script were created with the assistance of Gemini AI.

Lastly, I basically finishing the game by adding the menu screen to explain the game rules.

The 'How to play' and 'Fun Facts' pages for kelereng follow the same structure, using a card layout. Inside each card, there is an illustration alongside an explanation of the rules or fun facts. This file will later be duplicated and reused for every game page that shares the same layout.

Figure 3.17: Card layout.

Figure 3.18: Each of the card with the text when user hover.

Figure 3.19: Kelereng Fun fact page with reused card layout.

3.2 Gasing

For this page, I used the kelereng page as my base by duplicating it and updating the content and illustrations. While the main page and How to Play sections keep the same layout, I designed a new layout for the Fun facts section. I actually created this layout directly while building the working website, so it isn't in the Figma prototype.

Figure 3.20: Gasing fun fact layout.

Figure 3.21: When the gasing element clicked.

For the 'How to Play' page, I modified the layout slightly since Gasing rules are simple. In included the game modes on this page as well, splitting the content into a two-by-two card layout. When users hover over a card, it highlights whether it shows the steps to play or a game mode.

Figure 3.22: Gasing 'How to Play' Layout.

3.3 Engklek

The next game page is Engklek. While working on this page, I consulted with Mr. Shamsul, who suggested keeping the hovered state on the bottom navbar active or frozen to indicate the user's current page. Following his feedback, I disabled that specific button so it remains highlighted as an active state.

Figure 3.23: Active state.

For the fun fact and how to play page, It follows the exact layout like Gasing with different content inside.

Figure 3.24: Fun fact Engklek page.

Figure 3.25: How to play Engklek page.

3.4 Congklak

The next game page I created was Congklak. Like the other pages, it uses the same layout with updated content. To build it, I duplicated the base files and made copies of certain symbols, ensuring new instance names were assigned to prevent code errors.

Figure 3.26: How to play congklak page.

Figure 3.27: Fun fact congklak page.

Figure 3.28: Congklak main page 1.

Figure 3.29: Congklak main page 2 with HTP and FF button.

3.5 Lompat Tali

The final page I created was Lompat Tali. This section includes an extra page that different from others: 'Create Rope' page. Because jump ropes in Indonesia are traditionally handcrafted from rubber bands, this page shows a quick demo of how the rope is made before playing the game.

Figure 3.30: Create Rope page for lompat tali.

In Create Rope page, I create simple animation to demonstrate how it works. I put a sub title to indicate the steps.

Figure 3.31: Lompat tali Fun fact page.

Figure 3.32: Lompat tali Fun fact content.

Figure 3.33: Lompat tali How to play page.

Figure 3.34: Lompat tali main page 2 consists of HTP and FF buttons.

Lastly, I searched click sound effect in pixabay.com and put it for every button that I have. Initially, I have a music in my page with mute button as well. But then, It keep overlapping whenever I goes to another page even though I already muted the previous page. Because of this problem, Mr. Shamsul suggest me to remove it and just put sound effect is enough.

So, I put sound effect using script. I put the music file .wav into the library and create a linkage name to be called in script.

Figure 3.35: Click sound file with the linkage name.

I also made sure to publish each file so they could later be deployed to netlify. In total, I created 18 files across all pages, generating 36 .html and .js files upon publishing.

Figure 3.36: Main lagi final files.

After I finish publishing and finalizing my files, I continue to deploy it in Netlify. I create one final file with only the .html and .js files with image and sound folder since the fla files can't be included when dragging the folder in netlify.

Figure 3.37: Deployed in netlify.

Deploying to Netlify came with some errors. I ran into issues where several images on the website suddenly stopped displaying or went missing, even though the links still worked. I tried redeploying multiple times, but the problem only seemed to get worse.

4. Final Submission

Final Website Link

https://main-lagi.netlify.app/

Due to persistent errors on Netlify, Mr. Shamsul suggested creating a video walkthrough of the working version that I launched from animate. This allows us to demonstrate how the site is supposed to look and compare it directly with the deployed Netlify version.

Video Walkthrough

5. Feedback

Week 9

I basically consult my final prototype after his feedback last time, and he said all good and I can proceed.

Week 10

I started to consult my final website in animate, I have some issue consulting online since it's very laggy. But, I manage to finish my homepage with slight issue I need to fix for the next consultation.

Week 11

No class

Week 12

I consult about my overall layout that I will basically have for every games. He said all good, but I need to add something for usability.

Week 13

I'm almost done with all the layout and have problem with music. The music keep overlapping when i turn it on in one page and goes to another page.

Week 14

I decided to remove the music and add sound effects click for every button that i have.

6. Reflection

Throughout the development of this website, I learned a lot by picking up a new tool: Adobe Animate. Honestly, this application was a struggle to work with. I ran into constant errors, and Adobe kept quitting unexpectedly. On top of that, whenever I launched my files, some of my assets would disappear even though they were still there in my original files. I consulted Mr. Shamsul about this, and he understand how buggy and prone to errors this software can be.

The concept of my website relied heavily on illustration, which was another big challenge for me since I had to draw all of my assets from scratch. Still, it was rewarding knowing I built the site entirely with my own original design. The main challenge was maintaining consistency while creating different icons for different pages. Even though Mr. Shamsul never brought it up, I'm still make sure everything stayed consistent.

Lastly, I want to say thank you to Mr. Shamsul guidance for this website to work. He provided us tutorial and gave useful feedback through every consultation that I had with him. Overall, this module was fun and definitely learn something from it.

Search This Blog

Madeline Ordelia Tjahjadi (0376920)