Depois de um tutorial de como utilizar os filtros disponiveis no flex, venho agora falar de mais algumas propriedades graficas bem interessantes no flex e também de blends.

Presente em muitos programas gráficos, o flex também suporta mask, ou seja, a utilização de um objecto como area de “alcance” de outro, imaginem ter um rectangulo e colocam um circulo como mask desse rectangulo, o resultado final será apenas a area do rectangulo correspondente à area do circulo, podemos ver isso pelas seguinte imagem:

Isto aplicado ao flex é muito simples de executar, basta criar uma imagem, criar um mask (que pode ser um canvas por exemplo) e indicar à imagem que deve aplicar a si o mask (canvas como mask.) , vejam o código:

<mx:Image source=”assets/velas.png” x=”518″ y=”10″ mask=”{maskCanvas}”/>

<mx:Canvas x=”596″ y=”61″ width=”344″ height=”274″ backgroundColor=”#999999″ id=”maskCanvas” cornerRadius=”65″ borderStyle=”solid”/>

Este simples código aplica a mask/mascara falada anteriormente, ficando com resultado muito parecido com a imagem em cima. A mascara é atribuida com a propriedade mask=”{objecto mascara}” e deve-se ter em especial atenção se usarem uma imagem para servir de mask, já que devem definir a propriedade cacheAsBitmap=”true” ou não funcionará correctamente. Um aspecto bem interessante é a possibilidade de usarem uma imagem png com areas tranparentes, como mostra a imagem em baixo:

Com o seguinte código:

<mx:Image source=”assets/velas.png” x=”518″ y=”10″ mask=”{ maskImage }”/>

<mx:Image source=”assets/folhasTransparentes.png” x=”518″ y=”10″ id=”maskImage” cacheAsBitmap=”true” />

Como podem ver a versatilidade é imensa, e podemos conseguir efeitos bem interessantes com as mask’s no flex, até mesmo utilizar uma mask em cima de um video como podem ver aqui.

Quanto aos blends, qualquer elemento gráfico do flex suporta blend’s, e pelo package flash.display.BlendMode têm acesso a um conjunto de blends que nos deixam fazer alguns “truques” no que diz respeito a imagens, vejam então os tipos de blends disponiveis:

NORMAL, ADD, ALPHA, DARKEN, DIFFERENCE, ERASE, HARDLIGHT, INVERT, LAYER, LIGHTEN, MULTIPLY, OVERLAY, SCREEN, SUBTRACT

Vamos agora ter como exemplos a aplicação destes efeitos, um por um e ver o seu resultado final, exceptuando o BlendMode.NORMAL que é o defeito aplicado na ausencia de definição do mesmo.

O que vamos começar por fazer é usar duas imagens, e sobrepor ambas, de notar que coloquei uma segunda copia da segunda imagem:

O resultado desta sobreposição no flex pode ser atingido pela seguinte forma:

<mx:Image x=”148″ y=”327″ source=”assets/velasBright.png” id=”sourceImg”/>
<mx:Image x=”252″ y=”329″ source=”assets/folhas.png” id=”blenderImg2″/>
<mx:Image x=”148″ y=”367″ source=”assets/folhas.png” id=”blenderImg”/>

E vamos agora criar uma pequena função para aplicar os blends, vejam:

<mx:Script>
<![CDATA[
import flash.display.BlendMode;

private function doBlend(blend:String):void {
blenderImg.blendMode=blend;
blenderImg2.blendMode=blend;
}

]]>
</mx:Script>

Agora basta chamar a função e aplicar os blends que desejar-mos, como por exemplo os 4 exemplos seguintes:

Podem ser aplicados todos os blends disponiveis no package, usando apenas essa função, no decorrer do estudo fiz um exemplo com o código fonte disponivel que podem ver aqui.

Podem ver um explorador com blends animadaos bem como estes simples aqui.

E bom, por agora é tudo, este foi mais um tutorial no decorrer dos meus estudos para a Certificação Flex 3 englobando o ponto: “Change the look & feel of a design by using API Styles, style sheets, filters, and blends”, que engloba também o meu post anterior : Tutorial, Flex Filters.

Referencias:
http://livedocs.adobe.com
http://www.cynergysystems.com/blogs/blogs/andrew.trice/

Espero que seja util, principalmente para quem pensa em fazer esta Certificação.

Abraços.