Advanced Interactive Design - Task 3 Final Website
14/06/2026 - 23/7/2026 (Week 8 - Week 14)
Advanced Interactive Design DST60804 / Bachelor in Design (Hons) in Creative Media / Taylor's University
Advanced Interactive Design DST60804 / Bachelor in Design (Hons) in Creative Media / Taylor's University
Anggia Tsani Rachmadiyanti, (0368487)
Task 3 - FINAL PROJECT : COMPLETED THEMATIC INTERACTIVE WEBSITE
CONTENT LIST
- Instructions & Brief
- Lecture notes
- Task 3 Process -
- Instructions
- Process & Progress on Animate
- Final Website Outcome and Link
- Feedbacks
- Overall Reflection
Instructions / Module Brief:
Lecture Notes
Please refer to
Exercises page
for lecture notes
Task 3: Final Thematic Interactive Website
Instructions & Requirements:
From our Figma prototype, we have to deliver a final working website using Adobe Animate and publish using Netlify
-----------
Final Website Netlify Link:
** Note: Please note that it will load a bit long to move and open to a new page, but once you revisit a page that has been visited it won't load long again. This is due to Netlify loading size.
Work Progress & Process
Organising Files
To begin with, I organised all my working files into one folder, to
makesure everything is linked properly and can be easily navigated
when importing the assets. I started making all the Animate .fla
files for each pages and named them accordingly:
(Fig. 1) - Organising my file pages of Animate folder
My Web Pages Structure
- index.html - loading and start page where visitor wil press the pedal and start the website
- home.html - The opening start homepage, titles, with the navigation bars of other pages
- intro.html - Introduction of what is F1 and the 11 teams
- race.html - opening page on how the races work to lead them to raceslider page (the contents)
- raceslider.html - How the race works: How each f1 race weekend structure works, score points and types of championship.
- terms.html - Basic Terms (glossary) and flag types in f1
- cartyres.html - A page with 2 button choices where people can click to see the main parts of an F1 car, and another button shows them the 5 different types of tyres.
- countries.html - A page which shows the worldmap, highlighted parts of the countries where f1 race in as well as list of the countries in each continent which hosts f1 races
(Fig. 1.1) - My web pages in order, opened on animate
Fonts & Colours Used:
I used 2 fonts for the website:
- Afacad - body texts
- Gloria Hallelujah - special texts and subheadings / titles
(Fig. 1.2) - Colour Palette & Typefaces
Loading & Start Page:
On every page I made sure to add the ACTION LAYER on
each timeline at the top, and making sure I name
each layer properly as well as the Instance name so
that it will be easy to code later on..
I used classic tween to loop rotate the loading
wheel tyre and also the progress gradient bar. And I
then make 1 frame for the pedal start interface
after the page loads. The lights loop animate one by
one like how f1 races start with lights being shown
one after the other blinking. The user will click
the pedal to continue and start the website. I
attached a sound when you click the pedal it creates
a car "vroom" sound.
(Fig. 2.1) - Progress on loading page
(Fig. 2.2) - Progress code on loading page
After the pedal is clicked, it opens an
animation of the car moving following the
white curved path from left to right. For
this, I drew using pen tool my path and masked
it and added classic ease animation >>
Orient to path, so the car would move
following the line path.
(Fig. 2.3) - Progress on loading page
HomePage:
In this page, I added the logo on top left
and navigation bar to go to other pages of
the website. I also put the title text on
this website and 2 cars illustration with
looping movement in the Movie Clip in its
position to show the car getting ready,
revving. When the START button is clicked.
For the "F1" big red title logo, I used
procreate and drew it digitally, making
slight movements to it so it's not static
and still.
START button click >> Yellow car moves
downwards out of the page >> leads to
next page (Intro.html)
For the button I used Btn Symbol and edited
the Up, Down Hover state designs.
(Fig. 3.1) - Progress on Home page
Intro Page:
This age is the starting page
introducing what F1 is in a carousel
slider card with left and right
arrows. Then it shows the eleven teams
in f1. I made a minor loop animation
of the illustration sketch i did for
the intro card
(Fig. 3.2) - Progress on Intro page
I initially wanted to write the names
of the drivers in each teams, but then
in F1, the team members and drivers
change every year, so it won't be same
and flexible if a person want to open
the website in another year. To move
from one slide to another, I used the
gotoAndPlay (frame number) to move
between card slider pages.
(Fig. 3.3) - Progress on Intro page sliders and arrows
Race Page:
Here to make it easier, I separated
into 2 files, landing page of the
race page and the contents.
Race page is the start page with the
title and visual, and Flag button
which user can click to start the
page on how the race works. When the
flag is hovered, opacity decreases
and when it click, it moves to start
the page on how the race work..
Now in this page it is a slider with
arrows, which gives a flow of how
each F1 race weekend structure works
from Practice session, Qualifying,
Main Race >> How scoring and
points work >> 2 types of
championships...
For each visuals I created a
looping animation inside the
Movie Clip, to make it more
engaging, example, for the cars,
make the helmet and car wheels
move and also the trophy
tilting:
(Fig. 3.7) - Progress on animating the illustrations in its place
(Fig. 3.8) - Progress on animating the illustrations in its place
In the Types of
Championship trophy page, I
added a hover animation so
that when the user hover on
two of the trophies, it
gives an information pop out
card. For the action code i
use "Mouseover" to make it
work:
(Fig. 3.9) - Progress on animating the trophy & hover card
(Fig. 3.10) - Progress on animating the trophy & hover card
(Fig. 3.11) - Coding for animating the trophy & hover card
Terms & Flags:
By far, this page was the hardest as
it has alot of Buttons to deal with
espcially making the steering wheel
buttons for the Basic Terms
Glossary. What I did was that I
separated the steering wheel shape,
the screen box and text separately
in different layers for it to work.
(Fig. 4.1) - Progress on Terms page
(Fig. 4.2) - Progress on creating the interactive steering wheel buttons
Inside the Screen MC layer, for
each 11 visuals for each of the
terms, I placed it in different
layers each time and change the
alpha opacity to Zero so that I
can alter that later in my
Javascript codes, whenever each
button is clicked. For the codes,
it connects to the Btn layers so
it makesure when a specific button
is clicked. The Alpha f that
screen for the term button only
shows up, making the rest
invisible. I used the Alpha code
in the javascript and repeat it
for all 11 buttons to work.
Also for each term visual
drawings, I added animations
looping for example the DRS air
flow system, to make it more
clearer rather than just static:
(Fig. 4.3) - Progress on steering wheel button
(Fig. 4.4) - steering wheel button codes
(Fig. 4.5) - Progress on tyres of flags sliders
Moving from the steering wheel
button slide, the next sliders
are the 8 types of flags and
its meaning, with each moving
visuals. I have also added the
navigation butons of all the
other flags below each flag so
users can easily click on
which flag they want to view
faster.
Car & Tyres:
(Fig. 4.6) - Progress on Car & Tyres page
This page has two buttons where
users can click either: "Parts of
the F1 Car" card or the "Types of
tyres"
For the Parts Of The Car card, I
added hover animation so that when
the user hover on the label names
of the parts, a yellow highlight
colour covers the specific part on
the main car. For this I also used
the Alpha code, and javascript
action code.
(Fig. 5.1) - Progress on Parts of the car, hover card page
(Fig. 5.2) - Progress on Parts of the car, hover card page
In the Types of Tyres
pages, I animated the wheel
to go in the page from the
left, with each of the tyres
turning until it stops in
the middle of the page,
continued by the texts
appearing, showing the
function of each tyre
type.
(Fig. 5.3) - Progress on Types of wheels
Countries:
In this last page, I gave a
hover animation to which
highlight each of the
continent F1 race in when
the user hover on each of
the boxes.
(Fig. 5.4) - Progress on Countries map hover diagram
(Fig. 5.5) - Progress on Countries map hover diagram
Adding Sound:
Music used in the website:
- Hans Zimmer F1 movie theme - https://youtu.be/IXSb80MIyh4?si=_AurSRlw8aZx6ewP
- F1 Brian Tyler Theme opening - https://youtu.be/tMSWpIKflrE?si=e_BB8LWb1yX50ltv
- F1 Starting Grid - https://youtu.be/jKlL6wvGrbc?si=zrXvx96YVw8hBbv2
I first downloaded the mp3 and put it in the same
folder. I then imported the mp3 to library, change it t
Event >> Loop and drag it to stage and Publish.
(Fig. 6.1) - process on adding the MP3 background music
(Fig. 6.2) - process on adding the MP3 background music
I struggled with the mute sound button. I did apply it but it
never got to work everytime I published on netlify, so sir
told me to just remove it, as long as there's still the music
in the pages.
Final Website Netlify Link:
** Note: Please note that it will load a bit long to move and open to a new page, but once you revisit a page that has been visited it won't load long again. This is due to Netlify loading size.
Website Screen Recording Walkthrough:
(Fig. 7.1) - Demo Screen recording video of the final working website
Feedbacks
Week 10:
Specific Feedback: sir said my Figma is all good and I can start doing the
website on animate next week. Mr Shamsul said that I should
add at least slight looping animations for all the visuals,
so it's not just static or else it looks like other normal
websites. Make the car look like it's warming up, revving,
wheels and helmet move abit. Sir told me to change the
number "11" in the 11 teams as "Eleven" as the font for the
numbers may not be clear enough.
Week 11:
Specific Feedback: I asked sir if its normal for my pages to load awhile in
Netlify and he said that is normal
Week 12:
Specific Feedback: I ttried to publish in Netlify more than 20 times,
my sound button doesnt work at all, so mr Shamsul
just told me its ok to remove the sound mute button,
as long there is the sound.
Reflections
Experience:
Building this F1 Unlocked website was one of the most challenging
yet rewarding tasks I have taken on. Starting out with Adobe Animate
was genuinely overwhelming, the interface, the timeline, the layers,
the symbols, and especially the JavaScript code for HTML Canvas were
all completely new territory for me. There were many moments of
frustration, particularly when buttons refused to work, animations
would not loop correctly, or click listeners would stack and
conflict with each other in ways I did not fully understand at
first. Debugging code that controlled slide navigation, hover
states, and interactive elements required a lot of patience and
trial and error over the course of the project. When I get really stuck I ask for a solution on which part of my codes went wrong and I learnt about some new codes using Chat GPT. It is helpful at times when i need a solution. I dont like entirely asking AI to help me, I only ask help won a specific part of the codes which needs fixing. Whenever I make a wrong code, sometimes it gives me a working solution, sometimes it doesn't help me, but i note down every code i learnt in case i needed it later on. Not everytime AI would be able to help us solve an error. There were alot of times where it was me myself who end up being able to finally fix a code, not Ai. It is quite challenging but fun trying to make a code error work.
However, after approximately six days of consistent work,the tools
started to feel more familiar, the logic of keyframes and tweens
began to make sense, and I started to anticipate problems before
they happened. What once felt impossibly technical slowly became
manageable and even enjoyable. The process of building interactive
elements like the steering wheel term buttons, the trophy hover
cards, the race slider carousels, and the looping stop motion
animations gave me a real sense of creative and technical
accomplishment that I had not expected going in.
Observations:
Throughout the process I observed that Adobe Animate HTML Canvas
behaves very differently from traditional animation tools. One key
observation was that Button symbols and Movie Clip symbols handle
click and hover events differently, which caused many of my early
interaction problems. I also noticed that event listeners in
JavaScript stack on top of each other when a timeline loops back to
the same frame, which was the root cause of most of my navigation
issues across the slider pages. Separating buttons into individual
layers and using unique instance names for each slide resolved many
of these conflicts.
I also observed that the visual design decisions had a direct
impact on user engagement. Choosing a hand drawn sketchy aesthetic
for an F1 topic created an unexpected and charming contrast,
something energetic and playful rather than cold and technical. The
chequered border, the red and yellow colour palette, and the
illustrated graphics all contributed to a consistent thematic
identity that felt cohesive across every page. I noticed that when
the visual language was consistent, the overall experience felt much
more intentional and professional even when built on a technical
foundation I was still learning.
Findings:
Through completing this project I found that the most important
skill in interactive web design is not just knowing how to code or
animate, but knowing how to problem solve systematically. Every
broken button or misbehaving animation had a logical reason behind
it, and learning to trace that reason rather than panicking was the
real skill I developed. I also found that separating concerns,
keeping buttons on their own layers, keeping content inside Movie
Clips, keeping actions organised by frame, made the project
significantly easier to manage and debug.
Most importantly I found that choosing a topic I genuinely care
about made a significant difference to the quality and energy of the
work. Because I am passionate about Formula 1, I naturally wanted
the website to feel exciting and immersive for the user. This drove
me to push further with the interactions, the animations, and the UI
details than I might have otherwise. The experience confirmed for me
that good design comes from genuine investment in the subject, and
that even highly technical tools become enjoyable when the creative
vision behind them is something meaningful to you.
Comments
Post a Comment