Advanced Interactive Design / Weekly Note

Week 01

This week, we had a brief introduction to the module and an overview of what we need to do for the first assignment. At the same time, we explored the internet to learn about interactive websites and gather inspiration.

The website we used for research was theFWA.

• First, choose a category, then select a brand (and gradually dive in deeper).

• We need to choose a total of 3 websites.

The 3 Idea that i have came out were 

1. ONE OK ROCK – "DETOX" album promotion
2. Personal Portfolio Website
3. World Expo 2025: Pavilion Highlights

***Feedback (On Choosing Topic)***

You can choose the first one, but think about how you can make it more special and not like other common websites. If you use that structure, it will look like a typical interactive design website, so maybe add some extra branches or features to make it more interesting and stand out from the rest

< To Jump Link >

Week 02

Explore and Learn in Adobe Animate: Using Basic Tools

• File Settings

1. Select file type: WEB
2. Set quality: Very High
3. Make sure the format is HTML5

Figure 2.1: Exploration of Object Drawing

• The shape on the left / bigger (separated parts) is without Object Drawing.
• The shape on the right / smaller (moves as one) is with Object Drawing enabled.

Figure 2.2 /2.3: Exploration of Object Drawing (Left = Without / Right = With)

• Turning Object Drawing off allows you to separate and edit the shape edges individually.
• Turning Object Drawing on means the shape is treated as a single object, and you cannot separate its edges.

Figure 2.4: Breaking Apart Objects

• Select all, then Right-click > Break Apart to separate the shape into editable pieces.

Figure 2.5: Paint Bucket Tool - lets you change the color of a shape with just one click.

In-Class Exercise

Task: Copy an image provided by the lecturer using Adobe Animate.

Figure 2.6: Original Image

Figure 2.7: My Recreation Using Adobe Animate

< To Jump Link >

Week 03

• F5 = Add keyframe
• F6 = Cut keyframe

How to Add Ruler

• Go to View > Select Ruler, then pull it out (similar to Figma).

Figure 3.1: How to add/show ruler

How to Add Transition Between Shapes

• Select the timeline, right-click, and choose Create Shape Tween.

Figure 3.2: How to add transition between shapes

Figure 3.3: Timeline in Adobe Animate

How to Change the Effect Setting

Go to Properties > Click Effect > Change the effect (e.g., ease in/out or different types).

Figure 3.4: How to change the effect setting

Class Activity Outcome

Video 3.1: Class exploration on shape animation transitions

Video 3.2: Class Exercise Number Count Down 10-0

Note

• Text cannot be animated directly. You need to break it apart using Ctrl + B.

< To Jump Link >

Week 04

- No Class

Week 05 

Adobe Animate tutorial 

Figure 5.1  Convert to Symbol

• Select the object on the stage.
• Right-click and choose Convert to Symbol.
• Choose Movie Clip or Graphic, and give it a meaningful name.

Figure 5.2  Change to Graphic

• Select the symbol.
• In the Properties panel, change the type to Graphic if it's not already.

Figure 5.3 Rename the Item

• Right-click on the symbol in the Library panel.
• Select Rename and enter a more descriptive name.

Figure 5.4 Add Classic Motion Guide

• Right-click on the layer containing the symbol.
• Select Add Classic Motion Guide.

Figure 5.5 Draw the Motion Path

• Select the Classic Motion Guide layer.
• Use the Pen Tool to draw a motion path.
• Tip: Press Shift + Y to open the Pencil Tool as an alternative.

Figure 5.6  Smooth the Line

• After drawing, select the path.
• In the Properties panel or right-click, choose Smooth to make the path cleaner and more fluid.

Figure 5.7 Insert Frames and Keyframes

• On the object layer:
• Right-click on Frame 1 and select Insert Keyframe.
• Move to the desired frame (e.g., Frame 30), right-click, and select Insert Frame.

Figure 5.8  Apply Classic Tween

• Right-click between the two frames on the object layer.
• Select Create Classic Tween.

Figure 5.9 Orient to Path

• Click on the tweened frames.
• In the Properties panel, check the box Orient to Path to make the object rotate along the guide.

Figure 5.10  Change Publish Settings

• Go to File > Publish Settings.
• Adjust formats (e.g., SWF, HTML5), compression, and other export options as needed.

Figure 5.11  In-Class Practice Outcome

Figure 5.12  In-Class Practice Outcome 2 

MASKING PRATICE IN CLASS 

Figure 5.13  In-Class Practice Outcome 3 ( Masking)

< To Jump Link >

Week 06 

Adobe Animate – Masking Effect

Figure 6.1 Add a text first and adjust its timeline from down to up 

Figure 6.2 Add a square on top and place it above the text (shape on top, text below).

Figure 6.3 Add a timeline and a mask. Then, in the text section, create a classic tween.

Create a button and go next button  (interactive)

Step 1: Create a Symbol

1. Select both the text and the mask shape layers (hold Shift and click both).
2. Right-click and choose Convert to Symbol (or go to Modify > Convert to Symbol).
3. Choose Button as the type and name your symbol (e.g., btnMask).
4. Click OK.

