Step 1: Prepare an image
When using bitmaps in Flash you should first resize any images you are going to use to the maximum dimensions you will want the images displayed in your movie. Your goal is to make your published file as small as possible without distorting the image. In the example, I resized the photograph to match the dimensions of the Stage. Use an image-editing program such as Photoshop or Fireworks to resize the image. Flash can import a variety of bitmap formats, including PSD, PNG, BMP, JPEG, and TIFF.
Step 2: Create a document
Create a new Flash document. In the Properties panel click the Size button. The Document Properties dialog will open. Enter values for the width and height in the Dimensions field. Choose a background color from the pop-up color swatches. Enter 15 in the Frame rate field and click OK.
Step 3: Import an image
Choose File > Import to Stage. Locate and select the image you want to import and click Import. The image will appear on the Stage and in the Library. If the image isn't centered on the Stage, use the Align panel, Command-K (PC: Control-K) to center the image. Rename layer 1 "image". Insert two new layers. Rename the top layer "actions" and the middle layer "text".
Step 4: Add text
Click on the text layer to select it. Click the Text tool in the Tools panel. In the Properties panel choose Static Text and choose a font and font size. Type a greeting. Switch to the Selection tool (V) and position the text where you want it to appear on the Stage.
In the example, the text is hard to see because of the background. We'll fix this in the next Step.
Step 5: Make the text stand out
Control-click (PC: Right-click) with the Selection tool on the text. Choose Convert to Symbol from the menu. In the Convert to Symbol dialog, enter "text" in the Name field and choose Movie clip for the Type and click OK. Double-click on the Instance of the text to edit its Timeline. Insert a new layer. Drag the layer below Layer 1 and rename it "background". Lock "Layer 1".
Select the Rectangle tool. Open the Color Mixer panel, Window > Color Mixer. Click the Pencil and choose the red diagonal line from the pop-up swatches: this turns off the stroke. Click the Paint Bucket. Choose a color from the color band or pop-up swatches. Enter 80 in the Alpha field. Draw a rectangle on the background layer behind the text.
Step 6: Use a blend
The text is easier to read, but we'd like a more subtle effect. Switch to the Selection tool (V). Control-click (PC: Right-click) on the box you drew. Choose Convert to Symbol from the menu. In the Convert to Symbol dialog enter "box" in the Name field and choose Movie clip for the Type and click OK. Select the Instance of the box. In the Properties panel select Darken from the Blend menu. Click the Scene 1 button to return to the Main Timeline. Adjust the position of the Instance of the text if needed.
Step 7: Add a mask
Insert a new layer above the "text" layer. Rename the layer "mask". Select the Oval tool and draw a circle without a stroke over part of the image. The color doesn't matter. Control-click (PC: Right-click) on the "mask" layer. Choose Mask from the menu. The "mask" and "text" layer's icons will change and the layers will be locked. Next, click-and-drag the "image" layer to the right and beneath the "text" layer. This applies the mask to both the "text" and "image" layers. Only the part of the picture beneath the mask should be visible.
Step 8: Animate the mask
Now it's time to animate the mask and reveal the announcement. Unlock the "mask" layer. Switch to the Selection tool (V). Control-click (PC: Right-click) on the oval you drew. Choose Convert to Symbol from the menu. In the Convert to Symbol dialog, enter "mask" in the Name field and choose Movie clip for the Type and click OK.
Step 9:
Before we animate the mask, we need to extend the Timeline and add a Stop Action to keep the final movie from looping. Extend the Timeline by selecting Frame 15 in all of the layers. Press F5. Click in Frame 15 of the "actions" layer. Add a Keyframe by pressing F6. Open the Actions panel, Window > Actions. Hold down the plus sign and choose Global Functions > Timeline Control > Stop.
Step 10: Finish the animation
Select Frame 15 of the "mask" layer. Press F6 to insert a Keyframe. Switch to the Free Transform tool (Q). Resize the oval so that it covers the Stage. You may want to click on the Outline button on the "mask" layer so that you can view the oval's outline as you resize it. Control-click (PC: Right-click) on Frame 1 of the "mask' layer and choose Create Motion Tween from the menu. Lock the "mask" layer. Choose Control > Test Movie to see the results.
Step 11: Adding a control
Click on Frame 1 of the "actions" layer. Open the Actions panel, Window > Actions. Hold down the plus sign and choose Global Functions > Timeline Control > Stop. Adding this action prevents the movie from playing until the viewer clicks a button.
Insert a new layer above the "mask" layer. Rename the layer "button". Insert a Keyframe in Frame 2 (F6). Drag an Instance of the "oval" on to the Stage and position it over the masked area. Control-click (PC: Right-click) on the oval. Choose Convert to Symbol from the menu. In the Convert to Symbol dialog enter "invisible" in the Name field and choose Button for the Type and click OK. Double click the button to open its Timeline. Click and drag the Keyframe (black circle) in the Up state to the Hit state. Click the Scene 1 button to return to the Main Timeline.
Select the button and open the Actions panel. Choose Global Functions > Timeline Control > Play. Choose Control > Test Movie. Click the flowers to play the movie.
Courtesy of Layers magazine.
