Usando Filtros en ActionScript

Desde la versión 8 de Flash, tenemos la posibilidad de manipular la apariencia de clips en tiempo real. Los filtros se pueden usar para efectos de desengoque, brillos, sombras exteriores u interiores, y varios otros efectos que antes se delegaban a la pre-producción. En esta sección, examinaremos las posibilidades que nos ofrece Flash al respecto.

Bajar archivo de inicio

Bajar resultado final

Usando Filtros en ActionScript

Por cada efecto visual tenemos una clase diferente. Sin embargo, el funcionamiento de todas es bastante parecido. Los filtros que tenemos a nuestra disposición son:

Blur

Drop Shadow

Glow

Gradient Glow

Bevel

Gradient Bevel

Color Matrix

Convolution

Displacement Map

Los filtors se pueden aplicar a Movie Clips, botones y campos de texto. Cada uno de estos elementos tiene una propiedad .filters, que por defecto está vacia. Lo que tenemos que hacer es asignar a esta propiedad un array con los diferentes filtros que queremos aplicar al elemento.

El paso previo: Antes de poder programar la funcionalidad relacionada con los filtros, tenemos que importar la libreria de filtros:
import flash.filters ;
Así se pone a nuestra disposición todas las clases relacionadas con los filtros. Esta línea solo se tiene que escribir una vez antes de usar esta funcionalidad.

Creando Filtros: Para crear un filtro, creamos una instancia del filtro que nos interesa. Ejemplo:
blurFilter = new BlurFilter(blurX, blurY, calidad); 
glowFilter = new GlowFilter(color, alpha,blurX, blurY, fuerza, calidad);
Podemos crear varios diferentes filtros, cada uno con sus diferentes propiedades.

Asignando filtros a un clip: Creamos un array, que contiene los filtros que queremos asignar al clip. Pasamos este array a la propiedad filters del elemento.
miClip.filters=[blurFilter, glowFilter];
En esta práctica examinamos los cuatro filtros Blur, DropShadow, Glow, Bevel - en la ayuda encontrareis la información sobre los demás filtros.

Aqui va una lista de las propiedades para cada uno de los cuatro filtros que usaremos:

Filtro Blur:

blurX: cantidad de desenfoque en el eje X
blurY: cantidad de desenfoque en el eje Y
calidad: número de veces a repetir el desenfoque

Filtro Drop Shadow:

alpha : transparencia de la sombra
angle: ángulo de la sombra
blurX: Cantidad de desenfoque horizontal
blurY : Cantidad de desenfoque vertical
color : color de la sombra
distance: distancia de la sombra en píxeles
hideObject: si el objeto se oculta
inner: indica si es una sombra interior
knockout : efecto que hace el relleno del objeto transparente y revela el color de fondo del documento.
quality: The number of times to apply the filter.
strength : La fuerza o extensión de la sombra

Filtro Glow

alpha : transparencia del brillo
blurX: Cantidad de desenfoque horizontal
blurY : Cantidad de desenfoque vertical
color : color del brillo
inner: indica si es un brillo interior
knockout : efecto que hace el relleno del objeto transparente y revela el color de fondo del documento.
quality: número de veces a aplicar el filtro
strength : La fuerza o extensión de la sombra

Filtro Bevel

angle: ángulo del bevel
blurX: Cantidad de desenfoque horizontal
blurY : Cantidad de desenfoque vertical
distance: distancia del bevel
hilightAlpha: alpha de la luz
hilightColor: color de la luz
knockout : efecto que hace el relleno del objeto transparente y revela el color de fondo del documento.
quality: The number of times to apply the filter.
shadowAlpha:el alpha de la sombra
shadowColor: el color de la sombra
strength : La fuerza o extensión de la sombra
type: el tipo de bevel (valores "inner", "outer", "full")

Pensamiento

