Alpha masking goodness in Flash Player 8
A while back when we started implementing the cache as bitmap functionality in the Flash Player I was tasked to make masks work with it. The initial implementation was simply doing edge based masking and behaved like you think Flash should behave. What is edge based masking? It means that the vectors of the mask and masquee are intersected before they are drawn to obtain the cutout which is a vector shape in itself. That's why alpha masking was not easily possible technically in previous Flash Player versions since there is no pixel level interaction at this level between mask and masquee. Now, and so it happened a few times during this release, I stared at the code and told myself: Alpha masks are now trivial to implement with the bitmap caching! A couple of hours later it was done.
So how do you make it work? Mask and masquee have to be both movie clips and need to have the cacheAsBitmap flag set. Now you can simply do a setMask() and that is it. The only sad part about this is that due to time constraints there was simply no time to add this to the authoring tool for easy access. But, the good news is that designers will only need one line of code to make it work. Hence the example I posted here. Softwipe goodness! You can't tell me that this is not beautiful! This movie has only one line of code, the rest are simple tweens on the timeline:
So how do you make it work? Mask and masquee have to be both movie clips and need to have the cacheAsBitmap flag set. Now you can simply do a setMask() and that is it. The only sad part about this is that due to time constraints there was simply no time to add this to the authoring tool for easy access. But, the good news is that designers will only need one line of code to make it work. Hence the example I posted here. Softwipe goodness! You can't tell me that this is not beautiful! This movie has only one line of code, the rest are simple tweens on the timeline:
mc1.setMask(mc2)
posted by Tinic Uro at 10:13 PM
33 Comments:
gradient masking? Is this only possible with cache as bitmap?
Hi!
will it be possible to use a video with 8bit alpha as a mask?
Imagine the possibilities!!
I would very much like to know the answer to the previous question. Masking with alpha video would really double what you could do with video.
Answer to above: yes. Bitmap cacheing doesn't care whether it's compositing vectors, video, or bitmaps.
Love the effect ...
Could you provide some more info about how to construct this?
Might it be possible to see a sample FLA file that demonstrates this in action?
it's simple (and fantastic):
3 layers: "Actions", "Mask"(ie: picture_a), "Whats being Masked" (ie: picture_b).
mc1 = instance name of movieclip - "picture_b"
mc2 = instance name of (the mask) - movieclip - "picture_a"
On the actions layer:
mc2.cacheAsBitmap = true;
mc1.cacheAsBitmap = true;
mc1.setMask(mc2);
done.
Thanks for that. Have done what you suggested, I can't get it working (I am new to Flash).
Problem might be with the resources I'm using. Does this require images with Alpha channels like PNGs, or movies with Alpha channels?
Can this effect be created with native Flash objects?
Thanks again
Richard
There was a workaround to create soft wipe effects prior to Flash 8 - but it is not nearly as flexible as this will be. It was ; create an alpha channel in a PNG, and then use Colour Transform to modify the alpha values up and down.
Hey Richard, yep just make the top image (the one doing the masking) a PNG file with a gradient going to nothing (i.e. transparency). Put that in a movie clip with (or without) an animation making it move along and then use that as the masker with some random image as the maskee.
boy i never realised how much harder it is to describe these things than to actually do them!
Anyhow well done on having this new feature and surprisingly it doesn't seem to slow my flash player down either, hurrah!
actually just realised that it doesn't even need to be a PNG with transparency, just make a big rectangle with a gradient fill going to 0 opacity. hurrah!
Umm ... what is the effect? All I see is an image of a flower. Nothing is animated.
I have a problem with setMask(). I can get it working, and it's great, BUT! when another movieclip passes over it, the masking seems to behave strangely, as in: either the mask only applyes to where it's completly opaque, leaving the semytransparent pixels invisible, or it seems to apply the mask multyple times, shrinking the visible region. My maskee is a mc containing multyple nested mc's, and the mask is a simple gradient fill (Alpha 100 -> Alpha 0).
Also, jfor those interested, you can use any combination of [vectorial drawings], [images w/ or without transparency (alpha channel)] and [movies (altough i haven't personally tested with them yet)] as both mask ad maskee.
PS: anonymous, you probably have flash version 7, get the version 8 to see and use the new effects on that example.
If anyone can help me out, I'd GREATLY APPRECIATE IT. I can't figure out how to animate this. Can someone please, please make a simple tutorial for this?
Thanks a bunch
actually I got it guys:
http://www.gotoandlearn.com/
thanks though!
that's awesome, but how do you do it? can we see the fla?
thanks!
chad
Unfortunately, gradient alpha masking using this technique doesn't work if the mask and maskee are embedded inside a movieclip or an external SWF file and that movieclip/SWF is added to the main scene. In that case, the mask is simply not applied and both elements appear as solid objects.
is there no workaround for that?
I dont think this last comment is correct. I just got it working with animated mask attached to a movieclip on the stage (not attached to root itself) and with it masking a loaded jpg
just make sure you have cacheAsBitmap turned on for the right mcs
In Flash Professional 8, using cacheAsBitmap in a script just makes a boring non-alpha mask. But clicking the "use runtime bitmap caching" in the properties pane works.
Does anyone know how to get this to work with the same mask being applied to multiple layers (MCs) inside the same .fla file?
Also, I'd like to use the alpha bitmap mask in different spots along the timeline. Works the first time it's called, but then later in the timeline when it comes upon the same mask (even with a different instance name), it just shows it as a bitmap and it doesn't behave as an alpha bitmap mask.
The key to making the video masking of other content work is that the video used as the mask in the .setMask(x) function must be a movie clip object not a video object. All you need to do is put the video inside a movieclip and you're set. Works in Flash Pro 8.
it's a pitty that it's buggy... :( i've used alpha masking a lot in my current project, the thing is that if there's a layer in masked mc having tween, you stop the movie in that frame and cause flash to repaint then the mask fails to work properly.
in my case, i'm doing animation engine and transitions are alpha mask based - if i stop the current animation at phase where animation is playing or in worst case i don't stop the animation inside of maskee then my maskee get's transparent in areas where it's not supposed to be like that. this is caused by cache as bitmap i guess, but it's a pitty when you run into the situation that you cannot workaround...
Very helpful info. Thought I should give something back to anyone that's still having problems. The problem I had was that I was not naming the movie clips in the properties toolbar. I assumed that naming the movie clips when I created them was enough. Also make sure the names you enter into the action script are exactly as they appear in the properties toolbar for each movie clip as it's case sensitive.
Great Article! Thank You!
Thanks to author! I like articles like this, very interesting.
nice blog!
nice blog!Nice information
:-) ochen\' zaebatyj blog!
soglasen s vami ochen\' zaebatyj blog!
Keep up the great work. It very impressive. Enjoyed the visit!
Hello,
could anybody tell me why is this wrong :
http://students.ceid.upatras.gr/~georgiu/test.fla
testing only the mc that contains the effect show that it is working
You completely stuffed up the alpha channel process. In "ALL" other applications, an alpha chanel is a gradient with pixel information between white and black. In your script, you have to have information between transparent and black. It confuses people. Alpha channels should always be grayscale maps.
I just tried this with a scrolling text box that is only supposed to show between the top and bottom slider arrows, and it worked famously. Thanks for the tip!
Post a Comment
<< Home