package com.tappernimer.components{

import mx.containers.Canvas;

import mx.core.UIComponent;

import flash.display.BitmapData;

import flash.geom.Matrix;

import flash.display.IBitmapDrawable;

public class VerticalReflection extends Canvas{

private var _component:UIComponent;

public var trans:Number=.5;

public var filterArray:Array=new Array();

public var skewY:Number=0;

public var skewX:Number=0;

public function get component():UIComponent{

return _component;

}

public function set component(c:UIComponent):void{

this._component = c;

// hack to work around issue with component being 

// a dynamically loaded image its possible for the 

// image to be fully loaded, but its height or width 

// not yet set this call later, keeps retrying until 

// the values are set.

if(c.width ==0 || c.height==0){

callLater(resetComponent,);

return;

}

doReflection();

}

private function resetComponent(c:UIComponent):void{

this.component = c;

}

private function doReflection():void {

// create bitmap object

var bmpData:BitmapData = new BitmapData(

	component.width,component.height);

// create matrix

var invertMatrix:Matrix = new Matrix(1,skewY,skewX);

// set matrix to invert vertically, but normal horizontally

invertMatrix.scale(1, -1);

// move matrix, so top is at bottom, and vice versa

invertMatrix.translate(0, component.height);

// draw component flipped

bmpData.draw(component as IBitmapDrawable,invertMatrix);

// create a new holder for the image

var ref:UIComponent = new UIComponent();

// match new holders size to the original

ref.setActualSize(component.width,component.height);

// fill the new component with the image

ref.graphics.beginBitmapFill(bmpData);

ref.graphics.drawRect(0, 0, 

	component.width, component.height);

ref.graphics.endFill();

// set the transparency

ref.alpha = trans;

// apply any filters

ref.filters = filterArray;

// add image to stage

addChild(ref);

} 

}

}

This component can then be passed any other component to reflect, accepting filters (filterArray), alpha value (trans), and arguments to allow you to skew the reflection.  In fact, using it can be as simple as this:

<mx:Application xmlns:mx=http://www.adobe.com/2006/mxml 

xmlns:c="com.tappernimer.components.*" 

layout="absolute">

<mx:Image id="image" source="images/tn_logo_full.jpg"/>

<c:VerticalReflection id="ref" 

component="{image}" 

x="{image.x}" y="{image.height}" 

filterArray="{new Array(new BlurFilter())}"/>

</mx:Application>

Here is the code running:

In most Flex applications, I had been creating a seperate CSS style sheet, and compiling it into the application through the use of the <mx:Script source="…" />.  One of the pains of this, is that applying changes to the styles requires re-compiling the application, and as you probably now, the styles are one of the most frequently changed aspects of any application.

To help solve this problem, Adobe implemented the ability to load Style Sheets at run time in the Flex 2.0.1 release.  To do this, you first need to compile the CSS into a swf.  You can do this in FlexBuilder by right clicking on the css file and choosing "Compile CSS to SWF" option, or using the comand line compiler (mxmlc).  Once the css is compiled into a swf, it can be loaded with the StyleManager.loadStyleDeclarations(…) method.  Consider this simple example:

TestLoadStyles.mxml 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
 <mx:Style>
  .text1{
   color:#0000ff;
  }
  .text2{
   color:#ffff00;
  }
 </mx:Style>
 <mx:Script>
  <![CDATA[
   private function changeCSS():void{
    StyleManager.loadStyleDeclarations("myCSS.swf");
    
   }
   private function undoStyle():void{
    StyleManager.unloadStyleDeclarations("myCSS.swf");
   }
  ]]>
 </mx:Script>
 <mx:Button label="change css" click="changeCSS()"/>
 <mx:Button label="revert css" click="undoStyle()"/>
 <mx:Label text="hi there"/>
 <mx:Label text="hi there" styleName="text1"/>
 <mx:Label text="hi there" styleName="text2"/>
</mx:Application>
 

myCSS.css

Application{
 color:#ff0000;
 font-size:40;
}
.text1{
 color:#00ff00;
} 

Compile the css into a swf, and make sure it is in the same directory as the TestLoadStyles.swf. As you run the application, you can see the changes as the style sheet is loaded or unloaded.  One thing to notice, is that even when the styles are loaded, and styles initially defined, which are not overridden in the loaded style sheet still remain, therefore, the styles of .text2 (yellow text), remain yellow, even after the new style sheet is loaded, since the .text2 style does not appear in the load style sheet, while the style .text1 which is defined as red text in the initial application, is changed to green, as the same style name is defined in both, so when the new style sheet is loaded, the .text1 label changes its color from green to red, and when its unloaded, it reverts to green.

This offers great opportunities not only for greater separation of styles from the application, but also for the concepts of writing an application once and rebranding the same deployed application.