Máscaras dinamicas con ActionSctipt 3
24/10/2008
La utilización de las mascaras en ActionSctipt nos permite esconder parte del contenido de un objeto o de un texto

en Este artículo mostraré como enmascarar cualquier objeto dinámicamente con una clase que programe en ActionScript 3 llamada Msk

Primero importamos la clase y la implementamos de esta manera. (Muy facil)
import phoxer.ChildsManager.Msk;
 
//con este simple rengon podemos enmascarar un objeto
var msk:Msk= new Msk(this,MySprite,0,0,150,100,20);
 
//o tambien se puede implementar asi
var msk:Msk= new Msk(this);
msk.setNewMask(MySprite,0,0,150,100,20);
 

1- El primer parametro es donde va a estar ubicada la mascara
2- El segundo parametro es el clip que se va a enmascarar
3- El tercer y cuarto parametro es el x y y de la mascara
4- El cuarto y el quinto parametro es el ancho y el alto de la mascara
5- El sexo parametro es opcional, es para redondear los bordes.
6- El sexto parametro opcional es para setear la mascara visible.

aca esta la clase para Flash:

/**
by .:{PHOXER}:.
http://www.phoxer.com
v 3.0;
*/
package phoxer.Sprites{
	import flash.display.Shape;
	import flash.display.Sprite;
	import phoxer.ChildsManager.DeleteClips;
	public class Msk extends Sprite{
		private var cuad:Shape;
 
		public function Msk(cont:Object,mc:Object=null,x:int=0,y:int=0,w:int=0,h:int=0,rad:int=0,vs:Boolean=false):void{
			super();
			cont.addChild(this);
			this.mouseEnabled=false;
			this.mouseChildren=false;
			if(mc!=null){
				setNewMask(mc,x,y,w,h,rad,vs);
			}
		}
 
		public function setNewMask(mc:Object,x:int,y:int,w:int,h:int,rad:int=0,vs:Boolean=false):void{
			DeleteClips.deleteAll(this);
			this.x=mc.x;
			this.y=mc.y;
			cuad = new Shape();
            cuad.graphics.beginFill(0x000000);
            cuad.graphics.drawRoundRect(x, y, w, h,rad);
            cuad.graphics.endFill();
            this.addChild(cuad);
            if(!vs){
          		mc.mask=this;
            }
		}
 
		public function addMsk(x:int,y:int,w:int,h:int,rad:int=0):void{
			cuad = new Shape();
            cuad.graphics.beginFill(0x000000);
            cuad.graphics.drawRoundRect(x, y, w, h,rad);
            cuad.graphics.endFill();
            this.addChild(cuad);
		}
	}
}


Tambien programe una clase para manejar Mascaras en ActionScript para Flex extendiendo UIMovieClip
/**
by .:{PHOXER}:.
http://www.phoxer.com
v 3.0;
*/
package phoxer.Sprites{
	import flash.display.Shape;
	import mx.flash.UIMovieClip;
	import phoxer.ChildsManager.DeleteClips;
	public class FlexMsk extends UIMovieClip{
		private var cuad:Shape;
 
		public function FlexMsk(cont:Object,mc:Object=null,x:int=0,y:int=0,w:int=0,h:int=0,rad:int=0,vs:Boolean=false):void{
			super();
			cont.addChild(this);
			this.mouseEnabled=false;
			this.mouseChildren=false;
			if(mc!=null){
				setNewMask(mc,x,y,w,h,rad,vs);
			}
		}
 
		public function setNewMask(mc:Object,x:int,y:int,w:int,h:int,rad:int=0,vs:Boolean=false):void{
			DeleteClips.deleteAll(this);
			this.x=mc.x;
			this.y=mc.y;
			cuad = new Shape();
            cuad.graphics.beginFill(0x000000);
            cuad.graphics.drawRoundRect(x, y, w, h,rad);
            cuad.graphics.endFill();
            this.addChild(cuad);
            if(!vs){
          		mc.mask=this;
            }
		}
 
		public function addMsk(x:int,y:int,w:int,h:int,rad:int=0):void{
			cuad = new Shape();
            cuad.graphics.beginFill(0x000000);
            cuad.graphics.drawRoundRect(x, y, w, h,rad);
            cuad.graphics.endFill();
            this.addChild(cuad);
		}
	}
}


| ActionScript 3 | Flash CS4 | Flash CS3 | Flex 3
Share |


2 Comentarios.
Mariano
07/11/2008

sinceramente muy bueno y sobretodo muy util tu post, me ha sido de mucha ayuda.

muchas gracias por el aporte

Nicolas
03/01/2009

Ey q gran recurso... muchisimas, muchisimas gracias!!


Canal Rss

Donar al blog de tutoriales de Phoxer.

----------------------------------------------


Si los tutoriales o los temas tratados en este blog te gustaron y quieres ayudarme a mantenerlos en linea puede hacer una donacion.
La donaciones son destinadas para mantener este blog y a los tutoriales Online.

Donar al blog de tutoriales de Phoxer.

Phoxer