Advanced Interactive Design（Exercise&Weekly Learning)

Weekly Learning

Week 1

The final project for this semester is to create a thematic interactive website (microsite) around a specific concept, engaging users through interactive exploration. In class, Mr. Shamsul showed us some FWA examples, which gave me a clearer idea of what a microsite can look like.
Our current tasks are to install Adobe Animate and prepare three ideas for the Task 1 proposal. I’ve come up with the following three directions.
Week 2

This week was a public holiday, so there were no classes. I used the time to review last week’s proposal and started visualising the style and character for exercise 1.

Week 3

This week’s class focused on Adobe Animate. We learned the interface, core drawing tools, and the importance of “Object Drawing Mode”. For web compatibility, we must select “HTML5 Canvas” when creating a new document, and set the frame rate to 24–25 fps.

I laernt in class:

·Beach ball: using Object Drawing mode to draw circles, duplicate and scale, split with lines, then break apart and fill with the Paint Bucket.
·Sailboat: combining rectangles, ovals, and lines to build the hull, mast, and sail, keeping each part editable.

These exercises helped me master vector layering and grouping, laying a solid foundation for character animation.

Week 4

This week we learned shape tween animation and movie clip nested animation. Shape tweens only work on broken-apart vector shapes. By setting keyframes at the start and end, and applying easing, the motion becomes more natural.

We also created a spider using movie clips: we separated body parts into layers, animated the legs inside the movie clip, and then moved the whole clip in the main scene. This nested structure is great for complex characters.

Week 5

This class focused on text fly-in animation and mask effects using Adobe Animate. I created a “Welcome to My Website” text sequence animation, staggering the start frames of each letter with easing for a smooth rhythm. I also learned layer management—each text element on its own layer for easy adjustment.

We also practised line drawing combined with masks: breaking apart lines and making them appear frame by frame, then setting the upper layer as a mask and placing content below. Locking both layers shows the preview. These techniques are very useful for enhancing website intro visuals.

Week 6

This week we learned how to create interactive buttons in Adobe Animate. Buttons have four states (Up, Over, Down, Hit), and we edited each state’s style and defined the hit area with a solid rectangle.

We also learned basic ActionScript: adding stop() in the actions layer to prevent auto-play, giving instance names to buttons and movie clips, and using gotoAndStop() or gotoAndPlay() with frame labels for navigation. I even tried adding click events to the character to make it blink. This gave me a clear understanding of interaction logic.

Week 7

No classes this week, so I reviewed the previous weeks’ content. I focused on button creation, frame labels, and navigation code, and started building character components for the ecercise1.

Week 8

This week we learned to create an image slider animation in Adobe Animate. We used movie clips, buttons, and GSAP scripts to make images slide left/right when buttons are clicked. By adding click events and controlling position, and using GSAP for smooth transitions, we built a functional carousel.

Although GSAP and JavaScript were new to me, the lecturer’s step-by-step guidance helped me understand event listeners and position control. I successfully created a working image slider. This exercise improved my Animate skills and deepened my understanding of combining animation with interaction. In the future, I plan to apply this slider technique to the ingredient showcase page of my project.

Week 9

In this class, we learned the code for page navigation. I completed the in-class exercise by following the teacher's instructions and with help from my classmates. However, due to computer issues, I couldn't demonstrate it afterward. After Mr. SHAMSUL checked my code, he confirmed that there were no errors. I will continue working on my final project.

EXERCISE 1

I really love puppies, so my design was inspired by them. I used lines that are as rounded as possible to draw it, making it look cute and lively. I also added some blue accents to make the design more vibrant and colorful.

However, Mr. SHAMSUL said that this design was too simple and would make it difficult to pose, so I created a second version. Building on his original concept, I incorporated human-like features and added arms and legs to make it easier to pose.

Following the assignment requirements in Adobe Animate, I used Object Drawing Mode and placed all the parts that need to move (face, ears, decorations, body) on separate named layers, converting each part into a Movie Clip symbol by pressing F8. Finally, I named this healing-style robotic puppy 'Healy' and completed the .fla file for submission.

For the animation, I started with a simple wave, but I found that just moving the hand looked stiff. So I looked at other animated characters and realized that adding a slight head movement made it look much more natural and lively. This is the final version of my assignment.

Link to my exercise1

This assignment wasn’t as complicated as I thought it would be. Drawing the robot puppy was actually pretty fun; I made all the lines nice and round, so it looks really cute. I was a little confused at first when working with layers and pressing F8 to convert to a symbol, but once I figured it out, it became second nature. Seeing the finished product at the end gave me a real sense of accomplishment.

EXERCISE 2

For the second exercise, we had to give our character “life” through a looping idle animation. My goal was to make Healy look like a real, breathing little robot puppy – not just a static image.

I decided to have it nod its head gently, as if it were curious or happy to see us.