Advanced Interactive Design - Final Project: Completed Thematic Interactive Website

on

19/11/2024 - 08/01/2025 / Week 9 - Week 15
Joey Lok Wai San / 0350857
Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media 
Final Project: Completed Thematic Interactive Website


TABLE OF CONTENTS


LECTURES

All lectures and exercises completed in Advanced Interactive Design - Lectures & Exercises


INSTRUCTIONS

https://drive.google.com/file/d/1jb7SAHLergayyQzswyaGmOKr6Rq0Kefj/preview


FINAL PROJECT: Completed Thematic Interactive Website

In this task, we will synthesise the knowledge gained in Tasks 1 and 2 for application in Task 3. We will create integrated visual assets and refine the prototype into a complete working and functional product experience.

Requirements
  • Upload the website to a web server.
  • Record a video walkthrough.
  • Online posts in your E-portfolio as your reflective studies
  • Make sure to embed or provide a link to the website and the video from the blog post.

Initial Attempts
My initial plan was to find for this project was to find tutorials on how to do certain animations and learn. However, there is a lack of videos on Adobe Animate, let alone making a website using it. I hit a lot of road bumps along the way.

Unused Assets 
In my initial attempt at this project, I had a lot of ideas such as using videos to make my website more interactive. These are some of the videos I created for my Darth Maul website using After Effects.

Fig. 1.1 Hologram Video Progress, Week 10 (31/11/2024)


Fig. 1.2 Hologram Video - Unused, Week 10 (31/11/2024)

I also created a few more video assets using After Effects, including audio waves as well as a glitchy logo effect similar like the hologram. I followed a few tutorials online for both animations.


Fig. 1.3 Audio Wave - Unused, Week 10 (31/11/2024)


Fig. 1.4 Logo Hologram Glitch - Unused, Week 10 (31/11/2024)

However, after searching around I discovered that Adobe Animate does not support MP4. The only way possible is to import it as a GIF but that would cause the file size to become extremely large and make it very laggy. I spent at least a few days trying to export my videos as GIFs and then import them into Photoshop and Adobe Animate, but the file sizes were so big it made my laptop run out of storage space lmao

A lot of the assets I made were done in After Effects. This was such a waste of time because I could not use those assets in the end and they made my laptop die


Fig. 1.5 Result of Unused Assets - Converting MP4 to GIF, Week 12 (10/12/2024)

Finally giving up on my hopes and dreams of having a sci-fi website with lots of cool holograms and videos, I moved to just making the website in its simplest form in Adobe Animate. I didn't get too far before hitting another huge problem.

Unused Screens
In my prototype, I have a hamburger icon which opens a full-page navigation menu. It was a struggle to code and design it on Adobe Animate but I managed in the end, however, the problem that emerged was linking the button to the next page.

Since the navigation bar is in an MC timeline, I couldn't call the parent timeline no matter what I tried. Even the code from AI and suggestions didn't work at all and my friend faced the same problem as well. Again, I spent far too much time trying to solve the problem and my stubbornness wasted at least another few days.

Fig. 1.6 Unused Screen - Full Page Navigation, Week 12 (10/12/2024)


Fig. 1.7 Unused Navigation Bar, Week 12 (10/12/2024)

This is my original home screen design when I was doing the full-page navigation menu. There are more images of my progress but I'm too lazy to find and upload them onto the blog. The images below should be sufficient.


Fig. 1.8 Unused Screen - Original Home Page, Week 12 (10/12/2024)


Fig. 1.9 Entire Initial Attempt, Week 12 (10/12/2024)

These are all my trial-and-error files, as you can see there are multiple because everything keeps breaking down and not working. As you can see one of the files is almost 1GB big - this is the file using GIFs.


Fig. 1.10 All Trial Files (Broken), Week 12 (10/12/2024)


Website Redesign in Figma
Finally accepting my fate that I would have to redesign my website quite a bit, I went back to the drawing board and kept everything as simple as possible.


Fig. 2.1 Redesigning in Figma, Week 12 (10/12/2024)

Navigation Bar
Since the full-page menu navigation is out of the question, I did a regular top navigation bar. It took a while to design the navigation, as well as adjust all the pages to incorporate it. I used Figma to make a few variations of the navigation bar and tried it on a bunch of compositions until I found the one I liked.

