Valentine's Day is just around the corner! If you are like me and don't feel like wasting time drawing little hearts with the pen tool, this tutorial is for you. We will take a look at how to make hearts the easy, drag-and-drop way, and what's more, we will even turn them into the animated card seen below. V-day doesn't get any easier than this, really.

Overview 

This exercise is comprised of the following steps:

1. Making the two Hearts
2. Setting up the animation
3. Adding static elements and export
4. Where to go from here  

Making the two Hearts 

1. Start with a 208x208 white canvas, and then open the Auto Shape panel: Window >> Auto Shapes.
2. Select the Heart Auto Shape, drag an instance of it onto the canvas.
   



3. Align the object right in the center of the canvas, either using the align panel or the smart guides.
4. Clone the heart object: Edit >> Clone (Ctrl+Shift+D).
5. Click on the left-side handle that has a label: Breadth: 30 and drag the cursor slightly leftward to increase it to 34.
   



6. Select both Auto Shapes and ungroup them: Modify >> Ungroup (Ctrl+Shift+G)
7. Open the Styles panel: Window >> Styles (Ctrl+F11) and select Plastic Styles from the dropdown menu. Click the leftmost style in the first row to have the style applied to both paths.
   

Setting up the animation 

1. Open the Path panel: Window > Path, and click the Blend Paths tool. Specify the number of steps (8) and click OK; then click No to decline the program's offer to flatten the intermediate images.
   
   
   Make sure that both objects are still selected for this command to work.
2. Ungroup the resulting groups twice.
3. Open the States panel: Window >> States and with all objects selected, click the Distribute to States button.
   



4. Play the animation; the heart should be smoothly expanding as seen on the first image.

Adding static elements and export 

1. Now we are going to place static elements: the frame and text. First make sure you are in the first state of the animation, and then click the New/Duplicate Layer button found in the lower left corner of the Layers panel. 
2. Right-click the panel's header and select Share Layer to States from the resulting dropdown menu. This ensures that whatever we place in this layer will be statically present throughout the entire animation. Click Yes to close the warning window.
   



3. Select the Rectangle tool from the Vector panel and draw a 150x150 rectangle. Use Smart Guides to drag it right in the center of the canvas, or just enter 29 for both x and y coordinates in the Property Inspector.
   Don't use the Align panel for this task, as it will likely move the first instane of the heart object as well.
4. Give the rectangle a 1-pixel smooth stroke of #E83131 but no fill.
5. Select a fancy font (I used Gigi, 15pt, red) and write your text of choice below the frame. If necessary, duplicate the text for a stronger effect.
   



6. Click Ctrl+Shift+X to bring up the Export Preview window. Specify Animated GIF as the type of file, set additional settings as you see fit and click export. Bingo, you made a simple but beautiful Valentine's Day card in just a few minutes! Congratulations!

Where to go from here

In this exercise you have seen how the clever use of auto shapes and preset styles can give you great-looking results quickly and easily. It's also an example of animating by autoshape manipulation, one of the simplest but surprisingly effective ways of animating in Adobe Fireworks.

To  take this knowledge to the next level, try animating other auto shapes on your own. Once you are familar with that, you can also combine auto shapes this way - the limit is only your imagination!