Advanced Interactive Design

👋 Week 1: Briefing & Inspiration

Date: 25 April 2025
Module: Advanced Interactive Design
Lecturer: Mr. Shamsul

Today marked our first class of the semester, and it was a good start! Mr. Shamsul walked us through the course expectations and gave us a clear briefing on Assignment 1. He also showcased some impressive websites to give us a better understanding of how animation and interactive design can elevate user experience.

Here are a few examples that really caught my attention:

Dolce & Gabbana Beauty Tools
Why I liked it: The site looks super elegant and high-class — perfect example of luxury branding with a clean, refined animation flow.
Topology
Why I liked it: This one has very interesting animations. The transitions and motion make the site feel dynamic and alive.
DonProd
Why I liked it: It’s dope and full of energy! The animations and bold use of color create a really hype and engaging experience.

These examples helped me realize how crucial motion and interaction are in creating a memorable digital experience. I’m feeling inspired to create something unique that not only looks good but also feels alive when users interact with it.

----------------------------------------------------------------------------------------------------------------------------

🛠️ Week 2: Getting Started with Adobe Animate

Date: 9 May 2025
Module: Advanced Interactive Design
Lecturer: Mr. Shamsul

This week, we were introduced to Adobe Animate, and it was exciting to explore a new tool that will be useful for creating interactive and animated content for our website. Mr. Shamsul began by guiding us through the correct setup for our files — we were reminded to always select "HTML5 Canvas" format and set the document to “Web – Very High” to ensure optimal quality.

We also learned how to customize our workspace using Basic or Essential views so we could clearly see the Properties panel, which is important when editing objects or animations. Then we were introduced to some basic tools like the shape tools, selection, and fill. One key point we learned was the use of the Object Drawing Tool — when it's turned on, it keeps the fill and stroke of a shape together, which makes moving and editing easier. If it’s turned off, we’d need to double-click to move both the fill and outline together.

At the end of class, we worked on a short tutorial assignment, where we created a simple boat drawing, added an outline, and filled in the colors — a good exercise to reinforce the basic tool functions.

----------------------------------------------------------------------------------------------------------------------------

🌀 Week 3: Shape Tweening and Keyframes

Date: 2 May 2025
Module: Advanced Interactive Design
Lecturer: Mr. Shamsul

This week, we dived deeper into animation techniques using Adobe Animate. Mr. Shamsul introduced us to the concept of shape tweening, where we can smoothly animate the transformation of one shape into another. It was interesting to see how simple lines or shapes could come alive just by using a few keyframes.

We learned to manage our timeline using:

F5 to extend frames
F6 to add a new keyframe
F7 to add a blank keyframe

Another useful technique was using the Break Apart function. For instance, if we typed a number (like "2025") using the Text Tool, we couldn’t tween it directly. So we used Ctrl+B to break it apart once to separate the text, and a second time to convert it into a shape. Once it becomes a shape, we can apply shape tween to create transitions like fade in/out or morphing effects.

This was a hands-on and practical session that gave me more confidence in using Animate for interactive storytelling. I’m excited to start applying these skills to elements in my Tron: Ares project!

🖥️ Week 5 – Online Class & Classic Tween Animation

Date: 23 May 2025
Module: Advanced Interactive Design
Lecturer: Mr. Shamsul

This week, we had an online class instead of meeting in person. Despite the change in format, the session was still productive and hands-on. We focused on learning how to use Classic Tweening in Adobe Animate.

Mr. Shamsul guided us through a simple but effective exercise: animating a beach ball to bounce along a path. We first created a guide layer by drawing a curved line, then used the Classic Tween feature to make the ball follow the path smoothly. It was a great introduction to using guide layers to control animation direction and timing.

After getting the hang of the ball animation, we moved on to a slightly more advanced task — making a car follow a map route using the same logic. This helped reinforce the concept of guide layers and showed us how tweening can bring objects to life with realistic movement.

Overall, it was a fun and valuable class that deepened our understanding of motion paths and animation principles. I can already see how these techniques could be useful for my Tron: Ares website, especially when animating vehicles or UI elements that need to follow specific motion paths.

Week 6 – Masking Techniques & Replay Buttons

Date: 30 May 2025
Module: Advanced Interactive Design
Lecturer: Mr. Shamsul

In this week’s class, we revisited a fundamental but powerful technique in Adobe Animate — masking. Mr. Shamsul walked us through the basics again, but also introduced us to more advanced ways of using masks in animation.

We learned that a mask layer can be animated to create effects like reveal transitions or spotlights. But we also explored an alternative approach: instead of moving the mask, we can animate the object underneath while keeping the mask static — a useful method for controlled, clean results.

On top of that, we were introduced to interactive elements, specifically how to create a replay button. By adding basic scripting and interactivity, we can now allow users to click and replay our animated scenes, which is great for looping demos or interactive portfolios.

This session gave me more ideas on how to use masking creatively in my Tron: Ares website — like revealing content with light scans or transitions that mimic the digital grid style from the movie.

Week 7 - Not Having Class

Week 8 - Not Having Class

🗓️ Week 9 Blog — GSAP Integration in Adobe Animate

Date: 20 June2025
Module: Advanced Interactive Design
Lecturer: Mr. Shamsul

This week, we explored how to integrate GSAP (GreenSock Animation Platform) into Adobe Animate to create smooth, timeline-independent animations. GSAP is a powerful JavaScript library that makes complex animations easier and more performant — perfect for enhancing our interactive projects.

🔧 Step 1: Adding GSAP to Adobe Animate

🎬 Step 2: Setting Up the Scene

To begin, we added the GSAP library into Adobe Animate by:

Opening the Timeline and selecting the relevant layer.
Right-clicking the keyframe and choosing Actions to open the Actions panel.
Clicking the Globe icon to import external scripts.
Importing the GSAP library file, which we downloaded from the official GSAP website.

This allowed us to use GSAP's animation functions directly within our Animate project.

Next, we prepared the animation scene:

Created three full-screen rectangles and positioned them side-by-side horizontally.
Converted each rectangle into a Movie Clip Symbol.
Grouped all three into a parent Movie Clip named MC_Screen.
Placed MC_Screen on a new layer called "Screen"

This setup gave us a wide, scrollable strip of screens ready for animation.

Week 10 - Not Having Class

🗓️ Week 11 Blog — Importing and Using Sound in Adobe Animate

Date: 27 June2025
Module: Advanced Interactive Design
Lecturer: Mr. Shamsul

This week, we learned how to bring sound into our Adobe Animate projects — an essential step in making our animations more immersive and interactive.

🎧 Discovering Free Sound Resources
🔊 Importing Audio into Adobe Animate
🖱️ Playing Sound on Button Click
🎵 Controlling Background Music (BGM)

Sir introduced us to a useful website called Freesound, which offers a large library of free sound effects. We were encouraged to explore and download sound clips that would suit our project’s theme or interaction goals.

We were guided step-by-step through the process of adding audio to our Animate project:

Download a sound file (usually in .mp3 or .wav format).
Import it into the Library by going to:
- File > Import > Import to Library.
The audio then becomes accessible in the Library panel, ready to be used.

To make our projects interactive, we learned how to trigger sounds with button clicks

We also explored how to manage background music with play and pause controls:

Sir gave us a demo file that included:
- A playPauseButton that toggles music.
- A stopButton to stop the track.
We analyzed how music playback is handled with createjs.Sound and custom functions to pause, resume, or stop audio

This gave us a solid foundation for managing music flow in our own interactive experiences.

Raymond's Blog

Search This Blog