Advanced Interactive Design / Lectures

Mr. Shamsul introduced the module and briefed us on the tasks and learning outcomes for this semester. He also showed us some exemplary works by seniors so we could have a clearer idea of the quality and direction they are expecting from us. Besides that, we were also asked to propose a preliminary idea for this semester’s project for approval and feedback.

So I've proposed 2 ideas:

1. Malaysian Food Adventure

An interactive cute website that brings viewers on a journey to explore Malaysia’s signature foods across different regions and states. Users can interact with different locations to discover local dishes, while also learning about the history, cultural background, and fun facts behind each food that reflect Malaysia’s unique lifestyle and multicultural identity. The website aims to create an enjoyable and educational experience, especially for foreigners who are interested in learning more about Malaysian culture through food.

2. Remembering MH370

A documentary-style interactive website that archives and presents the events surrounding the disappearance of Malaysia Airlines Flight 370 disappearance on March 8, 2014, where 227 passengers and 12 crew members vanished during the flight. The website would document the departure timeline, final recordings of communication, last known flight path, and subsequent search updates in a more immersive and engaging format. As the case remains unresolved, the project aims to preserve public memory and encourage more people to learn about the incident and its impact. Since the tragedy remains deeply personal and sensitive to many families, the content would need to be handled with great care and responsibility.

Week 2

Object Drawing Mode is a way of drawing where each shape becomes its own separate object instead of merging with other shapes.

OFF (normal mode): shapes “stick together” when they touch
ON (Object Drawing Mode): shapes stay separate, like individual boxes

When Object Drawing Mode is ON:
-You can move a shape without affecting others
-Colors won’t merge accidentally
-Each shape behaves like a “container”

When it is OFF:
-Shapes can combine or cut each other (this is why you got that “hole” issue earlier)
-Good for painting-style artwork, but can be messy

How to turn it on:
-Select a tool like Brush / Rectangle / Oval
-Click the small icon that looks like a circle inside a square (top toolbar)

Figure 1.1 Object Drawing (30/04/2026)

Figure 1.2 Suggested Publish Settings for this project (30/04/2026)

Figure 1.3 Scale from Object Center Shortcut: Shift + Option + Click & Drag (30/04/2026)

Figure 1.4 Adobe Animate drawing tools exercise (30/04/2026)

Figure 1.5 Recreated by myself in Adobe Animate (30/04/2026)

Figure 1.6 Illustration process (snippet) (30/04/2026)

Week 3

Class cancelled.

Week 4

Mr. Shamsul continued the tutorial by demonstrating how to use "Distribute to Layers," "Create Shape Tween," and "Create Classic Tween" in Adobe Animate.

Distribute to Layers -> Separates selected objects onto different layers for better organisation

Shape Tween -> Used for morphing shapes

Classic Tween -> Used for animating symbols between keyframes

Figure 1.7 Illustration process (snippet) (14/05/2026)

Figure 1.8 Illustration process (snippet) (14/05/2026)

Figure 1.9 Illustration process (snippet) (14/05/2026)

Figure 1.10 Create Shape Tween (Yellow highlight) (14/05/2026)

Figure 1.11 Create Classic Tween (Purple highlight) (14/05/2026)

Figure 1.12 Exercise outcome (14/05/2026)

Week 5

Adobe Animate Tutorial

This tutorial covers:

Text move from left → fade in → move right → fade out
Rectangle line animation
Text transition into the box
Masking the box

Part 1 — Text Animation (Left to Right + Fade)

Step 1: Add Text

Select the Text Tool (T)
Click on the stage
Type your text (Example: WELCOME)

Step 2: Convert Text to Symbol

Select the text
Press F8
Choose Type: Graphic
Name it: text_mc
Click OK

Step 3: Create Classic Tween

Right click the frame
Select 'Create Classic Tween'

Step 4: Starting Position + Fade In

Go to Frame 1
Move the text slightly outside the left side
Open:
Window → Properties → Object → Set: Alpha = 0% (Figure 1.13)

Figure 1.13 Set Alpha (21/05/2026)

Step 5: Middle Position

Go to around Frame 30
Move text to center
Set: Alpha = 100%

Step 6: End Position + Fade Out

Go to Frame 60
Move text toward the right side
Set: Alpha = 0%

Part 2 — Rectangle Line Animation

Step 1: Draw Rectangle

