One of the things I've wanted for years in Flash was alpha masks. That is, masks that have gradations in transparency, not just boolean visible / not visible as with masks in Flash 7. Now with Flash 8 we finally have them... sort of.
Flash 8 doesn't have actual alpha masks per se, but it does have a blend mode called "alpha" which emulates them. You can place a clip with a blend mode of "alpha" into another clip with a blend mode of "layer", and the parent clip will use the alpha of the child clip for compositing. This gives you the visual effect of a alpha mask (even if it really isn't one). It also has a blendmode called "erase" that is basically the opposite of alpha - more opaque areas on the child clip are less opaque on the parent (ie. the child "erases" the parent).
I spent a few minutes whipping up a super simple demo. It takes a few pictures (my own strange creations), and cross fades them using an alpha blend mode. I tossed together 4 crossfades:
- A shape tweened radial gradient
- A shape tweened linear gradient
- A grid of square clips that fade in randomly
- A grid of square clips that fade in randomly from right to left
Flash Player 8 required. Might take a few seconds to load (85kb).
EDIT: Added a fourth crossfade.
Comments (17)
Actually FP8 has alpha masks. It's implemented through the bitmap caching functionality. Try something like this:
mc1.cacheAsBitmap = true;
Posted by: Tinic Uro at August 9, 2005 02:12 PMmc2.cacheAsBitmap = true;
mc1.setMask(mc2);
URL: http://www.kaourantin.net
Hmmm, maybe it's just your choice of images or your implementation of the effect but it lacks the 'wow' factor I woul dhave expected from this technique - don't take that as a criticism, your work is brilliant and your skills outstanding, but I'm having trouble seeing this as anything more than not so good gimmick at the moment - maybe a different example of this technique in use would have more impact?
Posted by: Jon B at August 9, 2005 02:18 PMURL: http://www.scrwd.com
P.S. Can I be your sidekick "gBoy"?
Posted by: Jon B at August 9, 2005 02:36 PMURL: http://www.scrwd.com
Tinic,
Cool - I wasn't aware of that. That makes things even easier. I was a little concerned about having to inject a clip arbitrarily into another clip to achieve this effect.
Jon,
Posted by: Grant Skinner at August 9, 2005 02:39 PMNo offense taken. When I said I spent a few minutes putting together this demo, I meant it. It's a few random shape tweens and less than 15 lines of code. I just wanted to show that it was possible, not an amazing implementation of it. :)
URL: http://gskinner.com/
var PrettyCoolExample:Boolean = true;
Posted by: JDGomezB at August 9, 2005 03:31 PMtrace("Thanks Dude");
this.play();
URL: http://www.usershock.com
Ah, well tinic's revelations sounds good, I think maybe part of my lack of enthusiasm was the rather long-winded method myself - I could never understand why flash just couldn't handle gradient alpha masks etc, always seemed like a huge oversight. I'm sure this is a good technique tho.
Hey Grant, any comment on actionscript.com's theory that you might be the author of the new v3 components?
Posted by: Jon B at August 9, 2005 03:35 PMURL: http://www.scrwd.com
Jon, news to me - where on actionscript.com did you see that?
PS. I also cleaned up the linear tween a little bit, to make it look a little bit more production friendly.
Posted by: Grant Skinner at August 9, 2005 03:52 PMURL: http://gskinner.com/
http://www.actionscript.com/index.php/fw/1/8-ball-looks-grrrr8/
"V3 Component Architecture - I specifically looked at Grant Skinner's blog today to see if he had an announcement. Maybe it's still under NDA, but I've suspected that his GLIC components may become Macromedia V3 component architecture. If they don't, they should have been. But I've seen Grant in person around Macromedia offices. With his silence about GLIC, it makes me wonder."
Posted by: Jon B at August 12, 2005 06:14 AMURL: http://www.scrwd.com
I wonder if flash 8 has fix the masking problem which won't display the dynamic text, component (which also use dynamic text) in masking.
Posted by: Tommy at August 28, 2005 06:53 PMURL: http://www.designmax.com.au
Thanks alot for doing this!
Posted by: Sean Cooper at November 24, 2005 02:48 AMURL:
Hey, is it possible to see the .FLA file?
thanks,
-bakkelun
Posted by: bakkelun at August 19, 2006 04:39 AMURL: http://www.dosspirit.net
This is great but i need speeeed.
Have you solved an alpha mask in AS3?
/Brian
Posted by: Brian Groth at January 12, 2007 06:21 AMURL: http://www.oposit.dk
Got it, just needed to change the code syntax.
mc1 = new green();
mc2 = new blue();
mc2.blendMode = BlendMode.ALPHA;
addChild(mc1);
addChild(mc2);
mc1.cacheAsBitmap = true;
mc2.cacheAsBitmap = true;
mc1.mask = mc2;
/Brian
Posted by: Brian Groth at January 14, 2007 12:36 PMURL: http://www.oposit.dk
I'd like to know how to animate blending modes (one to another), I've tried on the timeline without success and wonder if its possible through script?
Posted by: Lou at March 21, 2007 02:11 PMURL:
Hello, Grant Skinner,
I´ve been in Adobe tuturials and was not able to do this!
Thank you very much for this simple & quick Tutorial.
Cheers!
Posted by: André B. Silva at December 6, 2007 11:15 AMURL:
This post is completely useless without the .FLA - what kind of knowledge sharing is this ? This Post is sharing old news and not helping at all (yes im aware this post is ages old, even worse that there is still no sample FLA).
cheers,
Posted by: T.Visitor at February 19, 2008 04:24 AMThe Visitor
URL:
I agree that this post serves no purpose if you are not willing to share the sample FLA
Posted by: richard at May 6, 2008 01:28 AMURL: