Advanced Interactive Design -Weekly study

———

Ding Jiaqi/0379388 

Advanced Interactive Design / Bachelor of interactive spatial design

———

Week 2:

This was my first time using AN software. Before this, I only knew that it could be used to make animations, but I did not know how to use it in detail. Today, the teacher guided us to learn from the most basic steps. First, we practised making a simple ball.

First, we used the oval tool to draw a circle. Then, we drew eight lines inside the circle as the structure lines of the ball. After that, we adjusted and curved these lines to create the basic 3D shape of the ball. Next, we filled different areas with colours. One important thing to note is that every line must intersect, so the colour can be filled successfully. Finally, the teacher asked us to draw a curved line at the bottom right of the ball as the shadow. This made the whole ball look more three-dimensional.

The next practice was similar to the previous one, but it was a little more difficult. This time, we needed to draw a boat. First, we dragged the reference image into AN software and created a new layer. In this way, we could trace the lines on top of the image. After finishing the outline of the boat, we filled each part with colours. Then, the whole practice was completed.

Week 4:

In this class, we officially started learning how to create animations. The teacher demonstrated how to make a small spider, and I followed the steps to create one as well. The teacher explained that the object does not have to be very complicated. As long as it can show an animation effect, it is acceptable.

The teacher also emphasized the importance of using layers. Each part of the object should be placed on a different layer. This makes it easier to control each part separately when creating animations. For example, if I want the spider’s legs to move while its body stays still, I only need to move the leg layer without changing the body layer.

When creating the animation, we first need to insert keyframes. For example, I can change the movement of the spider’s legs at the fifth second, and then create a tween animation between the first and fifth seconds. After that, I can copy the action from the first second to the tenth second and return it to the original position. After completing these steps, a simple animation of the spider’s legs swinging is created.

Week 5:

This week, the teacher taught us how to create a website introduction animation. At the beginning of the class, the teacher first showed us a simple text animation, such as “Welcome to my website.” Through this practice, I learned that the most important parts of text animation are order and rhythm. The text should not appear all at once. Instead, it should enter the screen one by one, so it looks more natural.

During the process, we learned how to adjust the font size and colour. We also learned how to use the alignment tool to place the text in the centre. After that, the teacher taught us how to convert text into symbols and use the timeline, keyframes, and classic tween animation to control the movement of the text.

The teacher especially emphasized that an animation must have a starting point and an ending point. If an object needs to move, it needs two keyframes: one for the starting position and one for the ending position. The teacher also showed us how to make the text enter from the left side, stay for a while, and then slowly fade out.

Next, we learned about the Alpha transparency effect. Alpha 0 means completely transparent, while Alpha 100 means fully visible. By changing the Alpha value, we can create fade-in and fade-out effects.

In the second half of the class, the teacher explained layer management. The teacher reminded us that different elements should be placed on different layers, so it will be easier to edit and animate them later. We also learned how to group and break apart objects.

Through this class, I learned the basic method of creating a website introduction animation. I also understood that animation is not only about moving objects, but also about order, rhythm, transparency, and layer management.

Week 8

In Week 8, we learned how to create an interactive website using Adobe Animate. The lecturer also introduced GSAP, which is a JavaScript library for making smooth animations.

First, we set the stage size to 1280 × 720 and used HTML5 Canvas. We also learned to use landscape images and place them side by side to create a horizontal sliding effect.

Next, we learned about publish settings, such as responsive mode, “Fill visible area,” and “Stretch to fit.” These settings help the website fit different screen sizes.

We also converted the image group into a movie clip and named it mc_slider. The lecturer reminded us to use clear instance names, avoid spaces, and use underscores when needed.

For buttons, we learned that adding a transparent rectangle behind the text can make the clickable area bigger. We also edited the hover state to make the button respond when the mouse moves over it.

Finally, we used GSAP and event listeners to control the navigation buttons. Each button moved the slider to a different section smoothly.

Overall, this week helped me understand how to build a simple interactive website and how important naming, button design, and animation settings are.