ADVANCED INTERACTIVE DESIGN

April 23, 2026

ADVANCED INTERACTIVE DESIGN - EXERCISES

24/04/26 - 17/05/26 (Week 6-8)

SUN YUTONG (0377440)

ADVANCED INTERACTIVE DESIGN / Bachelor of Design (Honours) in Creative Media

Exercises

JUMP LINK

INSTRUCTION

LECTURES

Week 2 - Adobe Animate Tutorial

This week, Mr. Shamsul introduced us to the drawing features of Adobe Animate and guided us through drawing a simple ball, familiarizing us with how to use the drawing tools in Adobe Animate.

Next, Mr. Shamsul gave us a vector graphic of a small boat and asked us to copy it.

Fig 1.1 Small boat drawing

Week 4 - Animate Tutorial

This week, we learned how to create animations using Adobe Animation.

First, we created a simple animation about a ball bouncing. We learned how to add keyframes and shape-tween animations.

Fig 1.2 Ball bouncing animation

In Class Exercise 2, we created an animation about a spider. We first drew a spider, and then we divided the spider's eight legs into separate layers to create the animation.

Fig 1.3 Spider animation

Week 5 - Animate Tutorial

This week we learned how to create animated web page openings.

Fig 1.4 Webpage opening animation

Week 7-Linking Nav button to the pages

This week we learned how to link each navigation button to its corresponding page via code and assign a label to each page.

Fig 1.5 Process screenshot

Fig 1.6 Code demonstration

Week 8

This week we learned how to scroll the screen left and right by tapping.

Fig 1.7 Code demonstration

Exercise 01: 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.

Google Drive:

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

Character Reference:

Since my website is about music, I plan to personify records and create characters for them.

Fig 2.1 Reference image

Sketch:

Based on the reference images, I conceived the character's design; I planned to create a figure depicting a record player playing the piano. Next, I drew sketches.

Fig 2.2 Sketch

Drawing with Adobe Animation:

Next, I drew the character in Adobe Animation based on the sketch and divided the character into layers.

Fig 2.3 Drawing screenshots

Fig 2.4 Final character design

Exercise 02: 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.

Google Drive: https://drive.google.com/drive/folders/14elXEogxVbL6S2Es0AmlqLe72A5--mml?usp=sharing

Before completing the animation, I first created the character as a component, and then edited it on the timeline.

I also added easing effects to the tween animation to make it look smoother.