Tutorial, Flex y la Máscara de mezclas


Después de un tutorial sobre cómo utilizar los filtros disponibles en flex, me referiré ahora a algunas propiedades más interesantes GRÁFICAS así en flex y también mezclas.

Presente en muchos programas de gráficos, también apoya la máscara flex, es decir, la utilización de un tema como el "alcance" de otro, imaginar tener un rectángulo y un círculo como máscara que la casilla, el resultado final será la única zona de rectángulo que rodea el área correspondiente del círculo, podemos ver que la siguiente imagen:

Esto se aplica a flex es muy sencillo de ejecutar, basta con crear una imagen, crear una máscara (que puede ser un lienzo, por ejemplo) y mostrar la imagen que debe aplicarse a la propia máscara (como una máscara de tela.), Ver el código:

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

<Mx: Lienzo "596" x = y = "61" width = "344" height = "274" backgroundColor = "# 999999" id = "maskCanvas" cornerRadius = "65" BorderStyle = "solid" />

Este simple código se aplica a la máscara o máscara hablado anteriormente, con resultados muy similares a la imagen de arriba. La máscara se atribuye a la propiedad mask = ") (objeto de las máscaras" y debe tener un especial cuidado si utilizan una imagen para servirán como una máscara, ya que debe definir la propiedad cacheAsBitmap = "true" o no funciona correctamente. Una cosa muy interesante es la posibilidad de utilizar una imagen PNG con tranparent zonas, como se muestra en la imagen a continuación:

Con el siguiente 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 se puede ver la versatilidad es inmenso, y puede lograr efectos interesantes con la máscara no flex, incluso con una máscara en la parte superior de un video como pueden ver aquí.

En cuanto a mezclas, un widget de la mezcla de flex apoya, y el paquete flash.display.BlendMode tengan acceso a una variedad de mezclas que nos hacen hacer algunos "trucos" con respecto a las imágenes y, a continuación, ver los tipos de mezclas Disponible en:

NORMAL, ADD, ALPHA, oscuro, la diferencia, ERASE, HARDLIGHT, invertir, CAPA, Aligera, Multiplicar, superposición, pantalla, restar

Ahora tenemos como ejemplos la aplicación de estos efectos, una por una y ver sus resultados, excepto el BlendMode.NORMAL que el defecto se aplica en la ausencia de definición de la misma.

Lo que hacemos es empezar con dos imágenes, y la superposición de los dos que pusieron a cabo una segunda copia de la segunda imagen:

Fuente:

Blender:

Superposición:

El resultado de esta superposición de flex se puede llegar de la siguiente manera:

<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"/>

Y ahora vamos a crear una pequeña función de aplicar las mezclas, véase:

<mx:Script>
<! [CDATA [
flash.display.BlendMode importación;

private function doBlend (mezcla: String): void (
blenderImg.blendMode = mezcla;
blenderImg2.blendMode = mezcla;
)

]]>
</ Mx: Script>

Ahora acaba de llamar a la función y aplicar las mezclas que usted quiere que yo, como los 4 siguientes ejemplos:

doBlend (BendMode.ADD):

doBlend (BlendMode.INVERT):

doBlend (BlendMode.SUBSTRACT):

doBlend (BlendMode.HARDLIGHT):

Puede ser aplicado todas las mezclas disponibles en el paquete, utilizando únicamente esta función, en el curso del estudio realizado un ejemplo con código fuente disponible que se puede ver aquí.

Se puede ver un explorador con las mezclas y animadaos estas sencillas aquí.

Y bueno por ahora es todo, este era más un tutorial en el curso de mis estudios para la certificación Flex 3 que abarca el punto: "Cambiar el look & feel del diseño mediante el uso de la API de Estilos, hojas de estilo, filtros y mezclas," que también incluye mi anterior post: Tutorial, Flex Filtros.

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

Espero que sea útil, especialmente para aquellos pensando en hacer esta certificación.

Abrazar.

la versión en formato pdf disponible temporalmente.
Dejar un comentario o una Trackback

Un comentario

  1. 12 de noviembre de 2008 a 2:12 pm | Permalink

    Muy bien, voy a investigar. Gracias

Déjanos tu comentario

Su dirección de correo electrónico nunca es publicado o compartido. Los campos obligatorios están marcados con un *