Labels

Advanced Interactive Design / Lectures

23/04/2026 - ?/?/2026 (Week 1 - Week 14)

Chang Wing / 0367807 

Advanced Interactive Design / Bachelors of Design (Honours) in Creative Media / Taylor's University

Lectures

TABLE OF CONTENTS

    - Week 1
    - Week 2
    - Week 3
    - Week 4


INSTRUCTIONS




LECTURES

Week 1

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

Mr.?? the correct order of a:link, a:visited, a:hover, and a:active to ensure proper styling of hyperlinks.



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
  1. Select the Text Tool (T)
  2. Click on the stage
  3. Type your text (Example: WELCOME)

Step 2: Convert Text to Symbol
  1. Select the text
  2. Press F8
  3. Choose Type: Graphic
  4. Name it: text_mc
  5. Click OK
 
Step 3: Create Classic Tween
  1. Right click the frame
  2. Select 'Create Classic Tween'


Step 4: Starting Position + Fade In
  1. Go to Frame 1
  2. Move the text slightly outside the left side
  3. Open:
  4. Window → Properties →  Object → Set: Alpha = 0% (Figure 1.13)

Figure 1.13 Set Alpha (21/05/2026) 

Step 5: Middle Position
  1. Go to around Frame 30
  2. Move text to center
  3. Set: Alpha = 100%

Step 6: End Position + Fade Out
  1. Go to Frame 60
  2. Move text toward the right side
  3. Set: Alpha = 0%


Part 2 — Rectangle Line Animation

Step 1: Draw Rectangle
  1. Select: Rectangle Tool (R)
  2. Turn OFF fill color
  3. Choose a stroke color
  4. Draw a rectangle (Keep Object Drawing mode ON!)


Step 2: Animate Rectangle Drawing Effect (Figure 1.14)
  1. Select rectangle → Break Apart (Ctrl/Cmd + B)
  2. Select each side line individually
  3. Group each line
  4. Select all 4 lines → Distribute to Layers
  5. Break apart AGAIN on each layer
  6. For each line: Set start frame with line reduced/empty
  7. Set end frame with full line
  8. Right click between frames → Create Shape Tween
  9. 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
  1. Create another text layer
  2. Position text inside the rectangle

Step 2: Animate Text Upward
  1. Convert text into Graphic (F8)
  2. Create Classic Tween
  3. Frame 1: text slightly below box
  4. Frame 20: text centered inside box


Part 4 — Mask the Box

Step 1: Create Mask Shape
  1. Add a new layer ABOVE the text layer
  2. Draw a filled rectangle covering the visible area

Step 2: Convert Layer to Mask
  1. Right click the mask layer
  2. Select: Mask (The layer below becomes masked automatically)

Final Outcome

Figure 1.15 Exercise outcome (21/05/2026) 

Duplicate Layer and Change Text
  1. Right click the layer → Duplicate Layers
  2. Select the text/symbol on the duplicated layer
  3. Go to: Properties → Swap…
  4. Create or choose a new symbol instance (Figure 1.16)
  5. 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) 






    FEEDBACK

    Project 2: Website Redesign Prototype

    Week 1 (23/04/2026)
    Feedback: Both 'Malaysia Food Adventure' and 'MH370 Commemorative Website' are strong ideas. You can use online images for photorealism, but edit them in Adobe Photoshop to make them your own, keep a balance between self-created assets and sourced visuals. Consider GSAP for scroll-based animations.

    Week 2 (30/04/2026)
    Feedback: -

    Week 3 (07/05/2026)
    Feedback: -

    Week 4 (14/05/2026)
    Feedback: Liked the character illustration style and animation moodboard, can proceed with the current direction. You can add small animation details, such as foot stepping on the floor during idle states and a step-back motion onto the motorbike before transitioning out of the screen so the animation feels more realistic.




    REFLECTION

    In thbgfd





















    Labels:

    Comments

    Post a Comment