(Close)
Forgot password?
AskAudio Magazine
Join Now! Watch Tutorials
macProVideo.com
Close

Join macProVideo.com

Access free tutorial videos, premium articles and project files.

Share this article with friends!

Drawing and Animating Cartoon Style in Apple’s Motion

Concept

Retracing the history of keyframing for animation helps us to understand concepts that make our animation not only work but look realistic with natural movement that’s less mechanical. When we look around every day activities, for example, we know that when a car drives, it first starts slow, builds up speed, and it reduces speed until it finally comes to a stop. Imagine a car that started at 60 miles per hour and stopped at 60 miles - just unrealistic. We are used to a car starting from 0 eventually reaching 60 and slowing down back to 0 for a complete stop. 


Inspiration

While watching old movies, an indulgence I cherish - I had a chance to watch a mid ’70s movie whose intro was animated by hand. Hand animation is  a technique that was perfected and made popular by Disney animators way before the advent of digital animation. Disney would eventually make full circle by  acquiring Pixar, an innovative groundbreaker in computer video animation, coincidentally founded by Apple’s founder Steve Jobs - who brought us Motion.


Disney Animation techniques

Animation artists would hand draw each frame of animation, with each subsequent frame illustrating the anticipated changes. Senior artists would focus on the first frame and any subsequent frames where significant change would occur - known as keyframes. Junior or apprentice animators would labor to draw the in-between frames - known as interpolation, the same concept employed when creating animation in Apple’s Motion.


Along came Motion

Though great motion graphics applications like Adobe’s After Effects had existed before Apple’s Motion, however with quite a  learning curve, Motion came along offering an unprecedented ease of use while offering formidable tools in a much leaner and cleaner interface. Among its groundbreaking and intuitive features, Motion offered the designer the ability to simply manipulate an object on the canvas while the ‘record animation’ button was active resulting in keyframes being generated along the timeline. The ability to ‘keyframe’, (a verb) while keyframes and the keyframe editor were tucked away presented a less intimidating creative environment for beginners. Making the lower half of the interface like an accordion, with a keystroke you can expand the keyframe editor or any other hidden sections of the interface as we will explore along this exercise.


Setting the scene

In this simple cartoon scene, the view point is of a house in pitch black darkness at night, we see a door open and we see the light come though.

Background color

For our project preset, we want to match our desired output. In this case we want to output to HD 1080p with a frame rate of 29.97 FPS.

To verify the project settings, go to Edit > Project Properties... or press Command-J.

Fig. 1 Project Properties.

Fig. 1 Project Properties.


The canvas is transparent by default and displays a black color that helps while compositing instead of the checkered background that represents transparency. 

To export a project with transparency, ensure Background is Transparent - this is the default. 

Likewise, to export the project with a solid color, ‘Background’ should be set to ‘Solid’. The color palette and color picker will help choose any preferred custom colors.


Creating and animating a closing door

In cartoon animation we get to see doors opening and closing, and later we will use the same concept to illustrate windows opening and closing. While the elements we need could be created in other graphics application like Adobe’s Illustrator and imported into Motion as layers, Motion is equipped with useable content generating tools that will save us a trip to another application or department. In Motion 5 the toolbar was relocated (from upper section of previous versions) to the mid half of the interface, for easier access from any part of the interface. To the top left of the toolbar sits the tool palette as illustrated below.

Fig. 2 tool pallet.

Fig. 2 The tool pallet.


Tools can be accessed by clicking and holding an icon - better still using a keystroke invokes a tool as well. We need the rectangle tool. Easy to remember keystroke ‘R’ for rectangle.

Click the rectangle icon or press the letter ‘R’ on keyboard

Click in the canvas and drag to draw. If you had to draw a square object, you would need to hold down the Shift key, height and width will be equal. In freeform style we’ll make the height bigger than the width which is typical of door design.

Fig. 3 white door.

Fig. 3 White door.


Positioning on canvas

To position the door, press Shift-S (switch to Select tool), then drag and position the door on canvas as desired. I positioned mine to the left so the window can occupy the right-hand side.


Color it white

To ensure the color is white (if you had a different default fill color), select Rectangle layer and Press F7 (to toggle the heads-up display on/off) and Change fill color to white.

Fig. 4 layer and hud.

Fig. 4 Layer and HUD.


The white layer will provide the visible light when the door swings open. Before the door opens all we see is black. To achieve this effect we need a black door covering the white layer.


Duplicate it

With the white layer selected hit Command-D to make a copy.

Select the ‘Rectangle copy’ and use the HUD (F7) to make its color black.

Given the layer hierarchy where the new copy sits on top, all we see is the black door layer obstructing the layer below. While the layer thumbnail shows us the object and its color, it’s a good habit to develop a naming convention that gives each layer distinct identities.


Please open the door

Now that our layers are in place, we will begin the animation process. We want the door to open revealing the light coming from inside. In real life, we know that a door rotates on its hinges located on that outside edge and attached to the frame.


Rotation around

