Archive for April 20th, 2008

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{
reflectionTimer.addEventListener(‘timer’, createReflection);
private function createReflection(e:TimerEvent = null):void{


<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 »

20th Apr 2008

CSS Based Percentage Bar

For one of my projects I had to create a visual representation of two percentages being compared side by side. I decided to do this using divs and CSS. With this design, all I have to do is set a value in my PHP for the width of the div highlighted in bold below and the sizing takes care of itself.

Here is what I came up with:


<div class=”scoreBars”>
<div class=”scoreDivider”></div>

<div style=”width: 42%; height: 22px;background-color: #99CC00; position:absolute; top:0px; left:0px”></div>

<div style=” width:100%;height: 22px; position: absolute; z-index: 2; top: 0px; left: 0px;”>
<div style=”float: left; margin-top: 3px; color: rgb(255, 255, 255); font-weight: bold;”> 42% </div>
<div style=”float: right; margin-top: 3px; color: rgb(255, 255, 255); font-weight: bold;”> 58% </div>



border:1px solid #999999;

/*This sets the color representing the right had side of the bars. The left hand value set in the HTML about simply covers this background color, so all I have to do is set the width for the div covering this color.*/

/*The divider is simply a div with a right border that divides over all length of the bars into halves giving us an indication where 50% is.*/
border:dashed #FFFFFF;
border-width:0px 1px 0px 0px;


CSS Percent Bars

Posted by Posted by Jeremy Wischusen under Filed under CSS, DHTML Comments 2 Comments »