Efecto reflexión

Trasteando con Microsoft Expression Blend2 he conseguido crear un efecto llamativo y que le da un toque sutil a nuestra aplicación.

El punto de partida es la inserción de un Media Element (un video en mi caso), seguidamente crearemos el efecto de reflexión de dicho elemento.

Lo primero que debemos hacer es introducir un video a nuestro proyecto. Para ello debemos situarnos en el explorador de archivos de Expression Blend, haremos click con el botón derecho sobre nuestro proyecto y le indicamos agregar elemento existente, en nuestro caso un video.

Efectorefle1

El siguiente paso es arrastrar el video que está situado en el explorador de soluciones a la pantalla principal de nuestra aplicación, después seleccionaremos Herramientas->Crear Recurso de Pincel->Crear Recurso Visual Brush. Le otorgaremos un nombre a nuestro pincel”reflejo” y el área de definición será toda la ventana.

Efectorefle2

De este modo se ha creado un pincel de nuestro video que vamos a utilizar para realizar el efecto de reflexión

Ahora seleccionamos de la barra de herramientas el objeto rectángulo, y le damos el mismo tamaño que el video pero situando en la parte inferior de nuestro entorno de trabajo.

Teniendo seleccionado el objeto rectángulo, nos situaremos en la pestaña propiedades, en el apartado Pinceles, seleccionamos la propiedad Fill. Seleccionamos Recursos de Pincel Efectorefle3 , aparecerá nuestro pincel “reflejo”, lo seleccionamos y tenemos un reflejo de el video. Pero te preguntarás pero el reflejo no tiene que ser invertido, si ciertamente. Para lógralo nos situamos en la sección Transformación y seleccionamos en una primera instancia Voltear  Efectorefle4 y seguidamente Voltear eje Y Efectorefle5 .

Para que nuestra reflexión sea más sofisticada lo que haremos es quitarle algo de opacidad. Con el objeto rectángulo seleccionado, en la sección Pinceles, seleccionamos la propiedad OpacityMask, luego el pincel de degradado  Efectorefle6 y accedemos al apartado Apariencia, donde pondremos el valor de la propiedad Opacity al 50%.

Por último ejecutaremos la aplicación F5 y de este modo hemos creado el llamativo efecto de reflexión.

Efectorefle7

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *