Take a look and see if that helps.

Thanks for the example, I am trying to combine the Rounded button with the Gradient button examples and seem to be running into some issues with getting this to work.

What I’m posting was placed at the bottom of the code you’ve provided here on this page. The code draws two different triangles (one for each selected state of a toggle button) and then hides both of them. It then uses another switch statement to show and hide them based on which button skin is being asked for.

I have a sneaking suspicion that there is a more elegant way to do this . . . and the one issue I’m still having is that if the button ever gets redrawn because of parent container widths, I end up with two triangles side by side. Very strange. But this only happens with percentage based button widths. If you have a fixed width, this is a non-issue.

Here’s the code:

var triangleHeight:uint = 8;
var triangle:Shape = new Shape();
var triangle2:Shape = new Shape();

triangle.graphics.beginFill(0xFFFFFF);
triangle.graphics.moveTo((unscaledWidth – 18), 4);
triangle.graphics.lineTo((unscaledWidth – 18) + triangleHeight/2, triangleHeight);
triangle.graphics.lineTo((unscaledWidth – 18), triangleHeight + 4);
triangle.graphics.lineTo((unscaledWidth – 18), 4);
this.addChild(triangle);
triangle.visible = false;

triangle2.graphics.beginFill(0xFFFFFF);
triangle2.graphics.moveTo((unscaledWidth – 20), triangleHeight);
triangle2.graphics.lineTo((unscaledWidth – 20) + triangleHeight, triangleHeight);
triangle2.graphics.lineTo((unscaledWidth – 20) + 4, triangleHeight + 4);
triangle2.graphics.lineTo((unscaledWidth – 20), triangleHeight);
this.addChild(triangle2);
triangle2.visible = false;

switch(name) {
case “upSkin”:
triangle2.visible = false;
triangle.visible = true;
break;
case “overSkin”:
triangle2.visible = false;
triangle.visible = true;
break;
case “downSkin”:
triangle2.visible = false;
triangle.visible = true;
break;
case “selectedUpSkin”:
triangle.visible = false;
triangle2.visible = true;
break;
case “selectedOverSkin”:
triangle.visible = false;
triangle2.visible = true;
break;
case “selectedDownSkin”:
triangle.visible = false;
triangle2.visible = true;
break;
case “disabledSkin”:
triangle.visible = false;
triangle2.visible = true;
break;

Good work man, thanks for getting back to me!

Thanks so much for the shove in the right direction. It did, in fact, work! I really appreciate it.

I’d make sure to addChild() on top of the gradient background so that it shows up on screen. Give that a try and let me know how it goes.

Thanks so much for the post. Very helpful! I have a follow up question:

Is it possible to draw a shape on top of a programmatic button? What I’d like to do is add a triangle to a programmatic button so that if the toggle state is set to “true” it would look like an accordion button. Ideally, I’d like to see the triangle redrawn for the selected state of the button so that it is pointing down rather than to the side.

Is something like this possible? Or do I need to stick with a .png or .swc skinning technique for this?

There’s no built in MXML highlighter, so I found this one on defusion.org http://www.defusion.org.uk/archives/2007/10/04/code-mxml-geshi-language-file/

It’s pretty decent, though it will change the case sensitivity of the mxml tags, you have to make sure they stay the way you want them if you edit your post.

Enjoy!

Dave