6 de octubre de 2011

Efecto reflejo en Flash Builder 4


El efecto de espejo o reflejo, es uno de los efectos que Apple nos hizo pensar que eran cool, creo que lo lograron por que si son bonitos, y dan buen impacto visual.. Actualizando un proyecto que tenía en fx3 a fb4 tuve que actualizarme un poco al respecto, siempre había usado la clase Reflection de rictus.com, -el post lo pueden ver aquí - para hacer este efecto.

Esa clase creo, me dio problemas cuando la implementé en mi proyecto fb4, así que lo del efecto de reflejo lo dejé para el final. Revisando en AdobeTV -sitio que siempre recomiendo a todos los que me escriben preguntando sobre como aprender Flex - encontré como hacerlo, Chet Hease explica cómo, el video es de dos partes y lo que no me gusta de Chet es que habla demasiado. Lo que tenemos que hacer es lo siguiente

1. Crear una clase llamada ReflectorContainer que va a extender de BitmapImage con el siguiente código


<?xml version="1.0" encoding="utf-8"?>
<s:BitmapImage
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
maskType="alpha"
filters="{[blur]}"
smooth="true"
width="{source.width}" height="{source.height}"
scaleY="-1">

<fx:Declarations>
<s:BlurFilter blurY="1" id="blur"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
]]>
</fx:Script>
<s:mask>
<s:Group>
<s:Rect width="{source.width}" height="{source.height}">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="white" alpha="0" ratio="0.5"/>
<s:GradientEntry color="white" alpha="1"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
</s:Group>
</s:mask>
</s:BitmapImage>

2. Envolver el contenido a ser reflejado y la instancia de ReflectorContainer con un VGroup quedando algo así

<s:VGroup gap="0" verticalAlign="top">
    <s:Image id="cucho" x="146" y="10" width="280" height="200" scaleMode="stretch" smooth="true" source="cucho.jpg"/>
<local:ReflectionContainer source="{cucho}" width="{cucho.width}" height="{cucho.height}"/>
</s:VGroup>

y lesto, un efecto de reflejo sin mucho esfuerzo. Aquí les dejo el .fxp