Step 2: Adjust Button States 

1. Double-click the button symbol to enter Edit mode.
2. In the timeline, you’ll see four frames: Up, Over, Down, and Hit.
3. You can add different graphics or effects to these frames to create hover and click effects.
4. When done, return to the main stage.

Part 3: Stopping the Animation

• Step 1: Add a New Layer for Actions
1. Create a new layer above all other layers and name it Actions.
2. Go to the frame where you want the animation to stop (e.g., frame 50).
3. Right-click that frame and select Insert Blank Keyframe.

• Step 2: Add Stop Action Using Action Wizard
1. Right-click the blank keyframe and choose Actions.
2. The Actions panel will open.
3. In the Actions panel, click the Wizard icon.
4. Choose Timeline Control from the left panel.
5. Select Stop at this Frame from the right panel.
6. Click Next, then Finish.

Part 4: Adding Interactivity (No Manual Code)

• Step 1: Use Action Wizard to Create Button Click Action
1. Select your btnMask button on the stage.
2. Right-click and choose Actions.
3. In the Actions panel, click the Wizard icon.
4. From the left panel, choose Mouse Events.
5. In the right panel, select On Mouse Click.
6. Click Next.

• Step 2: Define the Button Action
1. In the left panel, select Timeline Control.
2. In the right panel, select Go to Frame and Play 
3. Click Next.

• Step 3: Set the Destination Frame
1. In the next step, specify the frame number (or label (if we label it ))
2. Click Next and then Finish.

Figure 6.4 Select Actions

Figure 6.5 Select the action and click Next.

Figure 6.6 Select the frame to apply the action to, click Finish, and add the JavaScript.

Class Activity Outcome

Figure 6.7 Button Exercise Outcome

Figure 6.8 masking exercise

< To Jump Link >

Week 09

Gsap - Link 

GSAP Integration in Adobe Animate

Step 1: Adding GSAP to Adobe Animate

1. Open your Timeline.
2. Rename and select the relevant layer.
3. Open the Actions panel by right-clicking the keyframe and choosing Actions.
4. Click the Globe icon to import external scripts.
5. Import the GSAP library file (download it from the official GSAP website first).

Figure 9.1  Open the Actions Panel

Figure 9.2 Select File and Import

Figure 9.3 Import the GSAP Library File

Step 2: Setting Up the Scene

1. Create 3 rectangles (same size as the screen) and place them side-by-side horizontally.
2. Convert each rectangle into a Movie Clip Symbol.
3. Group them into a single Movie Clip called MC_Screen and place it on a new layer named "Screen".

Step 3: Adding Scroll Animation

In the Actions panel, insert the following code to animate the grouped screens:

gsap.to(this.MC_Screen, { x: -512 });

• The value -512 represents the x-position the grouped Movie Clip should move to.
• To get this value:

1. Select the grouped Movie Clip.
2. Align it to the right side.
3. Check the Properties panel for its x-coordinate.

Figure 9.4  Change the Alignment

 Figure 9.5  Get the X Position from the Properties Panel

Step 4: Adding Navigation Buttons

1. Create a new layer named "Button".
2. Draw 3 colored circles.
3. Convert each circle into a Button Symbol and name them clearly (e.g., Btn_Black).
4. Align the buttons at the center of the stage.
5. Select each button and open the Code Snippets panel.
6. Choose Mouse Click Event to add starter code, then modify it as shown below:

Code :

this.Btn_Black.addEventListener("click", movescreenblack.bind(this));

function movescreenblack() {

    gsap.to(this.MC_Screen, { x: 1536 });

}

• Btn_Black is the instance name of the button.
• movescreenblack is the custom function that moves the screen.
• 1536 is the x-position of the Movie Clip i want to scroll to. Adjust this value according to layout.

Figure 9.6 Code Snippet Setup

Work outcome:

Figure 9.7 Class Exercise Outcome

Week 11

How to Import and Use Sound in Adobe Animate

• Download the Sound File
• Make sure the sound is downloaded and saved on your computer.

• Import the Sound into Adobe Animate
• Open your Adobe Animate project.
• Go to the top menu:
• File > Import > Import to Library
• Select your downloaded sound file and click Open.
• The sound will now appear in the Library panel.

• Create a Button
• Use the Rectangle Tool or Oval Tool to draw a shape for the button.
• Convert it to a button symbol: Right-click the shape → Convert to Symbol → Choose Button → Click OK.

• Add Sound to the Button

• Done
• Exit the button editing mode 
• Test your button:
• Control > Test Movie > In Browser (or Test).
• When you click the button, the sound play.

Figure 11.1 Adobe Adding sound in Button

 Part 2 - control music using button (pause and resume)

1. go to the file provided (copy the code and the button in to the file you have)

2. import the song you wanted

 Figure 11.2 Change / Edit the Linkage

 Figure 11.3 Check the name (if have 2 or more)

 Figure 11.4 Base on the code above