Advanced Interactive Design: Exercises
20/4/26 - 25/7/26 (Week 1 - Week 14)
Choong Yee Leng || 0381980
Advanced Interactive Design || Bachelor Degree in Creative Media || Taylor’s University
Exercises
TABLE OF CONTENT
1. Instructions
2. Lectures
3. Exercises
4. Feedback
5. Reflection
Instructions
LECTURES
Week 2: Illustration exercise in Adobe Animation
Figure 2.1 ball illustration in Adobe Animation
Figure 2.2 boat illustration in Adobe Animation
Techniques applied:
- object drawing: objects drawn are isolated
- modify - break apart: objects will separate in sections by lines
- eraser tool: erase desire parts (lines only, fills only etc.)
- selection tool: adjust line curves
Week 3: Motions & Tween
Figure 2.3 spider animation
- symbol- graphic: turn the drawn spider into graphic and separate the parts (legs) inside the spider graphic
- classic tween: allow the spider's legs and spider itself to move by creating different keyframes at start and end point, then apply classic tween between the keyframes.
Week 5: transitions
Figure 2.4 website transition
Techniques applied:
- classic tween: create a 2 different keyframes (different x value) before and after the captions to create transition.
- colour effect- alpha: change the opacity of the graphic while transiting to create a fading effect
- mask: mask the graphic using shape, the graphic will display within the area of the shape
Week 6: Button trigger
Figure 2.5 Button trigged animation
Figure 2.6 JS applied
- Action: Allows different frames to be displayed through triggered actions. For example, clicking different buttons will navigate the user to corresponding frames.
Week 7: Navigation
Figure 2.7 Navigation animation
Figure 2.8 JS applied (wizard)
- Action- Add using wizard- Go to frame label and play - This timeline- On mouse click: allow different buttons clicking to navigate the user to corresponding frames.
Week 8: Image scrolling
Figure 2.9 Image scrolling
Figure 2.10 JS applied (GSAP)
Techniques applied:
- Action- Global->Include-> Add & browse-> gsap -> gsap- public-> minified-> gsap-min,js: import the GSAP file to allow the usage of GSAP JS
EXERCISES
Exercise 1: Asset Creation
The complete design process of the character refers to: https://acreativepilot.blogspot.com/2025/05/illustration-and-visual-narrative-task-1.html
Figure 3.1character illustration in Adobe Animation
New techniques applied:
- modify - symbol - movie clips: separate the characters part into head, body, left hand, right hand, leg 1234, combine it in a movie clip, distribute the layers (character parts) inside the character movie clip
Exercise 2: Character in idle state
Figure 3.2 Character in idle state
Figure 3.3 work process in adobe animate
Techniques applied:
- classic tween: make the character parts move
- classic ease: make the motion appear naturally
Exercise 3: Button trigger
Figure 3.4 Character trigged by button
Figure 3.5 Work Process in Adobe Animate
Techniques applied:
- Action:
Submission:
Comments
Post a Comment