Labels

Advanced Interactive Design / Exercises Compilation

23/04/2026 - 14/06/2026 (Week 1 - Week 8)
Shema Goldie Angwen / 0372129
Advanced Interactive Design
Bachelor of Design (Hons) in Creative Media / Taylor's University
Exercises

CONTENT LIST

INSTRUCTIONS

LECTURES & CLASS EXERCISES

WEEK 1
On the first week, Mr. Shamsul brief us about the task we are going to do for the upcoming weeks and told us to look for inspiration from fwa.awards.com. He also instructed us to download Adobe Animate as we going to use that software for this semester. 

He recalled the 5 Key Principles of Usability that was taught in the previous Interactive Design Module. that should be Implemented on our Web Design:

1. Consistency
  • A key factor for both visual elements and functionality.
  • Ensures that website looks cohere nt and works harmoniously across all its different element, such as headers, footers, sidebars, and navigation bars.
  • Look and feel should be consistent so people won't be confused.
  • Consistent design is intuitive design.
  • It includes consistent in
    • navigation system
    • page layout
    • menu structure
    • fonts and typography
    • branding in web design (Adidas Website is a good example of consistent website. Typefaces, imagery are consistent.)
2. Simplicity
  • User interfaces should be "simple" for users
  • Used loosely to refer to the need to mini mize the number of steps involved in a process, to use symbols and terminology that make the interface as obvious as possible, and to make it difficult to make mistakes.
  • Task flow is not confusing because it is simple.
3. Visibility
  • The more visible an element is (the more obvious it looks), the more likely users will know about them and how to use them, t seems a 'call' to press the action button.
4. Feedback
  • Important because give the user a signal that they have succeeded or failed at performing a task
  • For example: A sound plays after a successful purchase or deletion as feedback.
5. Error Prevention
  • A confirmation for us to avoid making mistakes. The main reason this principle of error prevention is important is that we humans are prone to- and will always make mistakes.
  • Example: 
    • Confirmation to delete something
    • 'Forgot your password?" features
  • This is usually created due to a history of past mistakes.

WEEK 2
Mr. Shamsul demonstrated how to use Adobe Animate tools. Here are the things I take note during class:

Document SetUp
  • Preset: Web 
  • Frame rate: 30.00 
  • Quality: High / Very High
  • Platform Type: HTML5 Canvas
Tools
  • Paint Bucket Tool: Fill inside color (isi)
  • Ink Bottle Tool: Apply stroke color
  • Bone Tool: Add animation (rigging)
  • Width Tool: Adjust stroke thickness
  • When using Oval Tool: Activate Object Drawing Mode when using
  • Under Free Transform Tool: Adjust gradient direction 
Publish Settings
  • Go to Properties → More Settings
  • Center Stage
  • Enable Responsive Scale → Fit in View
  • Include Preloader

Mr. Shamsul also demonstrate us how to create beach ball in Adobe Animate,

  1. Draw object (activate object drawing mode)
  2. Select All → Modify → Break Apart
  3. Add extra lines/details → Break Apart again
  4. Change colors
  5. Delete unwanted lines (double-click line → Delete)
Fig 1.1: in Adobe Animate

Fig 1.2: The Outcome

Then Mr. Shamsul gave us an exercise to trace this boat image in Adobe Animate.

Fig 1.3: Boat Images Given 

He told us add more layers when doing tracing.

Fig 1.4: in Adobe Animate

Fig 1.5: The Outcome

From this exercise, I discovered a lot of new tools. To create the wave, I use straight line then go to Modify -> Combine objects -> Union. Then I can fill in the color of the objects. Also to change gradient direction, under Free Transform Tool.

WEEK 3
No class

WEEK 4
This week Mr. Shamsul demonstrated how to animate in Adobe Animate. 

Spider Animation
Convert to Symbol
1. Draw the spider
2. Select all objects.
3. Go to:
Modify → Convert to Symbol
or press F8
4. Choose:
Type: Graphic (can also use Movie Clip later)
5. Name the symbol.
6. The symbol will appear in the Library panel.

Editing Individual Parts
To animate individual parts: Double click 
1. Select all parts  except Eyes and Body
2. Choose: Distribute to Layers
3. Rename each layer.

Animate the Legs
1. At Frame 5: 
For the legs: Insert Keyframe 
For the body: Insert Frame.
2. At Frame 1: Hold Alt/Option + Drag the keyframe to Frame 10 to duplicate it.
3. To Add Movement, Drag the in-between frames downward.
4. Create a Shape Tween between them.

Scene 1 Animation (Spider Jump/Bounce)
1. Return to Scene 1.
2. Resize and move the spider outside the stage.
3. At Frame 60:
Insert Keyframe.
Move the spider downward onto the stage.
4. Right click between the frames:
Choose Classic Tween or Motion Tween.

