Advanced Interactive Design/ Final Project Thematic Interactive Website

on
16 / 11/ 2024 -  29 / 12 / 2024  (Week 09 — Week 14)

Kim Seoyoon / 0357755

DST 60804 / Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University

Final Project / Thematic Interactive Website

TABLE OF CONTENT

TUTORIAL / PRACTICAL 

INSTRUCTIONS

FINAL PROJECT

FEEDBACK

REFLECTION

TUTORIAL / PRACTICAL

WEEK 9– Movie Clip Animation & JS using Gsap

Fig 1.1 Movie Clip Animation on Adobe Animate, Week 9 (19/11/2024)





In week 9, Mr Shamsul taught us how to apply JavaScript actions to the animation. We also learned about movie clip animation using the action and symbol tool.

Notes
  • The function name needs to be different when applying action to the navigation button 
WEEK 10– Applying sound effects to the animation on Adobe Animate

In week 10, Mr Shamsul taught us how to add sound effects to our animation using Adobe Animate. Below are some notes I have taken down.

Notes
  • Import the mp3 sound file first into the library, then click the button symbol that you would like to insert the sound effect. Create a new layer named 'sound' and drag the imported sound into the stage on the 'hover' keyframe.

INSTRUCTIONS

Module Information Booklet

Final Project– Thematic Interactive Website (40% Individual)
Timeframe: Week 09 – Week 13 (Deadline Week 14)

Students will synthesise the knowledge gained in tasks 1 and 2 for application in task 3.
Students will create integrated visual assets and refine the prototype into a complete working and functional product experience.

FINAL PROJECT PROCESS

1. Recap
For this final project, I have introduced previously in Task 2 to create a fan promotion website for a Netflix Stop-motion anthology film called 'The House'. The website contains information on the 3 chapters with characters, plot, chapter gallery, soundtrack etc. 

Below are the wireframes I created during Task 2, which I will be referring to my overall design for this final website:
Fig 2.1 Thematic Website Wireframes from Task 2

2. Home Page (Main)

Asset Making
To begin with the final project, I first used Adobe Illustrator to create visual assets for my home page. For the background image of the home screen, I used artwork by Nicolas Menard and Manshen Lo, who were the artists in charge of the main title sequence of the film. 

Below are the visual assets I created on Adobe Illustrator which will be used as buttons and animations.

Fig 2.2 Visual Assets for Website

Creating Main Page on Adobe Animate
After finishing the asset-making, I moved on to Adobe Animate to begin creating the website. Below is the document setting for my website file:

Fig 2.3 Document Settings

Firstly, I placed the background image to document the size and added the door asset to function as a button that links to the chapter selection page. I also added a door creaking sound effect inside the isolated layer so that when it's clicked, the colour is inverted and it makes an opening sound. 

Fig 2.4 Door Button Layer & Action

Loading Page
I also added animated effects on the loading page using the clock asset I created previously:


Fig 2.5 Loading Screen Animation & Preview

Navigation
For navigation, I added a label name onto the code for each button so that it leads to the correct page when clicked. I also added one for the logo to be linked with the main page once clicked so that it is easier to go back and forth when using this website. 

Fig 2.6 Navigation & Preview


3. Chapter Selection Page

Fig 3.1 Chapter Selection Page

For chapter icons, I used the artwork of the clocks to represent each chapter. The clock artworks are taken from the beginning of each chapter in the film. I used shape tween on these button symbols to create a slide-in animation with some delay in keyframes for each chapter button. 


4. Chapter Contents

Characters Page
For the character information in each chapter, I created framed icons of each character using Adobe Photoshop. In Chapter II, I used a plugin mockup model for the iPhone screen mimicking an incoming phone call. 

Fig 4.1 Creating Character Icons in Photoshop

All three chapters share the same format, but they consist of each of the content based on the chapter. I also made each chapter fit into their colour schemes. 

Fig 4.2 Characters Page Preview

Fig 4.3 Analysis, Gallery, Soundtrack Page Preview

Fig 4.4 Colour Schemes

Fig 4.5 Chapter I Layers

Carousel Gallery
For carousel gallery, I tried to code according to the frame number that I placed the photos in, but somehow there is an error with the next and previous keys not working in a loop that I could not fix.. 

Fig 4.6 Carousel Gallery Action Script


Official Soundtrack Button
For the hyperlink on the official soundtrack button, I used Event Listener code to link to the YouTube soundtrack playlist in the action script.

Fig 4.7 Soundtrack button


5. Additional Changes

About Page
After completing the planned content pages, I felt that the overall website seemed a bit limited in terms of user interaction and the purpose of promoting the film, I decided to add another page consisting of film information with trailer videos, and also a button that links to the Netflix page itself. 

Fig 4.1 Trigger Warning Page & Trailer Page

I also added a hover effect on the buttons:

Fig 4.2 Button Hover Effect


Trailer & Trigger Warning Page
For the trailer page, I added a trigger warning cover on top of the trailer video to let users know about what's in the video to prevent them from triggering. 

Fig 4.3 Trigger Warning Page & Trailer Page

Main Title Sequence Video Page
For the main title sequence page, I had a minor problem with the page playing the same trailer video as above even after placing them in separate keyframes. To fix this, I added instance names to each video component and added a code snippet to let the file know it should play a different video. 

Below is the action script I used for both videos. The left one is the original code I placed for each video and the right one shows the additional code for it to play a different video on a different page. 

Fig 4.4 Action script for both Videos

Fig 4.5 Main Title Sequence Page Preview


After finalizing everything, I uploaded my Gsap Folder onto the Netlify server to deploy as a website.


Fig 4.6 Netlify Web Info

For some reason, the uploaded website doesn't load right away after opening the link, I think it was from heavy file loads but it works normally after waiting for a minute. 

Here is the link to my website: https://thehouse2022website.netlify.app/

FINAL SUBMISSION

Website Previews

Fig 6.1 The House, 2022 Website Previews (PDF)

Link To Website

The House, 2022 Website by Kim Seoyoon

Link to 'The House, 2022 Website': https://thehouse2022website.netlify.app/ 

*It takes a minute or two for the website to load as the file is heavy*

Website Walkthrough Video

FEEDBACK

Week 12:
I had an online consultation with Mr Shamsul on Week 12, he commented on the overall design with simple black and white designs for the home and chapter selection page. He also suggested it would match better with the original black background if the chapter pages have darker backgrounds.

REFLECTION

Completing the final project of this module was overall a fun experience. I got to create an interactive website that promotes and introduces my favourite film, which includes my personal analysis of the plot of each chapter in the film, and laying out good still cuts of each scene and also some concept sketches. It was also nice to utilize the knowledge of the tools in Adobe Animate that we learned during each week of classes and every tool was important and useful. It was also interesting to see how the code works along with the animated elements in the layers to create an interactive button. Despite the fact that I lacked in structuring the code for the carousel gallery, I am overall satisfied with how my website came out and it was enjoyable to create something on Adobe Animate for the first time.  

Comments

Post a Comment