Category Archive: Adventures in Flex

I did some searching for a good plugin to embed swf files into wordpress posts and it seemed like lots of the ones I turned up were rather dated until I ran into this one by Matt Carpenter. It uses the latest version of the SWFObject project and is compatible with Wordpress 2.6.

In Flex, if you have a custom slider thumb, it will always be scaled to a set size that Flex wants (I think 20×20).

For example,

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        backgroundColor="#ffffff"
        width="300" height="100">
    <mx:HSlider thumbSkin="@Embed(source='resources/images/mario8bit.png')" />
</mx:Application>

would give you this:

The Flash plugin is required to view this object.

To fix this, I wrote a class that extends SliderThumb and sets to the measured size of the skin image:

package controls.sliderClasses {
    import mx.controls.sliderClasses.SliderThumb;
    import mx.core.mx_internal;
   
    use namespace mx_internal;
   
    public class FlexibleSliderThumb extends SliderThumb {
       
        override protected function measure():void {
            super.measure();
            measuredWidth = currentSkin.measuredWidth;
            measuredHeight = currentSkin.measuredHeight;
        }
    }
}

Now, modifying the mxml file like so:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        backgroundColor="#ffffff"
        width="300" height="100">
    <mx:Script>
        <![CDATA[
            import controls.sliderClasses.FlexibleSliderThumb;
        ]]>
    </mx:Script>
    <mx:HSlider
        thumbSkin="@Embed(source='resources/images/mario8bit.png')"
        sliderThumbClass="{controls.sliderClasses.FlexibleSliderThumb}"/>
</mx:Application>

gives you this:

The Flash plugin is required to view this object.

I wrote an Flex app yesterday as a demo of component lifecycle and metadata tag usage.

It’s a remake of the classic Gorillas game.

You can play it here.

The source code is here.