Advanced Interactive Design / Exercises

For this class, we drew a spider and using that, was taught on animating it by converting the drawing into a movie symbol, separating the 8 legs into different layers, and animating using keyframes and shape tween.

Fig 1.3 - Spider drawing and animating

Fig 1.4 - Spider animation

Week 5 - Text Graphic Animation

For this class, we were taught on making animated text graphic.

Tutorial: 'Welcome to my Website - Enter' text graphic animation

For this class, we made animated text, and at the end, a box that appears at the end with the words 'Enter'

Fig 1.5 - Text graphic animating

Fig 1.6 - Text animation

Week 6 - Enter Website Button

For this class, we made the 'Enter' button to be clickable and transfer the user to a homepage.

Fig 1.7 - Making working button with code (with help of wizard)

Fig 1.8 - Simple homepage

Fig 1.9 - Button showcase

Week 7 - Working NavBar Buttons

For this class, we were given an Adobe Animate file and was tasked to complete the file by adding interaction to the buttons provided.

Fig 1.10 - Making working Navbar buttons

Fig 1.11 - Working NavBar showcase

Week 8 - GSAP Tutorial

For this class, we were introduced to GSAP, a JavaScript animation library, that allows us to add animations into our website.

Tutorial: GSAP 1 (Horizontal slider)

Fig 1.12 - Making horizontal slider

Fig 1.13 - Horizontal slider showcase

Tutorial: GSAP 2 (Vertical slider)

Fig 1.14 - Making vertical slider

Fig 1.14 - Vertical slider showcase

Instructions

Module Information Booklet

Exercise 1: Asset Creation

Objective:

Design a functional "Smart Assistant" avatar or UI widget using vector tools.

The Task:

Using the drawing tools in Adobe Animate (Pen, Oval, Rectangle), create a character or a central UI hub.

Requirements:

Use Object Drawing Mode to keep shapes clean.
The "Layer Rule": Every part that needs to move (eyes, arms, glowing core) must be on its own named layer.
The "Symbol Rule": Select each part and convert it to a Movie Clip Symbol (F8).

Submission Requirement:

Upload the .fla file in your Google Drive
Attach the link in your e-portfolio
Submit your e-portfolio link.

--------------------------------------------------------------------------------

Character design sketch

I decided to design a computer head character.

The setting for this character would be a factory manager NPC in my website.

Fig 2.1 - Character design sketch

The computer head design idea was inspired by those old big and bulky pc. The antenna on its head is inspired by the wifi antenna on modern pc boxes.

Fig 2.2 - Image of old computers and modern pc wifi antenna

The outfits is inspired by the factory worker outfits

Fig 2.3 - Dairy factory worker outfit

Drawing in Adobe Animate

After finishing the sketch on paper, I transfers the sketch into Adobe Animate and started drawing over it, and giving it colours.

I made sure to separate every body part and movable component into different layers.

Fig 2.4 - Drawing in Adobe Animate

Converting parts into a Movie Clip Symbol

Then, I converted every possible moving layer into a Movie Clip Symbol to prepare for animation.

Fig 2.5 - Movie Clip Symbols

Minor design changes

Made some minor design changes to the factory manager character

Fig 2.6 - Minor design changes

Final Exercise 1: Asset Creation

Fig 2.7 - Final Exercise 1: Asset Creation, week 5, (23/5/2026)

Google drive link:

https://drive.google.com/drive/folders/1iTbhnpfQXv_b2WuqQ2UQvLVrUB63gVQq?usp=sharing

Exercise 2: The Motion

Objective:

Give your character "life" through a continuous looping idle animation.

The Task:

Create an "Idle State" for your character/avatar so it doesn't look like a static image.

Requirements:

Nested Animation: Double-click your main symbol to animate inside its own timeline.
The "Breathe" Effect: Use Classic Tweens to create a 40-frame loop.
Polishing: Apply Easing (Classic Ease In/Out) to the tweens so the movement feels organic and high-end, not mechanical.

--------------------------------------------------------------------------------

Creating the motions

For the idle animation of the Factory Manager, I wanted the character to be reading the screen in front of it, with some minor movements such as head scratching, breathing, and blinking.

Below are the various parts of the character I have animated.

1. CRT Fuzz effect

For the CRT effect, I animated a scan line moving slowly down the screen. Once it reaches the end, it instantly snaps back to the top frame, creating the subtle “jump” effect commonly seen in old CRT displays.

Here I applied shape tween by accident, but it looks great, so i kept it.

Fig 3.1 - Animating CRT Fuzz effect

2. Face (Blinking and looking around)

Fig 3.2 - Animating Face (Blinking and looking around)

3. Breathing (dress)

I adjusted the dress slightly down every alternating 20 frames to make the breathing effect.

20 frames down, 20 frames up, rinse and repeat to 160 frames.

Fig 3.3 - Animating Breathing (dress)

4. Breathing (Arm 1)

Animation synced with 3. Breathing (dress) to create the effect of the character breathing

Fig 3.4 - Animating Breathing (Arm 1)

5. Scratching Head (Arm 2)

For this animation, I created a consistent head-scratching motion in front. In the last few frames, I made the keyframes closer together to speed up the head scratching animation, adding more variation and less like a robot.

Fig 3.5 - Scratching Head (Arm 2)

6. Sweat

For the sweat, I did not apply any tweens as I thought i was not suitable for the effect i was going for.

Fig 3.6 - Sweat

Final Exercise 2: The Motion

Fig 3.7 - Final Exercise 2: The Motion, week 6, (25/5/2026)

Google drive link:

https://drive.google.com/drive/folders/1Ndkv6FRgWsawB6iCeQMNfk3uUV1jTSec?usp=drive_link

Exercise 3: The Action Button

Objective:

Give your character an action!

The Task:

Create an "Action State" for your character/avatar that can be activated with a button press.

Requirements:

1. Upload the file to netlify;

In order to make it work, you need to rename the html file as index.html (You know the drill).

Upload the entire folder that contains the html file, js file and images folder. Please do not upload the .fla file to netlify.

2. You will also required to upload the .fla file into your Google Drive. Update your e-portfolio with all the processes.

3. Submit your e-portfolio link for submission

--------------------------------------------------------------------------------

Making the button

First, designed a button to activate the action animation.

Fig 4.1 - Making Button

Creating the motions

After making the button, made the action animation.

Fig 4.2 - Making Action Animation

Fig 4.3 - Action Animation Showcase

Making the button work

Once the animation and the button are completed, I linked them together to get the button to trigger the action animation.

Fig 4.4 - Linking Animation and Button

Final Exercise 3: The Action Button

Link to preview the button: https://task3factorymanager.netlify.app/

Fig 3.7 - Final Exercise 3: The Action Button, week 8, (11/6/2026)

Google drive link:

https://drive.google.com/drive/folders/1xT0MBOTlPD7McpLgm2U9oNJz-Cd21_GM?usp=drive_link

Feedback

Week 4:

- Can try to add a CRT effect on the face of the character.

- The colour on the character (especially the face) feels a bit too desaturated, can make it brighter, or change the background colour

Week 8:

- Looks good!

Search This Blog

Rachel Ng Jie Ting (0378902)