Advanced Interactive Design

Advanced Interactive Design - Exercises

18/04/2026 - 07/06/2025 / Week 1 - Week 7
Emily Ong Su Yu / 0365304
Advanced Interactive Design / Bachelor of Design in Creative Media / Taylor's University

MODULE BRIEF

Figure 1.1 Module Brief, PDF.

DOCUMMENTATION LINKS

LECTURES (WEEKLY)

WEEK 1

In the first week, our tutor, Mr Shamsul asked us to download Adobe Animate and brief us about Advanced Interactive Design module.

WEEK 2

Drawing

Mr Shamsul taught us how to use the tool in Adobe Animate to draw. We drew a ball and a boat in class.

Use Command + B to break apart the shapes
Modify and use Object Union to combine parts together
Use the Subselection tool (A) to adjust anchor points
Curve the shape
Use the Line tool to separate the shape, then break and delete unwanted parts

Figure 1.2 Ball.

Figure 1.3 Boat.

WEEK 4

Animate Circle

In week 4, Mr Shamsul taught us how to animate in Adobe Animate. We started with changing a circle shape.

Create a circle shape
Modify the shape in the middle frame
Right-click and apply Shape Tween
Add Ease Out to create a smoother animation

Figure 1.4 Animate Circle.

FINAL OUTCOME OF ANIMATE CIRCLE

Figure 1.5 Final Outcome of Animate Circle.

Animate Spider

For this task, we needed to animate the spider’s body first, then animate the legs separately by double-clicking the spider symbol.

Draw the spider
Convert the spider into a Graphic symbol
Arrange the movement of the spider
Right-click and apply Classic Tween, then add Ease Out

Figure 1.6 Convert to symbol.

The scene has 60 frames,the spider symbol also need to contain 60 frames for animation.

Plan how many frames the main scene will have
Distribute layers and rename
Arrange the movement of the spider’s legs in the symbol timeline
Hold Shift and drag the last frame to extend the timing to be longer the animation

Figure 1.7 Timeline in Scene.

Figure 1.8 Timeline in Spider.

FINAL OUTCOME OF ANIMATE SPIDER

Figure 1.2 Final Outcome of Animate Spider.

WEEK 5

Animate Words

Mr Shamsul taught us how to animate the words "Welcome to My Website" using a movie clip with Classic Tween in Adobe Animate.

Type the word "Welcome"
Convert the text into a symbol and choose Movie Clip
Insert a new frame until Frame 15
At the first frame, move the word to the left (press Shift while moving)
Right-click and create a Classic Tween
Add Ease Out (press Enter to apply)
Change the colour Alpha to make the text transparent at the beginning
Insert new frames until Frame 30 so the text stays longer on screen

Figure 1.9 Convert to symbol.

Figure 1.10 Timeline for "Welcome".

Figure 1.4 Colour change to Alpha.

Animate Button

We learned how to animate a button using rectangle shapes, Shape Tween, separate layers, and grids as guidance.

Create a rectangle shape
Break the shape apart using Command + B
Group each side separately using Command + G
Select all sides and distribute them to different layers
Break the shapes apart again because grouped objects cannot apply Shape Tween
Delete some parts and leave only a few sections
Right-click and choose Shape Tween

Figure 1.11 Timeline for words and button

Create a mask on the button so that the text does not appear outside the box, as the text needs to animate from below and only be visible inside the button area

Figure 1.12 Mask.

FINAL OUTCOME OF CLASS ACTIVITY IN WEEK 5

Figure 1.13 Final Outcome of class activity in week 5.

WEEK 6

Create an Enter Button in Adobe Animate

Step 1: Select the Button Design

Select all the text, lines, and shapes that will be part of your Enter button.
Make sure the whole button design is selected together.

Step 2: Copy the Button Design

Copy everything that you selected.
Create a new layer and name it Button.
Paste the copied content into the new Button layer.

Step 3: Convert the Button into a Symbol

