Class Notes & Exercises

Jump Link: 

Week 1 

Week 2 

Week 3 

Week 4

Week 1

We have course briefing today with our lecturer, Mr. Shamsul. We will have 3 assignments and also class exercises. For our class, we will use teams as learning platform. For assignments, we will have a proposal, a prototype and our final product which is a website design. 

Link: The FWA - Awards

Lecturer showed us a few websites with amazing interaction elements, which is what we are going to create in this module. I found it extremely interesting but also worrying at the same time. I hope that I am able to create such amazing visuals with smooth motion. These are some projects I explore on the website. 

1. The Blue Dessert

Very beautiful graphic design, with smooth transition. It looks like the designer is using 3D to create the whole world. I like the interactive elements like scrolling through the whole map, click to add flowers, click to retrieve information and such. There is also a beautiful storyline. 

Link: The Blue Desert

2. Day Dreamer by SGX

This is an interactive short film. As the film goes on, we need to make some choices with options provided on screen. The short film included some aesthetic, horror, unsettling clips which makes me uncomfortable at some point. But I think that this is really a beautiful film making project. I like the concept too. 

Link: Day Dreamer by SGX

3. Quadplex 80

A building introduction website. We scroll to explore more information; we can also press and hold to get a clearer view on the building. The website provides all the information of the building. It is an interesting way to promote a building. 

Link: Quadplex 80 | Luxury Penthouse in Manhattan | 111 West 57th

4. Dolce & Gabbana

A website to promote their perfume collection. The website is very elegant, luxurious and classic that align with their branding. Users are to scroll through the website to explore information and user are able to customize or chose their preferred perfume in this website. It is both functional and aesthetic. The background is interactive too. 

Link: beautytools.dolcegabbana.com/en-it/velvet

5. basement.studio

Very interesting concept, they create 3D interior spaces and use to showcase the content of the website, by clicking different spaces, it brings you to different spaces that showcases their project, their team and etc. It is very interactive and fun to explore around. 

Link: basement.studio | We make cool shit that performs.

6. Into the Amazon

This website tell the story on nature using a very interactive and smooth video or graphic content. As we scroll through the webpage, we went through the icy mountain, the green forest, the ocean and all. As the story tells us the interesting facts about nature. This is truly informative and inspiring. 

Link: Into the Amazon | National Geographic

For assignment 1 which is website design proposal, we need to choose 3 topics given by lecturer and develop proposals for website design. I have idea on creating websites for a pimple patch brand named as dododots, they have various concept design for their pimple patch and I think I can develop a very interactive and fun website for it. As I am going to attend an event which is cake picnic, I have an idea to develop a website for this upcoming event. It will be a very cute and colourful concept, the only thing I am worrying about since this is the first year of the event, there is not much information for me to develop. My third idea is to develop an e-portfolio containing my own works. I am going for work-based learning soon, this could help me to develop a strong e-portfolio. I do worry about the time, this e-portfolio is not going to be done before my interview session. 

Week 2

Lecturer introduces us about the Adobe Animate, we start to learn about the basics. We learn to create new web file, change the settings, change the workspace, preloader is like a loading signal for the user to know that the page is loading. 

We learn to create simple objects, create lines, segments, fill in colour, curve the line and more. We then proceed to create a ball. I explore the functions inside the adobe animate as shown as below. 

We have a class exercise to practice more on using the software. Mr. Shamsul has given us an illustration, and we are to trace it out using pen tool and colour it. It is a fun exercise, and it train our attention to details skills. But, as shown as below, I did miss out a few of the lines. 

Given illustration:

My product: 

Week 3

First, we recap back our Adobe Animate tutorial last week. Then, we move on to fluid brush tool, we can change the colour, size, strokes, curve smoothing and more. 

shift + B - brush tool

Q - scale tool

V - selection

For shape tween, we can only apply it on drawing/image only, that's why we need to turn text into drawing in order to do morphing. We create a looping animation using shape and keyframe. 

My first try: 

Final outcome:

We then have a class exercise to explore more on creating animation. We need to create a countdown animation using numbers only. 

My product:

Week 4

No class, just submit assignment 1.

Week 5

We have online class today due to road closure for the ASEAN Summit 2025. I don't like online class, it's hard to follow. But I try my best to follow the class. First, Mr. Shamsul teach us about creating simple guideline for motion. We first draw a ball, just a plain beach ball. Then we convert the drawing into symbol - graphic. We need to make sure the xx is always in the middle of our object, so later when it moves along the guideline, it will not look weird. We can check it in the Library whether we have converted it into a symbol or not. 

On top of the object layer, we add a Classic Motion Guide. We then use line to draw out the guidelines, shown as below. We can smooth the line by clicking multiple times on the pencil mode - Smooth, until it reach the smoothness we want. Then, we snap the ball onto the start of the guideline.

Now, we insert keyframe for the ball and insert frame for the guideline. Between the keyframe, we add in classic tween to make it move. We need to make sure that we mark the 'Orient to path' so the object will rotate itself, facing the correct orientation while it moves along the path. 

Product:

The second exercise is harder; we need to draw out the car from the picture map given by Mr. Shamsul. It will be our moving object; we need to repeat the similar steps to make the car move around the whole map. 

I draw the car and convert it into symbol. 

Next, I add in Classic motion guide and draw the guideline. 

Now, I just need to add keyframe and add in classic tween. Make sure to tick orient to path. Done! 

Product:

The third exercise is masking. Mr. Shamsul taught it in the class but because I can't keep up, so I rewatched the video to learn later. It was easy to follow the steps as I just learn it on my own pace. We learn about masking, line animation, shape animation to create a short room animation. 

Product:

Week 6

In today's class, Mr. Shamsul recap about the room animation which includes masking. 

Week 9

In today's class, we learn to create a screen animation using GSAP. First we create 3 screens with 3 different colours. We convert each of them into symbol and select all and convert them all again into a parent symbol. 

We then add an action layer to move the screen. We copy the script from gasap.

script:

gsap.to(this.mc_screen, { x: -512});

Then, we add button. 

Then, we add in script for the button to click on it, and it will move the screen.

script:

this.bluebutton.addEventListener("click", moveScreenBlue.bind(this));

function moveScreenBlue()

{

gsap.to(this.mc_screen,{x:1536});

}

this.greenbutton.addEventListener("click", moveScreenGreen.bind(this));

function moveScreenGreen()

{

gsap.to(this.mc_screen,{x:512});

}

this.purplebutton.addEventListener("click", moveScreenPurple.bind(this));

function moveScreenPurple()

{

gsap.to(this.mc_screen,{x:-512});

}

Product:

create rectangle

cover on it

change into button

create hover button

use over area and hit area

key in location of the canvas

move the canvas around (bigger scale) to get the exact location u want

can add in scale