Advanced Interactive Design - Final Project: Thematic Interactive Website

on

Week 09 - Week 14

Ahmad Firas Bin Ahmad Fisal | 0345121

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

Final Project: Thematic Interactive Website

INSTRUCTIONS


Final Project - Task Brief (Status: Completed)

We are required to synthesise the knowledge gained in tasks 1, and 2, for application in this final project. Students will create and integrate visual assets and refine the prototype into a complete working and functional product experience.

Requirements: 

- Netlify Link (Deployment)
- Record a video walkthrough 
- E-Portfolio posts 
- Embed/Provide a link to the website and the video from the blog post (Google Drive)


Important Recap:

Past Links


From Task 02: Interaction Design Planning and Prototype:

Prototype Link:

Main prototype viewing link: Click Here!
Remarks
- Kindly click the 'R' button on the keyboard to restart the prototype for a smoother viewing experience.
- Ensure that your cursor is moving around the crown jewel and move in and out of the crown to experience the animation style.
- Click on the spiders to view the features.

Figma Artboard Viewing:

Video Presentation of Task 02 (Not the final submission for this Final Project)



--

Progression of Final Project:

The Loading Page and Introduction Page, it is fully animated from Adobe Animate, It doesn't require any sort of coding. More showcasing will be done in a video presentation, during which I will showcase the project through Adobe Animate. However, I will attach a few screenshots of how it looks like in the timeline:

Loading Page

Introduction Page

Idea 01 (Part 1): To follow the original plan 

Crown and Spider layers (Separate)

I want to make the vision directly like what I originally planned in the Figma, which is to make the crown tilt as my mouse hovers over the selective spiders. However, this was a scraped idea as it did not work well in the Action coding later. I plan to do a canvas panning style where if the spider is clicked, the screen zooms to that particular crown and information will appear. However, seeing that the spiders are in a separate layer with the crown, this made it super complicated to code because you will then need to code extra just to ensure the other spiders are not staying on the screen as the 'camera' zooms into the crown. Even enabling the Label Name on those relevant layers did not go well.

Crown Tilting Functions

Event Listeners to the Spiders (Idea 01)

This is the original script to enable the function of the tilting of the crown by using GSAP. It looks appropriately done when it was functional but it wasn't that smooth of an experience once the spiders are clicked and it's time to zoom in, this is where the crumbling of the whole project starts. Because of that, I decided to change my idea entirely.

Idea 01 (Part 2):

Before I entirely changed the whole idea, I decided to introduce the Cancel button on the top left of the screen first to see if that would work too (You could view the Figma prototype again to get the idea of where I want the cancel button to be). Essentially, the button is used to revert back to the original crown position after you decide not to zoom in on any of the features anymore. If I don't introduce this, users can't go back to the original crown position (Pre-zoomed-in) as there is no code telling the project to do so. This was the initial idea of how the Cancel button comes into play.

Cancel Button (Overview)

Part of the Event Listener for the Cancel Button

This does not work well with the existing problem of the other spiders not following the instructions when zoomed in. Additionally, the cancel button wasn't working well as well due to the clashing of GSAP and codings. 

*Mainly, this is all caused by the separation of layers but with the intention to still do the canvas panning type of animation website.

--

Idea 02 (Chosen Idea): Streamlining the issues with plausible solutions (By changing certain styles)

As I was rewatching some of the lecture videos provided, apart from the Week 02 video that tells us the HTML5 project now could not be in separate scenes, I also watched the Week 10 videos that was a tutorial to show us the function of the GSAP - to, from, fromto method and also how to trigger the buttons for navigation.

So when I reflected back on my project, this was the hardest part for me during the project making as this was the biggest hurdle. But fortunately, this idea came to mind that practically solved everything. I decided that the best decision was to 

- Have the spiders and crown in one layer, so that canvas panning can be done accordingly, 
- Since now these are in one layer, I figured, having the Crown follow my cursor's direction at all times would be more functional than doing a separate mouse enter to those 3 spiders to activate the crown's tilting effect.

Crown's Movement

Having the idea to make the crown follow my cursor is actually better at the end of the day because it looks smoother and more professional than just a normal tilt/shake when the mouse enters the spider location on the crown.

Rough making of the buttons for Idea 02 and Mousemove for Crown

Cursor Follow - mousemove

The mousemove feature is now activated to the Crown making it move according to numbers that I've put in under the function followCursor(event) code.

Buttons

As for the buttons, the rough idea became a true one after I had decided on the colours and position of the buttons. This is one of the tutorials that I'd watch from my lecturer's past videos.

Buttons Event Listeners

Features

Features and Buttons relate heavily to each other. As you can see from the event listeners for the buttons, they are all directed to "goToLocationX". This leads to the setup for the features function now. Let's go deeper into this.

This is how it looks like in the timeline, as you can see most of the keyframes are stopped at Frame 307, as this is where all of the Action codes are handled in:-

Features, CrownSpiders, and Buttons Overview

This is where the button event listeners were referencing. This function is to alert the project to bring out those respective features when called upon. At the same time, a hideFeatureXX is used to hide certain features when the other feature is called upon. This is to prevent all of the features to be showing at the same time when one of the buttons is clicked. GSAP codes were used to determine the location of the animation to happen and locate.

