Exercise
Exercise 01
Exercise 1 Requirements:
The teacher asked us to design a functional smart assistant avatar or UI widget in Adobe Animate. The focus of this assignment is not simply drawing the character, but learning how to prepare the structure for animation. We need to use vector drawing tools such as Pen, Oval, and Rectangle to create the character and enable Object Drawing Mode to ensure each graphic remains independent, facilitating later modifications and animation production.
The teacher emphasized two core rules: the Layer Rule and the Symbol Rule. All parts that need to move (such as eyes, arms, or glowing cores) must be placed in their own independent and clearly named layers; after completion, each part needs to be converted to a Movie Clip Symbol (F8) for later animation control. The final submission requirement is to upload the .fla file to Google Drive, include a link in your personal e-portfolio, and submit the e-portfolio link as the final assignment.
I created this storyboard sketch based on the lecturer’s requirements.
I designed a desktop pet character called ByteCat.
ByteCat is a digital companion that lives inside the computer screen and interacts with users while they work. The animation begins with a laptop sliding in from the right side of the screen, while ByteCat enters from the left side. They meet in the center, and ByteCat starts typing on the laptop keyboard.
During the animation, ByteCat’s eyes move and blink to make the character feel alive and interactive. The typing motion loops continuously, allowing the character to function as a playful desktop pet animation.
This sketch shows the animation flow step by step before producing the final digital animation in Adobe Animate.
Sketch 01
Sketch 02
In the first exercise, the teacher asked us to postpone animation production and instead focus on drawing and structurally preparing the character in Adobe Animate.
The key to this task was designing the character and separating its various parts into layers. All elements that would need to be moved, such as the head, eyes, body, and laptop, needed to be placed in separate, clearly named layers.
The goal of this stage was to create a clean, editable character structure, preparing for subsequent animation production.
In the second and third exercises, we will begin adding animation effects and utilize the predefined layers to achieve character movement and interaction.
So I started drawing in Adobe Animate and divided it into layers.
I placed all the parts that might need movement into separate layers, including the cat's main body, left and right paws, left and right eyes, tail, and background, and clearly named each layer. This way, I can ensure that each component can be individually controlled and adjusted during subsequent animation production.
The final result of my drawing
Exercise 01 Reflection
Through this exercise, I gradually understood that animation design is not only about drawing a character but also about building a clear structure for future animation production. At the beginning, I thought the task was simply to design a cute desktop pet. However, after following the lecturer’s instructions in Adobe Animate, I realized that proper layer organization and symbol preparation are the foundation of animation workflows.
During Exercise 01, I focused on separating every movable element of my character, ByteCat, into independent layers and converting them into symbols. This process helped me understand how professional animation projects are prepared before any motion is created. Although no animation was required at this stage, I learned that careful planning makes later animation production much easier and more controllable.
By designing ByteCat as a desktop pet character, I also started thinking about interaction and personality design. Instead of creating a static illustration, I considered how the character would behave inside the computer environment, such as typing, blinking, and interacting with the screen. This helped me connect visual design with interaction design concepts.
Overall, this exercise strengthened my understanding of Adobe Animate’s workflow and improved my ability to organize assets logically. It also prepared me for the next exercises, where animation and interaction will be added based on the structured layers created in this stage.
Exercise 02
The theme of this Exercise 2 assignment is "The Motion." The main goal is to add dynamic effects to our characters, making them appear more alive than static images.
This assignment requires us to create an idle state animation for our character. This means that even when the character isn't performing any action, it needs to maintain a slight, looping animation, such as breathing, floating up and down, or gently swaying, to make the overall visual more natural.
The main requirements given by the teacher include:
Double-click to enter the timeline within the main character symbol and complete the animation within the Symbolic frame.
Create a looping animation of approximately 40 frames using Classic Tween, focusing on the character's "breath effect."
Use Classic Ease In/Ease Out to make the animation smoother and more fluid, avoiding stiff or mechanical movements.
Through this assignment, we need to learn how to use looping animation to enhance the realism of characters and also further practice the application skills of Symbol, Tween, and Easing in Adobe Animate.
Production process
In this Exercise 2, "The Motion," I continued animating the cat character I designed in Exercise 1. This time, I added dynamic effects to the original character to make it more lifelike.
The focus of this assignment was creating the character's Idle State animation. Before starting, I considered what movements I could add to the cat character while it was stationary. Since the character's overall style is cute, I wanted its movements to be subtle, adding a sense of life through small details. Ultimately, I decided to animate the cat's tail and eyes.
First, I entered the internal timeline of the main symbol to begin animation.
I made the cat's tail sway slightly from side to side, simulating the natural swaying of a cat's tail when resting. To make the movement more natural, I didn't move the tail too much, maintaining a slow and gentle rhythm.
Next, I started designing the eye animation.
I added a left-right movement effect to the cat's eyes, adjusting the changes in the eyes through different keyframes to make the character look more realistic and add a touch of interactivity.
After completing the keyframes, I used Classic Tween to connect the animations, making the tail wagging and eye blinking smoother. I also added Ease In and Ease Out to prevent the movements from being too abrupt and to create a more natural transition.
Finally, I continuously tested the entire loop animation to make the overall animation look more harmonious. After completion, I found that even simple tail and eye movements could significantly enhance the character's sense of life, making the originally static character more interesting.
Video showcasing the results of completing Exercise 2
Exercise 02 Reflection
Through Exercise 2, "The Motion," I began to better understand how the "life" in character animation is created. Initially, I thought animation required complex movements to be interesting, but after completing this exercise, I realized that simple tail wagging and eye movements were enough to make the character look more realistic and lifelike.
This assignment also made me more familiar with Adobe Animate, especially Nested Animation, Keyframe, Classic Tween, and Easing. At first, adjusting the timeline often resulted in disjointed movements or unnatural loops, but through continuous testing and modification, I gradually learned how to adjust the rhythm between keyframes to make the animation look smoother.
Furthermore, because all three exercises required using the same character, I also realized the importance of initial character design. The character layer categorization I completed in Exercise 1 helped me a lot in this animation production, making the subsequent animation process more convenient and reducing a lot of revision time.
I think the most interesting part of this assignment was seeing the originally static cat character gradually "come alive." Although it was just basic animation, it helped me understand that character animation isn't just about technical skill; more importantly, it's about expressing a character's personality and feelings through small details.
Through this exercise, I not only improved my animation skills but also learned the importance of patiently refining details. I hope to continue experimenting with more diverse character movements in the future, giving my characters richer expressive effects.
Comments
Post a Comment