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 07 / 08 No Class