Advanced Interactive Design - Final Project: Completed Thematic Interactive Website
.jpeg)
13.6.2024 - 31.7.2024 (Week 8 - Week 15)
Tan Yi-Tyng (0353327)
Bachelor of Design (Hons) in Creative Media
Advanced
Interactive Design
Final Project: Completed Thematic Interactive
Website
INSTRUCTIONS
FINAL PROJECT
Instruction
Students will 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.
Progress
Based on the previous development of the prototype, we are now required to
animate the website in Adobe Animate. Before starting to work, I need to
export each of the objects in Figma and then import them to Adobe Animate.
Below is the Figma view link of the prototype completed in
Task 3.
Prototype link:
Figma-View-Link
Fig. 1.1 - Prototype Figma View Link
Loading Page
I began with the first page, which is the loading page. Since there are many
transition animations between each page, I did not combine them into a movie
clip. Instead, I organized the layers in the main stage and created folders to
organize the layers for each page. The first page mainly uses classic tween
for animations such as the progress bar, the animated rotation of the logo,
and the album auto-scrolling.
|
| Fig. 2.1 - Working progress on Loading page |
|
| Fig. 2.2 - Layers for Loading Page |
Home Page
Once the loading page animation is complete, it transitions to the
homepage. The homepage took a considerable amount of time to implement,
especially the neon line animation. I tried various methods and
eventually drew it frame by frame using lines.
|
| Fig. 3.1 - Home Page animated neon line |
I encountered a problem when the user clicked the small circle icon,
which was supposed to pop up a panel with a GIF. The frame design of the
GIF was created in Figma, but Figma couldn't export the GIF directly. I
had to find an alternative way to export it. I tried using the masking
effect in Adobe Animate, but it didn't work. Eventually, I used a Figma
plugin to export the GIF. However, the downside was a decrease in
resolution, and importing the GIF into Adobe Animate made the whole file
lag due to its size. When I wanted to preview the animation, it took 20
minutes to load, which was very time-consuming and slowed down my
working process significantly.
|
| Fig. 3.2 - Working process on Home Page |
For the interaction where the user clicks the icon to trigger the GIF
panel to appear, I needed to name the label for the particular timeline
and create actions for that button.
|
| Fig. 3.3 - Link the clickable button to trigger the panel |
|
| Fig. 3.4 - Home Page Layers |
Profile Page
Users can click the Profile button at the top of the navigation bar to
navigate to the Profile page, which introduces each of the members with
their detailed information.
|
| Working process for the Profile Page |
|
| Profile Page Layers |
On this page, clicking the icon on the left side of the screen will
switch to the next member's profile. I created a hover effect for the
small icon on the left side of the screen; when hovering, it shows the
members' avatars.
|
| Hoverable Buttons |
To make it more engaging instead of static, I created a bouncing
animation for the avatar in the center. To create that, i convert the
object to movie clip and creating the animation inside the symbol.
|
| Bouncing Effect for the avatar |
I also needed to add action script for the member icon button. By
clicking it, users can switch to viewing another member's profile
details.
|
| Linking the Clickable Button to View Another Member's Info |
Album Page
Users can click the Album button on the nav bar to view the Album page.
This website focuses on displaying only one album. When first entering
this page, the album logo will pop out with a bouncing animation. Then,
using a classic tween, it will shrink to fit the album cover
design. The title, description, and song list of the album will then be
revealed through a masking effect.
|
| Working process of the Album page |
|
| Album Page Layers |
Deploy To Netlify
Once all the animations were completed, I went to the publish settings to
set up and prepare for publication. I changed the preloader icon to the
Aespa logo instead of the default logo. Additionally, I decided not to use
the actual loading page as a GIF to replace it here, because the loading
time varies each time, and the animation of the loading page might not be
visible if it loads too quickly. So, simply adding a logo as a replacement
seemed to be the better option.
|
| Publish Settings |
|
| Preloader GIF |
|
| Upload to Netlify |
FINAL SUBMISSION
**Note: Apologies, the website may take 1-2 minutes to load.
Netlify Link: https://aespa-interactive-web.netlify.app/
Video Presentation Link: https://youtu.be/e1eKUJeHIrM
Fig. 7.1 - Final Project: Video Presentation
Video Walkthrough Link: https://youtu.be/qfoXecshnPI
Fig. 7.2 - Video Walkthrough of the website
REFLECTION
Personally, I feel like this project was the most challenging and difficult. I faced many difficulties, especially since there aren't many tutorials available online regarding website animation. I was quite disappointed that the GIFs didn't work well for my website, causing the entire file to lag and slowing down my entire process. I was unsure why the software was so unstable during my work. I faced a lot of unpredictable errors for no apparent reason. For instance, there were many times when I spent almost the entire day working on page animations and was sure that I had saved the project, only to reopen it and find that my progress was gone. This kept happening repeatedly, testing my patience as I had to redo the same animations over and over again.
Moreover, there were many instances where saving my work in Adobe Animate took around 20 minutes just waiting for the screen to load, which was extremely time-consuming. The most terrifying moment was when I had finally completed all the animations and was ready to publish, but I couldn't preview the website or view the animations even after I had uploaded it. This was especially stressful as I had to submit this work the next day. This issue took me almost the entire day and left me sleepless as I tried to figure out the error. At one point, I was preparing to start a new project and redo all the animations again.
However, I am truly grateful to Mr. Razif and my classmates for helping me figure out the error, which allowed me to finally preview and upload the website in time for submission. Overall, I am quite satisfied with the outcome, as it aligns with and maintains the vision I proposed in the prototype. I would say that hard work paid off. There were moments when I felt like giving up on animations that seemed too difficult to implement, but thanks to my determination and three days of sleepless experimenting, I managed to achieve the desired outcome T_T
.jpeg)
Comments
Post a Comment