Advanced Interactive Design - Lectures & Exercises

on

24/09/2024 - 29/12/2024 / Week 1 - Week 14
Joey Lok Wai San / 0350857
Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media 
Lectures & Exercises


TABLE OF CONTENTS


LECTURES
WEEK 1 | Module Briefing
There was no class during the first week. We were given the module MIB to go through on our own and briefed ourselves on the assignments we would have.

WEEK 2 | Introduction to Adobe Animate
In the second week, Mr. Shamsul provided us with ideas on what an interactive website looks like by asking us to look through existing websites on the FWA, particularly Frost. 

Interactive websites are those that engage users by allowing them to actively participate and interact with the content, rather than just passively reading or viewing. These websites often include features like forms, clickable elements, animations, and dynamic content that changes based on user input. This makes the browsing experience more engaging.

We then started learning how to use Adobe Animate, which we will later use to create our final project. 

Document Settings on Adobe Animate 
  • Preset: Medium
  • Size: 800 by 600
  • Frame Rate: 24 to 30 frames per second 
  • Platform type: HTML5 File (ActionScript can't publish on browser)
Tools
  • Paint Bucket: Fill color
  • Ink Bucket: Line color
  • Pin Tool: Adds points to bend objects
Object Drawing Modes
  • Object Drawing OFF: Selects only fill, not stroke
  • Object Drawing ON: Moves entire object (fill + stroke)
Fig. 1.1 Object Drawing ON and OFF, Week 2 (01/10/2024)

Shortcut Keys
  • CTRL + B: Break lines apart when Object Drawing is ON.
  • CTRL + SHIFT + G: Ungroup objects.
  • Q: Transform tool.

WEEK 3 | Frame Animation & Tween Animation
This week, we learnt how to start making basic animations on an object. The animations we did were frame animation and tween animation. 

Important Notes
  • The file name should be index.html when publishing
  • Keyframe is where the animation starts or ends
Symbol
  • Changing to a symbol makes the graphic reuseable 
  • You can duplicate the symbol to make another copy of it
  • You can swap the symbol (Right click → Swap symbol)
  • F8 to convert to a symbol (e.g. graphic or movie clip) 
Keyframe Animation
Manually move the object according to the keyframe you added. This makes the file heavy due to individual keyframes

Tween Animation 
F8 to convert to a symbol (graphic or movie clip). Make sure the registration is center 
F6 to insert a keyframe on certain frames 
  • Each object must be in its own layer - one object, one layer
  • Effect of motion can only be done at the beginning or in between frames, not at the end of the frame
Effects
  • Ease In: Starts fast, ends slow.
  • Ease Out: Starts slow, ends fast.
  • No Ease: Static appearance.
Motion Guides
  1. Use motion guide for smooth movement
  2. Object following guide is a sub-layer of the motion guide layer
  3. Make a new layer and change layer to classic tween for motion guides
  4. Draw and adjust the path with pencil tool
  5. Ensure the anchor point touches the guide - Lock the circle ends 
  6. Orient the object to follow a motion path

WEEK 4 | Editing Symbols and Shape Tween & Morphing
This week we learned about shape tween and morphing. We learned how to morph one shape into another shape and one letter into another letter. 

Shape Tween Basics
Shape tween helps morph one shape into another shape
Shape tween for elements that are not graphic or for shapes
  1. Use CTRL + B to break text into a drawing object to use "shape tween" better
  2. Adjust pivot points for better control of the morphing
  3. Adding a slight delay can make letters or shapes more visible during the transition
We also learned how to edit symbols so that they would animate automatically.
  1. Convert the object into a symbol
  2. Make the symbol's animation in symbol layer
  3. Exit symbol layer and move object

WEEK 5 | Masking & Stop Action Animation
This week we focused on creating a button transition using masking and shape tween. This animation is useful for introduction transition screens.

Moving Objects
(Down) Arrow Key + Shift: Moves an object (down) by 10px per press
Make new keyframe → Animate first key frame → Make classic tween → Add effects

Masking (How to Apply a Mask)
  1. Apply the masking layer by right-clicking the layer and clicking on the mask.
  2. Create a new layer on top of the target layer.
  3. Add a ruler guideline from View to align the mask.
  4. Create guidelines around text
  5. Go to the first keyframe
  6. Draw a shape (e.g. rectangle) within ruler guideline using the Rectangle Tool (no stroke, Object Drawing ON)
  7. Right-click the layer → select Mask.
  8. Mask layer locks automatically (if you unlock you can see the shape)
Line Expansion Animation (Line Expands from Center)
Create line that expands from centre at the end of animation keyframe
  1. Insert frames for other layers (3rd keyframe)
  2. Unlock Width and Height properties to adjust the stroke (e.g. set height to 0)
  3. Non-graphic will start from left, align back
  4. Apply Shape Tween for non-graphic objects
  5. Select the line animation timeline → Drag without releasing the mouse
  6. Add frames for other timelines
  7. Move scribbler in between → Don't select any layers
  8. Insert blank frames (to remove: Function Shift F5) 
Mask Animations (Move the Mask to Reveal or Hide Text)
The text stays in the same position then move the mask so you can't see the text anymore
  1. Delete the "Welcome" text.
  2. Insert a keyframe →  add a new text
  3. Adjust the mask's position to cover or uncover text
    • Unlock mask →  Top/Bottom →  To centre to cover text →  Mask
Action Wizard (Stop Timeline)
  1. Add keyframes and stop actions
  2. Create a new layer
  3. Add keyframe
  4. Right-click Action →  Add Wizard →  Stop →  This Timeline →  Add

WEEK 6 | Buttons & Labels
On Week 6, we focused on creating buttons as well as adding labels to the timeline to trigger animations.

Instance Names
  • Assign instance names to buttons for JavaScript.
  • Naming: No spaces in instance names.
  • Call the button with a new layer (can put on button and moving clip)
Clickable Buttons
  1. Create a label then click go to label frame and play. The label frame must encase the animation you want to play later.
  2. Convert a drawing object to a Graphic/Movie Clip to create classic tween
  3. Create a keyframe, move the object, and apply Classic Tween.
  4. Change button colors by editing the symbol in the Library.
  5. Duplicate buttons in the Library → Change label in Library →  Rename them → Right Click → Swap Symbol to replace buttons on stage
  • Swap Symbol - Old button becomes new change button when renamed. It's like creating a component in Figma, you can make one button multiply it and adjust it to reflect on all
  • If you change the box colour, it affects the button colour
  • Use CTRL + B to break apart to become a drawing object
Labels on Timeline
  • Add labels to mark the timeline 
  • To identify, give an instance name
  • Use Go to Label Frame and Play to trigger animations in the label's range.
Stop Animation
Add a stop action so the animation does not play/ does not automatically go to the page without action

Blank Keyframes
Blank keyframes = No object. It reserves space for objects or animations later.
Add keyframes for buttons


WEEK 7 | Button Hover Effects
The lesson on Week 7 was adding hover effects to buttons. Once the button is clicked, it will lead and open different pages.

Adding Hover Effects
  1. Convert a button to a Graphic.
  2. In the Looping section, select the 3rd option and set First:2 for the hover frame.
  3. Ensure hover effects are included in the button's states.

WEEK 8 | Independent Learning Week
No class - Independent Learning Week (ILW)

WEEK 9 | GSAP
This week we learned about integrating GSAP (JavaScript Framework) into our animation code, in the 'Actions' tab.

Using GSAP in a new file
  1. Right-click →  Action →  Global → Include
  2. Click the Plus Sign and select Add File.
  3. Browse to the GSAP minified JavaScript file and include it
  4. Right-click on action
  5. Paste your GSAP code and change instance names or values as needed.
Animating with GSAP
  1. Insert shape
  2. Convert shapes to Symbol/ Movie Clips 
  3. Give instance names (e.g. MCScreen1)
  4. Optional: Convert all 3 scenes to one Symbol/ Movie Clip
  5. Adjust screen positions:
    • Find the original screen position →  Move to the final/ last screen position → Find the X-axis of the last screen →  Replace X value in GSAP action code
  6. Make a button and add instance names, and use Code Snippets for event handlers
    • Code Snippet → HTML5 → Event Handlers →  Mouse Click Event
  7. *Change function name for different buttons or actions 
    • Movescreen(name) and change X-position
Other Tips
  • Convert images to Movie Clips before adding instance names.
  • Group multiple animations into one Symbol/ Movie Clip
WEEK 10 | Audio & Sound
  1. Import your sound (MP3) into the library 
  2. Create a new layer above your objects/ buttons
  3. On the 'Over', 'Down' and 'Hit', make a new keyframe
  4. Click and drag the sound effect into the stage, not the timeline or it won't work
Fig. 1.2 Adding Sound Effect to Timeline, Week 10 (26/11/2024)


INSTRUCTIONS

https://drive.google.com/file/d/1jb7SAHLergayyQzswyaGmOKr6Rq0Kefj/preview


EXERCISES

WEEK 2 | Introduction to Adobe Animate
The introduction to Adobe Animate consists of learning how to draw in Adobe Animate this week. We did an activity during class which was learning how to use the tools to make drawings such as a beach ball and a replica of a sailboat. 


Fig. 2.1 Beach Ball Outcome, Week 2 (01/10/2024)

After learning the basics of drawing with the beach ball, we proceeded to find an image of a sailboat to make a replica of by ourselves. The image reference of the sailboat is from Freepik.

Fig. 2.2 Sailboat Reference Image, Week 2 (01/10/2024)

Fig. 2.3 Sailboat Final Outcome, Week 2 (01/10/2024)

WEEK 3 | Frame Animation & Tween Animation
This week, we learned how to make frame animation and tween animation. First, we made bouncing balls using both types of animation. The purple balls use frame animation, where the movement is made manually frame by frame. The pink ball is done by applying classic tween animation.

Fig. 3.1 Outcome of Frame and Tween Animation, Week 3 (08/10/2024)


Fig. 3.2 Frame Animation Timeline, Week 3 (08/10/2024)


Fig. 3.3 Tween Animation Timeline, Week 3 (08/10/2024)


Fig. 3.4 Onion Skin of Animations, Week 3 (08/10/2024)

Once that activity was completed, we were taught how to use a classic motion guide to track the animation's motion. At first, the animation did not work because the anchor points did not touch the guide.


Fig. 3.5 Outcome of Motion Guide Animation, Week 3 (08/10/2024)


Fig. 3.6 Motion Guide Timeline, Week 3 (08/10/2024)

WEEK 4 | Editing Symbols & Morph Animation
We learned about animating motions such as a person running and a spider crawling. To do this, we drew each limb individually and animated it moving. Then we exited the symbol layer and animated the spider to move from top to bottom.


Fig 4.1 Spider Animation Outcome, Week 4 (15/10/2024)


Fig 4.2 Editing Symbols to Animate Automatically, Week 4 (15/10/2024)

We applied the same method to the person running. First, we animated the movements in place as a symbol, following a reference in order to create a smooth animation. Then we exited the symbol layer and animated it moving from one side to another.


Fig 4.3 Running Animation Outcome, Week 4 (15/10/2024)


Fig 4.4 Editing Symbols in Place to Animate Automatically, Week 4 (15/10/2024)


Fig 4.5 Moving Whole Animation from Left to Right, Week 4 (15/10/2024)

We also learned about using shape tween to morph one shape to another, and one alphabet to another. We first made each letter individually, broke them apart using CTRL+B, and then used shape tween.


Fig 4.6 Morphing Animation using Shape Tween, Week 4 (15/10/2024)


Fig 4.7 Shape Tween Timeline, Week 4 (15/10/2024)

WEEK 5 | Masking & Stop Action Animation
We learned how to create a welcome button transition by using the masking tool. We also learned how to make the animation stop so that it does not play automatically without action. This can be done by using JavaScript in the Actions tab. 

Fig 5.1 Masking Tool and Shape Tween Outcome, Week 5 (22/10/2024)


Fig 5.2 Masking Tool Timeline, Week 5 (22/10/2024)


Fig 5.3 Stop Animation (automatically; only continues with action) Action Code, Week 5 (22/10/2024)

WEEK 6 | Clickable Button
Following from the tutorial from last week, we used the same file to create clickable buttons. To do this, we animated the button effects by clicking into the 'Button Layer'. There we can animate what happens when the button is hovered, clicked, etc by animating 'Up', 'Hover', 'Down' and 'Hit'.


Fig 6.1 Clickable Button Outcome, Week 6 (29/10/2024)


Fig 6.2 Clickable Button Timeline, Week 6 (29/10/2024)


Fig 6.3 Button Effects Timeline, Week 6 (29/10/2024)


Fig 6.4 Stop All Animation Action Code, Week 6 (29/10/2024)

WEEK 7 | Active Label / Color Change When Open
This week, we learned how to open a new page when the button is clicked on. My file got corrupted so I was unable to do the tutorial in class. This is how it is supposed to look like and the timeline.

Credits to Janice

Fig 7.1 Active Label When Clicked On, Week 7 (05/11/2024)

WEEK 9 | GSAP
This week we used GSAP to animate our actions. We first imported GSAP into our file and began our animation by using JavaScript code. From this, we made two different types of animation that will be useful for our final project.

The sliding animation is done by making three separate screens and then finding the x-position of those screens to enter into our GSAP script.


Fig 8.1 Sliding Animation Outcome, Week 9 (19/11/2024)


Fig 8.2 Sliding Animation Timeline, Week 9 (19/11/2024)


Fig 8.3 Sliding Animation Action Code with GSAP, Week 9 (19/11/2024)

To make the slide in transition, the image is placed on the side of the screen and then animated to move in. The code is then used for zooming in, so we find the zoomed-in location on the screen and write those coordinates down in the script.


Fig 8.4 Zoom Animation Outcome, Week 9 (19/11/2024)


Fig 8.5 Zoom Animation Timeline, Week 9 (19/11/2024)


Fig 8.6 Zoom Animation Action Code, Week 9 (19/11/2024)

WEEK 10 | Audio and Sound Effect
This week we learned about importing sound (MP3) into our animation. I was sick this week so thank you to my friend for teaching me what was learned in class.
  1. Import sound (MP3 or WAV) into the library 
  2. Create a new layer above your button
  3. On the 'Over', 'Down', and 'Hit', make a new keyframe
  4. To get the sound effect in you click and drag it into the stage. Not the timeline or it won't work
Fig 9.2 Sound Effects Timeline, Week 10 (26/11/2024)

FEEDBACK
WEEK 7
Unsure why the button is glitched. Swapping the symbol does not work, maybe try to use your own file to do the animation instead of the provided file.

REFLECTION

Learning how to use Adobe Animate was quite the experience. Mr. Shamsul was very helpful in teaching us step by step and going to us one by one to make sure the outcome of the tutorial was successful. However, after all this, I still find it quite confusing to use. It took a while to get the hang of making a website with animation software, but overall it was an interesting experience.

Comments

Post a Comment