Fig. 2.2 Initial Navigation Bar Redesign, Week 12 (14/12/2024)

My initial attempt was just a regular plain design, but it felt very boring and common. To make it more on the theme, I referenced Darth Maul and his horns and sharp nature, using it to inspire my design. In my opinion, while I liked the initial idea, the navigation bar felt very open and looked as if it took up a lot of space. However, after flipping it around, it definitely looks a lot better. It also made a lot more sense in the way that the nav items got highlighted and selected.

Fig. 2.3 Improved Navigation Bar Redesign, Week 12 (14/12/2024)

Home Screen
For the home screen, I recreated the composition because a) I wasn't happy with it and b) the navigation bar did not match the vibe of the home page. I referenced a bunch of website designs on Pinterest that featured a main character on the front page. One thing I realised is that the body of the character is mostly viewed from the top half and the full body is not shown.


Fig. 2.4 Website References - Character Home Page, Week 13 (18/12/2024)

I tried to play with the composition and ended up liking it quite a lot in the end. Initially, I was not very satisfied with the design and now I felt like it was going somewhere.


Fig. 2.5 Home Page Redesign, Week 13 (18/12/2024)

On top of this, I played around with multiple backgrounds until stumbling upon one that looked really interesting. The lines provide the composition with some depth and draw attention to the character even more.

Fig. 2.6 Background Variations, Week 13 (18/12/2024)


Fig. 2.7 Home Page Before (Left) & After (Right), Week 13 (18/12/2024)

History Screen
The content of the history page has to be adjusted a little bit due to the dimensions of the screen that I chose. I stretched the images a little to fill the space but when that was not enough, I decided to add more content into each section as well as images.

Fig. 2.8 History Page Before (Left) & After (Right), Week 13 (18/12/2024)

Powers Screen
For the powers page, I was really sad that I could not use my original prototype design as I really liked it a lot but the navigation bar sat really weirdly with the layout. I changed it so that it would remain the same concept and so the buttons would be consistent on all screens. 
  • Original is black and white, hovering reveals colour, clicking enlarges the image and has a glow behind. 
I got inspired by a handful of websites I saw online, where the content is displayed like mini tabs in the centre of the page - not sure how to describe it but yeah below is a reference.


Fig. 2.9 Website References, Week 13 (19/12/2024)

I did what I could to make it look good as well as match the vibes and honestly, I think this is my favorite page in terms of the layout design. Sometimes redesigning can be a good thing 

Fig. 2.10 Powers Page Before (Left) & After (Right), Week 13 (19/12/2024)

Experimenting with Layouts
The images below are me experimenting with different layout designs for the pages. They ended up not being used as I tried to stick to my original designs more. The concepts of some of them were really cool in my opinion though.


Fig. 2.11 Unused Layouts, Week 13 (19/12/2024)


Website Creation in Adobe Animate
When I was done with the back and forth of redesigning my website and multiple trials with Adobe Animate, I started creating my website from scratch again.

Introduction Screen
The first thing I did was make the introduction animation. At first, it was a lightsaber turning on but after my consultation session with Mr. Shamsul, I decided to scrap that idea and make a Star Wars intro.

Fig. 3.1 Initial Introduction Screen, Week 14 (22/12/2024)


Fig. 3.2 Initial Introduction Screen, Week 14 (22/12/2024)

