How to make a gradient mask with a feathered edge?

[wdgovinda]

Hi,

I am trying to create a gradual gradient mask (so text is gradually revealed under a moving gradient mask with a feathered edge), but I cannot seem to do it. I am using Macromedia Flash MX Pro version7. It says in the docs for this software -

"Flash ignores bitmaps, gradients, transparency, colors, and line styles in a mask layer. Any filled area is completely transparent in the mask; any nonfilled area is opaque."
(implying that the mask's edge must be abrupt and not feathered the way i want.)

Yet I have someone else's .fla file open that *IS* doing the very thing I want. But I am unable to duplicate it in my own doc! I do not know what software he used. Can I do this with the software I have?

Thanks for any feedback!
-Govinda

[wdgovinda]

Doesn't anyone have any idea about this? It boggles my mind that I see the docs say it is not possible, and then I see the very phenomenon in a file I open with that very software. I just cannot duplicate it!?
I'd really appreciate any guidance!
-G

[Eye for Video]

This post was intended to send you a version of a gradient mask in MX that works... but as I saved my working version 8 to version 7.... dang... it doesn't work!!!
So if you have a working version 7 file that has a working gradient mask, PM me and I'll see if I can duplicate it. Otherwise, from what I see, it just ain't gonna work....
Best wishes,
EfV

[wdgovinda]

EfV,
thanks for replying! OK, great I am happy to determine what is the situation and do what you suggest to facilitate.. I just don't know what you mean by "PM". (?) I absolutely do have a .fla file open in MX7, and it definitely does have a gradient mask. I don't get how, but it does. You want me to send it to you? Does PM mean post another message here and attach the file so you can get it, open and take a look?

[Eye for Video]

If you don't want to post the file for all to see, send me a Private Message and we can work on it that way. Or if you don't mind, post the file here and maybe there will be more eyes on it.
EfV

[wdgovinda]

EFV,
..and anyone who has time and may feel like seeing how this gradient mask is working in MX 2004 (v.7),

Attached is the file, if I managed to follow attachment protocol correctly. Take a look.. let me know what you can see.
Thanks!

(Also on frame #44, where is that other text coming from?? I am a newbie and can't find how that text even appears?)

-Govinda

[Eye for Video]

Looks like the feather part is coming from a section of the mask that was created from an image type that allows for a transparent background, like a .png. I tested this theory and it worked in MX. Check this yourself by double clicking “text animate” in your Library to directly edit “text animate”. Once you are in the edit mode, double click the masking group… you’ll see a large black rectangle and a smaller gradient rectangle at the bottom. Click on the gradient part and look down in the Properties at the paint bucket, click open the color picker, you’ll see the color is a gradient with lines in the background. That signifies a transparent background.
So you could create a section of the mask, the gradient, in say…. PhotoShop or whatever, maybe even Flash, and use that .png (for example) as the bottom part of the mask.
The extra text in frame 44 is coming from a part of “text”. Double click on “text” in library to directly edit it. Scrub the timeline and you’ll see the extra text kicks in in frame 30 of “text”.
If you are not able to create your own gradient .png or other type, open up “text animate”, from your library in direct edit mode and just copy the rectangle from there. Then paste into your application and resize to fit your needs.
Best wishes,
EfV

[wdgovinda]

You can see the new test layer I made, following your directions, making it from scratch right in Flash MX, which then does not reflect the fact that the bottom edge of that new mask is feathered. It just treats the whole masking shape as one opaque block. Or do you see it as expected (feathered edge) on your software? If you do see it as feathered, then I assume it is because you are using v.8, while I am using v.7 and so don't see the feather come thru' in the mask. If this is the case then I am back to my question of how then is it that I DO see a feathered mask in the file I inherited?

Notice the other (orig) layer (from the file I inherited) seems to be doing something else entirely. It looks like the mask and text (in the 'text animate' symbol) are reversed; when I hide what I think should be the mask the text disappears. Or when I hide what I think should be the text then the mask disappears. When I saw that a couple days ago I knew I was in over my head and then later started this thread.

What are your thoughts about both topics I bring up here now?

Thanks for looking and thinking here with me.
-G

[wdgovinda]

here's the latest file with my test as per your suggestions

[Eye for Video]

Dang, I’m having some problems getting this to feather correctly! I just don’t know how that swatch of gradient in your original file was created. Just did a little research and for the most part the info I’ve come across says Flash MX will NOT do feathered gradients.
Given my time constraints, here is the easiest way I could find to simulate a feathered gradient in MX. Basically you create a gradient with one color matching the background color and the other color black. So the actual mask edge is hard but the gradient affect works as the gradient part of the mask moves over the text.
I’ll attach a sample file using the old working mask on the left half of the text and a new gradient .png used on the right half. As you test the file, they both unmask the text with a feathered edge. Of course this method will only work as you unmask text against a solid color background. But perhaps you can rearrange the text and color on you application so that the text is against a solid color background and your multicolored border is outside the text area.
EfV

[wdgovinda]

EFV,

It is weird isn't it how that orig file was working!?
I hear you here now, I just don't understand why a gradient *looking* png should make any difference at all to MX pro's style of seeing all masks as bitmaps (docs say, "Any filled area is completely transparent in the mask; any nonfilled area is opaque."). I suspect that what you did with that png on the right half is not actually doing anything new compared to what was there before, but it is whatever the orig setup did to make it like that. No? The thing I need is to be able to *reproduce* the effect in layers on another more complex file. I know you are out of time for this. (And I really do appreciate your time here!!) But can you try what you did, but on our "new test1" layer (as opposed to the "text" layer created by the orig. creator), to see how your png-gradient mask behaves there?

I will have to have to keep the multimcolored glow underneath the text etc. Even if I had the text against a solid color, why would the *mask* look feathered unless it actually was? Regardless of the transitioning colors in the mask, as soon as I lock the mask layer and the content layer underneath it, linking it to the mask, then the mask becomes just a bitmap shape as far as the final swf file is concerned. It does not see one color or another in the mask.. just it's shape.

In case we don't lick this, let me ask, what software do I have to get to be able to do this gradient mask without Divine Intervention? (The original creator of that file either had that or else for some odd reason MX pro 2004 cannot create gradient masks but it can see them when opened. ??)

But please do try and then tell me what happens when you try to reproduce the effect with your gradient png on a *new* layer (not that original one). And what software are you using?

Thank you!

-Govinda

[wdgovinda]

also did you notice that on that orig layer the mask and content components seem to be switched? Try hiding the top layer, the one marked "mask", the one with the mask icon. What happens? The under content disappears! Is this not a clue as to what is happening?

[Eye for Video]

Well I can’t say that I completely understand this but this is how it is working….
For a sample to duplicate the feather action I created a new .fla with two layers, a text layer above a gradient layer. On the text layer, type in your text, highlight it all and convert it to a symbol, a graphic called “text”. Skip using a bitmap here until you can duplicate the feather mask and then you can try adapt to using it with a bitmap.
On the second layer called “gradient”, draw a black rectangle and place it above the stage. Import into your library the new_2.png and place it just under the big black rectangle. Highlight them both and convert to symbol called “gradient”. Notice that the gradient is placed in the layer below the text, just the opposite of what you might expect.
Extent both layers by 30 frames but put a new keyframe (F6) in the last frame of the “mask” layer. Move the “gradient” graphic from off the stage to completely covering the text in the last frame, and motion tween it.
The text is on top, in the layer called “mask”. Highlight the layer name “mask”, right click and hit “mask”. You now have the text in the stationary “mask” layer and a gradient that moves over the mask. I’m still sort of pondering how this can work upside down like this. Normally the top masking layer is the moving one, revealing what’s below it… but in this case it’s just the opposite.
Anyway, I’m convinced you can do feathered gradients in Flash MX but perhaps not using a bitmap… you’ll have to experiment with that part. But you certainly can using text converted into a graphic.
Good luck on your efforts.
EfV

[Eye for Video]

Oh yeah, one last comment about the feathered edge gradient. The sample above was created in Flash 8 but saved as Flash MX 2004.
If you use Flash 8 it’s a lot easier to do the feathered edge and you can use bitmaps. For example, click on the link below and then click “Turn out the lights”.
http://www.uncledoodad.com/live/live.html
This flashlight effect was created using a feathered edge gradient mask. Using two bitmaps, one on top of the other, the mask will punch a hole through the top one and reveal the bottom one. There are times when you must set the mask in actionscript and not at the layer name level, this example is one of them. Goes something like this:
top_picture.cacheAsBitmap = true;
GradientCircle.cacheAsBitmap = true;
top_picture.setMask(GradientCircle);
So maybe we haven’t solved your problem perfectly but you do have more ammunition to tackle the problem.
Best wishes,
EfV

[wdgovinda]

EFV

Your efforts to help are supreme! Thank you!
I am finding though, that when I do the steps you instruct me to do, still the edge of the mask is hard. I don't get what I am doing (if anything) that is making mine behave differently. I keep thinking that maybe it is because I am using version 7. (?) I'll fiddle some more to see if I can figure anything out, or else otherwise tell the client he won't get the soft edge, or bite a bullet and upgrade (grilling sales first to be sure I get this feature!).
Really thanks for your time, in any case.
-Govinda

[wdgovinda]

EFV,
OK, I finally found what I missed. I got it to work as per your lead. :-) I'm as enlightened as far as I can go with this, here, now, I believe. Thanks to your help. This is just to confirm everything you said in your last 2 posts.. including that it only works when the text is a real text block, and not a bitmap. I'm going to try and fake out the appearance and save from the immediate bill of an upgrade..

-Govinda

[wdgovinda]

oops! I input this yesterday, but neglected to submit it until just now. :-)

EFV,
OK, I finally found what I missed. I got it to work as per your lead. :-) I'm as enlightened as far as I can go with this, here, now, I believe. Thanks to your help. This is just to confirm everything you said in your last 2 posts.. including that it only works when the text is a real text block, and not a bitmap. I'm going to try and fake out the appearance and save from the immediate bill of an upgrade..

-Govinda

[wdgovinda]

err, I mean I did not see that only 15 posts per page showed at a time ;-)