Start out by creating a simple mask in Flash:

~

~

1. Import an image to the first layer

~

2.Create a second layer above the one with the image on it.

~

3. Draw anything you want on the layer above the image.

(any filled shape, including groups, text, and symbols can be used as a mask)

~

4 Right-click(Windows) orControl-click (Macintosh) the mask layer’s name in the Timeline, and selectMask.Amask

layer icon indicates the mask layer. The layer immediately below it is linked to the mask layer, and its contents show

through the filled area on the mask. The masked layer name is indented, and its icon changes to a masked layer icon.

~

5 .Make sure the mask and the layer being masked is locked to see it’s effect (or publish the swf (Ctrl + Enter).

~

6. To mask more than one layer:

-either drag existing layers under the mask

-or create a new layer below the mask

~

7. To unmask a layer:

-drag the layer to be un masked above the mask

-sometimes you don’t want that layer above the mask and dragging it back under the mask without re-masking it won’t seem to work. In this case make sure the layer to be unmasked is below all the masked layers and:

> Modify > Timeline > Layer Properties, and select Normal.

~

-You can animate the mask itself or the layers under the mask using Motion or Shape Tweens which we did last week.

-You can also use actionscript to add interactivity to masks such as allowing the user to drag the mask around or move the contents behind the mask

~

Understanding the Alpha Channel (the “A” in “ARGB”)

~

I found the demo below at :

http://clockmaker.jp/blog-en/2008/11/rgb-image-separater-with-papervision3d/

(I hope the person who made it doesn’t mind me using it here)

~

~

-Click and drag on the image to see how an image is composed of an

Alpha, Red, Blue and Green channel (ARGB)

~

Usually when working with masks, we are working on the “Alpha” Channel.

-The Alpha channel is a black and white channel that determines the transparency of an image.

-In Photoshop if the alpha channel is white the image has no transparency

-If the Alpha channel is Black the image is completely transparent

-If the alpha channel contains a shade of grey between Black and White that part of the image will be semi transparent depending on how dark or light the gray is.

~

-Making masks in photoShop:

-There are several different methods for creating masks as well as different types of masks in PhotoShop

-For now I’ll show you the most basic method without going into using the selection tools.

~

1.- Open an image in Photoshop

2.- At the bottom of the “Layers” panel (F7) click the 3rd icon across from the left.

————or >Layer >Layer Mask > Reveal All / Hide All

3.-In the layers panel next to the thumbnail of the images is an empty thumbnail (either black or white depending on if you did Hide All or Reveal All)

4. This box representes the Alpha Channel, to work on the Alpha Channel click the thumbnail then using Black, White or a shade of grey in Between, paint on the image. You should see some transparency changes in the image.

5. To view the Alpha Channel individually (or one of the other Channels) click the “Channels” tab next to the “Layers” tab (or >Window > Channels if the Channels Tab is not there)

6. You can now use the “eye” toggle to turn individual layers on or off. Select the Channel to work on it.

7.Try different Shadses of Grey in the Alpha Channel and try different brush sizes with different amounts of “Hardness” to see the “Feathered” transparency effects you can create.

~

-It is a good idea to have a strong grasp of making selections and masking in photoshop because it is a necessary skill for most aspects of digital and print media, and selections can be used to create masks.

Here is  a good tutorial under “Photoshop” :

Making and Refining Selections: http://www.adobe.com/designcenter/video_workshop/

~

Create a Feathered Mask in Flash CS3

-(without Action Script):

Do Tutorial: http://www.communitymx.com/content/article.cfm?page=1&cid=FAC69

~

-(with one line of Action Script 3):

1. Import an image or draw something on the stage that you want to mask.

2.Turn what you want to mask into a Movie Clip (F8)

3. With the Movie Clip selected, go to the Properties Inspector (Ctrl + F3 / >Window > Properties > Properties) and enter an <Instance Name> of “background_mc” in the .

4. With the Movie Clip still selected, in the Properties Inspector check “Use runtime bitmap caching“.

5. Create a new layer above the previous one named “mask”

6. In the mask layer draw the shape that you want to use as a mask.

7. Convert to a movie Clip (F8)

8.With the Movie Clip selected, go to the Properties Inspector (Ctrl + F3 / >Window > Properties > Properties) and enter an <Instance Name> of “mask_mc” in the .

9. With the Movie Clip still selected, in the Properties Inspector check “Use runtime bitmap caching“.

10. With the Movie Clip still selected, go the the “Filters” tab (>Window > Properties > Filters), and add a “Blur” filter. Adjust the settings to get the feathered (soft) edge that you want.

11. Add a new layer on top of the other layers and name it “Actions”

12. Open the action script editor (F9 / >Window > Actions)

13. Enter this line of code: background_mc.mask = mask_mc;

14. Publish Preview (CTRL + Enter) to see the result.

(If this doesn’t seem to work, check the spelling of your instance names, make sure your flash movie is using Actions Script 3.0, and ensure “Use runtime bitmap caching” is selected for both movie clips.)

Download Feathered Masks in Flash Source Files

Number of Downloads: 46

Download Size: 185.2 kB

Download Updated: March 16, 2009

Tags: ARGB, Feathered Masks, flash, masks, Photoshop