Olá pessoal. Este artigo vem como uma continuação da matéria anterior. Mas enquanto em todas as matérias nós tivemos que estudar um pouco, nesta estudaremos muito mais.

O filtro de chanfro gradiente é aplicado a um objeto, como por exemplo, um retângulo, com as cores do gradiente distribuídas por três partes da forma: duas bordas de chanfro (um de realce e outro de sombreamento) e uma área conhecida como preenchimento de base.

Os diagramas a seguir ilustram o retângulo, com o tipo de chanfro definido como interno No retângulo esquerdo, as áreas em cinza escuro correspondem às bordas do chanfro, e a área em cinza claro representa o preenchimento de base. No retângulo direito, é aplicado um chanfro gradiente em arco-íris, com um chanfro de quatro cores em cada borda.

As diferentes propriedades do filtro de chanfro gradiente controlam o modo de aplicação do filtro.

As cores do chanfro gradiente são definidas no array de cores. A distribuição real de cores em cada parte do retângulo é determinada pelo array de proporções. A propriedade distance determina a distância de deslocamento ou a distância em pixels a ser aplicada à borda de chanfro em relação ao objeto.

As propriedades blurX e blurY controlam a nitidez das cores no chanfro; os valores mais altos tornam o chanfro efetivamente mais largo e suave, ao passo que os valores mais baixos o tornam mais fino e nítido. A propriedade angle equivale à fonte de luz teórica que incide sobre o objeto, causando um efeito de realce e sombreamento em suas bordas.

A propriedade strength controla a distribuição das cores: um valor de intensidade mais baixo obscurece as cores, como pode ser visto no exemplo, enquanto um valor mais alto torna os números externos no array mais nítidos, forçando um menor realce das cores intermediárias no array. Finalmente, as propriedades knockout e type determinam como e onde o filtro de chanfro será aplicado ao objeto inteiro: se o filtro vazará o objeto e onde ele será posicionado.

Um dos conceitos mais complicados no que se refere à aplicação ao filtro de chanfro gradiente consiste na distribuição de cores. Para compreender o modo de distribuição das cores em um chanfro gradiente, pense primeiro nas cores que deseja usar em seu chanfro gradiente. Como um chanfro simples aplica os conceitos já compreendidos sobre cor de realce e cor de sombreamento, você pode aplicar os mesmos conceitos para compreender o filtro de chanfro gradiente: há um gradiente de realce e um gradiente de sombreamento.

O realce aparece no canto superior esquerdo, e o sombreamento, no canto inferior direito. Há quatro cores no realce e quatro no sombreamento. Entretanto, é necessário adicionar outra cor (a cor do preenchimento de base), que aparecerá na interseção das bordas do realce e do sombreamento. O array contém nove cores, conforme ilustrado no diagrama anterior.

O número de cores no array determina o número de elementos no array de valores alfa e de proporções. O primeiro item no array de cores corresponde ao primeiro item no array de valores alfa e no array de proporções e assim por diante. Por haver nove cores, também há nove valores no array de valores alfa e nove no array de proporções. Os valores alfa definem o valor de transparência alfa das cores.

Os valores de proporção no array de proporções pode variar de 0 a 255 pixels. O valor intermediário é 128, que é o valor do preenchimento de base. Na maioria das utilizações, para você obter o efeito de chanfro desejado, atribua os valores de proporção conforme o modo a seguir, usando o exemplo das nove cores:

• As quatro primeiras cores variam de 0 a 127 e aumentam de valor, de modo que cada valor seja maior ou igual ao anterior. Essa é a primeira borda de chanfro, ou seja, nosso realce.
• A quinta cor (intermediária) corresponde ao preenchimento de base, definida como 128. O valor de pixel 128 define o preenchimento de base, que aparecerá fora da forma (e aoredor das bordas de chanfro) se type for definida como outer; ou dentro da fora, cobrindo efetivamente o preenchimento do próprio objeto se type for definida como inner.
• As quatro últimas cores variam de 129 a 255 e aumentam de valor, de modo que cada valor seja maior ou igual ao anterior. Essa é a segunda borda de chanfro, por exemplo, o seu sombreamento.

Se você imaginar um gradiente como composto de listras de várias cores, que se misturam umas às outras, cada valor de proporção definirá o número de pixels da cor associada, definindo, portanto, a largura da listra de cor no gradiente. Se desejar uma distribuição igual de cores para cada borda:

