In the beginning of the year almost all of the Design Department completed an online course devoted to Adobe After Effects and the basic principles of animation. Zarina, Senior Designer and Techlead of Noveo Design Department, tells and shows us what our designers have learned from this course.

As any technical course, we started with the basis, the interface of the program and the basic principles of animation.

Principles Of Animation

The total number of all the principles is 12 and they were formulated by the animators of The Walt Disney Studio. Not all of these principles are required to use in animation of interfaces or illustration. Nonetheless, the majority of them are still updated and their usage is noticeably able to improve the clip in progress or animation.

One of the most important principles - Slow in and Slow out (Spancing). While moving, the majority of objects need time to pick up speed and or stop. That is why the process of movement looks better when it speeds up in the beginning and slows down at the end rather than being equable.

Squash and Stretch principle makes an illusion of weight and flexibility of a shape. As an example, remember a ball squashes touching the ground.

Arc principle tells us that all objects in the world are moving along parabolic trajectories. So, the usage of this principle is necessary for achieving a natural movement effect.

The first task was to animate a ball. At first glimpse of a simple task - the animation of a falling rubber ball turned into a serious test of observation skills. It is necessary to know the changing of its speed when it touches the ground and bounces off to make it fall as in reality. We had to check the damped oscillation graphs and fall a ball in real life.

Shape Animation

The next topic was about shape layers. In spite of the opportunity to make shapes in After Effects, illustrators prefer more powerful and flexible tools like Adobe Illustrator or Adobe Photoshop. Importing from these programs allows to save some characteristics of shape layers (gradient and transparency are not savable) and vertexes information (their coordinates) and continue working with them in After Effects adding animation. For instance, to change the feature layer shape, we can move vertexes. In such a way After Effects finishes smooth shape changing in the inter-outs. To reinforce the skill we chose a simple illustration, prepared the layers required for animation in Adobe Illustrator, and added movements to some objects after the export :

• Added Position Animation for the moon, the shine of the moon we made with Scale animation, cycled the layer extensions in Expressions with Loopout and Cycle functions;
• To set smoke movement we added curled shape layers along the animated path and set the Gaussian Blur и Simple Choker effects for them;
• For a boat movement we used the Arc principle for the path and added jiggling with the Rotate animation parameter.

As a result a static picture came to life.

Text Animation And Motion Graphics

One more interesting and highly demanded topic of the course is text animation. For that purpose there are lots of powerful tools in After Effects such as line animation which goes with a text; different effects when signs, words and lines appear and disappear; letters randomization; 3D effects and others. All of these effects can be coherent with each other which lets you endlessly manipulate texts. However, all these tools are not enough to make an outstanding and interesting video. Here we need to come up with an idea, make a complete composition, and frame it to hold the spectator's attention.

Another topic is the 3D test. This effect has become popular nowadays and it can be seen in commercials and animated posters. Here we have a 3D editing program Cinema 4D where shape and texture are created. The animation itself is made in a special plug-in for After Effects.

Titles Creation

The topic of the titles creation is another big part of text animation. We regularly deal with this task while making video vacancies and videos about our company. Basically, they are intro titles and low third, the same are used to complete initials. The above mentioned Disney principles are often used for titles creation. Also, it is necessary to sort through the diversity of variants (or set them at once in case you have enough experience) to get required slow in and slow out.

Animation Using Puppet Position Pin Tool

Puppet Pin Animation Tool is often used to animate simple characters’ movements. There are some pins which work as needles to fix parts of images in the key locations. Shifting these needles we make the character move. Pin manipulation is not always an easy task so we bind the pins to Null Objects and make the Position and Rotation parameters of null objects animated. For example, to animate a hand move of a character it is required to join the parts of an arm together and to the body as well. Then, when turning the arm at the elbow, the rest of the arm with the hand will follow. Apart from the characters' movements this trick can be used to animate leaves, bushes, and trees.

Animation Using Joysticks’n’Sliders Plugin

Paid plugins such as Joysticks’n’Sliders are often used to speed up the character's gesture animation. It is required to first fix the initial position of all face details to make the face movement and character emotions with the help of Joysticks’n’Sliders. As an example, the shape and position of eyes, mouth, eyebrows, and hair. The next steps are to set the extreme states of the face animation. Here we need to change the position and the shapes of the character’s details so they fit the extreme states. For example, while a head turning it is required to shift the nose and change its form so it has a half-face position; shift the eyes and eyebrows positions, and change the hairdo. This procedure should be repeated for all key shots of the animation. When all key positions for all elements are ready, it is time to start the analysis in the plugin. Having analyzed all data, the plugin makes a controller known as Joystick which is bound to the face elements. While moving, this Joystick analyzes possible inter positions of the elements and it becomes feasible to make a smooth animation of any movement within our extreme states.

Camera Tracking

Camera tracking method is frequently used in commercials and visual effects. The point is to place artificial animation in an actually filmed video. In this regard it is necessary to track the action of one or several dots in the original video. A user finds the most contrastive parts in the video, places a marker there and the program follows the movements of this set of pixels and builds a path of its move. Therefore, any object can be launched along this path, such as a reference or titles.

Moreover, if the tracking is done including 4 points, you can place another animated object into the boundaries of these points. That was how we made the April’s Fool Day video with the road signs going crazy.

Parallax

Parallax is a brunch of visual effects which recently has come into fashion. It is used in commercials and web-design but it is widespread in advertisement of various art galleries and exhibitions. It is possible to bring back to life familiar masterpieces of art with its help and attract the attention of new spectators. To get the parallax effect it is necessary to divide the objects of the image and assign them to different layers. Then we need to finish drawing the missing parts of the image, as in the place we cut out the piece a hole appeared and it should be completed (usually this is done by copying juxtaposed areas). The image is getting developed by placing the objects at different distances along the Z-axis (in depth). The final step is animation of separate objects. However, the camera movement through space can be added. It creates an illusion of being immersed in the world created by the artist.

Interface Animation

This topic became interesting to us, perhaps more than any other, since we come across it in the course of our professional activities. First of all, you need to be acquainted with Google Material Design conception to make presentations of various interface animations. This conception has a detailed explanation of interface elements. Using Adobe After Effects you can show which microinteractions, transitions and animations can take place in the application, and how this will affect the overall perception of the application. First, to animate the application it is necessary to prepare a file with interface elements in Adobe Illustrator, then import it with all needed layers in the After Effect program and after that set up all movements and animations using the program. Opacity, positions and scale parameters are usually animated. They can be used to show how elements unfold and open, how the application reacts to user interaction, how the transitions between screens occur, and much more.

One more task was to include an animated interface in a photo or a video. In this regard we had to turn to tracking, color correction and deformation tools again.

So, in this super interesting and useful course we mastered a lot of powerful instruments, learned the principles of motion graphics and animation, did a bunch of challenging but outstanding tasks and have been already applying the acquired knowledge in our daily work!

Animations are created by the designers of Noveo Zarina and Ludmila.