ADVANCED INTERACTIVE DESIGN

April 26, 2026

ADVANCED INTERACTIVE DESIGN - EXERCISES

20/4/26 - 21/5/26 (Week 1 - Week 5)

Nicole Ng Ying Yan 0382412

Bachelor of Design (Hons) in Creative Media

DST60804 Advanced Interactive Design

Exercises

1.0 EXERCISES

1.1 Exercise 1 - Asset Creation

[Instructions]

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.

- - - - - - - -

Week 4 Class Exercise - Animating a Spider

The spider was animated using classic tween and motion tween, with easing effects adjustments to make the animation more lively. (Elastic - Ease-Out).

Fig. 1.0 Week 4 class exercise

Character Sketch

My character was inspired by one of the characters from my IVN project, and I sketched it out on paper first. I drew a cute ghost holding a candle, like a guide that leads the way at night.

Fig. 1.1 Character sketch on paper

Final Character Design

After designing the character, I separated and named the layers for each part of the character. Next, I converted each layer to a movie clip symbol.

Fig. 1.2 Process on adobe animate

Fig. 1.3 Final character design

[Submission Link]

Google drive link: https://drive.google.com/file/d/1ND57ncKESDrSsN7Ps7KzKeWZ017bgL_z/view?usp=drive_link

1.2 Exercise 2 - The Motion (Idle State)

[Instructions]

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.

- - - - - - - -

Week 5 Class Exercise - "Welcome To My Website" Animation

Through this exercise, we learnt how to make animated website openings with text, shape tween, classic tween, alpha fade, layers and masking.

Fig. 1.4 Week 5 class exercise

Idle State

For my character's idle state, I decided to animate the candle light burning, raising its eyebrows, and floating around in the dark.

I animated the candle light burning and eyebrow raising in the nested timeline, then did the floating animation in the main symbol to move the ghost as a whole. Different types of easing animation were added to have a variety of speed in movements.