El tutorial consiste en un espacio de prueba de los diferentes filtros y sus propiedades. Tenemos cuatro clips en la escena, los cuales contienen una imagen transparente (importada desde un archivo .tga).

Al clicar encima de cada clip, se activa solamente este clip (con su respetivo filtro). Las propiedades blurX y blurY (comunes en los cuatro filtros que examinamos) se controlan via la distancia entre el cursor y la esquina superior izquierda de cada clip. Las demás propiedades de los filtros se controlan desde los campos de texto adyacentes.

Para implementar esta funcionalidad, asignaremos una propiedad activo a cada clip - si en un determinado fotograma el clip es activo, recrea su filtro, tomando la posición del cursor y los valores de los campos de texto como parametros.

Al hacer activo un clip, guardamos este clip en la variable clipActivo. Al clicar sobre un otro clip, desactivamos el anterior clip activo y borramos sus filtros.

A Programar!

Los clips llevan los nombres "rosa1", "rosa2" etc. Los campos de texto se nombran según el filtro y la propiedad que controlan, ej. "sombra_angulo", "glow_fuerza" etc.

Inicializamos los clips, creando la propiedad activo para cada clip y asignandoles la función de seleccionar.

import flash.filters.*;


//-------- Inicialización -----------------

totalClips = 4
clipSeleccionado = null

for (i=1;i<=totalClips;i++){
	this["rosa"+i].activo = false
	this["rosa"+i].onRelease = seleccionarMe		
}

function seleccionarMe(){
	if (clipSeleccionado == this) {return;}
	
	// desactivamos anterior clip activo
	clipSeleccionado.activo = false
	clipSeleccionado.filters = []
	
	// activamos este clip
	this.activo = true
	clipSeleccionado = this
}

Luego procedemos a asociar una función diferente al enterFrame de cada clip, programando el filtro particular.

Filtro Blur:

rosa1.onEnterFrame=function(){
	if (this.activo == false){return;}
	var blurX = this._xmouse/50
	var blurY = this._ymouse/50
	var calidad = blur_calidad.text
	
	filter = new BlurFilter(blurX, blurY, calidad)
	this.filters = [filter]
}

Filtro DropShadow:

rosa2.onEnterFrame=function(){
	if (this.activo == false){return;}
	
	centroRosaX = this._x+this._width/2
	centroRosaY = this._y+this._width/2
	distancia = sombra_distancia.text
	angulo = sombra_angulo.text
	color = 0x000000
	alpha = .7
	blurX = this._xmouse/50
	blurY = this._ymouse/50
	fuerza = sombra_fuerza.text
	calidad =sombra_calidad.text
	
	filter = new DropShadowFilter(distancia, angulo, color, alpha, blurX, blurY, fuerza,calidad)
	this.filters = [filter]
}

Filtro Glow:

rosa3.onEnterFrame=function(){
	if (this.activo == false){return;}
	
	color = 0x4A1010
	alpha = .7
	blurX = this._xmouse/20
	blurY = this._ymouse/20
	fuerza = glow_fuerza.text
	calidad =glow_calidad.text
	
	filter = new GlowFilter(color, alpha,blurX, blurY, fuerza, calidad)
	this.filters = [filter]
}

Filtro Bevel:

rosa4.onEnterFrame=function(){
	if (this.activo == false){return;}
	
	distancia = bevel_distancia.text
	angulo = bevel_angulo.text
	colorHilight = 0xFFFFFF
	alphaHilight = .7
	colorSombra = 0x4A1010
	alphaSombra = .7
	blurX = this._xmouse/20
	blurY = this._ymouse/20
	fuerza = bevel_fuerza.text
	calidad =bevel_calidad.text
	
	filter = new BevelFilter(distancia, 
	                         angulo, 
							 colorHilight, alphaHilight,
							 colorSombra, alphaSombra,
							 blurX,
							 blurY,
							 fuerza,
							 calidad)
	this.filters = [filter]
}

< indice de programación