HOME  â€¢  SYLLABUS/SCHEDULE  •  ASSIGNMENTS  â€¢   COURSE RESOURCES   •   YOUR PAGES   •   YOUR FEEDBACK

 

 

Flash Basics: How to Make an Image Mask

 

What's an image mask?

 

Well, in Flash (or in any number of other applications) we may want to cut out an image in the shape of a rounded rectangle, or a peach, or a bit of visual viscera, or whatever. You want to make a MASK, so you don't have to make that shape in Photoshop, and cut 14 images to that particular shape.

 

So, let's make a mask in Flash. We will import a bunch of images (just normal rectangle-shaped bitmap images) into Flash, then we will create an image mask in Flash that will act like a cookie-cutter—it cuts the image out with the shape we design.

 

Open the Flash file you've been working on recently, this one (it has a preloader attached, but not a problem).

 

Under the Insert menu, select New Symbol. Select Graphic Symbol, and name it ImageMask.

 

 

Click on the Rectangle icon on the toolbar, and hold until you can select Rectangle Primitive. Select Rectangle Primitive. Click an drag to create a rectangle (any size, color, shape) within the ImageMask symbol.

 

 

 

In the Properties Bar, make the rectangle you just drew 262 wide by 290 height. Make the color red, and the curve of the rectangle 38 ( like the background graphic we created in a previous tutorial).

 

 

Here's what that should look like:

 

 

 

Double-click on your interface clip in the library. Add a layer ABOVE the Image Content layer, and name it Image Mask.

 

 

Double-click on the Layer Properties icon just to the left of the name of the Image Mask layer. In the window that pops up, click on the Mask radio button.

 

(Note that the icon for the Image Mask layer has changed . . . )

 

 

 

 

Double-click on the Layer Properties icon just to the left of the name of the Image Content layer. In the window that pops up, click on the Masked radio button.

 

 

 

Select the Image Mask layer, and unlock it (you might want to lock the other layers). From the library, drag an instance of the Image Mask symbol in the Library to the editing area, centering it on the left side of the Background. This is where your images (once the mask is applied) will appear.

 

 

 

 

 

 

 

Now we're going to need a bitmap graphic (1 or more). Go to Google Image Search, or grab something from your collection of bitmap images. Make the image  about 480 pixels wide by 600 pixels high, at 72 dpi (in Photoshop, select Image > Image Size to change anything you need). If you don't have an image handy, download this one to your desktop.

 

Back in Flash, select File > Import > Import to Library . . . 

 

 

 

Select your image (or the sample one you may have just downloaded), and click on Import to LIbrary. This will embed your bitmap into your Flash project.

 

 

You should see your bitmap now in the Library. Its icon is a green tree, and it will be named identically to your file.

 

 

 

Remember, this bitmap IS NOT A SYMBOL, so we can't apply instance-based property effects to it (like opacity), and we can't even edit it in its current state. To do that we need to place a copy of the bitmap into a Graphic symbol.

 

So, let's make one. You should be a champ at making graphic symbols by now—under the Insert menu, select New Symbol. Select Graphic Symbol, and name it superhero symbol:

 

 

Select TestImageSuperDood.jpg in the Library, and drag it into the superhero symbol editing area. In the Align window, select To Stage, and align the bitmap to left and top (like almost everything else we've done so far . . .):

 

 

 

 

Take note of where we are (we are editing the graphic symbol superhero symbol), and when you select the cursor tool and click on the image, you should see this in the Properties bar: 

 

 

Now, back to the Interface Clip (double-click it in the Library). Select the Image Content layer, making sure it is unlocked (you can lock all the other layers if you like). Click anywhere in that 'page 1' keyframe area.

 

 

 

Drag an instance of the superhero symbol (graphic, in the Library) to the editing area, and drop it. Notice it's bigger than the masked area, so we want to scale the graphic. When we scale this instance of the graphic, it will not change the size of the bitmap we imported earlier—we're only changing the properties of this one instance.

 

 

Click on the Transform Tool in the Toolbar (third tool from the top), hold down the shift key, and drag one corner of the graphic toward the center, to resize the graphic. You can also change the size by selecting the cursor tool, clicking on the graphic, and changing the x an y percentage in the Transform window.

 

<NEED SCREEN SHOT>

 

You'll notice you still see the outline of the mask above the image, which is not too useful. 

 

 

If you test the movie now, however, you will see the mask applied as we intended. If you want to see the mask WHILE YOU'RE EDITING YOUR FLASH MOVIE, simply LOCK both the Image Mask and Image Content layers:

 

 

Repeat with other graphics so the image changes when we change the page and the text, too. 

 

You may want to work with the Image Mask layer Locked and the Outline Mode selected (right next to the lock on the layer). That way, you can see where the mask will be on the image while you adjust the placement of your images:

 

 

 

 Here's the final .fla file for this tutorial.