I got the inspiration from this website which I thought was pretty cool. Initially tried it on a red background with a Darth Maul backdrop but then changed it to a star background like the one in all the Star Wars opening sequence which I imported in as a GIF (yes I'm still trying to make the GIF work)

Fig. 3.3 Loading Screen Website Reference, Week 14 (22/12/2024)

Fig. 3.4 Experimentation with Introduction Design, Week 14 (22/12/2024)


Fig. 3.5 Attempt at Introduction Animation, Week 14 (22/12/2024)


Fig. 3.6 Attempt at Button Hover, Week 14 (22/12/2024)

To make this animation, I made the outline of the logo a button and an animation of the filled logo going from big to small to overlay on top of the outline logo. This is so that when the button is clicked on, the animation plays. Then I made a transition from the logo to the home screen background by doing a fade-out effect.


Fig. 3.7 Logo Transition On Click, Week 14 (24/12/2024)

Fig. 3.8 Filled Logo & Background Transition, Week 14 (24/12/2024)


Fig. 3.9 Timeline Transitions, Week 14 (24/12/2024)

I then added sound effects such as a lightsaber hum when the button is hovered over, and then on click it plays the Star Wars soundtrack. On the website, the audio doesn't load so here is it playing on Adobe Animate and only working there.

Fig. 3.10 Code to Load Audio When Clicked, Week 14 (25/12/2024)

Fig. 3.11 Final Introduction Screen, Week 14 (25/12/2024)

Navigation Bar
To code this, I exported my design as a PNG and imported it into Adobe Animate. Once there, I made each word into a button symbol. This allows me to edit the hit and over states of the buttons, and create the highlight effect when it is hovered over and selected. I did a transition upon entering using a mask.



Fig. 4.1 Animating Navigation Bar using Mask, Week 14 (22/12/2024)

For the buttons on the navigation bar, I added sound effects such as a lightsaber turning on to distinguish from the button clicks.


Fig. 4.2 Making Navigation Buttons, Week 14 (23/12/2024)

When the setup was done, I used the code that we learned in class and adapted it to fit my website. This was the time I also added label names for my pages.


Fig. 4.3 Code for Navigation Bar, Week 14 (23/12/2024)

*Problem with Navigation Bar*
I tried for several days using every method possible, even redoing the buttons and asking AI for help, but for some reason, the Affiliations button doesn't remove the highlight.

Fig. 4.3 Final Navigation Bar, Week 14 (25/12/2024)

Home Screen
Making this scene in Adobe Animate was a bit of a hassle. The first thing I did was try to insert the hologram as a GIF/MP4 I made and mentioned earlier. Instead of making my whole file lag and crash, I decided to use an image, convert it into a movie clip and then animate some hologram effects such as glitching. 

Animating Hologram Effects


Fig. 4.4 Hologram Appearing Using Masking, Week 14 (25/12/2024)


Fig. 4.5 Animating Hologram Effects in Adobe Animate, Week 14 (25/12/2024)

Marquee Text
Moving on, I made the marquee text by exporting my prototype marquee as an image and importing it into Animate. Then convert it into an MC - the first frame shows the beginning of the marquee and the last frame is the end of the marquee, and finally set the MC to loop. 


Fig. 4.6 Marquee Text Layer, Week 14 (26/12/2024)

'About' Pop-Up
One more thing added to the home screen was from the prototype design. Instead of a button, hovering and clicking on the hologram reveals a pop-up information about Darth Maul. I'm not sure if this makes the page too cluttered with all the elements but oh well. I made the background of the popup look like an overlay so the main focus is on the text instead of other elements.


Fig. 4.7 Progress of Creating a Pop-Up, Week 14 (26/12/2024)


Fig. 4.8 Code for Pop-Up to Appear, Week 14 (26/12/2024)

This is how the final home screen functions.


Fig. 4.9 Final Home Screen, Week 14 (27/12/2024)

History Screen
The history page was quite difficult to create until I realised I could adapt something we learned in class and make it fit my concept. 


Fig. 5.1 Tutorial Example From Class, Week 14 (28/12/2024)

From the tutorial in Week 9, I took the switch screens when you click on a certain button and changed the image to act as a button instead. I had two major problems with this screen that I had to solve so below are my problems and the solutions.


Fig. 5.2 Progress of Creating MC, Week 14 (28/12/2024)


Fig. 5.3 All MCs, Week 14 (29/12/2024)

1) Image button in an MC so it doesn't function on the main timeline when clicked
At first, I converted my image into a button and put it in an MC, but the problem was that it would only function in the MC timeline and not the main timeline. To solve this, I created the buttons outside of the MC and placed them on the main one instead. However, then there would be a button always on top of the MC and content. I added code to it so when the button is active the alpha would be 0 (transparent), and it will return to normal when another button is clicked.

Fig. 5.4 Image Button On Top of Content, Week 14 (29/12/2024)


Fig. 5.5 Code to Make Button Transparent When Clicked, Week 14 (29/12/2024)

