Labels

ADVANCED INTERACTIVE FINAL PROJECT

Week 10-Week 16 (25/11/2025-11/01/2026)

Jennifer Michelle Hiendrawan/0374682

Advanced interactive design/Bachelor of Design (Honours) in Creative Media

Task 3/ Final Project

TABLE OF CONTENT
1.Lectures
2.Instructions
3.Task
4.Feedback

LECTURES

Week 10

This week, we must make a website by ourselves because we need a lot of practice to make our final project. Here is the website process. 

First i make the welcome page and then i make the navigation one by one, to make the animation, i convert it to graphic first and then create a motion tween.

This was the code that i use for the navigation 

fig 1.1 actions

i also add stop actions

fig 1.2 actions

Next i added hover effect for the buttons. Here is the final result

fig 1.3 screen record


Week 10

This week we learn about GSAP. First we must download the GSAP file and then we add the code on adobe animate.

Here is the final outcome 
fig 1.4 gsap result



INSTRUCTIONS

TASK
We need to make website (5 pages) using adobe animate. 

Loading page 
First i create the loading page. The loading page is the same with the prototype version.

fig 3.1 loading page

First, I import all the images into the stage, then convert it into graphics. After that, I create the animations one by one and add motion tweens so the transitions look smoother.

Landing page

For the landing page section, I improved it by using tea images that are more consistent and similar to the other images. Then, based on Mr. Shamsul’s feedback during the consultation, I added a transition from dark to light (from loading to the landing page) and paid more attention to the margins.

I also create an animation for the landing page by using motion tween also.

fig 3.2 landing page

After that i created a button which will direct the user to the homepage, i add this script for the button. With this script, there will be a "mouse click" sound effect also if the user click on the button.

fig 3.3. landing page button script

Homepage

I designed the homepage to be exactly the same as in the prototype. This time, I used an infinite horizontal scroll. At first, I was confused about how to make the animation move continuously and loop from the beginning. Eventually, I converted the photos used in the animation into a movie clip and created the animation inside the movie clip by adding new layers within it.

fig 3.4 homepage infinite scroll animation on movie clip

After creating the animation inside the movie clip, I started building the overall homepage animation step by step. Here are the process.

fig 3.5 homepage animation 

After creating all of the animation for homepage, i started to add the actions for all of the navigation and also add "mouse click" sound effect 

fig 3.6 action 


History page 
On this page, the animation I wanted to create is a rotating tea cup. So, I converted the tea cup into a movie clip and then created a motion tween inside the movie clip so the animation could loop continuously. I also set the amount of rotation and the distance between each keyframe there.

fig 3.7 historypage movie clip 


fig 3.7 historypage animation 

When the year section is clicked, an overlay appears, so I created the overlay one by one.

fig 3.8 overlay

After creating the overlay, i addded actions for the cross button so that it can go to the main history page when clicked and also actions for the year button. I also added the mouse click sound effect.

fig 3.9 history page actions

fig 3.10 history page actions

Types of tea page

For this section of the page, I redesigned the layout to improve the overall experience. I added a new opening page as an introduction. On the opening page, I created an animation of tea droplets falling into a cup.

fig 3.11 types of tea page animation 

I created the animation inside movie clip also 

fig 3.12 types of tea page animation

After completing the first page, I added a button that directs users to the next page. This next page contains a carousel showcasing various types of tea from Indonesia. The carousel also includes animations to ensure smooth transitions and a more engaging visual experience.

fig 3.13 actions


fig 3.14 carrousel


Brewing page 

For this page, I improved the second section to make it more visually engaging and to better represent the tea brewing process. I added a brewing process demonstration that features animations showing how Indonesian tea is brewed. After watching the brewing process demonstration, users can view a detailed, step-by-step explanation of the brewing process to gain a deeper understanding.

fig 3.15 brewing page

fig 3.15 brewing process demonstration 

Below is the code I used to navigate from one number to another. I spent a long time working on this page because the code kept causing errors and the buttons were not clickable. I ended up revising and replacing the code multiple times until it finally worked properly.

fig 3.16 actions



Benefits page

I also improved this section by redesigning it so that not all of the content relies on carousels, while still maintaining overall design consistency. Below is the process.


fig 3.17 brewing page

Music

I spent quite a long time working on the music feature because the code often caused errors, and at first the button was not clickable at all. I eventually researched the issue and went through multiple iterations before the music could finally play correctly. I started by creating the button first, then added this code to enable the music to play when the button is clicked.

fig 3.18 music code


Picture Credits
I added new images for my webiste and i used AI generated images to make it look more consistent. Here are the new images:

https://gemini.google.com/share/e07a10e70206


Google Gemini


https://gemini.google.com/app/e46359c6de3e5670


https://gemini.google.com/share/93df70692515


Google Gemini


https://gemini.google.com/share/ebc04e78327b


https://gemini.google.com/share/cb09174c78ef

https://gemini.google.com/share/adde4e25ce30

https://gemini.google.com/share/41c68605cc04


https://gemini.google.com/share/9ea648bec0aa



https://gemini.google.com/share/93d6d4b378d7


https://gemini.google.com/share/c20d1268a2db

Google Gemini




FINAL OUTCOME


FEEDBACK
Week 11
Pay attention to the margins on each page, and add an animation from dark to light first for the transition from the loading page to the landing page.

Week 13
The navigation section shouldn’t be positioned too close to the top. Overall, everything already okay

REFLECTION

I gained many new insights through this project. This was my first time creating a website using Adobe Animate that combines animation with coding. In my opinion, building a website with Adobe Animate is fun, but it also comes with many challenges. There were various issues, such as code errors, buttons that couldn’t be clicked, pages that couldn’t be navigated properly, and background music that wouldn’t play. Sometimes, when an error occurred, it took a very long time to fix, and it turned out that there was actually nothing wrong with the code. Simply closing the file or creating a new one would suddenly make everything work again. Through this project, I gained new experience in understanding how to create an animated website properly and effectively. I also learned how to use JavaScript, so this time I was truly able to build a website from zero, not just improve an existing website.




Labels:

Comments

Post a Comment

Popular Posts