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.
- Use Nested Animation
- Use Classic Tween
- Add Easing
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.
Exercise 03
In Exercise 3, I continued using Adobe Animate to complete an interactive animation design. This exercise extended and improved upon Exercise 2, adding button interaction functionality that allows users to control the animation's playback and pause, transforming the work from a simple animation display into a simple interactive piece.
Review of Exercise 2
In Exercise 2, I primarily learned how to use Adobe Animate's timeline, keyframes, and motion tweening to create character animation. To make the static cat character appear more lifelike, I processed different parts of the character separately and created separate layers for each.
During the animation process, I made the cat's eyes continuously move left and right, while its tail swayed up and down. Although the movements were relatively simple, by looping the playback, the character achieved a natural dynamic effect, rather than being a static image.
Through Exercise 2, I gradually became familiar with the use of keyframes in Adobe Animate and learned how to use different layers to control the animation of different parts.
Extending Character Animation
In Exercise 3, I retained the left-right eye movement and tail wagging effects already implemented in Exercise 2, and added new movements.
To make the character more lifelike, I added an animation of the cat typing on a keyboard, making the character appear to be working at a computer. Separate layers were created for the left and right hands, and keyframes and motion tweening were used to create repetitive movements, allowing the hands to move continuously up and down, creating the effect of typing.
At this point, the cat's eyes move left and right, its tail wags continuously, and its hands continuously type on the keyboard, making the overall image richer and more interesting than before.
Adding Button Interaction Functionality
The most important part of Exercise 3 is the addition of button interaction functionality.
To increase user engagement, I designed a yellow "Play" button on the left side of the screen. Unlike the previous automatically looping animation, this time mouse click control is included.
When the animation starts playing, the cat continuously moves its eyes, taps the keyboard with its paws, and wags its tail. When the user clicks the Play button, the animation stops, and all of the character's actions pause. Clicking the button again resumes the animation, and the character resumes its movements.
By repeatedly clicking the button, users can freely switch between play and pause, achieving simple human-computer interaction. This transforms the work from a simple animation into an interactive piece with basic interactive functions.
Layer and Timeline Setup
To facilitate the management of different actions, I placed the various parts of the character into separate layers, including:
- Body
- Left Hand
- Right Hand
- Left Eye
- Right Eye
- Tail
- Background
By using keyframes and motion tweening on the timeline, I controlled the movement of each part separately, allowing different actions to occur simultaneously while maintaining the overall smoothness of the animation.
During the production process, I continuously adjusted the position of the keyframes and the speed of the motion, hoping to make the character's movement look more natural and to ensure coordination between the different parts.
Testing and Adjustments
After completing the animation and button interactions, I conducted multiple tests on the entire project.
The tests included:
- Whether the eye movements were normal;
- Whether the tail wagging was smooth;
- Whether the hand gestures on the keyboard were natural;
- Whether the Play button correctly controlled the animation's playback and pause;
- Whether the animation continued to function correctly after multiple button clicks.
Through repeated testing and adjustments, I continuously modified the timeline and keyframe settings to ensure the animation ran stably and to improve the overall effect.
Exporting and Publishing
After completing all the designs, I exported the Adobe Animate project as an HTML5 Canvas file.
As required by my teacher, I renamed the exported HTML file to index.html and uploaded the entire folder containing the HTML file, JavaScript file, and image resources to Netlify, enabling the work to run online via a web link.
Simultaneously, I also kept the original .fla file and uploaded it to Google Drive for assignment submission and backup. Furthermore, I organized and updated the entire production process in my e-portfolio, documenting the entire process from design to completion.
Exercise 03 Reflection
Comments
Post a Comment