Add Bounce Effect
1. Click the tween span (in-between frames).
2. Go to: Properties → Ease
3. Apply: Bounce Ease Out

Important Notes
Shape Tween → only for raw drawing objects/shapes.
Classic Tween / Motion Tween → usually for symbols.
Movie Clip symbols are commonly used for coding and character animation.

Fig 2.1: The Process


Fig 2.2: The Outcome

WEEK 5
This week Mr. Shamsul demonstrated us how to create Text Animtion in Adobe Animate. 

Basic Setup
  • Type text: “Welcome to my website” (word by word)
  • To enlarge the typeface, do not use the Free Transform Tool. → Change the font size directly instead.
  • Use Static Text, not Dynamic Text.
  • Press fn F8 → convert to symbol:
    • Name: txt_static
    • Type: Graphic
  • Use Align Panel → Align to Stage.
Text Animation 1
Frame 16
  1. Insert Keyframe.
Frame 1
  1. Select Frame 1.
  2. Move text to the left:
    • Hold Shift + Left Arrow
    • Press 10 times = 100 px movement.
  3. In Properties: 
    • Object Color Effect → Alpha = 0
  4. Insert Classic Tween.
  5. Frame Effect: Ease Out → Quad.

Frame 30
  1. Insert Keyframe.
  2. Move object to the right:
    • Shift + Right Arrow ×10.
  3. In Properties: 
    • Change Alpha to 0
  4. Insert Classic Tween.
  5. Ease In → Quad.
Second Text Animation
New Layer
  1. Add new layer:
    • Name: txt_to
  2. At Frame 40:
    • Insert Blank Keyframe.
    • Type text: "to".
    • Align.
