Reflections in Adobe Flex

VIEW THE DEMO

DOWNLOAD THE SOURCE CODE

GUI Reflections are quite popular in many circles. Apple uses them quite a bit (with iTunes and Safari) and the new XBox interface also features cards that are reflected in the ground.

Adding this this effect to a Flex application is quite easy, thanks to the Reflection class by Ben Stucki. This tutorial will show you how.

Download the Flex Reflection Library from here. Extract it and add it to the Flex Build Path.

The reflection class will draw the reflection of a a GUI control and it's children. Since the reflection generally appears at the bottom of the screen, a VBox is useful for positioning the GUI controls at the top, and adding the Reflection element at the bottom. Here we have a VBox with a Canvas at the top and the Reflection at the bottom. The Canvas then has some children of it's own, all of which will appear in the reflection.

We tell the Reflection element to draw the reflection of the canvas by setting its target attribute.

Also notice that we are calling the drawReflection function of the Reflection element every frame (with the enterFrame event). This allows the reflection to be updated, although you could call this only in response to GUI updates if performance was an issue.

<mx:VBox top="0" bottom="0" right="0" left="0" verticalGap="0">

<mx:Canvas width="100%" height="70%" id="canvas">

<mx:Image bottom="0" top="0" left="0" right="0" id="image" source="{Image1}" scaleContent="false"/>

<mx:Button label="Image 3" right="10" bottom="10" click="{image.source = Image3}" fillAlphas="[0.9, 0.9, 0.9, 1.0]"/>

<mx:Button label="Image 1" bottom="10" left="10" click="{image.source = Image1}" fillAlphas="[0.9, 0.9, 0.9, 1.0]"/>

<mx:Button label="Image 2" horizontalCenter="0" bottom="10" click="{image.source = Image2}" fillAlphas="[0.9, 0.9, 0.9, 1.0]"/>

</mx:Canvas>

<fx:Reflection id="reflection" target="{canvas}" width="100%" height="30%" enterFrame="event.target.drawReflection()"/>

</mx:VBox>

An interesting quirk of Flex is that it will not draw a string rendered with a client font. The work around for this is to embed a font into the SWF file.

<mx:Style>

@font-face

{

src:url("../media/verdana.ttf");

font-family: myFont;

}

Button

{

font-family: myFont;

font-weight: normal;

}

</mx:Style>

Without this embedded font you would see the shape of the buttons in the reflection, but not the label that was assigned to them.

Finally we embed some images. The buttons in step 2 change the image that is displayed to one of these three embedded classes.

<mx:Script>

<![CDATA[[

[Embed(source="../media/image1.jpg")]

private var Image1:Class;

[Embed(source="../media/image2.jpg")]

private var Image2:Class;

[Embed(source="../media/image3.jpg")]

private var Image3:Class;

]]>

</mx:Script>

The reflection effect shown here is very easy to use, and adds a nice finishing touch to a user interface. Many thanks to Ben for the code.

Return to the Tutorial Index