ADV INTERACTIVE DESIGN / WEEKLY EXERCISE

Naura / 0356798 / Interactive Spatial Design
DST60804 / Advance Interactive Design
Weekly Journal

Week 2:

Mr. Shamsul introduced us to Adobe Animate, and we started learning the basics. We learned how to create a new web file, adjust the settings, and change the workspace layout. We also learned that a preloader acts as a loading signal, letting the user know that the page is loading — and we were reminded that we must include this in our final project! We practiced creating simple objects, drawing lines and segments, filling in colors, curving lines, and more. Afterward, we moved on to creating a beachball, which can be seen below:

Fig 1.1 Beachball

To apply what we had learned, we were then asked to trace an image that Sir had provided us, which also helped train our attention to detail.

Fig 1.2 Sailboat reference

Fig 1.3 My Sailboat

Since I hadn’t decided on a topic for my website yet, I proposed three ideas:

1. PLAVE and their recent album Caligo Pt. 1
2. ORV
3. Spider-Man: Across the Spider-Verse

Honestly, I’m leaning toward a more techy and cyber vibe, and while I could have chosen a theme like “insomnia” or something similar, I’m worried I wouldn’t be able to give it my best since I’m not really passionate about that topic. Sir mentioned that I can go with option 1 (PLAVE), but reminded me to carefully consider the content I want to include because I need to prepare five pages.

Week 3:

We explored Adobe Animate in greater depth, and Mr.Shamsul demonstrated how to create simple shape tweening. For our first exercise, we transitioned shapes into one another, and I used the ease in and out quad setting to smooth the animation.

Fig 2.1 My First Shape Tweening

Some shortcuts we learn:

• (fn) + F5 → Add frame: stretches out your current frame without changing content.
• (fn) + F6 → Add keyframe: creates a new keyframe that keeps the same artwork as the previous one which is useful for making small changes over time.
• (fn) + F7 → Add blank keyframe: creates an empty keyframe to start fresh with no artwork.
• V → Selection Tool: select and move objects.
• Q → Free Transform Tool: scale, rotate, skew, or distort selected objects on the stage.

We were given a challenge to create a countdown animation from 10 to 1. To improve the visual quality of the transition, I chose a pixel-style font. This decision was inspired by my observation that the default font in the instructor’s example had a rough breaking-apart effect. Using a modular font helped produce a cleaner and more structured tween effect — and the outcome confirmed my assumption.

During the process, I learned that text must be broken apart before applying shape tweening. In the case of double-digit numbers like “10,” the text must be broken apart twice (using Ctrl + B twice) to fully convert it into editable shapes.

To enhance the animation further, I experimented with different transition styles and opted for cubic ease-in-out easing. This helped smooth out the pacing of the animation and made the countdown feel more dynamic and professional.

Fig 2.2 My Countdown

Week 5:

Since I couldn’t join class because my Microsoft Teams wasn’t working—and I couldn’t even inform Sir about it—I had to rely heavily on Natania. She filled me in on what they did during class and also told me about the homework, which was a masking exercise.

Week 6:

mask will only work if you lock both layers

adding buttons - right click on the keyframe and then find actions

there are two ways to mask something, we already covered the first one and now the second one is where you mask the transition? i dont understand

Then for the class exercise, we were told to add two elements after the enter button and they have to appear one after another

Week 9:

After a two-week break, we’re finally diving into GSAP — a powerful library that makes animations much easier to manage.

Our first task is to create a button that transitions between screens smoothly using GSAP.

To get started, we need to download the GSAP file and make sure it’s placed in the same folder as our working project.

This is the final output of the class exercise: