Este documento describe los filtros en Adobe Flash y cómo funcionan. Explica que cuando se aplica un filtro a un objeto visual, Flash crea una copia en caché del objeto original como un mapa de bits transparente. También describe cómo añadir y cambiar filtros en tiempo de ejecución y los efectos de filtros comunes como desenfoque, sombra y bisel.

1. FUNCIONAMIENTO DE LOS FILTROS DINA LUCIA ALMANZARITA LUCIA MUÑOZCARLOS ANDRÉS MARTÍNEZ

2. FUNCIONAMIENTO DE LOS FILTROS Al aplicar un filtro a un objeto de visualización, se crea en caché una copia del objeto original como un mapa de bits transparente. Una vez que un filtro se ha aplicado a un objeto de visualización, Adobe Flash Player almacena en caché el objeto como un mapa de bits mientras éste mantiene una lista de filtros válida.

3. Este mapa de bits de origen se usa luego como imagen original para todas las aplicaciones posteriores de efectos de filtros. Normalmente, un objeto de visualización contiene dos mapas de bits: uno con el objeto de visualización de origen sin filtrar (original) y otro con la imagen final una vez filtrada. La imagen final se usa en la representación. Mientras el objeto de visualización no cambie, la imagen final no necesita actualización.

4. FILTROS Y CACHÉ DE MAPAS DE BITS Para aplicar un filtro a un objeto de visualización, debe estar activada la caché de mapa de bits para ese objeto. Al aplicar un filtro a un objeto de visualización cuya propiedad cacheAsBitmap tiene el valor false, Flash Player automáticamente establece el valor de la propiedad cacheAsBitmap del objeto como true. Si más adelante se quitan todos los filtros del objeto de visualización, Flash Player restablecer el valor que la propiedad cacheAsBitmap tenía con anterioridad.

5. CAMBIO DE FILTROS EN TIEMPO DE EJECUCIÓN Si un objeto de visualización tiene uno o más filtros aplicados, no es posible añadir más filtros a la matriz de la propiedad filters. En vez de eso, para añadir filtros o cambiar el conjunto de filtros aplicados, es necesario crear una copia de toda la matriz filters y realizar las modificaciones en esta matriz provisional. A continuación, esa matriz se vuelve a asignar a la propiedad filters del objeto de visualización para que los filtros se apliquen al objeto. Este proceso se muestra en el siguiente código. Inicialmente se aplica un filtro de iluminado al objeto de visualización llamado myDisplayObject; luego, cuando se hace clic en el objeto, se llama a la función addFilters(). Mediante esta función se aplican dos filtros más a myDisplayObject:

