Advanced Interactive Design / Exercises
24/4/2026 - //2026 (Week 1 - )
Rachel Ng Jie Ting/ 0378902
Bachelors of design (Honours) in creative media
Advanced Interactive Design / Exercises
Table of content
Week 6 - Working Website Buttons
Lectures
Week 2 - Adobe Animate Tutorial
For this class, we were introduced to Adobe Animate and was given a tutorial
session.
Some notes:
- Choose HTML canvas for the output to be HTML.
- Object Drawing (J)
- A mode that treats each shape you draw as a separate object, (Just like illustrator!)
- Break Apart (Ctrl + B)
- Breaks down to lines drawn for colour using the paint bucket.
Tutorial 1: Draw a beach ball
Learning animate tool through drawing a beach ball.
Fig 1.1 - Beach ball drawing
Tutorial 2: Draw a boat
We were tasked to trace the boat image given by Mr Shamsul.
Fig 1.2 - Boat drawing
Week 4 - Animations
For this class, we were taught on making animation in Adobe Animate
Some notes:
- Keyframe Animation: Traditional frame-by-frame animation where you manually change the content of every single frame.
- Shape Tween Animation: Makes smoother animation between keyframes
- Motion tween: For graphics, moves or changes a symbol automatically between two points.
Tutorial: Draw and animate a spider
For this class, we drew a spider and using that, was taught on animating
it by converting the drawing into a movie symbol, separating the 8 legs
into different layers, and animating using keyframes and shape tween.
Fig 1.3 - Spider drawing and animating
Fig 1.4 - Spider animation
Week 5 - Text Graphic Animation
For this class, we were taught on making animated text graphic.
Tutorial: 'Welcome to my Website - Enter' text graphic animation
For this class, we made animated text, and at the end, a box that
appears at the end with the words 'Enter'
Fig 1.5 - Text graphic animating
Fig 1.6 - Text animation
Week 6 - Working Website Buttons
For this class, we made the 'Enter' button to be clickable and transfer the user to a homepage.
Fig 1.7 - Making working button with code (with help of wizard)
Fig 1.8 - Simple homepage
Fig 1.9 - Button showcase
Instructions
Module Information Booklet
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.
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.
- The "Symbol Rule": Select each part and convert it to a Movie Clip Symbol (F8).
Submission Requirement:
- Upload the .fla file in your Google Drive
- Attach the link in your e-portfolio
- Submit your e-portfolio link.
--------------------------------------------------------------------------------
Character design sketch
I decided to design a computer head character.
The setting for this character would be a factory manager NPC in my website.
Fig 2.1 - Character design sketch
The computer head design idea was inspired by those old big and bulky pc. The
antenna on its head is inspired by the wifi antenna on modern pc boxes.
Fig 2.2 - Image of old computers and modern pc wifi antenna
The outfits is inspired by the factory worker outfits
Fig 2.3 - Dairy factory worker outfit
Drawing in Adobe Animate
After finishing the sketch on paper, I transfers the sketch into Adobe Animate
and started drawing over it, and giving it colours.
I made sure to separate every body part and movable component into different
layers.
Fig 2.4 - Drawing in Adobe Animate
Converting parts into a Movie Clip Symbol
Then, I converted every possible moving layer into a Movie Clip Symbol to
prepare for animation.
Minor design changes
Made some minor design changes to the factory manager character
Fig 2.6 - Minor design changes
Final Exercise 1: Asset Creation
Fig 2.7 - Final Exercise 1: Asset Creation, week 5, (23/5/2026)
Google drive link:
Exercise 2: 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.
--------------------------------------------------------------------------------
Creating the motions
For the idle animation of the Factory Manager, I wanted the character to be reading the screen in front of it, with some minor movements such as head scratching, breathing, and blinking.
Below are the various parts of the character I have animated.
1. CRT Fuzz effect
For the CRT effect, I animated a scan line moving slowly down the screen. Once it reaches the end, it instantly snaps back to the top frame, creating the subtle “jump” effect commonly seen in old CRT displays.
Here I applied shape tween by accident, but it looks great, so i kept it.
Fig 3.1 - Animating CRT Fuzz effect
2. Face (Blinking and looking around)
Fig 3.2 - Animating Face (Blinking and looking around)
3. Breathing (dress)
I adjusted the dress slightly down every alternating 20 frames to make the breathing effect.
20 frames down, 20 frames up, rinse and repeat to 160 frames.
Fig 3.3 - Animating Breathing (dress)
4. Breathing (Arm 1)
Animation synced with 3. Breathing (dress) to create the effect of the character breathing
Fig 3.4 - Animating Breathing (Arm 1)
5. Scratching Head (Arm 2)
For this animation, I created a consistent head-scratching motion in front. In the last few frames, I made the keyframes closer together to speed up the head scratching animation, adding more variation and less like a robot.
Fig 3.5 - Scratching Head (Arm 2)
6. Sweat
For the sweat, I did not apply any tweens as I thought i was not suitable for the effect i was going for.
Fig 3.6 - Sweat
Final Exercise 2: The Motion
Fig 3.7 - Final Exercise 2: The
Motion, week 6, (25/5/2026)
Google drive link:
https://drive.google.com/drive/folders/1Ndkv6FRgWsawB6iCeQMNfk3uUV1jTSec?usp=drive_linkFeedback
Week 4:
- Can try to add a CRT effect on the face of the character.
- The colour on the character (especially the face) feels a bit too desaturated, can make it brighter, or change the background colour
Comments
Post a Comment