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!