0 Replies Latest reply on Mar 25, 2012 8:36 PM by nikolaig

    Type Masking in Flash

    nikolaig Level 1

      It seems I hit a wall.

      I created this effect that a type button is lit up as if with a spot light. It is brighter in the middle and darkens to the left and right and a little bit top and bottom. A bright spot is an oval shaped in the middle.

      On roll over this oval brightens up and grows in size. So I apply alpha and scale in AS3.

      Everything worked fine until the button was on the black background as I covered a white text button with a black shape with a cut out oval in the middle.

      Please see right most button in on the bottom: http://www.888acolyte.com//loadingAssets/appimgCollageF1A.html(please open in FireFox, for some reason it works better there)

      Dark shade grows and fades, which makes the button look brighter. Black shape is undetectable as long as the background is black.


      Then I decided to put the button on a colorful background and obviously black shade can not be used anymore.

      So I used letterforms as a mask layer and masked the aforementioned black shade shape. So it looks like it grows and lightens inside the buttons letterforms.

      Technically it works as I intended. But it seems that masks doesn't masks letters precisely. It makes each lettershape slightly thinner, as if shaving off the stroke weight off the letterforms.

      Would not be an issue but I need to put the letter formed masked shape on top of unmasked letterform shape. They do not match. I see the white borders from underneath the masked dark shape lettershape. It creates an embossed like look. It looks like an application of Flash's mask thins out the lettershapes.

      This effect can be observed on a rollover of the middle button "ORIGINAL PRODUCTS". I thought it is a type issue and replaced Helvetica with Gill Sans but still the same effect


      I also tried to create a button in Photoshop and import it as a background transparent PNG. You can view this approach in the left most "ORIGINAL PRODUCTS" button. It does not really work either as lettershapes are much more distorted in the imported image(PNG) file. Flash does an excellent job of letter rendition on the screen ( well, as long as I don't apply a mask). Importing letterforms as images distorts them. I placed a larger masked PNG file at the bottom of the page, where only the upper parts of letterforms are visible. As you can see it does not import well and has a white jugged edges around the letterforms. ( I did use the "Allow Smoothing" in the Bitmap options).


      In my opinion if Flash would mask the letterforms as they are without thinning them it would be a perfect solution to my problem.

      Please let me know what would be a fix in my case?

      Perhaps it lies in a different method?