6. import flash.events.MouseEvent; import flash.filters.*; myDisplayObject.filters = [new GlowFilter()]; function addFilters(event:MouseEvent):void { // Hacer una copia de la matriz de filtros. var filtersCopy:Array = myDisplayObject.filters; // Realizar los cambios deseados en los filtros (en este caso, // añadiendo filtros). filtersCopy.push(new BlurFilter()); filtersCopy.push(new DropShadowFilter()); // Aplicar los cambios reasignando la matriz a la propiedad filters. myDisplayObject.filters = filtersCopy; } myDisplayObject.addEventListener(MouseEvent.CLICK,addFilters);

7. FILTROS Y TRANSFORMACIONES DE OBJETOS Ninguna región filtrada (una sombra, por ejemplo) que se encuentre fuera del recuadro de delimitación rectangular de un objeto de visualización se considera parte de la superficie a efectos de la detección de colisiones (determinar si una instancia se solapa o corta con otra instancia). Dado que los métodos de detección de colisiones de la clase DisplayObject se basan en vectores, no es posible llevar a cabo esta operación sobre un resultado que es un mapa de bits. Por ejemplo, si se aplica un filtro de bisel a una instancia de botón, la detección de colisiones no estará disponible en la parte biselada de la instancia.

8. FILTROS Y OBJETOS DE MAPAS DE BITS Al aplicar un filtro a un objeto BitmapData, la propiedad cacheAsBitmap toma automáticamente el valor true. De este modo, el filtro se aplica en realidad a la copia del objeto en lugar de al original. Esta copia se coloca a continuación en la visualización principal (sobre el objeto original) tan cerca como sea posible del píxel más cercano. Si los límites del mapa de bits original cambian, la copia del mapa de bits con el filtro se vuelve a crear de nuevo en lugar de estirarla o distorsionarla. Si se quitan todos los filtros de un objeto de visualización, se restablece el valor que la propiedad cacheAsBitmap tenía antes de aplicarse el filtro

9. FILTRO DE BISEL La clase BevelFilter permite añadir un borde biselado tridimensional al objeto filtrado. Este filtro hace que las esquinas o bordes duros del objeto adquieran una apariencia cincelada o biselada. Las propiedades de la clase BevelFilter permiten personalizar la apariencia del bisel. Se pueden definir los colores de iluminación y sombra, el desenfoque de los bordes del bisel, los ángulos de biselado y la colocación de los bordes del bisel; incluso se puede crear un efecto extractor.

10. EN EL SIGUIENTE EJEMPLO SE CARGA UNA IMAGEN EXTERNA Y SE LE APLICA UN FILTRO DE BISEL. import flash.display.*; import flash.filters.BevelFilter; import flash.filters.BitmapFilterQuality; import flash.filters.BitmapFilterType; import flash.net.URLRequest; // Cargar una imagen en el escenario. var imageLoader:Loader = new Loader(); var url:String = "http://www.helpexamples.com/flash/images/image3.jpg"; var urlReq:URLRequest = new URLRequest(url); imageLoader.load(urlReq); addChild(imageLoader); // Crear el filtro de bisel y definir sus propiedades. var bevel:BevelFilter = new BevelFilter(); bevel.distance = 5; bevel.angle = 45; bevel.highlightColor = 0xFFFF00; bevel.highlightAlpha = 0.8; bevel.shadowColor = 0x666666; bevel.shadowAlpha = 0.8; bevel.blurX = 5; bevel.blurY = 5; bevel.strength = 5; bevel.quality = BitmapFilterQuality.HIGH; bevel.type = BitmapFilterType.INNER; bevel.knockout = false; // Aplicar el filtro a la imagen. imageLoader.filters = [bevel];

11. FILTRO DE DESENFOQUE La clase BlurFilter difumina, o desenfoca, un objeto de visualización y su contenido. Los efectos de desenfoque resultan útiles para dar la impresión de que un objeto no está bien enfocado o para simular un movimiento rápido, como en el desenfoque por movimiento. Si se define la propiedad quality del filtro de desenfoque en un nivel bajo, se puede simular un efecto de lente ligeramente desenfocada. Si la propiedad quality se establece en un nivel alto, da lugar a un efecto de desenfoque suave similar a un desenfoque gaussiano.

12. EN EL SIGUIENTE EJEMPLO SE CREA UN OBJETO CIRCULAR USANDO EL MÉTODO DRAWCIRCLE() DE LA CLASE GRAPHICS Y SE LE APLICA UN EFECTO DE DESENFOQUE: import flash.display.Sprite; import flash.filters.BitmapFilterQuality; import flash.filters.BlurFilter; // Dibujar un círculo. var redDotCutout:Sprite = new Sprite(); redDotCutout.graphics.lineStyle(); redDotCutout.graphics.beginFill(0xFF0000); redDotCutout.graphics.drawCircle(145, 90, 25); redDotCutout.graphics.endFill(); // Añadir el círculo a la lista de visualización. addChild(redDotCutout); // Aplicar el filtro de desenfoque al rectángulo. var blur:BlurFilter = new BlurFilter(); blur.blurX = 10; blur.blurY = 10; blur.quality = BitmapFilterQuality.MEDIUM; redDotCutout.filters = [blur];

13. FILTRO DE SOMBRA Las sombras dan la impresión de que existe una fuente de luz independiente situada sobre el objeto de destino. La posición e intensidad de esta fuente de luz se puede modificar para originar toda una gama de distintos efectos de sombra. El filtro de sombra usa un algoritmo similar al del filtro de desenfoque. La principal diferencia es que el filtro de sombra tiene unas pocas propiedades más que se pueden modificar para simular los distintos atributos de la fuente de luz (como alfa, color, desplazamiento y brillo). El filtro de sombra también permite aplicar opciones de transformación personalizadas sobre el estilo de la sombra, incluidas la sombra interior o exterior y el modo extractor (también conocido como silueta).

14. EL SIGUIENTE CÓDIGO CREA UNA UN OBJETO SPRITE CUADRADO Y LE APLICA UN FILTRO DE SOMBRA: import flash.display.Sprite; import flash.filters.DropShadowFilter; // Dibujar un cuadrado. var boxShadow:Sprite = new Sprite(); boxShadow.graphics.lineStyle(1); boxShadow.graphics.beginFill(0xFF3300); boxShadow.graphics.drawRect(0, 0, 100, 100); boxShadow.graphics.endFill(); addChild(boxShadow); // Aplicar el filtro de sombra al cuadrado. var shadow:DropShadowFilter = new DropShadowFilter(); shadow.distance = 10; shadow.angle = 25; // También se pueden establecer otras propiedades, como el color // de la sombra, el alfa, el desenfoque, la fuerza, la calidad // y las opciones de los efectos de sombra interior y extractor. boxShadow.filters = [shadow];