Advanced Interactive Design | Exercises
23/4/26 - 14/6/26 (Week 1 - Week 7)
JING KEYAO | 0370732
Bachelor of Design (Honours) in Creative Media | Taylor's University
Advanced Interactive Design
Exercises
Table of Contents
1. LECTURES (Weekly)
2. INSTRUCTIONS
3. EXERCISES
Exercise 01: Asset Creation
Exercise 02: Motion
Exercise 03: Animation
4. DOCUMENTATION LINKS
5. FEEDBACK
6. REFLECTION
Lectures
WEEK1：
This week, Mr.Shamsul introduced us what we are going to do through this
semester. He then give an example for the good thematic website from
fwa.awards.com. Our task for this week
is to start installing adobe animate and find 3 ideas for the Task 1
Proposal.
WEEK 2：
Practice How To Trace
This week we get used to the Adobe Animate, and we were asked to trace a
boat.
Paint bucket tool (K)
Eyedropper tool (I)
Free transform tool (Q)
Break Apart (Ctrl + b)
Fig 1.1 Boat Process
Each section requires one layer.
Fig 1.2 Boat Process
Fig 1.3 Boat Final Drawing Images Week 02
Instructions
Exercises
EXERCISE 01: Asset Creation
Idea:
In this project, I decided to create an original smart assistant avatar.
The overall concept was inspired by modern AI assistants, but I wanted the design to be more approachable and endearing. Therefore, I chose a rounded body shape, a soft blue hue, and expressive facial features to create a friendly and reassuring character.
Another important concept was the introduction of day and night modes. The avatar will typically remain in day mode, switching to night mode when a button is pressed, representing how the smart assistant adapts to different environments. This idea laid the foundation for my next assignment.
Here are several thoughts before deciding on the role：
Ex01_01_Sketches
Design Process
After deciding on the character what I wanted to create, I started making it in Adobe Animate. As instructed by the teacher, I drew each part on a different layer, so that every movable part could be animated later.
Every movable object was then converted into a Movie Clip Symbol, following the project requirement.
Ex01_02_Layers
Ex01_03_Body
To make the sunlight look more realistic, I added a filter (glow).
Ex01_04_Filter
These are some notes I took while learning how to use Adobe Animate：
Merge Drawing mode:
Shapes with the same fill colour merge into a single object.
Shapes with different fill colours automatically cut or split each other when overlapping.
Shift + G: Grouping allows multiple objects to move together without merging or cutting into neighbouring shapes.
Object Drawing Mode creates every new shape as an independent object.
Ex01_06_Notes
Ex01_06_Asset Creation
EXERCISE 02: Motion
Idea
Before creating the animation, I analysed how a smart assistant could feel more alive while remaining simple and friendly. Instead of making large movements, I decided to focus on subtle idle animations that would make the character appear active even when no interaction occurred.
I planned several motions, including:
Gentle floating movement
Eye blinking
Arm swinging
Smooth body movement
Slow breathing effect
Progress
After preparing all the assets from Exercise 01, I converted every movable part into individual Movie Clip Symbols. This allowed each body part to be animated independently.
Ex02_01_Movie Clips Symbols
I then extended the timeline to 40 frames, creating a looping animation that would become the default idle state of the smart assistant.
Ex02_02_Timeline
To animate each body part smoothly, I applied Classic Tween between the keyframes. The body was animated with a gentle floating motion, while the arms and legs moved slightly.
Ex02_03_Classic Tween
After completing the basic motion, I refined the animation using Classic Ease-Out with an easing value of 80.
Ex02_04_Tweening Value
To make the smart assistant appear more lifelike, I designed a simple blinking animation. I changed the shape of the eyes by adjusting their height (Q) while keeping the width constant. This achieves a smooth transition from fully open to closed eyes, eventually returning to the initial state.
Ex02_04_Tool
Ex02_05_Open Eyes
I used Colour Effects (Alpha) to control the sun's animation. Throughout the animation, the alpha gradually transitioned from 20% to 70%, eventually reaching 100%.
Ex02_06_Alpha Effect
I then felt that adding my animation to 80 seconds would be more appropriate, because I wanted a more gentle animation and didn't want the floating smart assistant to move too much, or for the sun to have a series of bright and dark changes.
Ex02_07_Overall Timeline
Final Outcome
Ex02_Final Motion_GIF
EXERCISE 03: Animation
Idea
The goal of Exercise 3 is to transform my static smart assistant into an interactive character using Adobe Animate HTML5 Canvas. Therefore, I designed two visual states: Day Mode and Night Mode. The assistant defaults to Day Mode, smoothly transitioning to Night Mode until the user presses the On button, then automatically returning to Day Mode, forming a complete interactive loop.
Progress
Before creating the button interactions, I first divided my animation into three parts to be created：
Frames 1–40: Daytime Idle Animation
Frames 40–80: Transition from Day to Night
Frames 80–120: Night Animation and Return to Day
During this process, I encountered a serious problem: I initially created the night mode by adjusting the tint, but when I played it for testing, it didn't produce any colour changes. So I spent a lot of time creating the character in night mode and then adjusted the alpha to achieve the transition from day to night.
Ex03_01_The transition from day to night
These are some extra layers I created to achieve colour variations:
Ex03_02_Layers
After checking the animation (Control>Test>In Browser), I started creating the button. I drew the button in Scene1 and placed it on a separate layer. And i changed it to the Movie Clip Symbols, named "btnon".
Ex03_03_Button
Then I created a new layer called Actions on Frame 1:
Ex03_04_Action Layer
I selected the frame and pressed "F9" to open the Actions Panel. And I added JavaScript to control the interaction.
Inside the Actions panel, I first created a variable to store the main timeline:
"this" referred to the timeline where the code was placed. I stored it as root so that the main timeline could still be accessed inside the button-click function.
Ex03_05_Action symbol
After creating the root variable, I defined the initial state of both the Smart Assistant and the button.
The first line ensured that the Smart Assistant always started from the first frame of the Day Idle animation whenever the webpage was opened.
The second line reset the button to its Normal state.
The third line changed the mouse cursor into a hand icon when hovering over the button, providing clear visual feedback that the button was clickable.
Ex03_05_root symbol
To make the button interactive, I added an Event Listener. This means that when I click the button, an action will be performed, which refers to my night mode.
Frame 40 marked the beginning of the Night Activated Mode animation.
Ex03_06_Click Event Symbol
Ex03_07_Overall Action Symbol
Inside the Button Symbol, I added ActionScript on both labelled frames.
For the Normal frame and Pressed frame:
Ex03_08&09_Button Symbol
Finally, I added code on Frame 120 inside the SmartAssistant_MC Movie Clip.
As a result, the complete interaction cycle became:
Day Idle → User Clicks Button → Night Activated Mode → Return to Day Idle
Ex03_10_Return to Day Idle
The exported files included:
index.html (Change the original name to index.html)
JavaScript file
images folder
Ex03_11_Publishing
Finally, I uploaded the published files to Netlify so the animation could be viewed online.
After deployment, I modified the exported HTML to make the webpage responsive, allowing the animation to scale correctly on different screen sizes.
Ex03_12_Upload to Netlify
Final Outcome
Ex03_Final Animation_GIF
Ex03_Final Animation_Video
Netlify Link to exercise 3 outcome: jingkeyao-0370732-animation.netlify.app
DOCUMENTATION LINKS
Feedback
Week 1
- Mr Shamsul showed us a few senior's work to give us an idea of what is
expected of the module. And let us to start thinking the topics we can do
for our website.
Week 2
- How use Adobe Animate
Week 3
- Class Cancellation
Week 4
-
Reflection
Experiences
Observations
Findings
Quick Links:
Exercises
Task 1: Thematic Interactive Website Proposal
Task 2: Interactive Design Planning and Prototype
Final Project: Completed thematic Interactive Website
Comments
Post a Comment