Custom Check and Radio Buttons

 

Compatibilities:

This item has not yet been rated

Director's built in radio buttons and check boxes don't allow me to change the colors or look of the boxes. Is there an easy way to make custom ones?

Get the source

While Director's built in features like check boxes and radio buttons are nice, they are very limited from a visual standpoint.  With a little lingo we can keep this functionality and even add a little flare while we are at it. Lets start with the basics.  We are actually tracking 2 things.  We need a property to tell us if the button is on or off, and we need a visual cue to tell the user what state it is in.  Lets look at the graphics.  We will need 2 images of our button, one for the clicked state and one for the un-clicked state.  This behaves a lot like a standard 2 state button.  When we click the image (mouseUp) we swap the state and then switch out the appropriate graphic.  From there we just set the property to track the state and then tell all other sprites in the group that a new button is on.   To make things easier we can name our property "hilite."  This is the same name for the property that check boxes and built in radio buttons use, so any code that interacts can work with either.  When a button changes we issue a sendAllSprites command that identifies the group the clicked button is in and the sprite that was clicked.  This way all buttons know that another button is activated and they can turn themselves off.  Below is the example code. --Copyright 1999 Chuck Neal --chuck@mediamacros.com --If you find this code helpful, send me an e-mail and let me know. :-) property spriteNum, group, onAtStart, checked, unchecked, hilite on getPropertyDescriptionList me   p_list = [:]   p_list.addProp(#group, [#format : #integer, #comment : "Which group:", #default : 1])     p_list.addProp(#onAtStart, [#format : #boolean, #comment : "Checked at start?:", #default : 0])   p_list.addProp(#unchecked, [#format : #member, #comment : "Unchecked Member:", #default : sprite(the currentSpriteNum).member])   p_list.addProp(#checked, [#format : #member, #comment : "Checked Member:", #default : member(sprite(the currentSpriteNum).member.number + 1)])   return p_list end on whoIsOn me, whatGroup, whatList   if whatGroup = group and hilite = true then     whatList.add(spriteNum)   end if end on beginSprite me   if onAtStart = true then     hilite = true     sprite(spriteNum).member = checked   else     hilite = false     sprite(spriteNum).member = unchecked   end if end on mouseUp me   if hilite = false then     sendAllSprites(#toggleButtons, spriteNum, group)   else     hilite = false     sprite(spriteNum).member = unchecked   end if end on toggleButtons me, whatSprite, whatGroup   if whatGroup = group then     if whatSprite = spriteNum then       hilite = 1       sprite(spriteNum).member = checked     else       hilite = 0       sprite(spriteNum).member = unchecked     end if   end if end on getBehaviorDescription me   describe = "This behavior will allow 2 graphics to act as a check box or radio group. Drop the behavior on the graphic and assign the checked and unchecked members." & return   describe = describe & "This uses a property named hilite so that the state can be called the same for a custom check box as it would be for a standard one." & return   describe = describe & "For radio groups, assign all the buttons the same group number in the property dialog box."   return describe end Want to make it fancier?  Try adding a state for when you press the button.  Make it effect other items when states change.  Play with it and see what you come up with.