Loading Page — Features an animation of a spinning CD or vinyl record
alongside a loading progress indicator, serving as a visual introduction and
transition before visitors embark on their musical journey through time.
Explore Page — The entry point to the site (a "Time Machine of
Music"); visitors can launch the experience by selecting a destination,
navigating to music exploration zones dedicated to different eras.
Decade-Specific Song Pages (70s / 80s / 90s / 00s / K-Pop) —
Interactive pages showcasing music categorized by decade. Visitors can
switch between eras, click album covers to control playback, and view
details such as BPM, musical key, and genre.
Music Culture Timeline Page — Presents music history and cultural
milestones along a chronological timeline. Visitors can hover over nodes to
highlight them, listening to the stories of each era while background music
plays.
Album Recommendation Page — An interactive showcase of curated
tracks. Visitors can click album cards to navigate via a carousel-style
interface, seamlessly previewing recommended songs and exploring album
artwork.
Loading Page:
The home page invites visitors to embark on a "Musical Time Machine" journey
through dynamic visual transitions and precise interactive controls.
In the initial state (Frame 1), the page features a warm orange gradient
background with the central title "TIME MACHINE OF MUSIC" displayed in the
middle; musical elements from various eras—such as vinyl records, cassette
tapes, iPods, and light sticks—are scattered around as if in a zero-gravity
environment. I placed these elements on separate layers (e.g.,
`_1_LIGHTSTICK`, `_2_EARBUD`) and applied Classic Tweens.
As the timeline smoothly advances to Frame 120, the background transitions
from the orange gradient to a dreamy purple, while the scattered musical
elements converge in an orderly fashion, ultimately revealing the button:
"ENTER THE MACHINE →".
Fig 1.1 Loading page process in An
Regarding code and interaction:
Playback control: Call `stop()` at the animation's final keyframe to
freeze the timeline, holding the display at the home screen state while
awaiting user input.
Experience optimization: Set the button's `buttonMode` to `true` to
ensure the cursor changes to a hand icon on hover; set `mouseChildren =
false` to prevent interference from internal layers and improve click
precision.
Scene navigation: Bind a `MouseEvent.CLICK` event listener to the
button; upon clicking, the `openExplore()` function executes the
`gotoAndStop(1, "Explore")` command, seamlessly transitioning to frame 1 of
the core "Explore" scene to officially launch the musical journey.
Fig 1.2 Code for the "Loading Page" button interaction and scene
transition in An.
Explore Page:
The "Explore" page serves as the central interactive hub of the "Music Time
Machine" website. Upon clicking the "ENTER THE MACHINE" button on the
homepage, users are seamlessly transitioned to this page, where they can
select the musical era or pop culture theme they wish to explore.
Visual Layout and Design
To align with the concept of a "Time Archive" or "Music Database," I
designed the five major musical eras and genres as a stack of colorful
folder tabs, arranged chronologically from bottom to top.
Fig 1.3 Explore page process in An
Regarding code and interaction:
This code is designed to navigate users to their desired page after they
click on a folder.
Core Command (`gotoAndStop`): In Animate, the core command
`gotoAndStop(1, "Scene Name")` is used to jump directly to—and pause
at—Frame 1 of a specified scene.
Function-Scene Binding: The system assigns five separate click
functions—one for each folder representing the 70s, 80s, 90s, 00s, and
K-pop. This ensures that user interactions trigger precise navigation to the
specific scene corresponding to the selected era.
Fig 1.4 The code in An
70s Music Exploration Page:
The "70s Music Exploration" page features a vibrant, orange "archive card"
aesthetic and offers a highly interactive experience: users can play curated
background music and click on vinyl records to discover the stories behind hit
songs. A central timeline and "SONG / CULTURE" tabs allow visitors to easily
switch between eras without leaving the page, creating a seamless and
immersive browsing experience.
Fig 1.5 70s Music exploration page process in An
Regarding code and interaction:
Audio Playback and UI State Synchronization: Use this code to implement
the "Play/Pause" function for the CD button; automatically reset playback
progress when the song ends, and simultaneously hide the CD playback status
UI.
Fig 1.6 The code in An
Core code logic:
Song Details Pop-up
When the vinyl record is clicked, the `hideSongDetails()` function is first
used to hide all cards (setting `visible = false`) before specifically
setting the currently selected card to visible (`visible = true`); this
prevents multiple cards from overlapping.
CD Playback Screen Synchronization
Clicking the CD button triggers the `toggleSongCD` function, which toggles
the playback state variable (`archiveCDPlaying`). This variable directly
controls the visibility of the CD sleeve and playback animations, ensuring
the visual display responds in sync with the play/pause action.
Page Navigation
Clicking the "CULTURE" or "HOME" button triggers the respective navigation
function. The `gotoAndStop(1, "SceneName")` command is used to switch
directly to the 70s culture page or return to the main exploration lobby.
Fig 1.7 The code in An
Fig 1.8 The code in An
70s Music Culture Page:
The “SeventiesCulture” page maintains a consistent visual style and background
music playback while presenting four key milestones of the era’s music culture
via an interactive timeline, creating an immersive experience that allows for
seamless switching between listening to music and exploring the culture.
Fig 1.9 70s Music culture page process in An
Music Recommendation Page:
Fig 1.10 Music recommendation page process in An
Regarding code and interaction:
Carousel for Featured Songs: Manages five pages of recommended songs,
supporting left/right navigation and continuous looping.
Audio Playback Controls: Provides play and pause functions for the
first two songs, tracks playback progress, and automatically stops audio
when switching pages.
Home Navigation: Clicking the home icon enables navigation back to
the "Explore" home page.
WEEK 10: Mr. Shamsul reviewed my Figma prototype and determined that I could proceed with building the final website.
REFLECTION
Experience:
This project gave me my first complete experience of developing an
interactive website using Adobe Animate. From designing the interface and
planning the timeline to creating animations, developing interactive
features, and finally publishing the website, every stage helped me gain a
deeper understanding of interactive web development.
Throughout the project, I became familiar with Classic Tween, Movie Clips,
ActionScript, and CreateJS, and learned how to use timelines and keyframes
to control page transitions and interactions. I also created various
interactive effects, including era page transitions, interactive CD player
toggles, album card carousels, culture timeline navigation, event hover
highlighting, and dynamic audio playback management, making the music
exploration experience more engaging and immersive.
During the development process, I encountered many challenges, such as
buttons not responding correctly, audio channel conflicts during scene
switches, timeline state desynchronization, and scripting issues. I spent a
lot of time testing, debugging, and refining my work. Each challenge I
overcame helped me become more familiar with Adobe Animate and improved my
problem-solving skills.
Observations:
Throughout this project, I observed that building an interactive website
requires much more than attractive visual design. A well-organised timeline,
clear layer structure, and proper script management are equally important to
ensure that every interaction works smoothly.
I also realised that Adobe Animate's HTML5 Canvas workflow is quite
different from traditional web development. Instead of creating multiple
HTML pages, different sections of the website—such as song cards, era
navigation, and cultural history—are controlled through the timeline and
frame navigation. This means that the website structure and interactions
need to be carefully planned before development begins.
In addition, I found that small interactive details, such as button
feedback, album hover effects, CD playing state indicators, event border
highlights, and seamless audio switches, can significantly improve the
overall user experience. These details make the website feel more lively and
encourage users to explore its content.
Findings:
Through this project, I discovered that developing an interactive website
requires both creative design skills and logical problem-solving abilities.
An effective website is not only visually appealing but also provides smooth
animations, intuitive interactions, and a positive user experience.
I also found that planning the website structure, organising layers, and
arranging the timeline before development greatly reduces the difficulty of
editing and debugging later in the project. Converting reusable elements
(like CD players, navigation buttons, and album cards) into Movie Clips and
managing different interactions separately also makes the project easier to
maintain.
Most importantly, I realised that choosing a topic I am genuinely interested
in makes the entire development process much more enjoyable. By creating a
website about Era Music and Cultural Milestones (spanning from the 70s to
modern K-POP), I wanted not only to introduce musical history but also to
make learning and listening more engaging through interactive timelines and
visual feedback. Although the website is not perfect, I believe it
represents my best effort with my current knowledge and skills. This project
has also motivated me to continue improving my technical abilities and
creating better interactive experiences in the future.
.jpg)
Comments
Post a Comment