I was struggling at work earlier this week with something I expected to be simple - gradient masks. I expected them to work much in the same way as Photoshop, silly me it would seem. After some research I discovered Gradient Masks are indeed possible, but only for Flash MX8 or higher. Now I bring to you a tutorial on this cool and useful flash… thing.
STEP 1
First off, set the framerate to 30 and create an object on the stage that you wish to mask. For this example I have gone all out and drawn… a square. With a border. Oh yes, my artistic skills are truly blooming! Select the square, and press f8 to convert to symbol. Set it as a movie clip called MC_square and click ok. In the properties panel set the instance name to MC_square. Rename layer 1 to square.
STEP 2
To make this a bit more interesting, we will animate the square. Double click on the square to enter it’s timeline. On frame 1, drag the square to the left, just off stage. On frame 60 add a keyframe and drag the square offstage to the right. Select any frame between 1 and 60, then set to motion tween. If you hit CTRL and Enter you will see your square moving across the stage.
STEP 3
Lock the square layer, and create a new layer called ‘mask’. On this layer, select the shape tool with border set to none, and draw a square to fill the stage. In the colour pallet, set the fill colour to linear. Drag the right hand slider in the panel to the centre, then click on the right again to add a new slider like this:
Select the left slider, and set the alpha to 0. Do the same with the right slider. Click next to the centre slider to add a new one, then drag both sliders away from the centre until it looks something like this:
STEP 4
Select your mask square, and press f8 to Convert to Symbol, set to movie clip called MC_mask. Lock the layer. You now have the basis for your gradient mask which should look something like this:
Now onto the actionscript to make it all work!
STEP 5
Create a new layer called ‘actions’ and lock it. Select the first frame in this layer and press f9 to enter the actions panel. Now, for gradient masks to work the movie clips need to be cached as bitmaps. You can do this in the properties panel but you have much more usability if you do it in actionscript. To do this add the following code:
MC_mask.cacheAsBitmap = true;
MC_square.cacheAsBitmap = true;
Its as simple as that!
STEP 6
Next we need to apply this mask to MC_square. This takes just one more line of code!:
MC_square.setMask("MC_mask");
Press CTRL + Enter, and see the edges of your square fade in and out as it passes under the mask.
Well it’s been short, but hopefully this is a cool technique you can utilise in future flash works! If any of this has confuse you, take a look at our Beginners Guide to Flash, and stay tuned for more coming soon!
Signing Off
The Dude
Can’t work something out? Need a specific tutorial? Sign up now and leave a comment or email me here and if I can’t help, i’ll point you to someone who can!
Help me out by voting for this tutorial
Did this post help you? If so help us continue to grow and Digg this page or Share on Twitter!
If you haven't already, sign up to our RSS feed or register to recieve updates direct to your email!
I’m a photoshop hacker, never did touch flash, but the above sure sounds interesting! Do you have a live example?
Best wishes, Barbara
Barbara Ling, Virtual Coachs last blog post..Wordpress for iPhone, download now! (PLUS 20 other resources)
Hi Barbara!
Yes an example can be found via the link at the top of the page, very basic but it demonstrates the fade on the left and right of the screen.
If you have any questions please ask!
The Dude
Hey Dude,
Nice Tute, I’ve been trying to figure out how to do this for ages.
I just gave it a go following your procedure but it still won’t work for me.
Getting this error when I publish the movie:
TypeError: Error #1006: setMask is not a function.
at Untitled_fla::MainTimeline/Untitled_fla::frame1()
Any ideas or help?
I’m using Flash CS3 by the way.
Thanks again.
are you writing in actionscript 2 or 3?
Hey Dude,
Yeah tried it in actionscript 2 and it works now.
Thanks for your help.
Rock on!!
Hi there,
I’ve tried not only yours… lots of people’s same tutorial… still doesn’t work…I have no idea what I’m doing wrong… But the edges are not gradient, it is just as would be with plane color, not used alpha and linear fill.
Any idea what might be wrong..?
Thanks!
send me the .fla
Yes, had the same problem - it didn’t work in Actionscript 3. Found your tip on the net, changed to 2 and it works now! Thanks a lot!
I wonder how you would deal with a mask with random shape, such as stars or splashes? I’m working on a project and being stuck with the idea, in which an animation is masked by a random shape with gradient border. I was so silly assuming that Flash supports gradient mask.
BTW, trying another way with Swishmax but cannot find the way out either. :-<
Well, I finally did it, with a small trick. Just wanna share if anybody else have the same problem.
For the random shapped mask, I simply export a solid background img and another which is masked with photoshop. I mean, I made a hole through the img using layer mask in photoshop, turn off other layers and save as another name, “fake mask” in my case.
Then I think you all can imagine what the trick is. ~~> 3 layers in flash, first the solid background img, then the animation, and the “fake mask” on the top.
Anyway, I would appreciate it if anybody here can make it work with flash’s mask effect.
Man talk about a great solution, though an error in your post caused me to pull my hair for an hour. Apprently you do not need to put the insance name in quotes, in your last line of code where it says:
MC_square.setMask(”MC_mask”);
The correct way, that wont break it, is:
MC_square.setMask(MC_mask);
Hope this helps the next guy
Thank you so much for a great tutorial! I used it and it worked very well.
when i save this as swf and import it in another movie clip i get gradient back without mask? help? please?
Great man!!! Thanks.
not working here. help pleeeez!
I’m coming across a number of problems here. 1) If you try to do this inside a movie clip, it does not work. 2)you can’t animate the gradient mask using the timeline(it stops working once you do), but apparently you can using Actionscript, which would be a lot harder in this case. The problem there is, I need this to be in a movieclip so my actionscript that conforms the stage and movieclips to resize with the browser still works.
Anyone know how to get around these issues?
works a treat - thanks very much
why is doing this.. i did all just like the tutorial said.
1120: Access of undefined property MC_mask.
Ummm.. I tried with failure. It didn’t give errors, when I compiled it just didn’t work. Is there a FLA for this?