Archive for the 'Flex' Category

20th Apr 2008

Creating an Image Reflection in Flex

One of my clients asked me if we could do an image reflection in Flex. Now as far as Flex goes, I am more on the code side so I had no idea how to do this. Luckily, this guy (Ben Stucki) did.

His original version was set to redraw the object using the enterFrame event with the idea that any changes in what was being reflected, would be updated in the reflection. My need was a little simpler than this. I just needed to reflect an image once it had loaded, so there was no need to keep redrawing the image reflection once the load had completed. However, I ran into a little challenge in that even though I was only triggering the reflection code upon completion event of the image load, no reflection was showing up. It turned out that even thought the load had completed, the rendering had not. Hence the reflection had nothing to draw.

The solution I came up with was to give a slight delay between the load event and the reflection rendering using a timer.

Code Excerpt:

private var reflectionTimer:Timer = new Timer(100,1);
private function appInit():void{
storesService.send();
reflectionTimer.addEventListener(‘timer’, createReflection);
}
private function createReflection(e:TimerEvent = null):void{
reflection.drawReflection();

}

<mx:Image complete=”reflectionTimer.start();”

Here is what the final product looks like. This depends on data from an external site, so if something changes on that site, this may stop working. At the time of this witting, the first item in the data grid has an image and should show the reflection. Also, would like to give a shout out to this guy (Kimili) for creating the WordPress Plugin for displaying flash.

Posted by Posted by Jeremy Wischusen under Filed under Flex Comments 1 Comment »