Tutorial, Flex Filters

por: Mário Santos

Ando mais uma vista de olhos no flex, venho falar hoje de alguns filtros e blend’s nativos no flex. Além do action script ser muito versatil em animação no que diz respeito a filtros e blends também não fica nada atras, e uma prova disso é o package filters disponivel no flex/flash, vejam:

  • BevelFilter
  • GlowFilter
  • ColorMatrixFilter
  • ConvolutionFilter
  • DisplacementMapFilter
  • DropShadowFilter
  • BlurFilter
  • GradientBevelFilter
  • GradientGlowFilter

Destes filtros já falei de alguns no Tutorial Action Script 3, e enumerar exemplos deles todos, começando por criar uma imagem:

<mx:Image x=”266″ y=”199″ width=”266″ height=”240″ source=”assets/television.png” id=”imagem”/>


Aplicando Filtros:

  • BevelFilter

import flash.filters.BevelFilter;

private function doBevel():void {
var filter:BevelFilter;
var distance:Number       = 5;
var angleInDegrees:Number = 45;
var highlightColor:Number = 0xFFFF00;
var highlightAlpha:Number = 0.8;
var shadowColor:Number    = 0x0000FF;
var shadowAlpha:Number    = 0.8;
var blurX:Number          = 5;
var blurY:Number          = 5;
var strength:Number       = 5;
var quality:Number        = BitmapFilterQuality.HIGH;
var type:String           = BitmapFilterType.INNER;
var knockout:Boolean      = false;

var filtro:BevelFilter;
filtro = new BevelFilter(distance, angleInDegrees, highlightColor, highlightAlpha, shadowColor, shadowAlpha,  blurX, blurY, strength, quality, type, knockout);
imagem.filters=[filtro];
}
  • GlowFilter (Cria um efeito glow na imagem )
private function doGlow():void {
imagem.filters=[];
var color:Number = 0x33CCFF;
var alpha:Number = 0.8;
var blurX:Number = 35;
var blurY:Number = 35;
var strength:Number = 2;
var inner:Boolean = false;
var knockout:Boolean = false;
var quality:Number = BitmapFilterQuality.HIGH;

var filtro:GlowFilter;
filtro= new GlowFilter(color, alpha, blurX, blurY, strength, quality, inner, knockout);
imagem.filters=[filtro];
}
  • ColorMatrixFilter (Permite a alteração de todos os canais de cor RGB e alphas; matriz 5×4)
private function doMatrix():void {
imagem.filters=[]
var RedLum:Number = 0.2225;
var GreenLum:Number = 0.7169;
var BlueLum:Number = 0.0606;

var bwMatrix:Array = [RedLum, GreenLum, BlueLum, 0, 0,
RedLum, GreenLum, BlueLum, 0, 0,
RedLum, GreenLum, BlueLum, 0, 0,
0, 0, 0, 1, 0];
//canais Red, Green, Blue e Alpha, transformando a imagem em preto e branco
var filtro:ColorMatrixFilter = new ColorMatrixFilter(bwMatrix);
imagem.filters=[filtro];

}
  • ConvolutionFilter (Alteração de algumas propriedades como brilho, sharp, outline; Matriz 3×3 )
private function doConvul():void {
imagem.filters=[];
var matrixX:Number = 3;
var matrixY:Number = 3;
var divisor:Number = 9;

//brightness
/*var matrix:Array = [5, 5, 5,
5, 0, 5,
5, 5, 5];*/
//outline
/*  var matrix:Array = [-30, 30, 0,
-30, 30, 0,
-30, 30, 0];*/
//sharpness
var matrix:Array = [0, -1, 0,
-1, 20, -1,
0, -1, 0];
//sempre uma matriz 3 por 3

var filtro:ConvolutionFilter = new ConvolutionFilter(matrixX, matrixY, matrix, divisor);
imagem.filters=[filtro];
}
  • DisplacementMapFilter (cria uma copia da imagem e aplica o filtro nela sobrepondo-a, um dos mais complicados para entender)
