ADVANCED INTERACTIVE DESIGN: EXERCISES
Valerius Ethan Wirawan / 0372774
Advanced Interactive / Creative Media / The Design School
Exercises
1. INSTRUCTION
2. TUTORIALS
Exit from the graphics, get back into the single graphic, move the whole spider from top to bottom right. Here is the outcome.
The exercise began by creating a text element and animating it using keyframes. The text was given a fade-in and fade-out effect by adjusting the Alpha property over time. To produce a more natural movement, Ease In and Ease Out (Quad) were applied, allowing the animation to accelerate and decelerate smoothly.
Next, a ruler was used as a guide to create a rectangular box. To simulate the box being drawn progressively, each side was animated individually using keyframes. A Shape Tween was then applied to achieve a continuous and fluid line-drawing effect. Finally, a text element was placed inside the box and revealed using a Mask Layer, ensuring that the text only became visible within the boundaries of the animated box.
3. PROCESS WORK & FINAL OUTCOME
For this exercise, we were tasked with designing a character that would later be animated. To prepare the character for animation, Object Drawing Mode was used so that each movable body part was created as a separate object. Every layer was organised and given a clear name to ensure an efficient animation workflow. Once all the individual parts were completed, each one was converted into a Movie Clip Symbol (F8), allowing them to be animated independently. The following figures illustrate the character creation process.
So, I started off by ideating the character and sketching it.
The asset shown above was the final version submitted through Microsoft Teams for the assignment. However, in the following weeks, before beginning Exercise 3, I realised that the overall design quality could be significantly improved.
As a result, I revisited the artwork and refined it further to achieve a more polished and visually appealing outcome. The refinement process is documented later in the Exercise 2: The Motion section (Fig. 3.6. Asset Refinement in Adobe Illustrator).
Exercise 2 continued from the character that I created previously. The objective was to give the character an idle motion so it would not look completely frozen while waiting for the user to interact with it. Since my character was designed as a small boxer, I wanted the idle pose to communicate that it was alert and ready to fight.
Before animating, I checked the character layers and separated the main movable parts. The body, left arm, right arm, and eyes needed to be controlled independently. I converted these parts into symbols so I could animate them without damaging the original vector artwork. This organisation was important because selecting the wrong object or editing a shape directly could affect the rest of the character.
I then created keyframes for the resting pose and the more active pose. The arms were moved slightly to resemble a boxer maintaining their guard, while the body was adjusted to create a subtle up-and-down movement. I also added movement to the eyes so the character felt more alive. Classic Tweens were placed between the keyframes to produce a smoother transition instead of having the parts suddenly jump from one position to another.
One problem I faced was making the animation loop naturally. During my early attempts, the character returned to the beginning too suddenly, which made the loop look like it was skipping. To solve this, I made sure that the pose at the end matched the pose at the beginning. I also adjusted the timing and distance of each movement because large changes made the idle animation look too aggressive.
The final motion is simple, but it gave the character more personality. Instead of standing still, the boxer now appears to be waiting, breathing, and preparing for an action. This exercise helped me understand the relationship between symbols, keyframes, Classic Tweens, and looping animation.
After completing Task 2, I felt that the visual assets could be further improved. Therefore, I refined the illustrations in Adobe Illustrator by adding shadows, enhancing the colour palette, and introducing additional outline colours to create greater depth and visual contrast. These refinements gave the assets a more polished appearance while improving their overall readability and aesthetic quality.
For Exercise 3, the idle animation from Exercise 2 had to be developed into an interactive outcome. The requirement was to create a button that would command the character to perform an action. I continued using the boxing concept and created a FIGHT button because it matched the character and made the purpose of the interaction immediately understandable.
I first prepared the character animation inside a Movie Clip. I divided the timeline into two main sections. The first section was labelled idle and contained the repeating waiting motion. The second section was labelled on and contained the fighting action. At the end of the action, the playhead was directed back to the idle section so the character would continue waiting after completing the move.
I also converted the FIGHT artwork into a Button Symbol and prepared its normal, hover, pressed, and clickable states. The hover change gives the user visual feedback and shows that the graphic is an interactive element rather than part of the background.
The most challenging part was making the button communicate with the character. I had almost no knowledge of coding, so I needed a lot of help to understand the steps. The character Movie Clip was given the instance name mc_avatar, while the button was named btn_fight. A click event was then added so that pressing the button tells the character to play the section labelled on.
root.btn_fight.cursor = "pointer";
root.btn_fight.addEventListener("click", function () {
root.mc_avatar.gotoAndPlay("on");
});Initially, I did not understand why the code used names such as root, mc_avatar, and gotoAndPlay. After going through it step by step, I understood that root refers to the main scene, btn_fight identifies the button, and mc_avatar.gotoAndPlay("on") tells the character Movie Clip to begin playing from the frame label named on. Setting the cursor to pointer also gives another indication that the button can be clicked.
Several tests were needed before it worked correctly. Sometimes the button appeared but did nothing because an instance name, frame label, or code location was incorrect. I also had to make sure that the action would not remain stuck after playing. Inside the character timeline, the end of the fighting sequence uses gotoAndPlay("idle"), allowing it to return automatically to the looping idle state.
After the interaction worked in Adobe Animate, I published the document as an HTML5 Canvas project and tested the generated HTML file in a browser. This was necessary because the final result was not only an animation; it also needed to respond to mouse input. Testing it in the browser confirmed that the hover state, click event, fighting action, and return to idle were all functioning together.
The final outcome shows the boxer in the ring performing its idle movement. When the user presses FIGHT, the character carries out the action and then returns to its original waiting state. Although the coding process was difficult for me, this exercise helped me see how animation and interaction can work together in a web-based outcome.
Fig. 3.10. Deployed in NetflifyThe final step was deploying the completed website to Netlify, allowing it to be published online and accessed through a live URL. This deployment ensured that the website could be tested across different devices and browsers while providing a shareable link for submission and presentation.
4. FEEDBACK
Week 3
The character needed to be properly separated into layers before I continued with animation. I was reminded to name the layers clearly and convert the movable parts into symbols so that the file would be easier to manage.
Week 5
The idle motion needed to remain subtle and loop smoothly. The ending pose should match the starting pose so there would not be an obvious jump whenever the animation repeated.
Week 6
I needed to keep the idle animation inside the character Movie Clip so it could later be combined with a separate action. The character parts also needed more consistent timing so they appeared to belong to one movement.
Week 7
For the interactive exercise, I needed to give the character and button clear instance names, create timeline labels, and make sure the button triggered the action before returning to idle. The button also needed a visible hover state so users would understand that it was clickable.
Week 8 – Teams Consultation (14.06.2026)
While completing Exercise 3, I encountered a publishing problem in Adobe Animate. The character looked correct when I previewed the animation on the timeline, but the right eyeball and body disappeared when I tested the HTML5 Canvas output in Chrome. Since this prevented me from submitting the exercise on time, I contacted Mr. Shamsul through Microsoft Teams, explained the issue, and attached a screen recording, screenshot, action code, and the Environment.fla file. I asked whether he could help me check the file during class or on campus, and I was kindly given an extension to complete the exercise.
After troubleshooting the file with the help of Codex, I found that several small naming mistakes were creating a much larger problem. In particular, Adobe Animate treats uppercase and lowercase letters as different characters, so an instance name written differently in the code would not refer to the intended Movie Clip or button. I corrected the instance names and code, republished the project, and tested it again in Chrome. The missing character parts and button interaction then worked correctly. I informed Mr. Shamsul that Exercise 3 had been completed, thanked him for the extension, and explained that Codex had helped me identify the code problem. He acknowledged the update with “Okay.”
5. REFLECTION
Observation
I observed that Adobe Animate depends heavily on organisation. At first, I thought I could simply draw the character and move it, but every part that needs to move has to be planned, separated, named, and converted into the correct type of symbol. One mistake in the layers or symbols can make the animation much harder to edit. I also noticed that a small movement can be more effective than an exaggerated movement, especially for an idle loop. Matching the first and last poses was important because it made the repetition feel continuous.
Experience
To be honest, Adobe Animate was one of the more confusing programs for me during this module. I had no previous experience with its timeline system, symbols, frame labels, or code, and I asked for a lot of help throughout the exercises. There were moments when the animation looked correct inside the document but the button did not work after publishing it. This was frustrating because I did not know whether the problem came from the animation, the instance names, or the code. By checking each part separately, I gradually understood the workflow. Completing the final interaction felt rewarding because it combined the character I designed, the motion I animated, and a working button in one outcome.
Findings
From these exercises, I found that interactive animation is built from several systems working together. The artwork has to be divided into usable assets, the assets have to be animated inside a clear timeline, and the timeline has to be controlled using labels and event code. I still would not say that I am confident in Adobe Animate, especially when coding is involved, but I now understand the basic logic behind it. The most useful thing I learned was how a user action, such as clicking a button, can change what happens in an animation. This made the character feel less like a video and more like an interactive interface element.
Comments
Post a Comment