Select the entire content on the Button layer.
Right-click and choose Convert to Symbol.
Choose Movie Clip as the symbol type.
Name the symbol btn_enter.
Click OK.
If your Adobe Animate has the Button type, you may choose Button. If there is no Button type, use Movie Clip.

Figure 1.14 Select all.

Figure 1.15 Create symbol.

Step 4: Add a Hover Effect

Select the button symbol on the stage.
The hover effect will be added using code on the Action layer.
When the mouse moves over the button, the button will become slightly transparent.
When the mouse moves away, the button will return to normal.

Figure 1.16 Change colour for hover.

Figure 1.17 Add rectangle shape for button.

Step 5: Create an Action Layer

Create a new layer above all the other layers.
Name the layer Action.
This layer will contain all the code for the Enter button.

Step 6: Stop the Main Timeline

On the first frame of the Action layer, insert a keyframe.
Right-click the keyframe and choose Actions.
Add a stop() action so the timeline does not play automatically.

var root = this; root.btnOn.addEventListener("click", functionO { root.mcAvatar.gotoAndPlay("on"); 3);

Step 7: Set the Button Instance Name

Select the Enter button on the stage.
Go to the Properties panel.
Set the instance name to btnEnter.
This name is important because the code will use it to control the button.

Figure 1.18 Instance name, btnEnter.

Step 8: Add a Frame Label for the Homepage

Go to the frame where the homepage starts.
Select that frame on the timeline.
In the Properties panel, set the frame label to start.
This label will be used to tell the timeline where to go after the Enter button is clicked.

Step 9: Add the Button Code

Go back to the first frame of the Action layer.
Open the Actions panel.
Add the code below:

Figure 1.19 Actions script (stop and play'start').

FINAL OUTCOME OF CLASS ACTIVITY IN WEEK 6

Link to Week 6 animated outcome: http://127.0.0.1:8090/Week%206.html?71539918

Avatar only animates when the button is pressed

Step 1: Prepare the Stage and Layers

Open FLA file.
Create three layers: button, avatar, and action.
Place your red “on” button on the button layer.
Place your avatar (the character holding the carrot) on the avatar layer.
The action layer will contain all your code; it should be on top.

Step 2: Set Instance Names

Select the button on the stage, go to Properties, and give it the instance name: btnOn.
Select the avatar movie clip, go to Properties, and give it the instance name: mcAvatar.

Step 3: Prepare the Avatar Timeline

Double-click the avatar movie clip to edit its timeline.
Go to the frame where the animation starts and add a frame label: on (click the frame → Properties → Frame Label).
On the first frame inside the avatar clip, add stop(); so it does not animate automatically.

Step 4: Stop the Main Timeline Initially

On the action layer, first frame, open Actions panel.
Add this code to stop the main timeline:

var root = this; root.stop();

Step 5: Add Button Click Code

Below the previous code, add the event listener for your button:

root.btnOn.addEventListener("click", function() { root.mcAvatar.gotoAndPlay("on"); });

This means the avatar animation will only start when you click the “on” button.

Step 6: Test Your Movie

Go to Control → Test Movie → In Browser.
Check that the avatar does not move immediately.
Click the red “on” button, and the avatar animation should start from the label on.

Optional: Make Timeline Stop Automatically After Animation

If you want the animation to stop after finishing, add stop(); on the last frame of the avatar clip or main timeline.

Figure 1.20 Process of play button.

FINAL OUTCOME OF CLASS ACTIVITY PLAY BUTTON IN WEEK 6

Link to Week 6 play button outcome: http://127.0.0.1:8090/E3_Animation_EMILY%20ONG%20SU%20YU.html?29322384

WEEK 7

Load to other page (website)

On the Action layer, add frame labels for each section of the animation.
Create a navigation bar with buttons that link to different pages or sections.
Assign an instance name to each button, such as btnHome, btnAbout, and btnNews.
Right-click the keyframe on the Action layer and select Actions.
Use the Actions Wizard to add a command that goes to the selected frame label and plays the timeline.

Figure 1.21 Process #1.

Figure 1.22 Process #2.