In Motion we can rotate an object around its anchor point - which by default is located in the center of the object. This default anchor position would not work for a door animation so we need to edit the anchor point and position it where door hinges are typically located.


Repositioning Anchor point

A layer object on the canvas will have a rotation handle on the middle by default.

Select the black door layer. On canvas, right click on it  and choose Anchor Point.

fig. 5 Edit anchor point.

Fig. 5 Edit anchor point.


The 3D handles make it easy to move anchor point along the X (Red) axis and position it to the left hand side of the door.

To make fine adjustments of door position, hold Command and use arrow keys.

Fig. 6 anchor point moved.

Fig. 6 Anchor point moved.


To have the door swing open we need to perform a rotation, just like a regular door is allowed some degree of rotation around the frame. Where the anchor point now is, represents the hinges of our door.


Opening the door

The property in Motion that controls how the door will swing open is the Rotation around the Y axis. This is located in the Inspector found at the top left of the interface.

Click on Inspector > Properties > Rotation.

Fig. 7 Inspector > Properties > Rotation.

Fig. 7 Inspector > Properties > Rotation.


The value for the Y property is at 0, changing the value to 30 would swing the door inward by 30 degrees and -30 would swing the door outward. The diamond icon next to the value represents a snap shot of the value at a given frame on the timeline. While the value can be manipulated numerically by changing the numerical field, Motion also allows us to manipulate the object by hand on the canvas.


Object manipulation

With the black door layer selected, Press Q to get the 3D Transform tool

This will display rotation handles which you can click and drag to rotate. The left circle handle will light up green to indicate you’re changing the Y values.

Fig. 8 rotation.

Fig. 8 rotation.


Changes over time

Simplest way to explain animation is that it is recording changes in value over time. Usually for beginners if the animation doesn't work, it’s either because they changed the value and not the time or changed the time and not the value. It has to be a combination of both. The playhead position indicates where certain changes are occurring along the timeline.


Timeline

Press Home (or Fn-left arrow) to make sure the playhead is at the start of the timeline.

Press ‘A’ or click to arm the Record animation button in the transport section.

Fig. 9 record animation.

Fig. 9 record animation.


Type on numeric keypad 1.00 to move playhead by 1 second.

Drag on rotation handle to open door to desired angle.

Press Home (or Fn-left arrow) to rewind and press Space bar to watch your animation play back.

Fig. 10 door opens.

Fig. 10 door opens.


Interpolation

By default, the animation is more mechanical in nature. The door opens and stops at the same rate. If we want the door to slowly open and then to slows down as the swing comes to a stop, we have to change the interpolation.


Keyframe editor

This is the hidden section of the interface we use to control and edit the way our animation occurs.

To access it, press Command-8 or go to Window > Keyframe Editor.

Fig. 11 keyframe editor.

Fig. 11 keyframe editor.


The keyframe for the Rotation Y property is indicated by the white line on the graph showing a constant movement.

By right-clicking on the keyframe (diamond) the drop-down menu shows various keyframe editing options. In this case, we can ‘Ease Both’ to simulate a gradual start and stop. We get more of a curve in the line, referred to as an ‘S’ curve sometimes.

Fig. 12 ease both.

Fig. 12 ease both.


Practice

Using the same rectangle drawing technique and keyframing you should be able to create and show a window animation from closed to open. Here I created the same shapes as the door but at the size of a window. I duplicated to have two open windows. I used the Line tool (found below the Rectangle tool) to create the window bars by positioning them like a cross. Windows will open in opposite directions, if rotation for one side is 45, then it will be -45 for the opposite window.

Fig. 13 The closed window.

Fig. 13 The closed window.


Fig. 14 Opening the window.

Fig. 14 Opening the window.


Conclusion

Drawing from the analogy of hand animation, when we come to Motion we do not need to create every frame of animation. We tell Motion where the keyframes will be, much like senior animators at Disney, and like a junior animator, Motion fills the in-between frames. This process certainly saves us time and make our workflows much more efficient.


Kiri C. Roberts

Kiri C. Roberts | Articles by this author

Kiri C. Roberts Kiri's journey started in Zimbabwe as a musician who had passion for computers. When he had opportunity to study in England he pursued a masters in audio production (Unvi. Of Westminster), and soon his interest gravitated towards sound design for film. He immediately latched on to Final Cut Pro version 2 as an editing tool and has been cutting video ever since. With his background in music, Logic Pro, Pro Tools and Soundtrack Pro became a staple in his tool set. The fascination in making things move on screen, especially to music and sounds made learning animation an enjoyable experience whether he's using Motion, Autodesk Smoke or After Effects. Kiri is right at home and can relate to composing music as much as compositing graphics or video - its all about blending elements that work well together - is his philosophy. He has pleasure in sharing knowledge as an Apple Certified Trainer and Smoke Trainer teaching across the USA at colleges, universities and training centers. He is also the founder of the Apple Trainers Worldwide - a group that has nearly 230 Apple Trainers from all across the world.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2014 macProVideo.com
a division of NonLinear Educating Inc.
Link