2) Not scrolling to correct scene
As you can see from the screenshots below, my attempts to click the button and lead to a specific screen in the MC did not work. It was always landing halfway between two pages and not starting at the original position. After some mind-numbing hours staring at the scene, I realized the problem came from having the wrong X-axis of each scene.


Fig. 5.6 Not Scrolling to Correct MC, Week 14 (29/12/2024)


Fig. 5.7 Scrolling Corrected with X-Axis Position, Week 14 (29/12/2024)

Once everything was figured out, I tested it out and it worked all good. This is how the page functions as a whole.

Fig. 5.8 Final History Screen, Week 14 (29/12/2024)

Powers Screen
For this, I applied the same concept as the history screen. The button is grey on 'Over', and replaced with an image on top during 'Down'. 


Fig. 6.1 Button Hover Effects, Week 15 (01/01/2025)

Then for the image to go bigger and text to appear, I placed another image on top of the button and set the button itself to transparent.


Fig. 6.2 Creating Buttons and Layout, Week 15 (01/01/2025)


Fig. 6.3 Code for Buttons, Week 15 (02/01/2025)

This is how the page functions as a whole. I really like the design of this page the most.

Fig. 6.4 Final Powers Screen, Week 15 (02/01/2025)

Affiliations Screen
For the affiliations page, since there weren't any changes to the design I went straight into animating/ coding/ making it (I'm not sure what word I should use for creating a website with code in an animation software). This was also something we learned in class but my file got corrupted so I never got to complete the tutorial.

Fig. 7.1 Tutorial Example From Class - Credits to Janice, Week 15 (02/01/2025)

The concept was not that difficult, it was clicking a button and opening a tab by using Go To and Play - Label Name. Thanks to Janice for sending me her functioning tutorial file, which I just referred back and forth to make it work in my file. Thankfully it worked this time, if the same thing happened to me as it did in class I would cry (especially since it was not that difficult to do).


Fig. 7.2 Functioning Component Following Tutorial File, Week 15 (02/01/2025)


Fig. 7.3 Functioning Component Following Tutorial File, Week 15 (02/01/2025)

This is the code that I referenced from the tutorial by understanding and learning, as well as setting up the timeline so that it works.

 
Fig. 7.4 Code to Lead to Next Section, Week 15 (02/01/2025)


Fig. 7.5 Timeline Setup with Label Names, Week 15 (02/01/2025)

The only issue I came across with this is the buttons were not clicking and leading to the pop-up/ screen I wanted. I realized that the labels were all over the place - it happened with my navigation bar too. The label names would appear randomly halfway across the timeline and I'd have to delete them so the navigation works. 

Dumb moments:
One more thing that stressed me out a lot, which is really just dumb mistakes. I kept forgetting to put an instance name to my symbols. Every time I thought something would work and it didn't I was so confused and stressed, only to go back to my file and code and be like "Oh I forgot to put an instance name". Label names for navigation also disappear sometimes, so for each label I go to I had to reinsert the instance names for each button so that they would go and play that label. 

Adding Video/MP4 into Stage
In my original design for this page, I had a playable video. I came across a YouTube tutorial where they managed to insert a video using a YouTube URL link with a handmade component. I did not know how to import the component so I found a different method to import the video.

Fig. 7.6 Tutorial of Adding YouTube Video into Animate, Week 15 (02/01/2025)

First I found the YouTube videos I wanted and converted them to MP4 (this is probably illegal so I will not be disclosing what I used). Then to import an MP4 onto the stage, I opened the 'Components' tab under Windows and opened the 'Video' component. Under 'Component Parameters' put the source of the MP4. I had some struggles with the video playing immediately when the page was opened. I tried to use some code to stop this and then found such an easy method which is just turning off the 'Autoplay' under 'Component Parameters'


Fig. 7.7 Adding a Video Component & Adding Source, Week 15 (02/01/2025)


Fig. 7.8 Final Affiliations Screen, Week 15 (02/01/2025)

Editing Audio in Premiere Pro
I found some audio online to use for my website, especially the button clicks and background music. I added them as MP3. Some of the audio that couldn't be imported had to be converted into WAV file format.


Fig. 8.1 Editing Audio in Premiere Pro, Week 15 (03/01/2025)


Fig. 8.2 Adding Audio to Buttons, Week 15 (03/01/2025)

