Creating a Composite Motion Image with Macromedia Flash MX 2004

The Flash video format allows developers to create impressive presentations and films with a file size that is only possible through the use of vector graphics. Macromedia Studio MX 2004, which includes Flash MX, is the leading development suite for creating such movies. While Flash was originally developed for use in web pages, its compatibility with a variety of formats has made it useful outside of the web browser.

This tutorial will show you how to create an animated composite motion image using Macromedia Flash MX 2004. In this type of image, each frame of the movie clip leaves behind a "ghost" showing the position of an object at that moment in time.

Adding the Background Movie

Start Macromedia Flash MX 2004. A new blank project will appear on the screen when the program has finished loading.
Look for the Properties pane on the very botton of the Flash workspace. Click on the Size button, which should be preset to the default value of 550 × 400. The Document Properties window will appear.
In the Dimensions text boxes, type the width and the height of the original video clip (in pixels).
In the Frame Rate text box, type the desired frame rate of the final composite video.

Note: Flash has a maximum frame rate of 120 frames/second. If the frame rate of your original video clip is higher than that speed, you should adjust the frame rate of the Flash video so that the original frame rate is a multiple of the Flash frame rate.

For example, if the original video clip has a frame rate of 500 frames/second, you should set the Flash frame rate to 100 frames/second. In this case, you would treat each single frame in Flash as if it were five frames in the original video clip.

Click the OK button to close the dialog box. The Properties pane will be updated to reflect the changes you have made.
Under the File menu at the top of your screen, choose the Import... option.
Using the Import dialog box that appears, locate the original video clip that you would like to use as the background of your composite image. Click the Open button to add it to your workspace.
The Import Video Settings dialog box will appear. To minimize the effects of compression, move the Quality slider all the way to the right to 100. Do the same with the Scale slider. Make sure the Number of video frames drop-down menu is set to 1:1, and click the OK button to continue.
The video clip will appear automatically in your workspace. Near the top of your Flash window, locate the Timeline heading. Look for a row named Layer 1, and right-click on it. From the drop-down menu that appears, click the Properties... option.
In the Layer Properties dialog box that appears, replace the text in the Name: text box with the word Background to avoid future confusion. Also, click the Lock check box to prevent you from accidentally changing the background layer or the movie. With these options set, click the OK button to return to your workspace.

Adding the First Frame to your Composite

Under the Timeline heading, click on the Background layer name to select it. The entire row should turn black.
Click on the button at the bottom of the Timeline pane to add a new layer on top of the Background layer. You may change the name of this layer to something more descriptive, if you wish, by following the same procedure as you did with the original layer; but be sure not to check the Lock option if you do.
Using the [,] and [.] keys on your keyboard to step frame-by-frame through the imported movie, locate the frame where you want the composite motion image to begin. This should be the frame just before when the featured action starts, while the target is still in its original position. The red marker in the Timeline pane will show your position in the original movie.
Right-click at the point in the layer that you are editing where the red marker is located. From the drop-down menu that appears, click Insert Keyframe. The frame where you right-clicked should now contain a small circle.
Use the numbered ruler at the Timeline pane to determine the number of the frame at which you have set this keyframe. Open Adobe Photoshop (or a similar image editor), and load the image that corresponds to this frame number.

Note: If the frame rate of the Flash project and the frame rate of the original video clip are not equal, you will need to multiply (or divide, in some cases) the Flash frame number by a given factor to determine the corresponding frame number in the original video clip.

In the example used earlier, since the Flash movie has 1/5 the frame rate of the original clip, we would need to multiply the Flash frame number by 5 to obtain the original frame number.

Using the Crop tool (denoted by a on the Tools window), click and drag a box around the object that is the focus of your composite image, leaving out as much of the background as possible. Press the [Enter] key to crop the image.
Under the File menu at the top of the screen, choose Save As... to save the edited image. After the image is saved, you may exit the image editor and return to the Flash workspace.
From the Flash workspace, under the File menu, choose Import.... Using the Import dialog box that appears, locate the image that you just created on your hard drive, and click the Open button to have it appear in your workspace.
With the newly-added image selected, choose the Trace Bitmap... option under the Modify menu.
The Trace Bitmap window will appear.

If the image you are using has a low contrast between the background and the foreground, type a value around 10 or 15 in both the Color Threshold and Minimum Area text boxes. For higher contrast images, values between 25 and 30 will work.

If you the image is detailed or complex, choose Tight or Very Tight from the Curve Fit drop-down menu, and then choose Many corners from the Corner Threshold menu. For simpler images, choose Smooth and Few Corners, respectively.

Verify the choices you have made, and click the OK button.
After clicking the OK button, your image will be covered in a white-dotted pattern, and some of the detail will appear to be lost. This is normal. Under the View menu, click Zoom In until your image fills as much of the workspace as possible.

Note: To make the new image easier to see, you may want to hide the background. To do this, click the black dot under the icon in the upper-left corner of the timeline. It should change to a , and the video background should no longer be visible in your workspace. To make it visible again, click the that just appeared.

Click inside a blank area of your workspace to remove the dotted pattern from your image. Then, click the icon in the Tools pane to switch to the Eraser tool. Using the drop-down menu under the Options heading of the Tools pane, choose the size and shape of your eraser.
At this point, you will begin to remove all but the object of focus from the image you have added. There are two ways of doing this.

Faucet Tool

Under the same Options heading where you chose the shape of your eraser, click the button to activate the Faucet tool. To use this tool, click on any solid area of color in your frame to erase it. Do this repeatedly to remove as many large areas of color as you can.

Manual Erase

