Bitmap Skinned Buttons

I was trying to make a skinnable application which had multiple buttons, but I didnt want to put a separate bitmap for each state of each button. I had one bitmap containing all the states of all buttons, something like the following.


I have made a custom "SkinnedButton" class which lets me use such skins. I just need to give the coordinates of the UP, DOWN, OVER and DISABLED states and an Image.

The code that produces this looks like this.

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" width="100%" 
    height="100%">
        
    <mx:Canvas width="150" height="50" x="10" y="0">
    <mx:Image id="bkground" source="@Embed('background.png')"/>
    <mx:Image id="skin" source="@Embed('cbuttons.png')" includeInLayout="false" visible="false"/>

        <SkinnedButton id="bprev" x="0" y="0"
            upX="0" upY="0" downX="0" downY="18" 
            alpha="0" skin="{skin}" backgroundImage="{bkground}" width="23" height="18" cornerRadius="5"  />
        
        <SkinnedButton id="bplay" x="23" y="0"
            upX="23" upY="0" downX="23" downY="18" 
            alpha="0" skin="{skin}" backgroundImage="{bkground}" width="23" height="18" cornerRadius="5"  />
            
        <SkinnedButton id="bpause" x="46" y="0"
            upX="46" upY="0" downX="46" downY="18" 
            alpha="0" skin="{skin}" backgroundImage="{bkground}" width="23" height="18" cornerRadius="5"  />
            
        <SkinnedButton id="bstop" x="69" y="0"
            upX="69" upY="0" downX="69" downY="18" 
            alpha="0" skin="{skin}" backgroundImage="{bkground}" width="23" height="18" cornerRadius="15"  />
            
        <SkinnedButton id="bnext" x="92" y="0"
            upX="92" upY="0" downX="92" downY="18" 
            alpha="0" skin="{skin}" backgroundImage="{bkground}" width="23" height="18" cornerRadius="15"  />
    </mx:Canvas>

</mx:Application>

Code and Example

Docker

This is a component to make Dockable Menus and Toolbars, similar to Microsoft Products. It looks somewhat like this.


There are 3 ToolBars in this example. One containing a Menu docked to the top. One floating and one docked to the bottom.

The Basic organisation of a docker is like this:

<mx:Application>
<Docker width="100%" height="100%">
    <DockableToolBar id="toolbar3" width="100%" minWidth="0">
       <mx:MenuBar id="menubar" dataProvider="{myMenuBarData}" showRoot="false"/>
    </DockableToolBar>

    <DockableToolBar id="toolbar" width="100%" minWidth="0">
       Toolbar Controls
       Toolbar Controls
       Toolbar Controls
    </DockableToolBar>

    Other Application Elements
</Docker>
</mx:Application>

Example and Source

You need Flex 2.0 Beta 3 to compile and run the source.

RichTextEditor with floating Toolbar

If you are wondering how to make the Toolbar of a RichTextEditor floating. Here's the code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" height="100%">
<mx:Style>
    TitleWindow
    {
        backgroundAlpha: 0.9;
        backgroundColor: #9199A4;
        borderColor: #9199A4;
        borderAlpha: 1.0;
        borderStyle: "none";
        borderThickness: 0;
        paddingBottom: 0;
        paddingLeft: 0;
        paddingRight: 0;
        paddingTop: 0;    
    }
</mx:Style>
    
<mx:Script>
<![CDATA[
    import mx.managers.*;

    private function floatControlBar() : void
    {
        rteControl.parent.removeChild(rteControl);
        rteControl.addChild(DisplayObject(rte.toolbar));
        rte.showControlBar=false;
        mx.managers.PopUpManager.addPopUp(rteControl, rte, false);
    }
]]>
</mx:Script>

    <mx:RichTextEditor id="rte" htmlText="" headerHeight="5" 
        creationComplete="floatControlBar()"/>
    <mx:TitleWindow id="rteControl" width="325" title="ToolBar"/>
    
</mx:Application>

Phew

Finally its done. Been procrastinating for a long time.

The intent of this blog is to post flex sample components, apps, demos here for public use.

Everything posted on this blog can be considered freeware for use by anyone. The code is available under MIT License .
Please do send me a note if you are using it on a publicly available web url (feels good to know that my work is being put to some use)

I would be posting a few samples shortly.