I added background music to play once the introduction animation audio was done playing. However, the file would not load or play sometimes even using code so I just gave up and left it to be. The background music is the Darth Maul song edited to suit the vibe of the website.


Fig. 8.3 Adding Background Music to Timeline, Week 15 (03/01/2025)

Netlify Upload
Finally, once the app was done and fully functioning, I deployed it in Netlify using a few tutorials online and some of what I remembered from our previous module. I could not upload the file however as it kept saying Error 404 and the page does not load.

Fig. 9.1 Netlify Upload Not Working, Week 15 (04/01/2025)

Then by some miracle of god Janice managed to upload it onto Netlify, it was because the HTML wasn't named as index even though it was but idk :/ So yeah that works now but most things don't work on Netlify. Also, I found out my file is like 2GB so that could be a big problem when loading.


Fig. 9.2 Netlify Upload, Week 15 (04/01/2025)

Unresolved Problems 
There are many issues that arose along the way, but these are some that persisted no matter how much troubleshooting I did. I spent almost a week solving these issues, and asked AI multiple times as well. These problems caused my website to not function so I had to remove some major features and keep it minimal.
  • Audio & Music: On load of the introduction and home page, the background audio is supposed to play. However, the audio does not load or start even with troubleshooting for a few days. Some button audio is also not working when published to Netlify.

  • Page Transitions: Adding transitions on click of the navigation buttons works fine, however, clicking on the final button/page 'Affiliations' causes the entire website to disappear as shown below. As a result, I decided to remove the page transitions. 

Fig. 9.3 Fade Transitions Between Pages, Week 15 (04/01/2025)
  • Navigation Bar: Once the 'Affiliations' navigation item is clicked, it stays highlighted forever, even when clicking on other pages. I redid the entire button multiple times as well and troubleshooted for days even using multiple AI platforms to help, but the issue still persisted. 
    (Update: Sometimes the navigation bar works normally, sometimes not)

  • Preloader: When published to Netlify, the preloader and audio do not play. The preloader shows a white screen instead. 

Fig. 9.4 Preloader Animation, Week 15 (04/01/2025)

In the preloader section of the Adobe Animate publish setting, the preloader GIF is inserted, but when publish it does not show.


Fig. 9.5 Publish Settings in Adobe Animate File, Week 15 (04/01/2025)


Final Project: Completed Thematic Interactive Website 
Fig. 10.1 Final Project: Completed Website - Presentation Video, Week 15 (04/01/2025)

Fig. 10.2 Final Project: Completed Website - Walkthrough Video, Week 15 (04/01/2025)

FEEDBACK
WEEK 11
You should change the lightsaber introduction animation as it doesn't feel very engaging, maybe you can make it move around or something.

WEEK 12
If you choose 1920x1080 still works if you set the publish setting to be responsive. Adjust the publish setting before you publish it. You can't import an MP4. The latest Adobe Animate doesn't allow it. What you can do is export the video as a GIF and import to the library in animate.

REFLECTION

Experience
My experience with this final project is pretty hectic. I thought it would be quite simple to create a website and that it wouldn't take so much time, but it turns out I was so wrong. There are so many issues with Adobe Animate starting with the fact it definitely should not be used to create a website. There is a surprising lack of tutorials available online so if you have any problems or issues that arise, AI is really the only solution and you have to be really smart, creative and patient to solve the issues.

Observations
One of the main things I observed was sometimes or most times you have to learn things by yourself. The tutorials provided by Mr. Shamsul were very helpful as they provided me with the basics of what I needed. Adapting and learning from what was provided can be a bit challenging, but I managed to grasp the concept and most importantly understand it. I'm really grateful for Mr. Shamsul he's a real one, gonna miss him a lot when he leaves (wishing him all the best with his future).

Findings
Throughout the project, I found that the more I used Adobe Animate the more I wanted to die but also that it wasn't that bad. It was a big struggle at first but I managed to get used to the application in a matter of days. I noticed the timeline at the beginning, especially the first few screens I created, were very messy. As more pages were developed, I organized the timeline better with the use of labels. I have at least 5 of the same documents for trial and error, and through this, I have learned to use folders to put my assets in Animate as well as use folders to group some of the layers together in the timeline so it would be less messy.

Comments

Post a Comment