Select: Rectangle Tool (R)
Turn OFF fill color
Choose a stroke color
Draw a rectangle (Keep Object Drawing mode ON!)

Step 2: Animate Rectangle Drawing Effect (Figure 1.14)

Select rectangle → Break Apart (Ctrl/Cmd + B)
Select each side line individually
Group each line
Select all 4 lines → Distribute to Layers
Break apart AGAIN on each layer
For each line: Set start frame with line reduced/empty
Set end frame with full line
Right click between frames → Create Shape Tween
Offset keyframes across layers so lines draw in sequence (one after another).

Figure 1.14 Break Apart Rectangle > Grouping individually
> Distribute to different layers (21/05/2026)

Part 3 — Text Transition Into Box

Step 1: Put Text Inside Rectangle

Create another text layer
Position text inside the rectangle

Step 2: Animate Text Upward

Convert text into Graphic (F8)
Create Classic Tween
Frame 1: text slightly below box
Frame 20: text centered inside box

Part 4 — Mask the Box

Step 1: Create Mask Shape

Add a new layer ABOVE the text layer
Draw a filled rectangle covering the visible area

Step 2: Convert Layer to Mask

Right click the mask layer
Select: Mask (The layer below becomes masked automatically)

Final Outcome

Figure 1.15 Exercise outcome (21/05/2026)

Duplicate Layer and Change Text

Right click the layer → Duplicate LayersSelect the text/symbol on the duplicated layer
Go to: Properties → Swap…
Create or choose a new symbol instance (Figure 1.16)
Double click the new symbol and replace the text⚠️ Repeat the Change/Swap Instance step for the other keyframes as well

Figure 1.16 Swap Symbol (21/05/2026)

Week 6

Adobe Animate to HTML Website

This tutorlfkmanjna

Figure 1.17 Convert to Button Symbol (28/05/2026)

Figure 1.18 Final Outcome (28/05/2026)

Week 7

Button Play

Inside the Movie Clip:
Create an Idle animation state
Put it in frames like Frame 1 → Frame 9 (or longer)
Add a frame label called idle
Add an Action layer at the last frame of idle
Use gotoAndPlay("idle") to loop the idle animation
Main Scene setup
You need 3 layers:
Avatar (Movie Clip)
Button
Actions layer (1 keyframe only)
Button interaction logic
Give the button an instance name (e.g. btn)
Give the avatar Movie Clip an instance name (e.g. avatarMC)
Add a click event listener to the button:
btn.addEventListener(MouseEvent.CLICK, onClick);

function onClick(e:MouseEvent):void {
avatarMC.gotoAndPlay("on"); // switch animation state
}

Animation logic
Default state = Idle loop
stays playing idle label continuously
When button is clicked:
Movie Clip switches to “on” label / animation state
plays the action animation

Figure 1.19 Avatar remains in a looping idle animation until a button is clicked,

which triggers a different animation (04/06/2026)

Figure 1.20 Tutorial Recording (04/06/2026)

Week 8

GSAP Tween

Figure 1.21 Process (Sped Up) (11/06/2026)

Figure 1.22 Final Outcome (11/06/2026)

REFLECTION

Looking back at the weekly lectures, I gained a better understanding of how animation can be used to support an interactive experience rather than just making things move. Starting from the basic Adobe Animate tools such as Object Drawing Mode, Shape Tween and Classic Tween, I gradually learned how to create transitions, masking, button interactions and animation states, we also explored GSAP (GreenSock Animation Platform), a JavaScript animation library that allows developers to create more flexible and advanced animations for websites, the exercises also helped me become more comfortable with organising layers and controlling different elements of an animation using Adobe Animate.

Although I eventually chose to build my final website using VS Code and AI-assisted vibe coding instead of Adobe Animate, the concepts I learnt from these lectures were still useful, they helped me understand animation timing and visual feedback, which I applied when designing the interactions for my final website. Looking forward, I do hope we can learn more up-to-date ways of creating and implementing web interactions, especially with how quickly the industry is shifting towards new tools and AI-assisted workflows, I think learning these newer approaches could further expand our skills as UI/UX designers and help us bring our designs beyond just Figma prototypes and actually turn them into functional and interactive experiences.

Search This Blog

Chang Wing (0367807)

Advanced Interactive Design / Lectures

Comments

Post a Comment

Popular Posts

Advanced Typography - Final Compilation & Reflection

Advanced Typography - Task 1 / Exercises: Typographic Systems & Type & Play