15/6/26 - 31/7/26 (Week 9 - Week 15)
Choong Yee Leng || 0381980
Advanced Interactive Design || Bachelor Degree in Creative Media ||
Taylor’s University
Task 2: Final Website
TABLE OF CONTENT
1. Instructions
2. Work Process
3. Submission
4. Reflection
INSTRUCTIONS
Document 1.1 Module Information
WORK PROCESS
Index Page
This intro page combines both JavaScript and Classic Tween animation.
Two identical images are placed side by side to create a
seamless infinite scrolling loop. When a button is clicked, the
caption enlarges to create a smooth transition effect, making the
interaction more engaging and visually appealing.
GSAP Actions:
JS from gsap is used in index page to create loop effect and caption enlarge
transition (AI (ChatGPT) are used to refine the JS when it don't works)
Gallery Page
This page mainly introduces some of the most famous artworks from the
Italian Renaissance. I wanted to create an
immersive museum-like experience, allowing users to view seven
artworks displayed on the screen. Users can click on each artwork to read
its description and learn more about its history. To make the interactive
elements more intuitive, I first created shaded versions of each
artwork in Photoshop and used them as the hover state for the
buttons. This visual change helps indicate that the artworks are clickable
and encourages users to interact with them.
Work process in Photoshop and Animate
I added different sound effects for each artwork when it is
clicked, along with background music inspired by famous compositions from
the Italian Renaissance to create a more immersive experience. This page
does not require much coding technique, as most of its functionality, such
as stopping the timeline and linking to other frames, can be implemented
using Adobe Animate's built-in Action Wizard. However,
JavaScript was used to integrate the sound effects and background
music, allowing the audio to play when users interact with the artworks.
JS Actions:
JS used in gallery page to add sound effect and bgm (AI (Claude) are used
to refine the JS when it failed to work)
Artist Page
This page introduces some of the most influential artists of the Italian
Renaissance. The main interactive feature is the
slide-over transition that appears when users hover over an artist.
While creating this hover effect in Figma was relatively simple, recreating
it in Adobe Animate was much more challenging. It required
extensive debugging and careful layer management to achieve a smooth
transition. I created hover slide-over animation for each artist button,
when mouse over, the frame will be played.
Timeline and work process
Initially, I
separated each artist into multiple layers to make it
easier to animate different parts during the hover transition. However,
when implementing the click interaction that expands the artist and
reveals the description, the artist layer needed to be placed above all
other elements. Since it was not possible for every artist layer to remain
on top simultaneously, I
created an additional layer for each artist specifically for the
expanded state.
As a result, the
hover and click interactions are handled by separate buttons,
meaning each artist (except Leonardo) has two buttons, one for the hover
animation and another for the click action. Although this approach
successfully achieved the intended interaction, it also introduced a minor
limitation: users must hover over an artist before it becomes clickable,
and glitch when it is not hover in still, meaning when you're moving your
mouse while hovering. The hover slide-over transition + expand section is
assisted by AI (Claude) while debugging.
JS Actions:
JS used in hover slide-over transition + expand section
History Page
Timeline and workprocess
This page presents the history of the Italian Renaissance, covering its
development from the Pre-Renaissance period to the Late Renaissance.
Apart from the JavaScript used for sound effects, the page mainly
relies on Adobe Animate's built-in Action Wizard to stop the
timeline and navigate between different frames.
The most challenging aspect of this page was creating the transition
animations. Each stage includes multiple effects, such as sliding
text, fading text during colour changes, text position transitions, and
image fade-in and repositioning. In total, I
created six complete transition sequences to move between the
different historical stages, making this one of the most time-consuming
pages in the project.
Credits
background music used:
Submission
The website is loaded so it requires long loading, if you see white screens,
its loading, I swear everything works!
Website Walk through:
Reflection
This project has been one of the most challenging yet rewarding experiences throughout my design journey. It required a significant amount of time, patience, and continuous problem-solving, especially when working with Adobe Animate. Although the software provides useful tools for creating interactive designs, I found that it is not particularly beginner-friendly when trying to achieve more advanced effects. Many interactions that seem simple in other design software require a deeper understanding of animation principles, layer management, and JavaScript.
Starting this project with almost no coding experience, I initially tried to rely on Adobe Animate’s built-in actions as much as possible. While some interactions could be achieved through the Action Wizard, I quickly realised that more complex features, such as interactive buttons, sound effects, and smoother transitions, required additional coding knowledge. There were many moments where my first approach did not work as expected, which forced me to research solutions, experiment with different methods, and learn through trial and error. Although this process was frustrating at times, it gradually improved my confidence in troubleshooting and understanding how interactive elements work behind the scenes.
The development process was also much more time-consuming than I initially expected. I spent approximately 10 hours on each page, especially on sections that involved multiple animations and transitions. Small adjustments in positioning, timing, or layering could create significant differences in the final outcome, and some issues only appeared when previewing the website in the browser rather than inside Adobe Animate. These challenges required repeated testing and refinement to achieve a smoother user experience.
Despite the difficulties, this project helped me understand the importance of combining design skills with technical knowledge. I realised that having stronger coding skills would not only make my workflow more efficient but also allow me to explore more creative possibilities beyond the limitations of basic tools. Through this experience, I became more interested in learning JavaScript and interactive development. Although I have only explored a small part of Adobe Animate’s capabilities, this project encouraged me to continue improving my technical skills and explore more advanced ways to create engaging digital experiences.
Comments
Post a Comment