Advance Interactive Design/Execise

25/9/2024 - 3/1/2025 / Week 1 - Week 14
Janice Marie Eng Chia Hui /0361521
Advance Interactive Design/Bachelor of Design in Creative Media / Taylor's University 
Advanced interactive Design/Exercises & Lectures

---

Table of Contents:

1. Instructions
2. Lectures
3. Reflection
   

---

Instructions

---

Lectures

Week 2

Canvas size uses the web option, medium or high one don't use the low one. Platform type use HTML5 canvas. FPS use 24 to 30.

On object drawing, make both strokes and fill movable. this makes sure it doesn't disrupt other object

Fluid brush tool, brush mood can paint inside outside behind options

CTRL B is to break up the shapes.

To start off the class, Mr Shamsul asked us to visit these websites to get an idea of what thematic websites are. The 2 websites are as follows:

• The FWA Awards
• Frost Website

This week we were asked to familiarise ourselves with Adobe Animate. We were taught about the functions of the tools in the software. We mainly focused on learning how to draw in Animate this week. Sir asked us to draw a sailboat to see if we are able to do it. We were allowed to find an image online for reference to trace. I initially did it without tracing, but was told that it was not good enough😞😞. So I redid it again but this time I traced the image.

Figure 1.1 Sailboat reference image from Freepik(1/10/24)

Figure 1.2 Initial outcome without tracing vs Final outcome after tracing reference image (1/10/24)

Week 3

This week we learned how to animate in Adobe Animate. We did frame animation and tween animation.

What I learned: 

• To publish the file name it INDEX.HTML.
• Key Frame is where the animation starts or ends.
• Change object to symbol to use tween, but it will auto change for you if you use the tween also so.... Changing it into a symbol can make the graphic reusable. 
• You can duplicate the symbol to make another copy of it.
• You can also swap symbol by right-clicking and pressing SWAP SYMBOL.
• After adding tween you can change the effect in the properties>frame panel. 
• Classic Motion Guide is used to track out the animation motion. Ensure the anchor point touches the guide. Make sure you change the layer to classic tween to do the motion guide.

Outcome

Figure 1.2 Outcome of animation in Adobe Animate (8/10/24)

Week 4

In today's class:

• Shape tweeting helps morph the shape from one shape to another
• Ctrl+B to break apart the text to make it 'shape tweenable'
• Add in delay to help the letter be seen 
• You can adjust the pivot point.

Outcome:

Figure 1.3 Editing Symbolys to animate automatically (15/10/24)

Figure 1.4 Shape Tween (15/10/24)

Week 5

In today's class:

• Press the shift button + down arrow key to move the object down by 10 px per press
• Apply the masking layer by right-clicking the layer and clicking on mask.
• Masking is like all masking effect
• Shape tween for elements that is not graphic or for shapes
• Mask cover to object to show it

Figure 1.5 Making tool and shape tween (22/10/24)

Week 6

• Need to have an instance name on the button to use JaveScript on it
• Cannot have space in the instance name
• Today we learnt how to make a clickable button.
• You have to create a label then click go to label frame and play. The label frame must encase the animation you want to play later.

Figure 1.6 Clickable Button (29/10/24)

Week 7

Figure 1.7 How to make the label active or change colour when you open it (5/11/24)

• Click on the button
• Change it to a graphic
• In the LOOPING section, select the 3rd option and select first:2 (to choose the hover effect)
• Button must have hover effect for this to work

Update:

• The method above doesn't work for me so I was asked to just swap the symbol

Figure 1.8 End Results

Week 9

Figure 1.9 Carousel

Figure 1.10 Image Zoom 

Figure 1.11 Code snippet

• Make sure to change the function name when u add in a diff function

This week we learned how to make a carousel and an image zoom finder.