Your cursor will take the shape of whatever eraser you have chosen. Move your cursor over your image, and - while holding the left mouse button down - "brush" over the areas that you wish to erase. Those areas will turn white. Upon letting go of the mouse button, the areas that you have erased will be smoothed out automatically. To erase narrower areas, switch to a smaller brush size or a different shape.

Using a combination of these two techniques, erase as much of the background as possible from your image so that only the object of focus is visible.

Note: If you have hidden the background to help you edit the image, now would be a good time to make it visible again.

In the Timeline pane at the top of your screen, click on the name of the layer containing the image that you just edited. The dot pattern will once again appear over all the areas that you have not erased. Click and drag the highlighted area, moving it to the point on the background where the object of focus is located. If this is done correctly, your workspace should look almost exactly like the original movie clip. You will not be able to distinguish between the added frame and the video background.
With the image still selected, click on the Insert menu at the top of the screen, and choose Convert to Symbol....
In the Convert to Symbol dialog box that appears, type a descriptive name for the image in the Name: text box. Make sure that the Graphic radio button is selected under the Behavior: heading, and click the OK button.
If done correctly, your image will be outlined in blue. You have now completed your first composite motion frame.

Note: If you would like to add additional moving images to the current frame in your composite, re-open the original image in your image editor, and repeat steps 6-17 for the new object of focus.

Adding an Additional Frame to the Composite

Under the Timeline heading, click on the name of the frame that you just finished editing. The entire row should turn black.
Click on the button at the bottom of the Timeline pane to add a new frame on top of the previous one. Change the name of this frame to something more descriptive, if you wish.
Using the [,] and [.] keys on your keyboard to step frame-by-frame through the background movie, locate the point where you wish to add the new frame to your composite. Try to keep the interval between the new frame and the previous frame constant to give a feeling of acceleration in the finished product.
Right-click at the point in the current layer where the red marker is located. From the drop-down menu that appears, click Insert Keyframe. The frame where you right-clicked should now contain a small circle.
Follow steps 5-17 of Adding the First Frame to Your Composite to add the motion content to the new frame. When cropping and erasing from any frames that you import, you may want to hide all previous frames - in addition to the background movie - to make editing much easier.

Exporting and Publishing Your Composite

After adding all frames to your composite, under the File menu at the top of the screen, choose Export Movie....
The Export Movie dialog box will appear. Locate the directory on your computer where you wish to save the exported movie, and give the movie a name by typing it in the File name: text box. Finally, choose a format for the movie (such as Windows AVI, QuickTime Movie, Animated GIF, Bitmap Image Sequence, etc.) using the Save as type: drop-down menu. Verify the selections you have made, and click the OK button.

The options that appear will differ for each of the formats to which you export.

Flash Movie (*.swf)
From the Load Order: drop-down menu, choose Bottom Up to ensure that the background of your movie loads before the individual frames.

Under the Options: heading, uncheck all options except Compress Movie, which will help the composite load faster if you embed it in a web page.

Type 100 in the JPEG Quality: text box to preserve the quality of each of your frames.

If your background movie contains audio that you want to preserve, the default options for Audio Stream: are sufficient. Otherwise, click the Set to display the Sound Settimgs dialog box, and choose Disable from the Compression: drop-down menu. Click OK to return to the main settings screen.

Repeat the previous step for the Audio Events: setting.

From the Version: drop-down menu, choose the latest version of Flash, i.e. the version with the highest number.

Verify all the selections you have made, and click the OK button.
Windows AVI (*.avi)

In the Dimensions: text boxes, type the original size of the Flash movie you created, or - if you would like to shrink or enlarge the video - type the desired size. Keep the Maintain aspect ratio box checked.

Choose the color depth of your composite using the Video Format: drop-down menu. More bits equates to more colors which equates to higher quality video at the expense of file size. In most cases, 16-bit color is sufficient, but for high-quality clips, a more detailed setting may produce better results.

If you would like to lower the file size of the final composite at the expense of some video quality, check the Compress video box.

If you would like to smooth out the edges of your composite movie, check the Smooth box to soften the overall look of the video in motion. This may, in some cases, cause a faint halo to appear around high-contrast boundaries.

Using the Sound format: drop-down menu, choose an option for the type of sound to be exported from your composite. Lower-quality options appear at the top of the list, while higher-quality options appear at the bottom of the list. As always, higher-quality sampling increases file sizes. If your composite movie does not feature any sound, choose the Disable option.

Verify all the selections you have made, and click the OK button.
QuickTime (*.mov)
Check the Match Movie box if you would like the size of the exported movie to match that of the original movie. If you would like the exported movie to be of a different size, uncheck that box, and enter the desired size in the Dimensions: text boxes.

Set the Alpha: and Layer: drop-down menus to Auto.

Uncheck the Use QuickTime Compression box.

Choose None from the Controller: drop-down menu.

Under the Playback: heading, check Loop if you would like the composite to play repeatedly after you open it. Check Paused at Start if you would like the movie to be frozen on the first frame until you hit the Play button. Because of the nature of composite motion video, check the Play every frame box.

Check the Flatten box to make your exported video self-contained.

Verify all the selections you have made, and click the OK button.
Image Sequence (*.bmp, *.jpg, *.png)
The default settings for creating an image sequence are sufficient in most cases, since they default to the settings that you use when making your composite. Simply click OK in the dialog box that appears to complete the process.

Note: Creating an Animated GIF (*.gif) or a GIF Sequence (*.gif) is not recommended since these image formats limit the maximum number of colors that the image can use, which will severely lower the quality of the final composite. However, if you require these formats, the default settings will suffice.

Your finished composite will appear in the folder that you specified in Step 2.