Advanced Interactive Design: Final Project

|| 12/10/2025 - 01/11/2025 (Week 12 - Week 16)

|| Bertrand Alden Gani / 0370471

|| Advanced Interactive Design

|| Bachelor Of Design In Creative Media

|| Final Project: Completed Thematic Interactive Website

TABLE OF CONTENTS

1. Instructions

2. Final Project

3. Feedback

4. Reflection

INSTRUCTIONS

Fig 1.0 Module Information

<< back to top >>

FINAL PROJECT

Description:

For the final project, we need to combine everything we’ve done so far and create a fully working product. This includes designing and refining all visuals, making at least 5 functional pages, and ensuring the prototype runs smoothly. Then, we deploy the website on Netlify or GitHub, add the link to our e-portfolio blog, and back up the project folder on Google Drive with public access. No video walkthrough is needed.

Process:

So I began by creating new canvas, my canvas size is 1440px x 1024px.

Fig 2.0 Create new canvas

Firstly, I created a new frame label for "HomePage". I moved my components from Figma to Adobe Animate by "Copying as PNG". I separated each one that I wanted to animate to separate layers. I wasn't sure if I needed to separate each component to layers, but I decided to separate them because I find it easier to manage.

Fig 2.1 Moving components to Animate

Fig 2.2 Separate components to layers

For the animation, I mainly used Classic Tween with a bit of Shape Tween. I wanted the clouds to slide endlessly, so I used mask and then I looped it at the end of the frame. I also wanted the explore button to have similar animation like this when clicked.

Fig 2.3 Transition reference

Next is the Explore page which has the most animation compared to other page. Similar with the previous page, I used classic tween and played with position, rotation, scale and alpha. I matched the boat animation and bottle animation with the wave animation. The timeline is quite messy.

Fig 2.4 Explore page timeline

For transition, I used a lot of slide left/right/up/down. For back button, I thought that there is a code to reverse play frames, turned out there were none, so I had to make new animation that are moving reversed. For the scenery/landmark notes, I hide the image at first, then when clicked on the bottle it will show the note and when clicked on x button, the note will disappear again. Beside that, there are still a lot of animation.

Moving to the third page is the Collection page, I modified the image as button so when clicked it will rotate between the images. I also added hover effect by double clicking on the button and add a keyframe on "Down". I made the images bigger when hovered.

Fig 2.5 Creating hover effect inside button

There is also ">" button which when clicked the current page will slide to left and a new one will slide from right.

Lastly, is the Quiz Page. I wanted the result score to accurately show depending which option the user chose to answer. So I decided to only have 2 questions so it's easier to manage and not too complicated. 

Basically, I have 1 page for Question number 1, 2 page for Question number 2 and 3 page for result page. If user click on wrong answer on first question (Q1F) it will take them to the 1st version of Question number 2, if they answered wrong it will take them to "0 score" and if they answered correct it will take them to "1 score". On the other hand, back to first question, if user click on the correct answer, it will take them to the 2nd version of Question number 2, if they answered wrong it will take them to "1 score" and if they answered correct again it will take them to "2 score" which is the perfect score. I don't know if there is easier way to do this.

Fig 2.6 How I made the quiz

I did most of the button and coding last. After I finished everything, I published it and upload the folder that I got to Netlify.

Netlify link: https://sulawesi-advanced-interactive-project.netlify.app/

Project folder: https://drive.google.com/drive/folders/1-hlefuFOaCKzk2FWhJyC_pbF8MbJnjaF?usp=sharing

<< back to top >>

FEEDBACK

Mr.Shamsul said that my prototype is fine, but he suggested to add the Sulawesi logo at the top corner of my other page aside from the home page which already have the logo.

<< back to top >>

REFLECTION

Overall, I quite liked this module. At first, I have difficulty using Adobe Animate in class cause it's my first time using it, but when I actually give it a try at home, it's actually pretty easy to understand. I also realized that animating can take quite a bit of time, especially if have a lot of details. It also require patience cause if you have one single error, it will show white screen which was really frustating.

<< back to top >>