• Use um número ímpar de cores, com a cor intermediária como o preenchimento de base
• Distribua os valores entre 0 a 127 e 129 a 255 igualmente entre as cores
• Ajuste o valor para alterar a largura de cada listra de cor no gradiente

Dica: O valor do ângulo determina qual borda será usada como realce e qual será usada como sombreamento.

O valor do ângulo determina o ângulo usado para aplicar as cores de gradiente ao objeto, ou seja, o local em que o realce e o sombreamento aparecerão no objeto. As cores são aplicadas na mesma ordem do array.

O código a seguir usa um quadrado rosa (criado com a API de desenho) e aplica um filtro de gradiente em arco-íris. As cores são, na ordem apresentada no array: azul, verde, roxo e amarelo (realce); vermelho (preenchimento de base); amarelo, roxo, verde, preto (sombreamento). Para determinar os valores de proporção, atribuímos quatro valores de 0 a 127 praticamente iguais para as cores de realce e cores de sombreamento de 129 a 255. As cores das bordas externas foram azul (16) e preto (235).

var colors:Array = [0x0000FF, 0x00FF00, 0x9900FF, 0xFFFF00, 0xFF0000, 
0xFFFF00, 0x9900FF, 0x00FF00,0x000000];
var alphas:Array = [1, 1, 1, 1, 1, 1, 1, 1, 1];
var ratios:Array = [16, 32, 64, 96, 128, 160, 192, 224, 235];
var gradientBevel:GradientBevelFilter = new GradientBevelFilter(8, 225, 
colors, alphas, ratios, 16, 16, 1.3, 2, "inner", false);

A figura a seguir mostra o filtro de chanfro gradiente criado pelo código acima, um chanfro em arco-íris de nove cores aplicado a um clipe de filme de retângulo vermelho:

A linha tracejada mostra como os ângulos são determinados. A figura mostra como o ângulo de 225° é percebido no filtro e também mostra cada valor de proporção para cada cor. Definir o ângulo a 225° indica que a primeira cor do array iniciará a 225°, ou seja, no canto superior esquerdo (o realce). A linha pontilhada mostra onde são aplicados os gradientes de realce e de sombreamento.

A cor do clipe de filme original é rosa, mas a configuração do valor 128 para vermelho significa que o valor de 128 pixels é o preenchimento de base e cobre o preenchimento do clipe de filme original. Entretanto, quando você define a propriedade filters, o objeto original não é alterado; basta você desmarcar a propriedade filters para restaurar o preenchimento do clipe de filme original.

As propriedades de todos os filtros afetam uns aos outros, portanto, se ajustar uma propriedade para alterar o efeito que estiver aplicando, é possível que você também precise ajustar outra propriedade.
Este é o código ActionScript completo para criar a figura anterior:

import flash.filters.GradientBevelFilter;
// desenha uma forma quadrada preenchida atravéspela forma API
this.createEmptyMovieClip("square_mc", this.getNextHighestDepth());
square_mc.beginFill(0xFF99CC);
square_mc.moveTo(40, 40);
square_mc.lineTo(200, 40);
square_mc.lineTo(200, 200);
square_mc.lineTo(40, 200);
square_mc.lineTo(40, 40);
square_mc.endFill();
//criando a array que vai ter as cores
//azul, verde, roxo, amarelo, vermelho, amarelo, roxo, verde, preto
var colors:Array = [0x0000FF, 0x00FF00, 0x9900FF, 0xFFFF00, 0xFF0000, 
0xFFFF00, 0x9900FF, 0x00FF00,0x000000];
//criando a aaray que vai conter a intensidade dos alphas.
var alphas:Array = [1, 1, 1, 1, 1, 1, 1, 1, 1];
//array que vai conter as ângulos
var ratios:Array = [16, 32, 64, 96, 128, 160, 192, 224, 235];
// criar o objeto de filtro
var gradientBevel:GradientBevelFilter = new GradientBevelFilter(8, 225, 
colors, alphas, ratios, 16, 16, 1.3, 2, "inner", false);
// aplicar o filtro ao clipe de filme quadrado
square_mc.filters = [gradientBevel];

Arquivo .FLA. Um abraço galera e na próxima matéria: Aplicando Chanfro Gradiente/ GradientBevel.