Labels

ADVANCED INTERACTIVE DESIGN - EXERCISES

20/4/26 - 14/6/26 (Week 1 - Week 8)

Nicole Ng Ying Yan  0382412

Bachelor of Design (Hons) in Creative Media

DST60804 Advanced Interactive Design

Exercises

TABLE OF CONTENT

1.0 LECTURES

1.1 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.1 Week 4 class exercise


1.2 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.2 Week 5 class exercise


1.3 Week 7 Class Exercise: Linking navigation to the pages

In this class, we learnt how to using link buttons to different pages by adding actions, labels, and instance names.

Fig. 1.3 Linking navigation process

Fig. 1.3.1 Navigation screen recording


1.4 Week 8 Class Exercise: Image Scroll

For this exercise, we learnt how to create an auto-loop image scroll and a button-triggered image scroll by importing GSAP code into wizard.

Steps: Action > Global > Include > Add & browse > GSAP > GSAP-public > Minified > gsap-min,js: import GSAP file

Fig. 1.4 GSAP code in wizard

Fig. 1.4.1 Button-triggered image scroll screen recording

⌅

2.0 EXERCISES

2.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.

- - - - - - - -

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. 2.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. 2.1.2 Process on adobe animate

Fig. 2.1.3 Final character design

[Submission Link]

2.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.

- - - - - - - -

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.

Fig. 2.2 Nested animation process

Fig. 2.2.1 Main symbol animation process

Fig. 2.2.2 Final idle state animation

[Submission Link]



2.3 Exercise 3 - Button & Movement

[Instructions]

Upload the file to Netlify;
In order to make it work, you need to remane 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.

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

Submit your e-portfolio link for submission.

- - - - - - - -

Button & Movement

For exercise 3, we are supposed to create button-triggered action for our character. Whenever we press the button, the character will have a different action than the idle state. For my button-triggered action, I made my character raised its eyebrows in a playful way and changed its mouth shape into a shocked expression.

I then uploaded the HTML, JS, and images folder into Netlify.

Fig. 2.3 Exercise 3 process

Fig. 2.3.1 Button-triggered action screen recording





Labels:

Comments

Post a Comment

Popular Posts