10/12/25 - 11/01/26
Nadhrah binti Abdul Razak / 0359620 / Bachelors of Design (Hons) in Creative Media
Advanced Interactive Design
Final Project - Completed Thematic Interactive Website
Final Project - Completed Thematic Interactive Website
.jpg)
INSTRUCTIONS
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, a minimum of 5 working pages.
Deploy the final website to Netlify or GitHub. Add the link to your blog (e-portfolio). As a backup plan, upload the project folder to Google Drive as well. Make sure that the Google Drive link is set to public. No video walk-through is required for this submission.
Deploy the final website to Netlify or GitHub. Add the link to your blog (e-portfolio). As a backup plan, upload the project folder to Google Drive as well. Make sure that the Google Drive link is set to public. No video walk-through is required for this submission.
Development
Home Page (index.html)
I started with my loading page section and made it into a basic animation using bullets as the "loading bar". For the duration of the length, I didn't want something that was too long so I made the whole duration around 5 seconds.
Fig 1.1
As for landing page, I used both classic and shape tween to get the animation I wanted for it.
Fig 1.2
For the homepage, I designed it on the same file as the loading and landing page. For the animations, I used the mask feature to imitate a "curtain opening" animation for the navigation bar, logo, and the texts. As for the image, I used a zoom out animation by using classic tween.
Fig 1.3
I specifically made the navigation bar buttons to react differently when users hover over it so that it gives a clearer indications that the buttons are clickable.
Fig 1.4
I made sure to give the navigation buttons actions as well by making each of them link to a different file.
Fig 1.5
The logo beside the navigation bar is also clickable and is linked to the default page of the website (index.html)
Fig 1.6
Fig 1.7
About Page
For the starting animations of the About page, I used the same animations I did for the home page to keep the whole website design consistent.
Fig 2.1
For the images, I made it clickable so that users can scroll through to see a few thumbnails of Valorant's lore. Utilising the frames, I labelled each one of them so that the images transition to different ones. I also incorporated a fading animation using classic tween for each time it is clicked to make the whole transition less static.
Fig 2.2
Fig 2.3
Agents Page
Since Valorant has a total of 4 agent roles, I decided to divide this section into 5 where there one of them is the agents menu which is the main page, followed by the 4 roles; Initiator, Duelist, Sentinel and Controller. With this in mind, I made four clickable buttons on the agents menu page where it would lead users to the list of agents available in Valorant.
For the agents menu section, I used the same default animation that I used for the rest of my pages.
Fig 3.1
For the list of roles page, I used a "carousel slider" concept for my interactivity. This part was one of the most tedious parts in my opinion as I had to use frame labels to create a scrolling animation for each group of agents and add codes to each of them. And all the animations needed both functionality where you can scroll to previous list and to the next list.
Fig 3.2
Fig 3.3, example of codes used for scrolling animation
Maps Page
For the Maps section of my website, I used the same carousel method as my agents page except the direction goes vertically unlike the agents page which is horizontal. I also added a main page for the maps page where there is a singular button that leads you to the list of maps in Valorant.
Fig 4.1, maps menu section
Fig 4.2, animation used for scrolling
Fig 4.3, example of codes used for maps list
Game Modes Page
This is the page I found the trickiest to do on Adobe Animate as I had to use javascript in order to create an FAQ accordion style interactivity.
Fig 5.1, layout
I had to first start of by creating a Graphic symbol for each of the game modes. I used the method shown below for all the list of game modes.
Fig 5.2
Fig 5.3, action for all the symbols
After that, I had to put all of the symbols into a container and convert it to a movie clip. Then, I had to use javascript in order for the accordion to work.
Fig 5.4, javascript used
I started with my loading page section and made it into a basic animation using bullets as the "loading bar". For the duration of the length, I didn't want something that was too long so I made the whole duration around 5 seconds.
Fig 1.1
As for landing page, I used both classic and shape tween to get the animation I wanted for it.
Fig 1.2
For the homepage, I designed it on the same file as the loading and landing page. For the animations, I used the mask feature to imitate a "curtain opening" animation for the navigation bar, logo, and the texts. As for the image, I used a zoom out animation by using classic tween.
Fig 1.3
I specifically made the navigation bar buttons to react differently when users hover over it so that it gives a clearer indications that the buttons are clickable.
Fig 1.4
I made sure to give the navigation buttons actions as well by making each of them link to a different file.
Fig 1.5
The logo beside the navigation bar is also clickable and is linked to the default page of the website (index.html)
Fig 1.6
Fig 1.7
Fig 1.2
For the homepage, I designed it on the same file as the loading and landing page. For the animations, I used the mask feature to imitate a "curtain opening" animation for the navigation bar, logo, and the texts. As for the image, I used a zoom out animation by using classic tween.
Fig 1.3
I specifically made the navigation bar buttons to react differently when users hover over it so that it gives a clearer indications that the buttons are clickable.
Fig 1.4
I made sure to give the navigation buttons actions as well by making each of them link to a different file.
Fig 1.5
The logo beside the navigation bar is also clickable and is linked to the default page of the website (index.html)
Fig 1.6
Fig 1.7
About Page
For the starting animations of the About page, I used the same animations I did for the home page to keep the whole website design consistent.
Fig 2.1
For the images, I made it clickable so that users can scroll through to see a few thumbnails of Valorant's lore. Utilising the frames, I labelled each one of them so that the images transition to different ones. I also incorporated a fading animation using classic tween for each time it is clicked to make the whole transition less static.
Fig 2.2
Fig 2.3
For the starting animations of the About page, I used the same animations I did for the home page to keep the whole website design consistent.
Fig 2.1
For the images, I made it clickable so that users can scroll through to see a few thumbnails of Valorant's lore. Utilising the frames, I labelled each one of them so that the images transition to different ones. I also incorporated a fading animation using classic tween for each time it is clicked to make the whole transition less static.
Fig 2.2
Fig 2.3
Agents Page
Since Valorant has a total of 4 agent roles, I decided to divide this section into 5 where there one of them is the agents menu which is the main page, followed by the 4 roles; Initiator, Duelist, Sentinel and Controller. With this in mind, I made four clickable buttons on the agents menu page where it would lead users to the list of agents available in Valorant.
For the agents menu section, I used the same default animation that I used for the rest of my pages.
Fig 3.1
Since Valorant has a total of 4 agent roles, I decided to divide this section into 5 where there one of them is the agents menu which is the main page, followed by the 4 roles; Initiator, Duelist, Sentinel and Controller. With this in mind, I made four clickable buttons on the agents menu page where it would lead users to the list of agents available in Valorant.
For the agents menu section, I used the same default animation that I used for the rest of my pages.
Fig 3.1
For the list of roles page, I used a "carousel slider" concept for my interactivity. This part was one of the most tedious parts in my opinion as I had to use frame labels to create a scrolling animation for each group of agents and add codes to each of them. And all the animations needed both functionality where you can scroll to previous list and to the next list.
Fig 3.2
Fig 3.3, example of codes used for scrolling animation
Maps Page
For the Maps section of my website, I used the same carousel method as my agents page except the direction goes vertically unlike the agents page which is horizontal. I also added a main page for the maps page where there is a singular button that leads you to the list of maps in Valorant.
Fig 3.2
Fig 3.3, example of codes used for scrolling animation
Maps Page
For the Maps section of my website, I used the same carousel method as my agents page except the direction goes vertically unlike the agents page which is horizontal. I also added a main page for the maps page where there is a singular button that leads you to the list of maps in Valorant.
Fig 4.1, maps menu section
Fig 4.2, animation used for scrolling
Fig 4.3, example of codes used for maps list
Fig 5.1, layout
Fig 4.2, animation used for scrolling
Fig 4.3, example of codes used for maps list
Game Modes Page
This is the page I found the trickiest to do on Adobe Animate as I had to use javascript in order to create an FAQ accordion style interactivity.
This is the page I found the trickiest to do on Adobe Animate as I had to use javascript in order to create an FAQ accordion style interactivity.
Fig 5.1, layout
I had to first start of by creating a Graphic symbol for each of the game modes. I used the method shown below for all the list of game modes.
Fig 5.2
Fig 5.3, action for all the symbols
Fig 5.2
Fig 5.3, action for all the symbols
After that, I had to put all of the symbols into a container and convert it to a movie clip. Then, I had to use javascript in order for the accordion to work.
Fig 5.4, javascript used
Final Outcome
Netlify: https://theradiantarchives.netlify.app/Google Drive: Folder Submission
Reflection
ExperienceFor this final project, I used what I learned from Tasks 1 and 2 to create a working website with multiple interactive pages using Adobe Animate. I added animations, clickable buttons, navigation links, sliders, and an accordion interaction. The project involved a lot of trial and error, but I managed to put everything together into a complete and functional website.
ObservationWhile working on this project, I realised that keeping animations and layouts consistent across pages helped the website feel more organised and easier to use. I also noticed that Adobe Animate is very technical, and even small interactions took a lot of time to build and fix. Testing and adjusting animations became a big part of the process.
FindingsThis project made me realise how challenging and time-consuming interactive design can be. Adobe Animate was difficult to use, but I was still able to finish the assignment, which I’m proud of. Even though the workload was heavy and the process was tedious, the experience helped me better understand how interactive websites are made.
Experience
For this final project, I used what I learned from Tasks 1 and 2 to create a working website with multiple interactive pages using Adobe Animate. I added animations, clickable buttons, navigation links, sliders, and an accordion interaction. The project involved a lot of trial and error, but I managed to put everything together into a complete and functional website.
Observation
While working on this project, I realised that keeping animations and layouts consistent across pages helped the website feel more organised and easier to use. I also noticed that Adobe Animate is very technical, and even small interactions took a lot of time to build and fix. Testing and adjusting animations became a big part of the process.
Findings
This project made me realise how challenging and time-consuming interactive design can be. Adobe Animate was difficult to use, but I was still able to finish the assignment, which I’m proud of. Even though the workload was heavy and the process was tedious, the experience helped me better understand how interactive websites are made.
Comments
Post a Comment