Advanced Interactive Design: Exercises

 SHIMANLIN,（0375858)

Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media

Exercises

---

TABLE OF CONTENTS

Instruction

Lecture

Exercises

Feedback

Reflection

---

INSTRUCTIONS

---

LECTURE

Week 2: Introduction to Adobe Animate & Exercise

This week, Mr. Shamsul introduced us to Adobe Animate and taught us the basic settings and tools. 

During class, we practised drawing a beach ball and a sailboat to get familiar with the software. We also learnt tools and functions such as Break Apart, which helps separate shapes for colouring and editing.

Fig 1. Screenshot of Animate exercise, beach ball

Fig 2. Screenshot of Animate exercise, sailboat

Week 4: Class Exercise – Animating

This week, we learnt the basics of animation in Adobe Animate. Mr. Shamsul showed us how to create animation using Shape Tween by right-clicking between frames. For Shape Tween, the objects do not need to be converted into symbols first.

We were also reminded to uncheck Auto Keyframe to avoid creating unnecessary keyframes while editing. During the exercise, we explored the differences between Shape Tween and Classic Tween and practised using both methods in simple animations.

Fig 3. Screenshot from animation practice, ball

Fig 4. Screenshot from animation practice, spider

The class exercise helped me better understand how movement and transitions work in Adobe Animate.

Week 5: Class Exercise

During Week 5, Mr Shamsul taught us more about animation techniques in Adobe Animate. In class, we learned how to create animated web openings using text animation, shape tween, classic tween, masking, layers, and alpha fade effects.

Some important notes I learned from the exercise are:

• Graphic symbols only work properly inside Movie Clip symbols.
• Classic tween should be inserted at the beginning frame in the timeline.
• Mask layers must always be placed on top.
• Objects need to be ungrouped before using shape tween.
• Using Movie Clip symbols is easier and more flexible compared to Graphic symbols.

Fig 5.text animation

This exercise helped me understand better how timelines, layers, and tween animations work together in creating smoother and more interactive animations.

---

EXERCISE

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.

The character I created is a cartoon version of Aespa Karina.

Fig 1. Prototype

I used the image as a tracing layer and then started drawing the character in Animate using the pen tool.

Fig 2. Layers

I separated the character's various layers, named them, and added labels to make subsequent animation production easier. 

 
Fig 3. Production process

Finished product

Fig 4. Final Character

Final submission

https://drive.google.com/drive/folders/1qCwgpYIyztopNQggqC4YePrBmVjdv5Uz

Exercise 2: The Motion

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.

I started adding motion to some of the animations.

Fig 5.Production process

Final exercise 2

Fig 6.Final exercise 2

Final submission

https://drive.google.com/drive/folders/1qCwgpYIyztopNQggqC4YePrBmVjdv5Uz