Advanced Interactive Design | Final Website
23/5/26 - 13/8/26 (Week 7 - Week 14)
Kimberly Miaw Jya Nee | 0366836
Bachelor of Design (Honours) in Creative Media | Taylor's University
Advanced Interactive Design
Final Website
Table of Contents
1. Instructions
2. Task
3.
Reflection
4. Quick Links
Instructions
Task
For our final project, we are required to design and develop an
interactive website using Adobe Animate. The website should include
interactive elements and animations to create an engaging experience for
users.
Asset Creation
I started the development process by drawing and preparing the visual
assets that would be used throughout the website in Adobe Illustrator. I
kept the design consistent in style so that the different pages would
feel connected once they were brought into Adobe Animate.
For the homepage, I designed it as the entrance to a risograph
studio, so the user feels like they are entering the space rather than
simply browsing a website. The storefront acts as the introduction to
the overall theme, with illustrated details and signage used to
establish the playful, handmade visual style of the website. The
navigation is also integrated into the environment so that it feels
like part of the studio rather than a separate website menu.
Fig. 1. Process of Designing Home Page in Illustrator
For the Story page, I designed the space to resemble a poster wall
commonly found in creative studios. This continues the concept of
bringing users inside the risograph studio. The wall offers a glimpse
into the story and history of risograph printing through information
displayed across different papers. I chose to overlap the papers to
make the wall feel more natural and similar to an actual studio wall
filled with prints and materials. The overlapping layout also became
part of the interaction. Users can click on each paper to bring it
forward when they want to read it, which adds a sense of exploration
to the page.
Fig. 2. Process of Designing Story Page in Illustrator
For the Machine page, I wanted the risograph machine to become the
main focus of the space. Instead of explaining the machine through a
separate block of text, I placed numbered points directly around its
different parts. Users can click on each number to learn about the
function of that specific component. I also animated the internal drum
so that it continuously rotates. This adds movement to the page and
gives users a simple visual reference to how the machine operates. The
overall design turns the machine into something users can explore for
themselves rather than just look at as a static image.
Fig. 3. Process of Designing Machine Page in Illustrator
Overall, the asset creation process in Adobe Illustrator went quite
smoothly for me. I was able to establish the visual style and create
the assets according to the concept I had planned. However, due to
time constraints, I only managed to complete the assets for three
pages instead of the full website I initially intended to create.
Adobe Animate
Once the assets were completed, I saved each page as a seperate AI file.
I then imported the files into Adobe Animate while keeping the artwork
separated into layers. This made it easier to organise, select, animate,
and add interactions to individual elements.
Project Setup:
- Document Type: HTML5 Canvas
- Canvas Size: 1024 × 768 px
- Frame Rate: 30 FPS
Publish Settings:
- Center Stage (Both)
- Make Responsive (Both) > Scale to Fit Visible Area (Fit in View)
1. Organising Layers
After importing the assets, I organised the different elements into
separate layers. This made the workspace easier to manage and allowed
me to work on individual elements without affecting the rest of the
design.
2. Creating Symbols
I converted elements that required animation or interaction into Movie
Clip and Button symbols. Movie Clips were mainly used for animated and
interactive elements, while Buttons were used for clickable navigation
elements.
3. Adding Instance Names
I assigned instance names to the interactive symbols. These names were
later used to identify and control specific elements through
JavaScript.
4. Adding Animation
I added simple animations to make the website feel more dynamic. This
included looping movements and continuous animations for selected
elements across the pages.
5. Adding Interactive Elements
I prepared clickable elements such as the overlapping papers, numbered
machine parts, and pop-up information panels. These were later
connected through JavaScript to create the final interactions.
After setting up the animations and interactive elements, I moved on
to the coding process.
Home Page
For the homepage, I added code to make the navigation buttons
clickable. The Story and Machine buttons were connected to their
respective pages, while the open sign was also made clickable as
another way to enter the Story page.
Fig. 4. Process of Dividing Layers for Home Page
For the open sign, I created a simple swaying animation across
frames 1, 30, and 90. I initially experimented with tweening, but
the movement looked odd, it was swaying from the centre of the sign
instead of the top point. I did try to move the anchor point but it
remained the same. Instead, I manually adjusted the position of the
sign at each frame to create a slightly choppy swaying motion, which
also fits the handmade visual style of the website.
Fig. 5. Process of Animating Door Sign in Adobe Animate
The homepage only contains navigation interactions, so the coding for
this page was kept simple. The code connects each clickable button to
its respective page and allows users to navigate through the website.
Fig. 6. Process of Coding for Homepage Navigation
Story Page
For the Story page, I wanted users to interact with the overlapping
papers instead of simply reading everything at once. The idea was to
recreate the feeling of looking through papers on a studio poster wall,
where users can choose which piece they want to read and explore the
story of risograph at their own pace.
Fig. 7. Process of Dividing Layers for Story Page
For the coding, I first assigned instance names to each clickable paper
and its corresponding information panel. I then used JavaScript to
detect which paper the user clicked and display the correct information
while hiding the others. The information can also be closed after
reading so users can continue exploring the other papers. Getting the
interaction to work properly took several rounds of testing and
troubleshooting, especially because of the overlapping elements, but I
eventually managed to achieve the intended interaction.
Fig. 8. Process of Coding for Story Interaction
Fig. 9. Process of Coding for Story Interaction &
Navigation
Machine Page
For the Machine page, I wanted the risograph machine itself to be the
main focus. Instead of explaining the machine through a large amount of
text, I placed numbered points around its different components for users
to explore. When users select a number, they can learn more about that
specific part and its function. I also added a continuous spinning
animation to the drum to give the machine more movement and make the
page feel less static.
Fig. 10. Process of Dividing Layers for Machine Page
Fig. 11. Process of Animating Spinning Drum
For the coding, I assigned instance names to each numbered button and
its corresponding information panel. I then used JavaScript to make
each number clickable and reveal the correct information when
selected. Only the selected information is shown at a time, which
keeps the page from becoming too crowded. This page also required
quite a lot of troubleshooting, especially when setting up all eight
interactive points and making sure each one was connected to the
correct information. After several adjustments to the symbols,
instance names, and code, I managed to get all eight interactions
working correctly.
Fig. 12. Process of Coding for Story Interaction
Fig. 13. Process of Coding for Machine Navigation
AI Disclosure Statement
AI was used during the development process, but mainly as an
assistant for the coding stage. I used ChatGPT to help
with JavaScript implementation, troubleshoot errors, and understand
coding issues I encountered while working in Adobe Animate. This was
especially helpful as Adobe Animate can be quite difficult to
troubleshoot, and there are limited tutorials available online for some
of the specific interactions I wanted to achieve.
All other aspects of the project, including the concept, visual
design, asset creation, layout, and animation decisions, were created
by me and were not AI-generated.
Due to time constraints and technical difficulties encountered during
the final development stage, I was unable to fully connect the
individual pages of the website. To avoid further affecting the
completed interactions, I have published the pages separately. Each page
remains fully functional individually, including its intended animations
and interactive elements.
Home:
Story:
Machine:
Google Drive:
Fig. 14. We So Riso Webpage Video Testing
Reflection
Experience
Observation
At first, I thought using Adobe Animate to create a website would
be easier than designing and building everything through code, like
what I had done in Interactive Design. However, I quickly realised
that this was not entirely the case. Adobe Animate did make certain
parts of the process easier, especially when it came to adding
animations to the website. However, adding interactive buttons and
other functional elements was more complicated than I expected and
took me quite a long time to figure out.
Observation
The most time-consuming part of the project was troubleshooting the
code. Sometimes, an issue that seemed very complicated ended up
being caused by something really simple that I had misunderstood or
overlooked. It's frustrating, but also quite funny when I
finally realised what the problem was (or maybe I was just going
insane). I do admit that coding is not my strongest suit, but I find
it quite satisfying once I manage to get something working
correctly.
Findings
Throughout this project, I think my biggest challenge was time. This
semester has been especially busy even though I am only taking four
modules, and balancing this project with my other modules did not
always allow me to spend as much time as I wanted to figure out
technical issues or further develop the website. If I had more time, I
would have liked to complete more pages and refine the overall website
further. Despite this, I am quite happy with what I managed to
complete, especially considering the technical challenges I faced
throughout the development process.
Quick Links
Thank You
Comments
Post a Comment