This lesson began with a quick starter to recap easy ease in and out and overshooting. We hopped onto After effects to create a quick animation and remind ourselves of what we learned last week. I chose to make a star move from one point to another and then applied the easy ease functions and made it overshoot its destination. I found this easy enough and was planning on doing a second star before we ran out of time and had to move on.
The 12 principles of animation. This was our topic for the lesson and we watched a video in order to be introduced to the principles and begin to grasp the core aspects of animation. Fortunately, I had already watched this video and I am happy to say that I am familiar with the principles, having researched them before. Nevertheless, I was grateful for the opportunity to be able to extensively delve into researching them in more detail.
1) Squash and Stretch
The first principle states that animated objects can be made longer or flatter to emphasize their speed, momentum, weight, and mass. Usually, the more squash and stretch, the softer the object and the less, the stiffer it is. What’s important to remember when animating an object to squash or stretch, is to keep the volume consistent, otherwise, the realism, along with all sense of proportion, is lost. Personally, I see this principle almost everywhere, because it makes anything far more interesting when they are exaggerated. This shows that this principle overlaps with a few others, as most of them do.
2) Anticipation
Anticipation is when a character prepares for action and in doing so, gives us a clue as to what is happening next. This makes the action more realistic and gives the viewer some time to process what is about to happen. An example is when a character is leaping or punching. They have to build energy in some way first, so they bend their knees or bring back their arm in preparation. This makes the action seem more lifelike and natural and helps communicate the actions to the audience. The idea is to make everything obvious so that it is comprehensible and clear. If anticipation isn’t used, the audience might miss something and become confused. There can also be multiple levels of anticipation, which when used correctly, adds more character and charisma to a character or situation.
3) Staging
Staging is just the presentation of any idea but made unmistakably clear. This principle is quite broad and covers numerous areas within animation, such as acting, timing, camera angles and position, and setting. An animator needs to be in control of where the audience is looking, and this can be achieved through staging: all of the elements in a scene work together to move the viewers’ eyes around the screen. With good staging, there should be a flow – a very clear and easy path of events to follow. Nothing should clash or distract from the main action. As mentioned before, the camera position and angle are also a part of staging. Generally, it is best to have the perspective further away when there is big action going on. That way the audience can take everything in and understand what is happening. Closer perspectives are ideal for expressions. Scenes where characters are talking or doing something important, zooming in to show their facial expressions and body language translates their emotion better to the viewer. You can’t emotionally connect to the characters as well if they are crying in the distance, can you? It isn’t always the case, but usually, the closer we are, the more personal and emotive are our engagements with the story.
Some other things to remember:
- Proper timing! Let the first action finish before the second one starts. Of course, overlap is sometimes necessary, but if several things that are equally as important happen at the same time, it is likely that one or more will be overshadowed or missed.
- Pauses can be beneficial. Inserting pauses can help the viewer process what has just happened before the next action begins. They can also be used to put emphasis on something, like a shocking revelation or negative turn of events.
- Give the audience time to read! If there is text on the screen, as a general rule, keep it there for as long as it takes to read it allowed three times. This isn’t strictly necessary, but it’s good to give the individuals their own time to read and acknowledge text.
- Finally, the main action needs to be clear and simple. It cannot be confused with other things going on, otherwise, the attention is taken away from the main point.
Staging is not just controlling the viewers’ eyes, it is conveying ideas, so exaggeration and distracting objects usually need to be toned down, if not avoided at all.
Right
Wrong
4) Straight Ahead & Pose to Pose
This principle describes two methods used to animate drawings. The first is called straight ahead because you draw the first drawing and then the second, then the third, and so on. Straight after one another. The second is called pose to pose, and it is when you draw the beginning and end of each main pose, and then go back later and finish what is needed in between. Both methods have their advantages and disadvantages and can be used in different situations. Pose to pose is better for most action because it gives you more control since there are no worries where the character may end up – it’s already drawn. It also saves time and work, because if there is a mistake somewhere, it can be caught early on and fixed. This is not the case for straight ahead, where if one drawing is off, several need to be modified. With the straight-ahead method, there is also a risk of changes in size and position because when drawing the poses one after another, there is nothing in front for reference of older drawings. However, straight ahead is ideal for unpredictable animation, like fire, water, dust, and explosions. With these types of things, there is lots of physics involved, which makes it hard to predict the endings, so pose to pose is rendered useless in this case. With straight ahead, you just go with the flow, and eventually, the animation starts to have a life of its own. Another example of unpredictable animation is overlapping action. This is when a character has appendages that need to be animated separately. For example, when a bunny is hopping, the main part of the animation is the body, and the ears move differently from it. It is easier for animators to just separate the two, and animate the body first and then the ears, and straight ahead can be used effectively for such things (ears, hair, tails, clothing, etc.).
There is also some vocabulary involved with pose to pose. Main poses are called keys, secondary pauses are called extremes and further ones are the breakdowns. Usually, you’d draw the keys first, followed by the extremes and breakdowns. Then, you can start inbetweening further if needed.
5) Follow Through and Overlapping Action
The technique where body parts and accessories drag behind the body and continue to move even when the body has stopped is called follow-through. It is often associated with another technique called drag, which is essentially delaying the movement of body parts in relation to the main body. All of these techniques make the animation more realistic. Like in real life, when the main body moves, the tips of the appendages are the last to catch up, and when it stops, they follow through the farthest before finally settling back with the main body. Similarly to squash and stretch, the amount of drag says things about the mass of an object. The less drag there is, the stiffer the object, and the more, the softer it is. As mentioned in the previous principle, it is easier to add appendages after the main body animation. Overlapping action is used to break up an animation and make it more interesting. For example, offsetting the arms and legs from the body, can make the character appear more graceful. Offsetting the top half from the bottom half of the body when standing up makes it appear more realistic. There are various different presentations that can be done, and with experimentation, a completely unique and interesting character can be made.
6) Slow in & Slow out
The sixth principle is about life-like motion. It refers to the way that almost all movements start slowly, build up and become faster, and end slowly. Robots are one of the only things that don’t move this way but in constant speed.
So how can slow in and slow out be achieved? In 2D animation, you draw the extremes, then one in between. Then, draw only in between the drawings closest to the extreme, until the satisfied with the amount of slow in and out. In 3D animation and motion graphics, it is simply changing the motion curves from linear to spline and adjusting the bezier handles.
7) Arcs
Most living creatures do not move in an up and down precision, but rather a circular path called an arc. Arcs are used to increase realism and they can be added to almost any movement. In 3D animations and motion graphics, arcs can be achieved by keeping the x-axis constant and giving the y-axis a slow in and slow out.
8) Secondary action
A secondary action is a gesture that supports the main action and adds more dimension to the character animation. An example would be when a character is walking angrily, the primary action would be the legs. The secondary action would be everything else – arms swinging, head bobbing, and facial expressions. Another example is a person knocking on a door. The fist that is knocking would be the primary and the other hand would be secondary. The state of the hand tells us about the character, if it is a fist, he is angry, if it’s dainty, the character has a graceful happy vibe, and etcetera. The secondary action should not dominate the first, even if there are multiple gestures. Everything should simply enhance the idea that is trying to be conveyed, like a person eating a burger. If we wanted to put across the idea that he really enjoys the burger, the secondary actions could be him licking his lips, eyes closed and eyebrows raised, and head shaking in disbelief.
9) Timing
Timing is an extremely important principle because the personality and nature of an animation are greatly affected by the number of frames inserted between each main action. Many drawings put together makes the action quite slow, and few drawings further apart make it fast. The standard frame rate for movies is 24 frames per second. 1 drawing for each frame is called drawing on ones, 1 drawing every 2 frames is called drawing on twos, and so on. Drawing on twos is usually more common because it cuts the work in half and makes the animation smoother.
10) Exaggeration
The principle of exaggeration states that every action, pose and expression can be taken to the next level in order to increase the impact on the viewer. It doesn’t mean that making things more distorted is always the way to exaggerate, the idea is for them to be more convincing and interesting. You can always add exaggeration! Something as simple as picking the defining features of a character and making them bigger creates a difference in the effect. Caricature artist like to do this with the more prominent features of the people they see, in order to create a greater comedic effect. Sometimes animators who are starting out struggle with knowing how much to exaggerate something. A good way to avoid this is to blow something up until you feel that it is too much and then wind back, that way having a view of the whole range of the exaggeration.
11) Solid Drawing
Solid drawing involves making sure that forms feel like they are in 3D space with volume, weight, and balance. This means being able to draw a character from all angles and it requires knowledge of 3D drawing, what makes a shape 3D and what perspectives need to be applied. When doing a rough pass of a character, using solid shapes like spheres and cubes make it more three dimensional. Overlap also helps with this effect. Things like symmetry and twinning should be avoided, in order to make the character as realistic as possible in the 3D environment.
12) Appeal
The final principle is about making characters pleasing to look at. It doesn’t necessarily mean just ‘good looking’, but also interesting; there should be some charismatic aspect about them. This is often quite tricky as people have different standards on what looks good and what doesn’t, but dynamic designs often boost appeal. Things like a variety of shapes and interesting proportions can be played around with. Keeping it simple and not adding too many design aspects is also quite important.
After watching part of the video, we moved onto After Effects to make a new composition. The assets were already prepared, and this time we would be animating a boat on the sea, without any instructions. I was excited at the prospect of independently animating, and being able to play around with the boat and it’s setting. After arranging everything in the layers I wanted, I began with transforming the boat. It took a while and some internet research to learn how to make the boat move in a realistic way on the water, but after getting the hang of it, all it took was some refining and the boat bobbed effectively! I made the waves and cloud move as well to indicate the strength of the wind.
After everyone did their basic animations, we went onto adding effects on top of the video. The effects and prefects column on the left allowed us to pick from a wide selection of pre-made effects, and this is how we added rain to the animation. It was completely adjustable and I experimented with the different settings, opacity, speed, etc. before I was satisfied with the result. I even keyframed it to pick up towards the end of the video. We also learned how to add lightning, by creating a solid white layer and keyframing its opacity from 0 to 100 in less than a second, creating a flash. I used ctrl + d to duplicate the flashes and then adjusted the keyframes to make them a different length and closer or further from one another. The overall effect was really cool and realistic! Another effect we added was called fractal noise, which added a murky fog to the animation that we could also adjust, and stormy audio to complete the composition. It was really fun and educational, and I love the freedom that comes with working with this program. I could go into the settings of any effect I wanted and change it so that my compositions were
unique. To finish everything off, I sent it to the media encoder to render and compress the file, and voila. A wonderful little animation of a stormy sea, from which I gained many new skills to use in After Effects!
For the rest of the lesson, we were given a new task – to create a time-themed animation by ourselves. This mini-project would allow us to showcase all of the skills we acquired in After Effects and create something individual and unique. When creating anything, the First thing to do is brainstorm ideas. I felt most comfortable doing this in a mind map format so, in my notebook, I created a rather messy bank of ideas. I later refined and organised this by creating an online version, in which I cut out, moved about, and added new ideas.
My favourite ideas and therefore the main three are:
- Storks – They could be carrying something that represents new life/hope. The start of the cycle of life in time. Babies, clocks, a showreel of child life, etc.
- Time Machine – Inspired by back to the future, travelling through time to change or stop something.
- Memory Lane – A person travelling through their own memories, seeing time pass in the form of life memories.
A very important part of the design process for animation is storyboarding. Storyboards are needed so that we know what we have done and what we need to do. They are plans, rough guidelines to go back to and follow. They also allow us to visualize scenes to create and the environments they are set in and force us to think through the logistics of a project and determine the flow. Storyboards enable us to envision the camera angles, lighting, and environment, as well as revisit and correct shortfalls, problems, and scenes that hinder the flow. This was the first time I had properly storyboarded, and it was an interesting experience, albeit challenging at times. I ended up with several versions because I was never completely satisfied with the result, and I kept reconsidering my time frame and abilities, which were factors that kept me on my toes, constantly wondering if I should have gone for a different idea or changed something major in the storyboards. I stayed committed though, and I like to believe that I met the challenge of my decision.
Version 1 – A complete mess. I overestimated my capabilities and I had to completely get rid of the camera spin around the character at the start. There were also too many details, like the spinning clocks, which I liked, but would have gotten annoyingly repetitive after the second picture. I also don’t think I would have managed to animate the third picture smoothly (the child swinging).
Version 2 – Too simple. The second storyboard was a much neater outcome, but this time, I underdid it. The characters lack clarity, and I would have trouble recognizing their poses, and getting rid of the ending makes it feel too cut off and unfinished. I like the fact that I more notes, including the one that mentions my concept for the animation, which is to make parts of it still and only animate some of the scenes. This way it feels more like the viewer is looking at photographs from the perspective of the character.
Version 3 – The best so far. The third time’s the charm. I finally reached a place I was alright with. It isn’t perfect, but it gets my idea across with enough detail and clarity. There are arrows to show movement and different size boxes to show zooms or specific aspects to focus on. I’m still unsure about the ending but it will be something like what I have drawn, and I can always tweak it later. One thing that isn’t on there is a note that I added after the picture was taken. Someone gave me the brilliant idea of making each of the pictures a different style. I love this because I feel that it would effectively communicate that the pictures are from different periods in the man’s life, which presents the idea of time and the idea that they all have a different meaning and feeling to the character, as memories always do. I am not completely sure how I will go about this, but I think I will focus on the art style, and try and make it different for each scene.
With the remaining time, we started creating the assets needed for the animation. These would be done in Adobe Illustrator to be transferred in After Effects. Because we had no graphics tablets, everyone had to figure out a way to work around the issue of drawing, which could be done with shapes and the pen tool. I really didn’t want to trace, even though it ended up that way at a later date. For the first assets, however, I pulled up a reference of an old man sat in an armchair, and used it to create what I had in mind, without simply copying it. I also used the colour wheel in order to try and pick an appealing colour combination for the character. I wasn’t entirely satisfied, but with the amount of time we had, I think that it was a good thing that I made any progress at all.
