logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Folklore and Mythology
Baptist
Florida
Cosmetics
Distance Learning
Reading
Crochet


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

Whiteboard Video Scribe Animation - Bezier Path


In this tutorial, we will continue to build a simple whiteboard video in MotionR. The next step is to draw the Bezier path that is the basis of the animation.

You will be drawing a Bezier path that will control the movement of the hand. A duplicate of this Bezier path will be used to create the mask that will hide the graphic that is being drawn on the screen and reveal it as the arm passes over. Because the mask is created from a duplicate of the Bezier path that the hand will follow, the result is a simulation of the hand drawing on the screen.

Before we draw the Bezier path, we need to adjust the anchor point of the Hand graphic. Be default, Motion puts the anchor point in the center of the graphic. But this anchor point will be what follows the path. We don't want the center of the arm to draw on the screen. We want the tip of the pencil to draw on the screen. Let's fix this.

  1. Select the Hand graphic and then select the Anchor Point tool. Use the Red and Blue arrows to place the anchor point over the tip of the pencil.

    Now we get to that good part.

  2. Select the Hand graphic layer and then select the Bezier tool. Place the first Bezier point over the tip of the pencil. Next, move over to the Logo and draw a zig zag path over the Logo. Finally, go back to the Hand and add the last point. Do not close the path.

  3. To tell Motion that you are finished drawing the Bezier path, select the Select/Transform tool. You will get a new Bezier layer in the Layers pane. Drag this new layer under the Hand layer and rename it "Bezier_Logo" because this is the Bezier path for drawing the logo image.

    Now that we have the Bezier path, we can add the Motion Path behavior to the Hand graphic. This behavior is what will cause the hand to animate. But we want the hand to follow the Bezier_Logo path. So we will tell Motion to use the Bezier_Logo path for this Motion Path behavior.

  4. To add the behavior to the Hand graphic, select the Hand graphic layer in the Layers pane. From the Behaviors menu at the lower right, choose Motion Path. You will see a new Motion Path layer added below the Hand layer.

  5. Select the Motion Path layer and go to the Inspector (Inspector - Behaviors - Motion Path). Set the Path Shape menu to Geometry. Uncheck the Attach to Shape option. Go back to the Bezier_Logo layer in the Layers pane and click/drag over to the Shape Source well. When you see the small arrow, release your mouse.

    With the Playhead still on the first frame, test the animation. If the pencil doesn't directly follow the path, make adjustments to the anchor point at the tip of the pencil as needed.

    Does the hand seem to draw a little to slowly for a whiteboard animation? Well, we can speed it up by shortening the Motion Path and Bezier_Logo tracks in the Timeline.

  6. Go to the Timeline and find the purple colored Motion Path track. Drag the right edge to the path track to the left until it is at the two second position on the Timeline (02:00). Repeat this for the Bezier_Logo track.

OK, it's time for a coffee break. In the next tutorial, we will create the mask that reveals the logo.

← Back | Next →

Tutorial Example:

Join us in the Animation forum. | Join us in the Digital Art forum.

|




Add Whiteboard+Video+Scribe+Animation+%2D+Bezier+Path to Twitter Add Whiteboard+Video+Scribe+Animation+%2D+Bezier+Path to Facebook Add Whiteboard+Video+Scribe+Animation+%2D+Bezier+Path to MySpace Add Whiteboard+Video+Scribe+Animation+%2D+Bezier+Path to Del.icio.us Digg Whiteboard+Video+Scribe+Animation+%2D+Bezier+Path Add Whiteboard+Video+Scribe+Animation+%2D+Bezier+Path to Yahoo My Web Add Whiteboard+Video+Scribe+Animation+%2D+Bezier+Path to Google Bookmarks Add Whiteboard+Video+Scribe+Animation+%2D+Bezier+Path to Stumbleupon Add Whiteboard+Video+Scribe+Animation+%2D+Bezier+Path to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Flash and Animation Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2015 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

g


g features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2016 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor