Animation Fundamentals_Exercise
23.09.2024 - 30.12.2024
Ruthlene Chua Zhen Si 0365222
Bachelor of Design (Honours) in Creative Media
- Instruction
- Lectures
- Class Summaries
- Task
- 1: Ball bouncing
- 2: Squash and Stretch Ball with Tail Animation
- Feedbacks
- Reflections
- JUMPLINK TO OTHER PROJECT
- Project 1
- Character Design + Layout
- Project 2
- Walk + Jump
- Final (Action)
- Story Board + Video
LECTURES
Week 1 (23/10/2024)_Introduction of animation fundamental
- Timing and Spacing
- Squash and Stretch
- Anticipation
- Ease In and Ease Out
- Follow Through and Overlapping Action
- Arcs
- Exaggeration
- Solid Drawing
- Appeal
- Straight Ahead Action and Pose to Pose
- Secondary Action
- Staging
Briefing for W2
- Duration
- 1 seconds of animation requires 24 frames (1 minutes = 60 seconds = 24*60 =1440 frames)
- Need to estimate action to calculate the duration
- Spacing ( constant speed )
- Ex: You're driving a car and moving at a speed like 60 km/h, before reaching constant speed u need to consider where the car comes from, static. You need to play a test to get acceleration, from *slow to fast* ( slow out ) and raise the constant speed.
- Arcs
- Ex: Shooting an arrow, was like slightly in the curves.
Briefing for W3
- Making animation look more rigid and flexible such as ( making a ball bounce )
- For this particular exercise, it was required to know how to estimate timing for each distance with different heights. Know how things moved in to show slow in, slow out, and how to control the art as well.
- Ex: *Refers to bouncing ball* The first bouncing is about 24 frames, the second 24, and become lesser and lesser 18; 10 and so on until finish.
- Flexibility
- Ex: How to animate a tail, and make it look flexible. It was labeled on the principle of drag, follow through labeled in design principle# ( means not the entire stuff stopped *the ball stopped moving but the tails still moving*, and overlapping )means having two parts like the ball and the tail, the timing for the ball would end earlier than the tail, so the ball stop first but the tail keeps moving.
- To get flexibility, one is through joint or appended ( used on smtg like tails hair, or cloth ); the second is through shape.
- Squash and stretch
- Such as: in between the ball you can show stretch and when it hits the ground it can show a squash.
Preserved the volume * important to get the quality of movement *
Briefing for W4
- Visual: Appeal includes everything not only include the video side but also in design, the personality of that character, and the audio part ( sound effects or music or voice* need to have good correct speaking *which matches the character )
- Solid drawing
- Animation is an art form so it was a must to understand drawings and how to make the drawing solid, it looks dimensional *3D*. It is not only just for the outline, but has silhouette. Silhouette is very important for you to get a clear picture of the gesture or the action of the character. But it was needed to establish form and understand perspectives. Not only for the background it does include a character like how do you pose. It was mentioned to avoid a dull or boring pose, the main point is how to create a good pose.
- Staging: When we combine character and the environment together, we need to stick the character within a space.
- Staging not meaning that you need to put everything on the screen, you would need a background which was a stage. On the stage you have to put different elements like props, characters or multiple characters, lighting everything that contribute to the whole thing.
- The mood, clarity and plenty of action are all under staging.
- Goal: Learning about walk cycle, run cycle or personality walk (if have time). Master work cycle with standards or long walks which was called "Vanilla Walk". What kind of issue to get this kind of consistency and how to control a spacing through the drawings ?
- Walk cycles: Time will be consistent
- If you have 6 frames, each post must have 6 frame consistence. To all constantly use 6 frame or three frame or five frame.
- Pose to Pose
- Mostly on planning
- Straight Ahead
- Spontaneous action or you can get more flexible action
- Ex: Like how to apply drag tool and use straight headed method
- Learning different timing like 12 frames, 3 frames, 6 frames which was more on an action. Jump animation with different kinds of timing instead of just even timing.
- Before doing action, we have to anticipate first.
- We need to show anticipation for ex: Before we jump up, we first have to squat down jump, push up. From normal standing push to squatting down forced to this anticipation.
- Follow through: Before stop and settle down, you need to show landing force and pulling pose, the whole body goes forward before it goes up, to a normal pose again.
- Exaggerate (more on the option side)
- Emotion: For examples, make crazy person looks more crazier
- Idea (more on idea side)
- Combination on visual staging
- Basic animation experience by the lecture:
- Flip books
- Flip books require sequentially drawing on each page to flip them
- Power point
- Anime frequently and play frame by frame
- Understanding point: U need to have series of drawing, and understand the concept of playback such as flip book
- Traditional way of Animation :
- Hold lot pieces all together then flip each pieces to playback or preview the animation using peg bar .
- Once pieces are putted, you need to able to see what is drawing behind the top one so we need a light bub, so there will be a device which we could place the drawings (simple light box). Inside the box there will have a transparent glass and there's light emitting inside the box. Last but not least transitioning to digital software, checking the drawing using onion skin, scan, clean up, inking, output and preview drawing.
- Modern software to preview animation:
- Media player
- Quick Time
- VLC player
- Holding the whole drawing and play the sequentially animation into a consistent rate which was called as frame rate or frame per second *FPS*. Frame rate would help laying the sequential image and try to create illusion of movement. Normally frame rate is 24, 24 frame per second per film. If are needed to do in tv there are analog and digital. BUT some would prefer 25 or 30 FPS, try to avoid anything which was below 24 frames. 25 FPS was called PAL, 30 or 29.9% is called NTSC.
- 24 drawings to create 1 sec animation not only apply to 2d iteration way of doing things.
- Differences between CLI and 2D animation :
- Clay Animation: Chicken Run, Wallace and Gromit, Paranorman.
- In order to create clear animation, you have to have a model or mannequin. You have to create a bone and inside the clay so that you can move each join like rigging in 3D animation. Having great lightning to have good lighting effect, real lightning, camera and snap like a photo (frame by frame) sequentially , background.
- Cut out: With a piece of paper you can create a hinge or limp, it can only be seen on a single view, looking flat. Some 2D animations can be rigged, and rigging can be achieved using digital tools like After Effects or Toon Boom Harmony.
- Instead of drawing each frame individually, there will be 24 drawings per second, a technique called "on 1s." However, this method is rarely used because it tends to make the animation look jerky, requiring a lot of skill and precision to avoid that. To reduce the workload, we can draw on "2s," meaning we only create 12 drawings per second, with each drawing held for 2 frames. For even further efficiency, we can use a method called "on 3s," with only 6 drawing, where each drawing is held for 3 frames, reducing the number of unique drawings even more while still maintaining decent quality.
- CAUTIOUS: We can have lesser drawing but less impact in terms of the quality. Even though we have lot of drawing to produce, there is a good technique for you to lessen the workload.
- Lets say....There is a ball moving from place A to place B, how long the action take place ? Maybe 1,2 , we need to define it.
- For examples: If you start with frame 1 you need to end at frame 25 and they moved. To get rough animation with timing , normally we do planning and draw 1st frame first and there was needed to draw an in between which prove that only timing that was not enough. Timing you said the starting and ending, you need to understand where to spot the change of action to consider different timing.
- Rough Animation (with timing )
- Key/extreme: Key more relate to how to make the post in term of giving the ideas of the story. We plot between is called breakdown (always sit in middle), in between breakdown we also need more drawings (in between). We need to consider spacing between two drawing, plot are evenly distributed so there is no indication speed but transitional speed, we can even divide more to make it look even better to give an illusion of acceleration. One drawing can show acceleration (slow out) and the behind part can indicate declaration (slow in).
- Rough
- Clean up
- Standing chart (traditional way)
- To indicate spacing, make constant speed
- Cautious part: Avoid jerkiness, if movement looks jerky that means there are lack of control in spacing.
- Slow out
- Slow in
- Never draw 7, 3, 5 frames(never have middle point) ; 24,12,6 frames are acceptable to draw the breakdown for all planning. It must have a whole number/round number.
- If there is a arrow shooting, there must be a arc because of the gravity falls/ If you are animating a ball, balls are going up and down.
- To show arcs or motion trajectories effectively, consider the weight of the object. For example, creating a sense of weight for objects like a bowling ball, a balloon, or a soccer ball will require different timing due to their varying weights.
- When animating a character, arcs are also essential because of the joint movements in the body. For instance, if you are animating an arm's rotational movement, you need to plot the middle points or breakdowns and create arcs between them to ensure smooth motion, even for a character with a limp.
- There are two kinds of flexibility :
- Shape: Something like how to make the ball stretch when the ball hit the ground it was require to make it stretch on contact and then squash it, you need to put the stretch to the contact, never put a stretch on air.
- Pose to Pose:
- Appendage (Joined part) : Something like chain or tail, focus on how to make it looks flexible.
- Layering and Sketching:
- Do rough sketches first to get a sense of the motion and flow
- Make a new layer for clean-up and refinement of details
- Keep consistency in layers to have fluid animation.
- Frame-by-Frame Techniques:
- Work frame by frame to maintain the natural motion-straight-ahead method.
- Pay closer attention to the smooth linkage of the tail or any trailing elements from one frame to another.
- Arcs and Follow-Through:
- Ensure the elements, like tails, describe an arc and do not get disconnected.
- The tip of the tail leading into the next frame and out of the previous in a smooth flow.
- Onion Skinning:
- Use onion skinning to see and guide smooth motion.
- Check the linkages between frames for smoothness.
- Timing and Spacing:
- Adjust timing on contact poses for impact or weight
- Keep spacing consistent on tails or secondary
- Workflow Tips for creating them :
- Rough in with simple sketches to get the motion
- Take the tricky transitions early to make sure the pieces feel connected in the workflow
- Clean up and refine with extra layers
- Keep tails or arcs consistent and connected throughout
- Common Challenges and Solutions something like :
- Tricky Transitions: If something doesn't look right, use guides visually to correct this onion skinning.
- Flow: Make sure all parts of the motion logically connect.
- Consistency: Go back and check previous frames for consistency in flow and design.
- Maintain consistent
- Shapes, sizes, and movements across frames for smooth transitions
- Avoid drastic size or proportion changes unless intentional for effect.
- Line of Action
- A dynamic line that conveys the energy, movement, and direction of the pose.
- Straight lines often suggest rigidity or stillness; curves add interest and energy.
- Adjust the line of action for dynamic poses, such as punches or stretches, to make the animation more engaging.
- Solid Drawing
- Focus on creating 3D forms to add depth and realism.
- Use basic geometric shapes (cylinders, spheres, cubes) to construct characters and maintain proportions
- Pay attention to perspective, overlap, and foreshortening to make the animation believable.
- Appeal applies to all characters (heroes, villains) and is achieved through:
- Varied shapes in character design
- Balanced proportions in order to get exaggerating features for personality
- Simplicity for easier animation without losing character essence
- Silhouettes and Negative Space
- Strong silhouettes make poses readable and dynamic
- Avoid overlapping limbs that obscure clarity
- Proportion and Balance
- Adjust proportions based on character traits (e.g., taller, lankier characters vs. shorter, rounder ones)
- Maintain balance within poses for realistic weight and movement
- Character Design Tips
- Combine different shapes to create unique designs
- Use references to study shapes, proportions, and dynamics
- Ensure the design reflects the character's personality, role, and appeal
- Technical Aspects
- Leverage tools like onion skinning and layer management to refine animations
- Use F5 to extend layers when needed to maintain timing and flow (easy way to do )
- Sound Design
- Sound effects and music should enhance the mood and match the animation’s tone
- Pay attention to sound quality and avoid generic or poorly mixed audio
- Clarity of action, emotion, and storytelling are assured.
- Some key elements for composition include the placement of characters, background, props, and lighting to guide the audience's attention.
- The use of the Rule of Thirds to compose scenes effectively involves the following:
- Divide the frame into three equal parts vertically and horizontally
- Place the subject or point of interest at the intersections for balance and appeal
- Frame shots appropriately:
- Wide Shot for actions
- Medium Shot or Close-Up for expressions
- Exaggeration
- Amplify action, emotion, and expression for better visuals
- Take exaggeration to the extreme, then scale back if it's too much
- For example:
- A sad character should appear sorrowful
- A bound could be faster and more energetic
- Anticipation
- Creates expectation in the audience for an action with a visual setup before it happens.
- Examples:
- A crouch before a jump.
- A wind-up before a punch.
- Drag
- Makes an action feel more realistic and impactful.
- Silhouette and Negative Space
- A silhouette will always ensure that actions and poses are readable even without details.
- Spread the limbs and separate overlapping features to create visible negative spaces.
- Do not clutter the pose.
- Secondary Action
- Gives additional movements that support the primary action.
- Example: A character walking in anger might swing their arms or bob their head aggressively. The secondary actions should not overpower the primary action but complement it.
- Solid Drawing
- The characters and objects should have a three-dimensional feel.
- Use simple geometric shapes to construct forms: cylinders, spheres, cubes. Employ perspective, foreshortening, and overlap to create depth.
- Composition and Perspective
- Know 1-point, 2-point, and 3-point perspectives:
- 1-Point Perspective: All lines converge to a single point.
- 2-Point Perspective: Two vanishing points for more dynamic scenes.
- 3-Point Perspective: Adds height for dramatic or dynamic angles.
- Divide the scene into foreground, middle ground, and background for depth which was mostly important in the timing and spacing
- Create rhythm and flow in animation:
- Use timing consistently for smooth motion. Adjust spacing for squash and stretch type actions to indicate speed or weight. Exercises for Practice Silhouette and Line of Action Design poses with dynamic lines of action and clear silhouettes. Character Sheets Create model sheets for front, side, back, and three-quarter views. Create action poses and facial expressions with different emotions. Perspective Drawing Practice 1-point and 2-point perspective in designing environments. The main focus was on creating a sense of depth using the rule of thirds.
- Walk Cycle Basics
- Start with rough sketches to define movement and poses.
- Progress to tie-downs, refining structure while keeping the design clear.
- Optionally proceed to clean up for a polished look, including color and details.
- A standard walk cycle includes the following poses:
- Contact Pose: One-foot heel touches the ground; the opposite foot's toe lifts off.
- Down Pose: The character’s body lowers, bending knees for weight.
- Passing Pose: The raised leg passes the grounded leg.
- Up Pose: The character's body rises as the weight shifts forward.
- A complete step involves repeating these four poses for each leg.
- Key Concepts
- Straight-Ahead Animation:
- Animate frame by frame in sequence.
- Useful for fluid and unpredictable actions e.g. fire, hair, cloth.
- Pose-to-Pose Animation:
- Focus on planning key poses and filling in between.
- Better for structured movements like walk cycles.
- Technical Breakdown
- Timing:
- Use 24 frames per second.
- Assign 3 frames per pose for smoother transitions.
- As for the Spacing:
- Gradual changes between poses create natural motion: slow in, slow out.
- The feet Silhouettes: Make sure poses are readable even as rough outlines.
- Ground Line: Feet should all be on the same base level for stability. Building a Walk Cycle
- Jump animation involves multiple key stages:
- Idle/Static Pose: The starting position of the character
- Anticipation: A preparatory crouch or wind-up that shows readiness
- Push-Up: The character stretches upward, exerting force to jump
- Airborne Phase: The character is in the air, typically in a stretched pose
- Landing/Contact: The character contacts the ground, showing impact
- Follow-Through: After landing, the character settles into a neutral or idle pose
- Key principles should be applied in the motion:
- Squash and Stretch:
- Use squash to show compression during anticipation or landing
- Use stretch to depict the force and speed of the jump during push-up and airborne phases.
- Anticipation
- Prepares the audience for the jump
- Adds realism and clarity to the movement
- Follow-Through:
- Ensures actions don't stop abruptly, maintaining flow
- Adds realism by showing the body settling back to its initial state
- Timing and Spacing:
- Gradual changes between poses create smoother animations
- Use more frames for slow motions and fewer for fast actions
- Frames per Second (FPS):
- Use 24 FPS for standard animation.
- Pose-to-Pose Animation:
- Plan and animate key poses first (idle, anticipation, push-up, airborne, landing)Fill in intermediate frames (in-betweens) to ensure smooth transitions
- Proportions:
- Maintain consistent proportions of limbs and body parts across frames.
- Steps to Create a Jump Animation
- Use a consistent ground line to align contact points during landing.
- Step 1: Draw the starting pose (Idle/Static).
- Step 2: Add the anticipation pose, showing a crouch or preparatory motion.
- Step 3: Create the push-up pose with stretched legs and arms.
- Step 4: Illustrate the airborne phase, showing an elongated body.
- Step 5: Draw the landing pose, emphasizing squash to show impact.
- Step 6: Add follow-through frames to show the body returning to idle.
- Consistency:
- Maintain consistent foot size and body spacing across frames.
- Use onion skinning to ensure even distribution and avoid jerky motions.
- Volume Preservation:
- Ensure character volume remains constant during movements
- 2. Walk Cycle
- Contact Positions:
- Start with contact poses where both feet touch the ground.
- Ensure feet placement aligns with the ground line.
- Down and Up Positions:
- "Down" position: Lower the hips and head, ensuring weight distribution is clear.
- "Up" position: Raise the hips and head slightly; maintain fluid transitions.
- Passing Position:
- Position the body centered between the supporting leg and the swinging leg.
- Avoid static or unnatural-looking poses.
- Sliding:
- Ensure the planted foot stays in place without sliding.
- Jerky Motions:
- Smooth transitions between poses; avoid abrupt or unrealistic movements.
- Misaligned Floor Lines:
- Draw a consistent ground line on a separate layer to ensure stability.
- Refinement Techniques
- Use rough sketches to explore motion before cleaning up details.
- Focus on defining the direction and angle of soles to reflect proper depth.
- Add natural arm swings and body movements for more lifelike animation.
- Special Considerations
- For 3D animations or adding depth, ensure the feet and body follow proper spatial alignment.
- Reference real-life movements (e.g., cats or humans) for naturalistic motion.
- Tools and Workflow
- Use onion skinning to overlay previous and future frames for precise adjustments.
- Test animations frame by frame to check for smoothness and timing consistency.
- Timing and Spacing
- Follow a 1-2-3 sequence for timing: Contact → Down → Passing → Up.
- Adjust frame duration to balance between smoothness and realism.
- The action should feel organic: the tail or secondary action drags behind the center of gravity.
- Example: The tail stops moving after the body has stopped.
- Before a main action, such as rising up, there needs to be an opposing movement: a downward motion.
- Consistent proportions are important, particularly for the feet, body, and secondary elements like tails.
- Use onion skinning or reference lines to create an accurate drawing without sliding or misalignment.
- Contact, Down, Passing, Up:
- The Contact poses when both feet are on the ground.
- Down and up positions must naturally follow through with the weight and height of the character.
- Passing position places the body between the supporting and swinging legs.
- Avoid Sliding:
- Use ground lines or other reference tools to ensure stability.
- Smooth Transitions:
- Add in-between frames for fluid movement, avoiding jerky transitions.
- Timing must match the intended motion, such as slow movements requiring more frames.
- Even Spacing:
- Keep even spacing between frames so that there won't be a sudden speed-up or slowdown.
- Naturalistic Poses:
- Do not break joints or have unnatural positioning of the limbs.
- Lean into reality with poses such as landing, pushing, and anticipation to make this more believable.
- Volume Preservation:
- Keep character size consistent across frames, especially during motion extremes.
- Layer Usage:
- Separate ground lines and key elements for easier alignment and editing.
- Use rough sketches to draft motion before finalizing.
Class Summaries
Week 1: During the first week, the lecturer briefed us on animation fundamentals. He clearly outlined all the assignments and animation techniques we would learn over the next few weeks.
Week 2: The lecture taught us the animation principles of fluid and flow. For a better understanding, he even taught us to use adobe animate to animate a ball bouncing. The main goal for this lecture is to show the importance of fluidity and flow in animation, which helps create smooth, natural movement that enhances believability and visual appeal, keeping viewers engaged.
Week 3: For this particular week, The lecture teaches how to create realistic animation by focusing on timing, spacing, and flexibility, using principles like slow in/slow out, drag, follow through, and overlapping action. It also covers squash and stretch techniques to make movements, such as a bouncing ball, appear more natural and dynamic.
Task1_30/09/2024_Ball Bouncing
For this particular assignment, we are told to create a ball bouncing by using adobe animate. Set the desired stage dimensions and frame rate (e.g., 24 fps for smooth animation). For the figure bellow, it shows the presentation of the bullet in the layer. If it was not colored it means that particular frame was not added any animation drawings.
Task2_07/10/2024_Ball Bouncing with Tail
"For this assignment, we were instructed to create a bouncing ball with a tail using Adobe Animate. The process for the figure below is similar to the first task, requiring us to draw a line and an arc.
FEEDBACKS
Week 1
General Feedbacks: None_Course briefing, refer to class summaries/notes/lectures.
Week 2
General Feedbacks: None_Basic learning ball bouncing and simple animation of ball bouncing.
Week 3
General Feedbacks: Ensure you draw the correct arc to properly plot your drawings. Adjust each drawing to align with the arcs. Consistency is key—make sure the number of drawings is consistent across all parts. The arc of the ball should be centered, and disable the snapping setting for smoother movement. To show gradual acceleration or deceleration, add in-between drawings between key frames. Ensure contact points touch the ground; this is crucial.
Lower the alpha to help focus on the animation. If the animation is too fast, you can adjust it by adding more frames (like "on 1" or "on 2").The number of drawings should gradually increase rather than decrease significantly. For example, if one section has 5 drawings, the next could have 2, with a gradual decrease. For breakdowns: after creating one, add in-betweens (1 or 2) to keep both sides balanced.
As the bounce height decreases, the distance between frames should also decrease. When starting a sequence, plot the extreme poses first—one at the bottom, one at the top, then middle positions. As height and distance decrease, reduce the number of frames accordingly.
Specific Feedback: The frequency is a bit too fast; consider adding a few more frames. The ball's path seems unstable; try adjusting the amplitude and height for smoother movement.
REFLECTION
Experience (Week 1-3):
The first three weeks have been overwhelming yet incredibly exciting. I started off learning animation with a load of new concepts, such as the 12 Principles of Animation, that laid the ground for my knowledge of how it works. For the first time, the technical aspects of the subject, including timing, spacing, and arcs, seemed to be in a language very hard to interpret. It was an eye-opener to think that each frame mattered so much and that small adjustments could make huge differences. Learning about things like slow in/slow out and squash and stretch helped me realize how movements aren't just about speed, but about how they feel. It's fascinating how small changes in timing or position can completely alter the way the animation looks and feels. Well, Adobe Animate did feel a bit overwhelming, but I grow more comfortable with it with each passing day. It is even easier where I can keep track of the flow of motion of something with onion skinning. By the end of Week 3, I got to see some progress in how my ball bounces or how a tail sways, and that felt incredibly rewarding.
Observation:
Right from the very beginning, it was clear to me that good animation is all about precision and consistency: everything should be done for a reason, whether it is a simple thing like the bounce of a ball or a more complex action involving a tail. I felt that during the earlier weeks, I was more concerned with getting the basic movements right, such as the timing of the bounce or making sure the arc was smooth. By Week 3, I began to appreciate the subtlety amount in how we create motion: a tail will flow, and a ball responds with stretches and squash according to gravity. I also realized how many of the finer details-like ensuring the ground contact for the ball feels smooth and natural-can really make or break an entire animation. I can see that consistency in spacing and arc is something that I want to be focused on from start to finish.
Findings:
One of the biggest lessons that I have learned thus far is to plan. Every frame counts, and the more you know about what is going on between those frames in timing and spacing, the more realistic and engaging your animations are. I have learned that it's just as much about the anticipation in animation, or how things are going to move, as it is about the actual end product. The flexibility of objects, like a tail should bend and sway and how a bouncing ball should stretch and squash, makes animation seem almost magically come alive. I have also learned how crucial arcs are to lead the movements, not only of the objects but also of the character. It's great to see how it evolves from these rough sketches to a smooth, fluid animation; this really makes me much more aware of the amount of work each frame requires. The feedback mentioned spacing needed consistency and precision, so that is something I will definitely remember for the upcoming exercises in this class.
Further reading (if have time)
Book from Alan Becker; the illusion of life or the animators survival kit








Comments
Post a Comment