__________________________________________________________
The final assignment was all about bringing our prototype to life using Adobe Animate, since the website had to be both interactive and functional. I ended up tweaking some of my Figma layouts early on after getting feedback from Sir. I agreed with his points - some of the animations I originally planned were just too complicated. Simplifying them actually made everything feel more cohesive. I was close to giving up at one point, but I pushed through.
I decided to split my project into five separate Animate files, one for each page. Having everything in one file felt overwhelming, and Mr. Shamsul also mentioned that splitting things up helps avoid crashes. He did warn, though, that if I use background music, it’ll cut off abruptly when switching between pages Q-Q.
When Mr. Shamsul introduced us to GSAP, I got really curious. I started exploring it on my own and ended up genuinely interested. There’s just so much potential with it. I focused mainly on pixelated and glitchy effects because they fit the theme of my site, which revolves around a corrupted virtual world.
Navigation Bar
I added a text scrambling effect on hover. To make it work, I had to convert the text into a movie clip and set it as dynamic text—apparently, the effect doesn’t run properly on static text or when it’s inside a button symbol. Movie clips allow more control and support runtime updates, which buttons don’t. Also, instead of using an underline to show the active page, I used square brackets to highlight it when clicked.
I then asked ChatGPT to help tidy up the code since I had three other buttons to add. Initially, I just copy-pasted one of the sections for each button, but that made the page load really slowly TT.
 |
| Fig 1.1 | TextScramble Code |
Homepage Animation
The homepage background had to feature a looping, rotating Caligo logo. I initially tried drawing it manually in Animate, but it turned out wobbly and the perspective felt off. So, I used a 3D model I had created and rendered the rotation in After Effects. Unfortunately, Animate didn’t handle motion, classic, or shape tweens for this kind very well - probably because I was working with individual frames (WHY doesn't Animate support GIFs). In the end, I imported the frames manually into a movieclip so that it will loop even if the this.stop() action is called.
 |
| Fig 1.2 | Looping Background |
My prototype uses a lot of vertical layouts, so I initially wanted to implement ScrollTrigger and similar effects. But since Adobe Animate just displays everything without any actual scrolling, it didn’t make much sense. Everything had to fit within the stage height, so I had to rethink things. I ended up using multiple pages to reveal more content instead.
Members Animation:
For this page, I stuck with the card concept but positioned the cards along the bottom so they slightly peek out. When users hover over a member’s name, the matching card scales up and lifts along the Y-axis, then smoothly returns to its original spot once the hover ends.
 |
Fig 1.2 | Members cards' positions
|
The cards are also draggable. Since only a small portion is visible by default, users can drag to reveal more of the photocard - like the member’s half-body. If a card gets too close to another, it slightly repels to prevent overlap.
 |
| Fig 1.3 | Code used for draggable cards |
About Animation:
This page is really frame-heavy because I wanted to include a lot of animations, so it loads pretty slowly. Thankfully, I decided to split my project into separate files—definitely a lifesaver.
 |
| Fig 1.4 | About Page Animation Timeline |
I got the smoke transition effect from YouTube (don’t worry, it’s royalty-free), but it didn’t come with an alpha channel (ofc). So I had to use a luma matte in After Effects to remove the background. The first version looked rough—the transition jumped suddenly from black to grey, which felt really jarring. To smooth it out, I added a gradual grey background fade. It’s still noticeable, but much less distracting than before.
Transition:
Since I was going for a glitchy, pixelated theme, I designed my transition using pixel blocks too. I kept it simple by creating just one layer and turning it into a movie clip for the transition. Here's what the timeline looks like:
 |
| Fig 1.5 | MovieClip timeline |
After that, I wrote a script so I could reuse this transition across different buttons. The idea was: when you click a button, it triggers the transition, then takes you to the next page. But at first, the flow was a bit off. It went: click > transition > target page, and that made the switch feel jarring and abrupt—definitely not what I had in mind.
To fix it, I added a frame label called "out" inside the transition movie clip and rewrote the code. Now, the moment the animation hits the "out" frame, it immediately switches to the target page underneath, while the pixel transition keeps playing visually on top. Only after the animation fully finishes do I hide the pixelTransition, making everything look seamless and intentional.
 |
| Fig 1.6 | Script |
I have to admit, some of the buttons couldn’t have transition pages because they started messing with my code. The buttons ended up malfunctioning- they just didn’t work the way they were supposed to.
Sounds:
I wanted to add music in the background, but I ran out of time because I was stuck debugging my website. Every time I tried combining my files, it kept saying "JavaScript error occurred," so I had to leave the background sound out :(
 |
| Fig 1.7 | Javascript Animate Error |
What really frustrates me is that only two pages—Unreal and Merchandise—can actually be combined with the homepage. The other two, About and Members, don’t link properly at all (I think I’ll need to handle them separately), which kind of ruins the immersive experience I was aiming for...
Anyway, I was able to preview the three combined pages when I borrowed my friend’s Mac for two days. But now that I’m back on my own laptop, everything's falling apart. I originally planned to publish it from my laptop because, for some reason, her Mac wouldn’t load my custom fonts properly - even though I installed them. I figured if her Mac couldn’t handle it, I’d just upload everything from mine.
But now? I can’t even preview the three combined pages as my software crashes the moment I try. So I can’t even publish it. I’m genuinely losing it. AAAAAAAA. I even asked my friends to try posting it for me, but no luck - they couldn’t do it either.
Fig 1.8 | A convo with a friend to try uploading it for me :')
 |
| Fig 1.9 | My proof |
I did my best to upload the full website, but it kept lagging and crashing. The loading screen before the index page couldn’t be published, as shown in the visual below. However, for my own purposes, I’ve included it in my Google Drive (named "loadingg") so you can view how it’s supposed to look.
Fig 2.0 | My loading page that couldn't be included
Submission links:
*Loading time is really slow once uploaded into netlify*
**In case it is too long, you can refer to this video walkthrough**
Reflection:
Honestly, turning my components into interactive elements was both stressful and eye-opening. I applied techniques from our class tutorials like labeling frames and using motion,shape and classic tweens which really helped streamline the animation process.
Working with Adobe Animate gave me hands-on experience that could be useful for future web projects. That said, I think tools like Webflow or Framer might be more efficient. They offer plugins, better flexibility, and tons of tutorials online. Plus, they require minimal coding (though coding is still an option), while Animate is more limited, especially with GSAP, which made some of the animations I had in mind impossible to achieve.
Like the previous Interactive Design module, this one really emphasized the importance of problem-solving, especially when dealing with bugs or code that doesn't behave. I ran into issues with button functionality and had to deal with files crashing right before the deadline (my laptop wasn’t built for this Q-Q). Still, despite the chaos, I stayed committed to making a site that’s engaging, visually appealing, and connected to my theme (although there is a lot of flaws noticeable and I can't even upload my full one completely...)
.png)
.png)
Comments
Post a Comment