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.

Week 10

With no in-person classes required this week, our instructor told us to prioritize our final projects. So I worked from home, spending the time steadily advancing my prototype. I focused on refining the mechanical design and smoothing out the software integration, testing each update as I went. Though I worked alone, it was a productive stretch—I made significant progress on the core features and resolved a few lingering issues that had been bothering me.

Week 11

This week, I met with my advisor with the revised prototype, and he advised me to “keep the navigation bar clear.” Following that, I made targeted improvements on top of the existing work: reordering menu items, simplifying label text, and enhancing visual feedback. The prototype has now been updated, and I am continuing to polish all aspects of my final project. This is the second week’s work, and progress is on track.

Week 12

This week marked the official start of my final project. My project is a personal brand showcase webpage with animations. I spent the first two days organizing the content structure, deciding on four main sections: Home, Portfolio, About Me, and Contact. Then I began brainstorming animation effects—I wanted the title to fade in and slide up on page load, the navigation bar to gradually change background on scroll, the portfolio cards to scale and cast shadows on hover, and the vector illustration in the “About Me” area to have a frame‑by‑frame animated feel. To visualize these ideas, I sketched several rough storyboards, marking each animation’s trigger and timing. Meanwhile, I set up a new project in Adobe Animate, created basic symbols (buttons, graphic symbols), and experimented with a few tween types to validate the technical feasibility.

Week 13

This week I started creating all animation assets in Animate. I used classic tweens and shape tweens for title motion and morphing, and frame‑by‑frame animation to draw a small character waving in the “About Me” section. For the portfolio cards, I pre‑made scale and shadow tweens in Animate and exported them as sprite sheets, so they could be controlled via JavaScript on the webpage. Simultaneously, I built the basic HTML/CSS skeleton and embedded the Animate‑exported Canvas animations into the respective positions. To ensure loading speed, I lowered the frame rate from 24fps to 18fps and compressed bitmap assets. By the end of the week, I had a locally previewable webpage with all animations running smoothly, though the interactive feedback was still somewhat stiff.

Week 14

Integration, Optimization, and Polish

In the final week, I integrated all modules and focused on polishing the user experience. I rewrote parts of the CSS to keep the navigation bar clear at different screen sizes (which nicely echoed my instructor’s earlier advice). I added interactive logic for card clicks and hovers, using Animate’s ActionScript (or the exported JavaScript) to control play and pause. I also tested compatibility across Chrome, Firefox, and Edge, fixing a blurry Canvas issue on Edge. To boost performance, I converted repeated animations into instances to reduce file size. Additionally, I incorporated a parallax effect on scroll and fine‑tuned the easing functions to make motions more natural. After several rounds of self‑testing and adjustments, the webpage finally reached a state I was satisfied with—visually smooth, responsive, and thematically consistent. These three intense weeks gave me a deeper understanding of both Animate animation design and front‑end integration. Although exhausting, seeing the final product brought a real sense of accomplishment.

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.