Convert to Symbol
  • Press fn F8
    • Name: txt_to
    • Type: Graphic
    Frame 55
    1. Insert Keyframe.

    Frame 40
    1. Move object:
      • Shift + Arrow ×10.
    2. Color Effect: Alpha = 0
    3. Insert Classic Tween.
    4. Ease Out → Quad.

    Frame 70
    1. Insert Keyframe.
    2. Move to the right: Shift + Right Arrow ×10
    3. Alpha = 0
    4. Insert Classic Tween.
    5. Ease In → Quad.
    same step for the rest

    Another way by duplicating 
    1. Option + Alt + Drag → duplicate object.
    2. Right click → Duplicate Symbol.
    3. Rename 
    4. Double click symbol to edit text.
    5. Select middle frame → Swap Symbol.
    Create Box Animation
    1. View → Turn On Rulers.
    2. Add new layer, Rename: box
    3. Frame 165: Insert Blank Keyframe.
    4. Draw rectangle using Rectangle Tool: Turn on Drawing Object (Stroke only)
    5. Breaking Shapes
      • Select object.
      • Command + B
    6. Select one side:
      • Command + G ×4
    7. Shift-select all.
    8. Right click: Distribute to Layers.
    9. Rename layers.
    10. Select all lines.
    11. Frame 175: Insert Keyframe on all 4 layers.
    12. Break objects:
      • Command + B
      • Must break on both keyframes.
    13. Turn off all layer eyes except the one you are working on.
    14. Frame 165: Break apart. Delete but keep small parts.
    15. Insert Shape Tween. Ease Out → Quad.

    Figure 3.1: Keyframes

    Figure 3.2: The Outcome

    WEEK 6
    This week Mr. Shamsul demonstrated us how to create active button in Adobe Animate. 

    First, turn off the eye and lock the mask layer & turn on the eye and unlock the enter text layer.

    Creating a Button
    1. Select all the line layers (4 layers) and the Enter text.
    2. Add a new layer above the Mask Layer.
    3. Rename it: btnenter.
    4. Insert a Blank Keyframe on the frame when the last animation has finished.
    5. Go to Edit > Paste in Place on that keyframe.
    6. Convert it to a symbol:
      • Name: btn_enter
      • Type: Button
    Editing the Button
    1. Double-click the button symbol.
    2. The timeline will look different:
      • Over = when hover
      • Down = when press
      • Hit = the area of the button
    Over State
    1. Insert a keyframe on Over.
    2. Change the color of the box.
    3. For the text, since it is a Graphic:
      • Go to Properties > Color Effect > Tint
      • Set Tint Level = 100%
      • Change the color
    Hit State
    By default, the cursor will only detect the text and box line.
    1. Go to Hit and insert a keyframe.
    2. Turn on Object Drawing.
    3. Draw a rectangle covering all areas of the button.
    4. Right-click Arrange > Send to Back.
    Making the Animation Stop
    1. Add a new layer at the very top.
    2. Name it action.
    3. Insert a blank keyframe on the frame parallel with btnenter.
    Add Stop Action
    1. On the Action layer, right-click Actions.
    2. Click Add Using Wizard.
    3. Select:
      • An Action > Stop
      • This Timeline > Next
      • With This Frame
    4. Click Finish and Add.
    Add Instance Name
    1. Select the button on the btnenter layer.
    2. Go to Properties > Object.
    3. Add the instance name: btnenter
    4. Enter on keyboard.
    Create Frame Label
    1. On the Action layer, add one more blank keyframe.
    2. Go to Properties > Frame.
    3. Label Name: start
    Button Navigation
    1. Go back to the previous frame on the Action layer (the first frame).
    2. Right-click Actions.
    3. Click Add Using Wizard.
    4. Select:
      • Go to Frame Label and Play
      • This Timeline
      • Type the frame label name (rename the green text to): start 
      • On Mouse Click
      • btnenter (the instance name added earlier)
    5. Click Finish and Add.
    Stop at the Last Frame
    1. Go to the last frame.
    2. Insert a Blank Keyframe.
    3. Right-click Actions.
    4. Click Add Using Wizard.
    5. Select:
      • An Action > Stop
      • This Timeline
      • With This Frame
    6. Click Finish and Add. 

    Figure 4.1: Keyframes

    Figure 4.2: The Outcome

    WEEK 7

    In this week’s tutorial, Mr. Shamsul gave us a prepared file and our task was to add actions to the buttons so they work properly, following the same approach as the previous week’s tutorial.


    Figure 5.1: The Keyframes

    Figure 5.2: The Outcome

    WEEK 8

    This week Mr. Shamsul demonstrated us this tutorial:

    1. Project Setup
    • Download images from Unsplash / Pexels
    • Open Adobe Animate
      • Set document:
        • Size: 1280 × 720
        • Profile: Web – Very High
    • Save file as: index.fla inside your GSAP tutorial folder
    2. Import & Stage Setup
    • Go to: File > Import to Library
    • Drag images to stage one by one
    • Align images 
    • Select all 4 images:
      • adjust width (don't worry about height)
    • Turn on Rulers (for alignment accuracy)
    3. Convert Images into Slider
    • Select all images
    • Convert to symbol:
      • Type: Movie Clip
      • Name: mc_images
      • Registration: Center
    • In Properties panel:
      • Set Instance Name: mc_slider
    • Rename layer: slider
    4. Navigation Setup
    • Create new layer: navigation
    Create buttons (years)

    For each year (e.g. 1990, 2000, 2010, 2020):
    • Type text: 1990
    • Convert to symbol:
      • Type: Button
      • Name: btn_1990
    Button states:
    • Double click button symbol:
      • Up state → normal text
      • Over state → add line 
      • Hit state → draw rectangle (for click area)
    Duplicate buttons:
    • Right click → Duplicate Symbol
    • Rename:
      • btn_2000, btn_2010, etc.
    • Retype the year name in up and over state
    Make sure:
    • Each button has correct label (year)
    • Each has correct instance name (e.g. btn_2010)
    5. GSAP Setup
    • Download GSAP from: gsap.com
    • Extract files into your 'GSAP tutorial folder'
    6. Add GSAP to Animate
    • Create new layer: actions
    • Open Actions panel: fn F9
    • Click Dropdown Global > Include > + > Add a file Gsap Public > Minified > gsap.min.js
    7. GSAP Tween Setup
    • Copy one line in tween (gsap.com)
    • Go to your action layer keyframe 1
    • Open Actions panel (fn F9)
    • Paste the GSAP code there
    8. Instance Name
    • In the pasted code: Rename the green text one (box) -> this.mc_slider (mc_slider is from the instance name)
    • Delete the rotation
    • Add ease: "expo.out"
    • Check the x position of the movie clip, paste here
    • Make sure: Movie clip instance name is named mc_slider, or else it won't work
    Figure 6.1: The Code
    9. Button Code
    • Click your button (example: btn_1990)
    • Go to fn f9 > Code Snippets > Event Handlers > Choose click event (on press / click)
    • Modify X Value for Each Button

    Figure 6.2: The Code

    Figure 6.3: Keyframe

    Figure 6.4: The Outcome

    Then Mr. Shamsul told us to make another one but in y axis.

    Figure 6.5: The Code


    Figure 6.6: The Code

    Figure 6.7: The Keyframe


    Figure 6.8: The Outcome

    EXERCISES

    Exercises 01: Assets

    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.

    Submission Requirement:

    Upload the .fla file in your Google Drive
    Attach the link in your e-portfolio
    Submit your e-portfolio link.

    Concept
    The moment I was given this assignment, I immediately started thinking about my personal perception of smart assistant technology. I often find that some smart assistants feel emotionally intimidating and cold because they often create sharp-edged designs. Because of that, I wanted to create something against this perception: a character that feels warmer, with softer rounded shapes and a friendlier appearance. So, I began looking for references from Pinterest. I also remembered one of my LINE messenger sticker (sticker name: “Fat Chubby Polar Bear”) which also where I draw my inspiration from, I was particularly inspired by its goofy and exaggerated “fat” character design.

     

    Figure 5.1: References 
    (Sources: https://pin.it/NU9dmajXx, 
    https://pin.it/7GNJPAuGU, 
    LINE Messenger Sticker "Fat Chubby Polar Bear")

    Combining all of my references, I proceeded to develop my idea in Procreate. After sketching in Procreate, I begin to proceed in Adobe Animate.

    Figure 5.2: Sketch (Created in Procreate) 

    I then decided to work with pale white and neon purple glow colors to represent a modern, futuristic, and energetic identity. I wanted the design to feel futuristic without looking intimidating.

    At first, I created a rounded-shaped hand, shown in Figure 5.3, but then Mr. Shamsul pointed out that it would be difficult to animate because the hand was completely circular.


    Figure 5.3: Initial Rounded-Shaped Hand (Adobe Animate) 

    So I decided to change the hand. Looking for idea, I found Figure 4.4 as a reference, I decided to create wing-like hands, which I thought would be cute and more suitable for animation later on. I planned for the character to be able to fly and run, giving it a more expressive movement. 

    Figure 5.4: Reference (Source: https://pin.it/7qtouIO4a)

    The Final Outcome
    Click Here for Google Drive Link

    Figure 5.5: Final Outcome

    Exercise 02: The Motion

    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.

    For this exercise, my idea was to make the character look like it was flying. I animated several parts of the character to create a more lively and floating motion. I worked on the wings, feet, eyes, and mouth by using keyframes and tweening animation to make the movements look smoother and more natural. 

    Figure 6.1: The Keyframes 

    Figure 6.2: The Keyframes

    The Final Outcome
    Click Here for Google Drive Link
    • the wings flap
    • the feet swing slightly to show the flying motion
    • the eyes have a sparkling shine
    • the mouth changes size repeatedly to create a more lively idle animation

    Figure 6.3: Final Outcome

    Exercise 03:

    Instructions
    For exercise 3 submission, you are required to:
    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. Please consult me before you submit

    For this exercise, my idea is to make my character jump, then become dizzy after landing and then fall down. I think this would be interesting because I can add the landing effects on the floor and show different facial expressions for the character. 

    Most of the landing effect was created using lines, which were then bent with the Selection Tool. I combined multiple lines to form the shape, used the Modify > Union function, and filled the shape with color using the Ink Bottle Tool. The colors chosen for the landing effect follow my overall design theme, which is a combination of purple and yellow-orange tones.

    To create the keyframes, I followed the Week 6 lesson taught by Mr. Shamsul. I separated the keyframes into 2 parts (but the frames are continuous) with Keyframes 1–47 used for the idle state, and frames after 47 used for the animation that plays after the button is clicked. 

    Figure 7.1: The Keyframes

    After finishing the keyframes, I added a new layer for the action. Here are the codes I added using the wizard.


    Figure 7.2: The Codes


    The Final Outcome
    Click Here for Netlify
    Click Here for Google Drive Link


    Figure 7.3: Final Outcome

    FEEDBACK

    WEEK 4
    About the smart assistant character, Mr. Shamsul mentioned it's going to be hard for you to animate because the hand is circle. 

    WEEK 5
    40 frame loop: can be more cannot be less, the loop should move smoothly up and down, should not suddenly rush to go down.

    WEEK 8
    After reviewing my Exercise 3, Mr. Shamsul commented, "Okay. Cute."

    REFLECTION

    Adobe Animate was a completely new software for me, so at first it felt quite difficult and unfamiliar. I struggled to understand the tools and workflow, and the process did not go smoothly. During the class exercise, I lost my file multiple times and had to redo the animation from the beginning. Although it was frustrating and tiring, repeating the process gave me more practice and helped me become more familiar with the software.

    As I continued trying, I slowly became more comfortable using Adobe Animate and started to understand how the tools and features worked. Recreating the animation multiple times improved my understanding of keyframes, tweens, layers, and symbol animation. It also taught me the importance of saving files frequently and staying organized while working on projects.

    Overall, this experience showed me that learning new software requires patience, consistency, and practice. Even though mistakes and technical problems were challenging, they eventually helped me improve my skills and gain a better understanding of Adobe Animate.


    Labels:

    Comments

    Post a Comment

    Popular Posts