private function doDisplace():void {

var mapImage:BitmapData;
var displacementMap:DisplacementMapFilter;

//atribuimos uma copia do tamanho da imagem original
mapImage = new BitmapData(imagem.width, imagem.height, true, 0xFF0000);

// criamos o filtro e suas propriedades
displacementMap = new DisplacementMapFilter();
displacementMap.mapBitmap = mapImage;
displacementMap.mapPoint = new Point(0, 0);
displacementMap.componentX = BitmapDataChannel.RED;
displacementMap.alpha=0.5;
//displacementMap.mode=DisplacementMapFilterMode.CLAMP
displacementMap.scaleX = 250;
imagem.filters = [displacementMap];

}
  • DropShadowFilter (cria uma sombra na imagem)
private function doShadow():void {
imagem.filters=[];
var color:Number = 0×000000;
var angle:Number = 45;
var alpha:Number = 0.8;
var blurX:Number = 8;
var blurY:Number = 8;
var distance:Number = 15;
var strength:Number = 0.65;
var inner:Boolean = false;
var knockout:Boolean = false;
var quality:Number = BitmapFilterQuality.HIGH;
var filtro:DropShadowFilter = new DropShadowFilter(distance, angle, color,  alpha,  blurX, blurY, strength, quality, inner, knockout);
imagem.filters=[filtro];
}
  • BlurFilter (Cria um efeito Blur)
private function doBlur():void {
imagem.filters=[];
var blurX:Number = 10;
var blurY:Number = 10;
var filtro:BlurFilter = new BlurFilter(blurX, blurY, BitmapFilterQuality.HIGH);
imagem.filters=[filtro];
}
  • GradientBevelFilter (Cria um Bevel com mais que uma cor, em formato gradiente)
private function doGradientBevel():void {
imagem.filters=[];
var bgColor:uint     = 0xCCCCCC;
var size:uint        = 80;
var offset:uint      = 10;
var distance:Number  = 25;
var angleInDegrees:Number = 225;
var colors:Array     = [0xFFFFFF, 0xCCCCCC, 0x000000];
var alphas:Array     = [1, 0, 1];
var ratios:Array     = [0, 128, 255];
var blurX:Number     = 8;
var blurY:Number     = 8;
var strength:Number  = 2;
var quality:Number   = BitmapFilterQuality.MEDIUM
var type:String      = BitmapFilterType.OUTER;
var knockout:Boolean = false;

var filtro:GradientBevelFilter = new GradientBevelFilter(distance, angleInDegrees, colors, alphas, ratios, blurX, blurY, strength, quality, type,  knockout);
imagem.filters=[filtro];
}
  • GradientGlowFilter (cria um glow, mas em formato de gradient)
private function doGradientGlow():void {

imagem.filters=[];
var bgColor:uint = 0xCCCCCC;
var size:uint    = 80;
var offset:uint  = 50;
var distance:Number  = 0;
var angleInDegrees:Number = 45;
var colors:Array     = [0xFFFFFF, 0xFF0000, 0xFFFF00, 0x00CCFF];
var alphas:Array     = [0, 1, 1, 1];
var ratios:Array     = [0, 63, 126, 255];
var blurX:Number     = 20;
var blurY:Number     = 20;
var strength:Number  = 2.5;
var quality:Number   = BitmapFilterQuality.HIGH;
var type:String      = BitmapFilterType.OUTER;
var knockout:Boolean = false;

var filtro:GradientGlowFilter = new GradientGlowFilter(distance, angleInDegrees, colors, alphas, ratios,  blurX, blurY, strength, quality, type, knockout);

imagem.filters=[filtro];

}

Como podem ver é possivel fazer muitos dos filtros disponiveis em muitos aplicativos gráficos, e de uma forma bem simples… dos filtros falados em cima, os que podem parecer mais complicados estão bem documentados na pagina pagina oficial de referencia ao flex no site da adobe.

Podem ver a aplicação desenvolvida durante este meu estudo e exploração do package de filtros aqui com o código fonte disponivel.

No próximo post vou falar de Blends, mais algumas classes para modificação de imagens/bitmaps.

Abraços.

Deixe um comentário ou um Trackback
   

Deixe um comentário

O seu email nunca será publicado ou partilhado. Campos obrigatórios estão marcados com um *

*
*