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!
Did this post help you? If so help us continue to grow and Digg this page!
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