Animating a Heart Beat in Motion
For some reason, we seem to get a lot of people coming to the site looking to draw a heart beat. I haven't the foggiest idea why, but I'm glad – it's one of those examples where Motion can make your life a lot easier.
This is what we're setting out to make today; you can dress it up however you'd like, and you can even use a shape that looks more like a "real" heartbeat than the one I drew. We'll do a couple of approaches -- one is quick, the other is better-looking.
This is what we're setting out to make today; you can dress it up however you'd like, and you can even use a shape that looks more like a "real" heartbeat than the one I drew. We'll do a couple of approaches -- one is quick, the other is better-looking.
Step-by-Step
The Quick Approach
With this approach, we try to simulate the "light trace" of a stereotypical heart monitor: a bright point at the beginning of the line, then a gradual fade out as that point moves away. It's a little less intuitive than animating the path offsets, but animating the path's color mapping will allow you much more sophisticated control over the path. You could do something similar (and even more sophisticated) with a particle emitter and a Motion Path behavior, but let's not get too crazy ...
...And for making it all the way to the end, here's a bonus: the Motion 3 project file I generated as I was working on these screenshots. Feel free to poach as you see fit, although at your own risk obviously.
Beef up your Motion skills at one of our 2- or 3-day advanced Motion classes – or, if this is all a little overwhelming, we'll ease you up to speed with one of our introductory Motion training classes. We'll teach at our place in Orlando or on site at your office – (866) 566-1881 for more info, or use the links at the very top of the page.
- Use
the Create Bezier Tool to draw the entire contour of the heartbeat.
When you've finished drawing the line, press Return to "lock in" the
open shape (don't close the shape by clicking on the beginning point as you would normally do).
- Be
sure the horizontal portions of the line are at exactly the same
vertical position. Notice that as you click and drag a control point,
Motion displays the coordinates of the point in a translucent grey box
immediately above your cursor. You want the Y-value (the second
number) to be the same for the straight portions. This will make it
considerably easier if you feel the need to have more than a single
heartbeat lined up beside each other.
The Quick Approach
- You'll
want to animate the Start and End Offsets of your path to simulate a
drawing on/drawing off motion. Press the Record button to turn
keyframing on.
- Be
sure the Shape Inspector is active. Move your playhead to the
beginning of your heartbeat, and adjust the Last Point Offset to 0%.
This places a keyframe.
- Move your playhead to the end of your heartbeat, and adjust the Last Point Offset to 100%.
This
has drawn your heartbeat onto the screen. If you want to also have it
draw off of the screen, you'll animate the First Point Offset in a very
similar manner to the way we just did the Last Point Offset, except
that you'll probably want to stagger where you place the keyframes.
- Improve the visual quality of the heartbeat: maybe turn it green and throw a glow on.
With this approach, we try to simulate the "light trace" of a stereotypical heart monitor: a bright point at the beginning of the line, then a gradual fade out as that point moves away. It's a little less intuitive than animating the path offsets, but animating the path's color mapping will allow you much more sophisticated control over the path. You could do something similar (and even more sophisticated) with a particle emitter and a Motion Path behavior, but let's not get too crazy ...
- Change the Brush Type mode of the Outline
to Airbrush. Now, go to the newly-enabled Stroke subinspector and
change the Stroke Color Mode to Color Over Stroke.
- Untwirl
the Opacity Over Stroke color picker, and set up the color mapping how
you're going to ultimately want it. My suggestion is in the screen
capture below. Remember, the bottom handles in a gradient editor
correspond to the color at that point, while the top handles correspond
to the opacity (transparency) at that point.
Notice
that the heartbeat is partially visible in your Canvas. If this is a
problem, I'd suggest adjusting the First Point Offset and Last Point
Offset (like in the Quick Method) instead of trying to fiddle with
animating the stroke gradient completely on- or off-screen. - Move your playhead to the beginning of your heartbeat, and add a keyframe to the gradient.
- Move
your playhead to the end of your heartbeat, and add a keyframe to the
gradient. Now, shift all of your control handles to the right-hand
side of the gradient.
- Fiddle until you're happy: maybe throw a glow on there or something?
...And for making it all the way to the end, here's a bonus: the Motion 3 project file I generated as I was working on these screenshots. Feel free to poach as you see fit, although at your own risk obviously.
Beef up your Motion skills at one of our 2- or 3-day advanced Motion classes – or, if this is all a little overwhelming, we'll ease you up to speed with one of our introductory Motion training classes. We'll teach at our place in Orlando or on site at your office – (866) 566-1881 for more info, or use the links at the very top of the page.
Listed below are 0 links to blogs that reference this entry: Animating a Heart Beat in Motion.
TrackBack URL for this entry: http://www.geniusdv.com/weblog/mt-tb.cgi/1397
Leave a comment