Masks with Actionscript 3.0

[Flep]

The setMask method of Actionscript 2.0 has been removed.
A MovieClip property called mask has taken its place.
I'll explain better, with Actionscript 2.0 you used the setMask method like so:
clipToBeMasked.setMask(clipMaschera);
With Actionscript 3.0 you use a property of the MovieClip class like so:
clipToBeMasked.mask=clipMaschera;
Let's see a concrete example'

I create an FLA saved as 'maschere.fla' .
I import a photo in the library, I drag it to the stage, I convert to MovieClip calling it 'mc_pic' and I assign the instance name 'pic_mc' to it .
I create the Document Class, as AS file saved as 'Maschere.as', and I write:

package
{
	import flash.display.MovieClip;
	import flash.display.SimpleButton;
	import flash.geom.Point;
	import flash.utils.Timer;
	import flash.events.TimerEvent;
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	public class Maschere extends MovieClip
	{
		private var points_array:Array;
		private var clips_array:Array;
		
		private var container_mc:MovieClip;
		
		private const w:int=5;
		private const h:int=5;
		private var ww:int;
		private var hh:int;
		private var arrS:int;
		
		private var timer:Timer;
		
		public function Maschere()
		{
			init();
			creaPunti();
			disegnaMaschere();
			listenerBottone();
			iniziaTimer();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			points_array=new Array();
			clips_array=new Array();
			
			container_mc=new MovieClip();
			addChild(container_mc);
			container_mc.x=pic_mc.x;
			container_mc.y=pic_mc.y;
			
			ww=Math.floor(pic_mc.width/w);
			hh=Math.floor(pic_mc.height/h);
			
			replay_btn.visible=false;
		}
		
		private function creaPunti():void
		{
			for(var i:int=0;i < h;i++)
			{
				for(var j:int=0;j < w;j++)
				{
					var point:Point=new Point(ww*j,hh*i);
					points_array.push(point);
				}
			}
		}
		
		private function disegnaMaschere():void
		{
			for(var i:int=0;i < points_array.length;i++)
			{
				var clip:MovieClip=new MovieClip();
				clip.graphics.beginFill(0xFF0000,1);
				clip.graphics.drawRect(points_array[i].x,points_array[i].y,ww,hh);
				container_mc.addChild(clip);
				clips_array.push(clip);
				clip.scaleX=0;
				clip.scaleY=0;
			}
			pic_mc.mask=container_mc;
		}
		
		private function listenerBottone():void
		{
			replay_btn.addEventListener(MouseEvent.MOUSE_DOWN,replay);
		}
		
		private function iniziaTimer():void
		{
			timer=new Timer(100,clips_array.length);
			timer.addEventListener(TimerEvent.TIMER,attivaIntervallo);
			timer.addEventListener(TimerEvent.TIMER_COMPLETE,finito);
			replay_btn.visible=false;
			arrS=1;
			timer.start();
		}
		
		private function replay(m:MouseEvent):void
		{
			for(var i:int=0; i < clips_array.length;i++)
			{
				clips_array[i].x=0;
				clips_array[i].y=0;
				clips_array[i].scaleX=0;
				clips_array[i].scaleY=0;
				clips_array[i].removeEventListener(Event.ENTER_FRAME,effettoMaschera);
			}
			iniziaTimer();
		}
		
		private function attivaIntervallo(t:TimerEvent):void
		{
			clips_array[t.target.currentCount-1].addEventListener(Event.ENTER_FRAME,effettoMaschera);
		}
		
		private function effettoMaschera(e:Event):void
		{
			var ds:Number=arrS-e.target.scaleX;
			var aa:Number=ds*.2;
			e.target.scaleX+=aa;
			e.target.scaleY+=aa;
			
			if(Math.abs(ds)<=.03)
			{
				e.target.scaleX=e.target.scaleY=arrS;
				e.target.removeEventListener(Event.ENTER_FRAME,effettoMaschera);
			}
		}
		
		private function finito(t:TimerEvent):void
		{
			replay_btn.visible=true;
		}
	}
}

This is the result of the script:

Let's analyse the code:
the parts to draw attention to are the 'creaPunti' and 'disegna Maschere' methods.
Firstly, though, I'll make a point on these lines:
container_mc=new MovieClip();
addChild(container_mc);
container_mc.x=pic_mc.x;
container_mc.y=pic_mc.y;
in which I create a MovieClip (container_mc), I assign to the DisplayObject (or it wouldn't be visible) and I assign to it the same coordinates of pic_mc.
This is because when I'll create the masks I'll insert them all into container_mc since I'll then assign container_mc as mask of pic_mc.
creaPunti:
2 nested loops of which the first has the maximum set to the value of the variable h while the nested loop has the maximum set to the value of the variable w.
I create the variable Point which I pass the value of the variable ww ( which is the width of the pic divided by the value of w ) multiplied by the current value of the nested loop ( j ). As value of y I pass the value of the variable hh ( which is the height of the pic divided by the value of h ) multiplied by the current value of the non-nested loop ( i ).
var point:Point=new Point(ww*j,hh*i);
I insert the variable Point into an array
points_array.push(point);
disegnaMaschere:
loop with the maximum set to the size of the points array
for(var i:int=0;i < points_array.length;i++)
I create a MovieClip variable
var clip:MovieClip=new MovieClip();
I initialize its graphics
clip.graphics.beginFill(0xFF0000,1);
I draw a rectangle to which I pass as x and y the x and y of the i index array point ( iteration loop) and as width and height the respective values of the variables ww and hh
clip.graphics.drawRect(points_array[i].x,points_array[i].y,ww,hh);
I add the clip to container_mc (or it wouldn't be visible)
container_mc.addChild(clip);
I insert the clip into an array (let's remember that I'm calling it clip, but we're in the loop, therefore a clip is created for every iteration of the loop)
clips_array.push(clip);
I assign 0 to the clip's properties scaleX and scaleY
clip.scaleX=0;
clip.scaleY=0;
and finally I assign container_mc (which in fact contains all the clips) as mask of pic_mc (the MovieClip I have on stage)
pic_mc.mask=container_mc;
the rest is simple effectiveness with which I apply an inertial effect (see article inertia with Flash CS3) to every clip inside container_mc
Stay tuned !

[lfdesign]

Hi there,

I'm having a problem with dynamic masks and I thought that you could probably help me!

Have you ever tried to mask a blurred movieclip? If the mask is made manually and set on stage it works ok, if we use:

mc.mask = mask;

it seems like the mask is also blurred and it doesn't work as expected! Do you have any idea on how to solve this? I would be very grateful if you do! :)

Best regards!

[Scetch]

If you wonder how you can make your blurred mask works, I suggest to check "Use Runtime Bitmap Caching" for both mask and the stuff you are about to mask! Take in account that checking this parameter only for mask want help you!
For dinamic assigment something like this should work:
mask_mc.cacheAsBitmap = true;
Cheers!