DevSecOps

29 mai, 2009

ActionScript 3.0 – Utilizando Filtros

Publicidade

Filtros são parte importante para aplicação de efeitos visuais, a fim de proporcionar ao usuário uma maior riqueza visual. A aplicação de filtros é originalmente feita por softwares especializados em edição de imagens como o Adobe Photoshop® e o Adobe Fireworks®.

O ActionScript 3.0 possui diversas classes para aplicação de filtros, contidos no pacote flash.filters, onde uma série de filtros podem ser encontrados, permitindo ao desenvolvedor aplicar filtros em tempo de execução, esses filtros podem ser aplicados a display objects e bitmaps.

Um dos caminhos de adicionar riqueza visual ao projeto é aplicar simples efeitos gráficos a objetos, como um drop shadow por trás de uma foto criando uma ilusão de 3-d, glow em volta de um botão quando ele está ativo. O ActionScript 3.0 possui nove filtros que você pode aplicar em uma instância  display object ou uma instância BitmapData. Alguns dos filtros são básicos, como drop shadow e o blur, que permitem criar efeitos padronizados em suas funções, porém, existem filtros complexos que permitem a criação de diversos efeitos como embossing, edging e sharpness como o filtro displacement map e o filtro convolution.

  • Bevel filter (BevelFilter class)
  • Blur filter (BlurFilter class)
  • Drop shadow filter (DropShadowFilter class)
  • Glow filter (GlowFilter class)
  • Gradient bevel filter (GradientBevelFilter class)
  • Gradient glow filter (GradientGlowFilter class)
  • Color matrix filter (ColorMatrixFilter class)
  • Convolution filter (ConvolutionFilter class)
  • Displacement map filter (DisplacementMapFilter class)

Criando e aplicando Filtros

Cada filtro é definido como uma classe, então aplicar filtros envolve a criação de instâncias de objetos de filtros, isso não é diferente de qualquer construção de outro tipo de objeto.

Uma vez criada a instância de um filtro, você pode facilmente aplicá-lo usando a propriedade filters no caso de um display object. No caso de um BitmapData, use o método applyFilter().

import flash.filters.DropShadowFilter;
var filtro:DropShadowFilter = new DropShadowFilter();

Aplicando Filtro a um DisplayObject

import flash.filters.DropShadowFilter;
var filtro:DropShadowFilter = new DropShadowFilter();

meuDisplayObject.filters = [filtro];

Removendo um Filtro de um DisplayObject

import flash.filters.DropShadowFilter;
var filtro:DropShadowFilter = new DropShadowFilter();

meuDisplayObject.filters = [filtro];
//Removendo em seguida
meuDisplayObject.filters = null;

Classe BlurFilter

A classe BlurFilter mancha, ou embaça, um display object e seu conteúdo. Efeitos de Blur são úteis para ter a impressão que um objeto está fora de foco ou para simular movimento rápido, como em um motion blur. Configurando a propriedade quality do filtro blur para baixa, você pode simular um efeito de lentes fora de foco suavemente. Configurando a propriedade quality para alto o resultado é um suave efeito blur similar a um Gaussian blur.
O seguinte exemplo cria um circulo usando o método drawCircle() da classe Graphics e aplica um filtro blur a ele:

import flash.display.Sprite;
import flash.filters.BitmapFilterQuality;
import flash.filters.BlurFilter;

// Desenhamos um circulo.
var redDotCutout:Sprite = new Sprite();
redDotCutout.graphics.lineStyle();
redDotCutout.graphics.beginFill(0xFF0000);
redDotCutout.graphics.drawCircle(145, 90, 25);
redDotCutout.graphics.endFill();

// Adiciona o circulo na display list.
addChild(redDotCutout);

// Aplica o filtro blur ao circulo.
var blur:BlurFilter = new BlurFilter();
blur.blurX = 10;
blur.blurY = 10;
blur.quality = BitmapFilterQuality.MEDIUM;
redDotCutout.filters = [blur];

Classe DropShadowFilter

Drop shadows dão a impressão de que há uma fonte de luz separada situada acima do objeto alvo. A posição e a intensidade dessa fonte de luz podem ser modificadas para produzir uma variedade de diferentes efeitos drop shadow.

O filtro drop shadow usa um algoritmo que é similar ao algoritmo do filtro blur. A principal diferença é que o filtro drop shadow filter tem um pouco mais de propriedades que você pode modificar para simular diferentes atributos de fontes de luz (assim como transparência, cor, balanceamento e brilho).

O filtro drop shadow também permite aplicar customizadas opções de transformações no estilo do drop shadow, incluindo sombras dentro ou fora e modo knockout (também conhecido como tirar fora).

O seguinte código cria um quadrado e aplica um filtro drop shadow a ele:

import flash.display.Sprite;
import flash.filters.DropShadowFilter;

// Desenha um quadrado.
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);

// Aplica o filtro drop shadow ao quadrado.
var shadow:DropShadowFilter = new DropShadowFilter();
shadow.distance = 10;
shadow.angle = 25;

// Você também pode aplicar outras propriedades, assim como cor da sombra,
// alpha, quantidade de blur, strength, quality, e opções para
// inner shadows e efeitos knockout.

boxShadow.filters = [shadow];

Classe ColorMatrixFilter

A classe ColorMatrixFilter é usada para manipular valores de cor e transparência de objetos. Isso permite criar mudanças de saturação, rotação de cor (mudar um alcance de uma paleta de cores a outro), alterações de luminosidade, e outros efeitos de manipulação de cores usando valores a partir de um canal de cor e potencialmente aplicando então a outros canais.

Conceitualmente, o filtro vai através dos pixels na imagem fonte uma por uma e separa cada pixel para dentro de seus componentes vermelho, verde, azul e alpha. Ele então multiplica valores providos na cor matriz por um cada desses valores, adicionando os resultados juntos para determinar o valor da cor resultante que será mostrada na tela para aquele pixel. A propriedade matrix do filtro está numa lista de 20 números que são usados para calcular a cor final. Para detalhes do algoritmo específico usado para calcular os valores de cor, consulte no help a propriedade matrix da classe ColorMatrixFilter em ActionScript 3.0 Language and Components Reference.

Outras informações e exemplos do filtro color matrix podem ser encontrados no artigo “Using Matrices for Transformations, Color Adjustments, and Convolution Effects in Flash” no web site Adobe Developer Center.