"goToLocationX" Overview

Feature functions like showFeature and hideFeature were then specified to further have transitions to ensure that they are well hidden before being called upon, and be visible with a fade-in when called upon. I was having trouble having the content transition from outside of the screen and slide in, so instead, I redirected the features to a fade-in at a fixed location by manipulating the alpha (opacity).

Also, the function openYouTube video was added to the second feature (Feature02) of my project so users can actually click on the image of the Song Preview image, and they will be directed to the music video of the song on YouTube.

Feature Functions Overview

This is one of the parts where it needs countless amount of trials and errors as well. I could not get why but in the end I managed to find the perfect x and y coordinates I wanted them to be at and to ensure that the Billie Eilish logo at the bottom centre of the screen was present at all times to maintain design consistency and branding.

Feature Location Coordinates

Reset Crown's Position (By using Billie's Logo)

Before this resetCrown function was introduced, the project was as if after zooming in to those three features, there was no way for the user to go back to the original crown position where it's not zoomed in as the Cancel Button idea previously was scraped due to technical issues.

This was when an idea creatively came to mind to make the figure logo at the bottom centre of the screen clickable and to reset back the crown to its original position technically it is a continuous loop going on users can go back at the mousemove feature on the crown and click back to the feature buttons to go in those specific features and also to go back to the Main Page (the Crown) by clicking the figure logo. 

resetCrown Function

Figure Logo Event Listener

These were all a success but it was a rough journey of trial and error, jotting this progress might look like it was that simple to make but to make it simple in the end, hardships were needed to happen to let more creative solutions appear and applied.

Music:

Music was decided later at the end after I deployed the project on Netlify. I was looking through the project and decided that if there was an actual snippet of the song, would make this project even more immersive as it was meant to be a "Promotion" for one of Billie Eilish's singles. So, what better way than to give a teaser of how the song would sound like.

Before moving on to the HTML edits to make this background music possible, this particular code needs to be in the Action code to activate the whole song. onCrownAppear();

Music Activation 01

Moving on to HTML:

a variable for the background music was introduced and a series of backgroundMusic codes were added under the function init. Information such as the music project directory, the time in seconds that I choose to start the song with, and looping of the music which then I've decided to close the looping to play the narrative of it being a "teaser". 

Music Activation 02

The rest of the codes you see in between are Music-related to ensure that an event listener is happening first because Google Chrome has a sort of autoplay block policy so to bypass this, I had to ensure that there is a sort of event listener going on. This is why most projects are there with a play button to ensure that there is an interaction going on first so it bypasses the policy. I decided to use a mousemove interaction, so when the user moves the cursor during the preloader stage even if it's once, that is considered an interaction so it bypasses the block policy and ensures that the music starts as soon as the animation of the project starts.

The teaser of the music was also intentionally picked to be in a certain way that the lyric 'Crown' will be sung when the CrownSpiders actually appear on the screen. this is why the song was specifically coded to start at 141 seconds. It so happens to be that the song is also finishing, so upon a number of tests, the song will end just in time after users have explored every single feature on the thematic interactive website.

Music Activation 03

Netlify Deploying

There are quite many deployments made as the music decision was made way later after I had actually deployed and explored my project. Another reason was that when we had a video to follow by our lecturer on how to publish our animation project, we had to follow his instructions on how to set the publish settings on Adobe Animate before deploying on Netlify, so I was trying out the difference between having the project in 'Fit to view' or 'Stretch'

Netlify deploys stage

It was then I realised that Google Chrome in itself does not use the dimension of 1920x1080p but instead uses 1280x720 resolution which is HD if we are talking about Adobe Animate files, my project was made with the Full HD; 1920x1080p so there is a bit of size eating up the edges when I do stretch. So I opted with Fit to view, which resulted in having left and right borders. This was the same thing that happened in my lecturer's project in the lecture video, so he taught us how to change the body colour in the HTML file to make it the same as the project's background so it would look seamless.

Side Panel Borders - Colour

This progression blog may not have many visuals to let readers visualise what the project actually looks like. Readers are highly recommended to watch the video walkthrough of the application down below in the submission section.

** Addition Information

- Please be informed this project is utilising the font acquired from Google Fonts: Jaro. In any case, if this affects your viewing experience, kindly watch the video walkthrough to see the original experience of the project, or install the font file on your desktop/laptop to view this as intended.


--

Final Project Submission


(move your cursor a couple times while the preloader actively loading, to bypass the autoplay block policy by Google Chrome, so that the song could be played with the project.)

Video Walkthrough of the Project: 


Explanation Video of the Project Making:



Reflection

This module structure and workload were the best ones for me. It made me focus on learning and reflecting on the principles of UI/UX as I go, compared to Application Design II and Games Development. While busy with other projects, I took the leap of faith to stop whatever I was doing and start with this interactive website project and managed to hyper-focus on the project making it my vision of the idea I had in mind. 

I was amazed that I could deliver what I've delivered for this project and the troubleshooting that I did along the way amazed me. It made me realise to never doubt yourself until you've actually tried it with full effort. What kept me going is because of the big interest I have in Billie Eilish and this project feels too real as if I am actually making one for the artist. I was proud of my work and glad that it turned out the way it did. 

Comments

Post a Comment