Flash CS3 - Flash CS4

Free tutorials and scripts for all.
Actionscript 3.0

Masks with Actionscript 3.0

This is a discussion on Masks with Actionscript 3.0 within the Tutorials forums, part of the Flash English category; The setMask method of Actionscript 2.0 has been removed. A MovieClip property called mask has taken its place. I'...


Go Back   Forum Flash CS3 Flash CS4 > Flash CS3 Flash CS4 > Flash English > Tutorials

Register FAQ Members List Calendar Search Today's Posts Mark Forums Read
  8 links from elsewhere to this Post. Click to view. #1 (permalink)  
Old 03-10-07, 19:23
Administrator
 
Join Date: Jul 2007
Location: Cesena
Posts: 4,535
Rep Power: 6
Flep is on a distinguished road
Masks with Actionscript 3.0

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:
Code:
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 !
__________________

 


I recommend: Essential Actionscript 3.0

- I do not reply technicians pvt messages. Open a thread !
- Non rispondo ai messaggi privati con domande tecniche. Apri una discussione sul forum !

Last edited by Flep; 28-08-08 at 06:56..
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

Reply

Bookmarks

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is On
Trackbacks are On
Pingbacks are On
Refbacks are On
Forum Jump

Similar Threads

Thread Thread Starter Forum Replies Last Post
Actionscript 3 Code access to timeline masks...? barliesque advanced Actionscript 3.0 3 05-10-08 03:26
ColorTransform wonīt work with 2 masks madmad Flash English 0 28-05-08 09:00


All times are GMT. The time now is 18:17.

Powered by vBulletin version 3.7.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC4
Forum SiteMap