Flex Wares

Sample Components, Apps, Demos for Adobe Flex 2.0. Everything posted here is freeware. The code is available under MIT License. Please do send me a note if you are using it on a public url.
Feeds Feed Burner, Atom

Tuesday, May 30, 2006

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

3 Comments:

Blogger damian said...

any idea why i cna't connect to this live stream in flex beta 3 but i can just fine using flash?

mx:VideoDisplay id="vid" live="true" autoBandWidthDetection="true" source="rtmp://localhost/flexvideo/live"
/mx:VideoDisplay

Wednesday, May 31, 2006 1:48:00 PM  
Blogger Abdul said...

Anjali, that's really nice. So do you load different bitmap instances for each button, or you have one ByteArray and you just show parts of it on different buttons?

I am sure, you must be doing this in most optimized way :)

Damian, it should work. It works alteast for me.

-abdul

Monday, June 12, 2006 4:25:00 AM  
Blogger Anjali Bhardwaj said...

I just keep one bitmap instance, and do a bitblt (pixel copy) operation when the buttons need to be redrawn.

Tuesday, June 13, 2006 8:28:00 AM  

Post a Comment

Links to this post:

Create a Link

<< Home