In this Motion^R tutorial, we will create and animate a mask that will reveal a graphic in our whiteboard animation. We have already drawn the Bezier path in the last tutorial, so this should be easy.

We will duplicate the Bezier_Logo path that we drew previously and turn the duplicate in to a mask over the logo. Because the path is the same color as the background, it hides the logo underneath until we animate the mask to reveal the logo.

1. Right-click on the Bezier_Logo layer in the Layers pane. From the menu, choose Duplicate. Drag the duplicate Bezier_Logo copy layer into the Logo group and place it above the Logo graphic layer.
   
   
2. Turn off the visibility of the original Bezier_Logo layer.
   
   At this point, the Bezier path has a width of 10 pts. That's the default setting and we can see the white path above the Logo. But we need this path to hide the Logo. So, we need to increase the width of the path.
   
   
3. Select the Bezier_Logo copy layer and go to the Inspector (Inspector - Shape - Style ). In the Outline section, increase the Width until the Logo is hidden.
   
   Now let's tell Motion to use this Bezier_Logo copy layer for the Image Mask that will hide the Logo.
   
   
4. In the Layers pane, right-click on the Logo graphic layer and choose Add Image Mask from the menu. You should see a new Image Mask layer.
   
   
5. Drag the Bezier_Logo copy layer into the new Image Mask Layer.
   
   As with the Motion Path and Bezier_Logo tracks, we want the Image Mask track to span the Timeline from 00:00 to 02:00.
   
   
6. In the Timeline, drag the right edge of the Image Mask to the 02:00 mark.
   
   Now we need to use two Keyframes on the Timeline to animate the Image Mask.
   
   
7. With the Playhead at the beginning of the Timeline, select the Bezier_Logo copy layer in the Layers pane. Go to the Inspector ( Inspector - Shape - Style - Outline) and set the Last Point Offset slider to zero. Click the diamond-shaped icon to the right of the slider to add a Keyframe to the Timeline.
   
   
8. Move the Playhead to the 02:00 mark on the Timeline. Move the Last Point Offset slider back to 100. You should automatically get a second Keyframe on the Timeline.
   
   

Test your animation. You should see the arm move to the Logo and draw it on the screen. When finished, the arm should move back to the beginning position.

That's the basic parts to building a whiteboard animation. In the next tutorial, we will learn how to make the hand write over text that's on the screen.

← Back | Next →

Tutorial Example:


Apple, Motion, iBooks Author, GarageBand, TextEdit, Pages, iMovie and Mac are trademarks of Apple Inc., registered in the U.S. and other countries.
BellaOnline is an independent publication and has not been authorized, sponsored, or otherwise approved by Apple Inc. Screenshots used by permission.
Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.