Flash Gallery | Flash Templates | Flash Menu | Flash Design | Flash Audio & Video

flash page flip

Actionscript 3.0 video tutorials

+ Reply to Thread
Results 1 to 2 of 2

Thread: Masks with Actionscript 3.0

  1. #1
    Administrator Living At The FlepStudio! Flep is on a distinguished road
    Join Date
    Jul 2007
    Posts
    5,460
    Rep Power
    8

    Masks with Actionscript 3.0

    amazing Flash templates
    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 !

  2. #2
    Junior Member Settled In lfdesign is on a distinguished road
    Join Date
    Sep 2007
    Posts
    25
    Rep Power
    0

    Re: Masks with Actionscript 3.0

    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!

+ Reply to Thread

Similar Threads

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

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Search Engine Optimization by vBSEO