8/12/2025 -
11/1/2026 (Week 11 -
Week
14)
Shawn Wong
Kai Hen /
0375372
Major
Project 1 /
Bachelor of
Design
(Hons) in
Creative
Media
Advanced
Interactive
Design - Task
1
Final
Project
Requirements
Completed Thematic Interactive Website
On this task, we were required to synthesise the knowledge
gained in task 1, 2 and 3 for application in task 4.
Students will create integrate visual asset and refine
the prototype into a complete working and functional
product experience.
Requirements :
-
Upload the website to a web server.
-
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.
Week
11
1. Home Page
This week, I started working on the animation. Initially, I
planned to include all nine pages of the website in one
animation file, but I began by creating the homepage animation
first and decided to consult Mr. Shamsul before proceeding
further.
1.1 Home Page Progress
After completing the first page and consulting with Mr.
Shamsul, the design was approved. I added looping animations
to the background plants to give the nature-themed website a
lively feel. The title and description slide into view, while
the circle at the bottom continuously spins. Users can click
the mouse icon or the center element to explore the ecosystem,
or navigate using the navigation bar.
Week
12 -
13
2. Explore Page
After receiving a message from Mr. Shamsul, I realized that
each page could be created in a separate animation file.
Fortunately, I had only started the second page, so I
reorganized the work and created a new animation file for each
page. These files can then be linked together to allow
navigation between pages.
2.1 Explore Page Progress
I felt that the previous Explore page design was
too simple, so after discussing it with Mr.
Shamsul, I decided to refine the design. The
updated Explore page is shown here. After
completing the Home and Explore pages, I began
reviewing the tutorial shared by Mr. Shamsul on
how to link pages together.
After watching the tutorial, I encountered an
issue where the homepage could not load. After
consulting with Mr. Shamsul, we identified that
the first page must be named
index.html, while other pages can have different names.
Once this was fixed, the issue was resolved, and
I was able to successfully navigate from the
homepage to the Explore page.
3. About Page (Forest, Meadow,
Desert)
This is the About page, which provides
information about the forest, meadow, and desert
ecosystems. I refined the design for this page,
and all three ecosystem pages share the same
layout, with different content for each one.
3.1 About Forest Page Progress
3.2 About Meadow Page Progress
3.3 About Desert Page
Progress
In my original concept, I planned to use a
slider to display different plants. However,
since I was unsure how to create a slider in
Animate, I changed the interaction to a
fade-in and fade-out transition between
plants. The plant information is displayed
on the left, and users can navigate to the
next section using the button or return to
the Explore page.
4. About Exhibition Page
The About page provides information about
the exhibition and explains its purpose,
allowing users to better understand the
exhibition.
4.1 About Exhibition Page
Progress
For this page, I kept the animation
minimal, using simple pop-out effects for
the columns and text. I arranged the
timing so each column appears one by one,
followed by the text with the same
animation.
5. Join Us Page
This is a simple “Join Us” page. I kept the
design clean with minimal animation, as it
is not a main page and does not require
heavy interaction.
5.1 Join Us Page Progress
I added some simple animations, such
as the plants popping out. Initially, I
planned to use GIF animations for the
plants, but I was concerned about large file
sizes, so the pop-out effect was sufficient.
The text and lines slide in from the left to
make the page more engaging.
6. Book Ticket Page
This is the Book Ticket page. Initially,
during the high-fidelity design, I wondered
if I needed to create so many pages. After
consideration, I decided to include all
necessary pages to make the exhibition
website complete.
6.1 Book Ticket Page
Progress
For this page, I used the same animation
style as the About Exhibition page, with
the columns and information popping out.
The plant is displayed as a video that
loops continuously.
7. Artwork Page
For the final Artwork page, the previous
design had all columns showing static
artwork on a single page, which felt a bit
boring. I decided to change it to a
slider. Although I was unsure how to
create a slider initially, I managed to
implement it for this page.
7.1 Artwork Page
Progress
Fortunately, after several attempts, I was
able to create the slider. It’s not
perfectly smooth, but it works. I made the
slider loop using a movie clip and
animated it within the movie clip. It
wasn’t too difficult—just required a few
tries.
- Adding Sound Effect and
Background Music
Adding sound effects is straightforward.
Select the button you want to add a sound
to, double-click it, create a new layer,
and insert the sound. Place it in the
Over
state for hover sounds or in the
Down
state for click sounds.
8.1 Adding sound
effect to button
Adding background music was a bit
challenging. I followed the tutorial
provided by Mr. Shamsul, made some
adjustments, and added my own music
on/off UI. I kept the code and instance
names the same as in the original file.
After a few attempts, it worked
successfully!
8.2 Create
Background Music
On/Off
8.2 Control
Music Play
&
Stop
To make the background music work,
we need to link the music file,
create a layer for the button, and
add a new layer called
JS. The code provided by Mr. Shamsul
should be added to the JS layer,
ensuring all instance names and
linkages match. This allows the
music on/off button to function
correctly during testing.
[ Final Outcomes Final Project: Completed Thematic
Interactive Website]
Netlify Link --- [ Here ]
*Wait for few second for loading
Google Drive Link --- [ Here ]
9.1 All Workfile - Access to Google
Drive
REFLECTION
Working on the
Echoes of Nature
interactive website was both challenging and rewarding. This
project pushed me to think beyond static visual design and
consider how users experience a website through interaction,
animation, and flow. From the beginning, establishing a clear
concept around ecosystems helped guide my visual direction,
color choices, and interaction style across all pages.
One of the most valuable parts of this project was designing the
wireframe and user flow. By planning the navigation structure
early—such as how users move from the homepage to the ecosystem
galleries—I was able to create a more logical and immersive
experience. The
Explore Ecosystem page,
in particular, required careful thought to ensure that the
interactive circles clearly communicated that they were clickable
while still maintaining a calm, organic aesthetic.
The most challenging aspect was developing the design in Adobe
Animate. I had to constantly consider whether my visual ideas were
technically achievable, especially for hover interactions,
animated GIFs, and sound controls. This forced me to simplify
certain elements and focus on interactions that were both
meaningful and feasible. Designing elements like the music on/off
button and hover animations helped me better understand how small
micro-interactions can improve user engagement.
Through this project, I learned the importance of having a strong
foundation before moving into detailed design and development. A
clear concept, well-planned user flow, and realistic wireframes
helped reduce confusion during the animation and implementation
stage. Overall, this project strengthened my understanding of
interactive design, showing me how visual storytelling, usability,
and technical constraints must work together to create an engaging
digital experience.
Comments