Creating a Heartbeat Animation (Electrocardiogram) in Flash
By Dr Diablo | Flash CS3 | BeginnerThis tutorial is going to show you how to create a heartbeat electrocardiogram animation just like the ones that are generated in medical observation equipment. The idea behind this tutorial is based on a masked motion tween that is duplicated several times. Of course this heartbeat animation is not exactly realistic in terms of a normal human heart, but you are going to learn the concept of creating such an affect through out the tutorial just like in the example below.
Start off with a 550x400 px new document, set the background color to white #FFFFFF and the frame rate to 32 fps.
Creating the Basic Shapes
From the Tools Panel on the left side of your interface, grab the Rectangle Tool and draw a thin vertical rectangle across your canvas. Move the object far to the left outside the canvas as shown in the screenshot below.
From the Layers Panel on the top, create a new layer through the Insert Layer button, and place it below the first layer that has our rectangle on.
Now we are going to draw the base shape of which the heartbeat would look like, you can get creative with any heartbeat sequence you want. Using the Line Tool, draw straight lines connected each other to create your shape. Here is what mine looks like.
Adding Animation
This step is going to create a simple Motion Tween that moves the rectangle from left to right so that we could apply masking on both layers and have our heartbeat animation ready. On your Timeline, go to frame 100 in Layer 1 which has the rectangle and right click. Choose Insert Keyframe from the menu to create another rectangle on frame 100. You can reduce this frame number if you want your animation to go faster, the lower the ending frame is, the faster the animation will play.
While keeping that keyframe selected, move the rectangle all the way to the far right side outside the canvas. Now that we have just set the starting point and the finishing point of our animation, we are going to tween it. From the Timeline again, click on layer 1's Frame 1, hold Shift and click on frame 100 of the same layer. You have now selected all the frames between 1 and 100, right click your selection and select Create Motion Tween.
(click to enlarge)
To wrap the animation up, go to frame 100 on Layer 2, right click and select Insert Frame. This will increase the visibility duration of the Keyframe in Layer 2 to stay available till the animation is over which is at Frame 100.
Masking
As the rectangle moves horizontally along its path, masking it with the structural shape of the heartbeat will make the lines of the structure appear as the animation moves along its path, this method is an example of masking animation at its simplest. From the Layers Panel right click on Layer 1 and select Mask.
You can now test your animation by pressing Ctrl+Enter to see how it looks like so far. We are going to add a trial as a final touch to our heartbeat to enhance the way it looks.
Adding Fading Trails
Over here we are basically going to copy the same exact animation three times and give each one frame delay from the animation before it. Create two New Layers above the existing ones. Select the entire frames on our first two layers by Double Clicking on one of the corners and Dragging the selection over the entire area of frames. While the selection has been made drag the selection box while holding Alt onto the new two layers you created and make sure that the left end starts at Frame 2 of the timeline.
Click on the second layer from the top (the new layer that contains our heartbeat's base shape). Click on its only Keyframe and press F8 to convert it into a Graphic symbol.
On the Properties Panel at the bottom, select Alpha in the Color drop down menu and set its value to 75%.
Now if you test your animation your going to slightly notice the first line which has an alpha of 100% and the one behind it with 75% alpha. Repeat the same process twice more and change the alpha rates to 50% and then 25% while keeping in mind that the third stroke of trial should start at Frame 3 and the second one would start at Frame 4. Your final results should like this.
This concludes our tutorial, I hope that you learnt something new from it, feel free to email me on diablo@oman3d.com for any comments or questions or alternatively post in the Oman3D Forum to get instant feedback.
- End of Tutorial.