Designing custom buttons [2 Attachments]

classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|

Designing custom buttons [2 Attachments]

A. P. Damien
I'm designing a game. I want to model the user interaction after "Cream
Babysitting Adventure" by Aval0nX.  So the menu at the start of the game
will resemble CrStartMenu.png, and the choices and responses will
resemble CrChoices.png.

So I'm talking about button-like things made out of a dark-gray (#888)
horizontal bar with a black border around it and white text, with the
whole thing at somewhere around 50% alpha.

Game responses will be white on a colored background with a light-gray
border.  I don't think I can duplicate the peculiar shading effect that
makes the edges of the response look slightly raised, like molding at
the top and bottom of a wallboard wall, so I'll just use something that
shades from light gray at the inner edge to a darker gray at the outer edge.

Now... I know how I'd build this in the Flash IDE: a button made of
three images that I can put the text on.  But how to do it in Flex/AS3?

I looked at the AS3 documentation for SimpleButton, and it looks like I
can give it any four DisplayObject (Off, On, Down, Test).  At first I
thought of using a Shape, where I can simply draw the rectangle and
specify the fill color (bgColor argument to beginFill) and line color
(borderColor argument to linestyle).  But then... what about the text?

So now I'm thinking I need some sort of DisplayObjectContainer, right?
Or maybe even a Sprite?  Then I can add the Shape first, and then a
label or some such text object, right?

If I add successive DisplayObjects to a VGroup, they go from top to
bottom, but if I add DisplayObjects to a Sprite they layer from back to
front, right?

Or is there a simpler way to do this that I'm not seeing?
Reply | Threaded
Open this post in threaded view
|

Re: Designing custom buttons

sony antony-2
You can achieve this using Rect with gradient fills, and again use Rect with gradient fills for border too.



On Tuesday, 24 September 2013 5:40 AM, A. P. Damien <[hidden email]> wrote:
 
 
[Attachment(s) from A. P. Damien included below]
I'm designing a game. I want to model the user interaction after "Cream
Babysitting Adventure" by Aval0nX.  So the menu at the start of the game
will resemble CrStartMenu.png, and the choices and responses will
resemble CrChoices.png.

So I'm talking about button-like things made out of a dark-gray (#888)
horizontal bar with a black border around it and white text, with the
whole thing at somewhere around 50% alpha.

Game responses will be white on a colored background with a light-gray
border.  I don't think I can duplicate the peculiar shading effect that
makes the edges of the response look slightly raised, like molding at
the top and bottom of a wallboard wall, so I'll just use something that
shades from light gray at the inner edge to a darker gray at the outer edge.

Now... I know how I'd build this in the Flash IDE: a button made of
three images that I can put the text on.  But how to do it in Flex/AS3?

I looked at the AS3 documentation for SimpleButton, and it looks like I
can give it any four DisplayObject (Off, On, Down, Test).  At first I
thought of using a Shape, where I can simply draw the rectangle and
specify the fill color (bgColor argument to beginFill) and line color
(borderColor argument to linestyle).  But then... what about the text?

So now I'm thinking I need some sort of DisplayObjectContainer, right?
Or maybe even a Sprite?  Then I can add the Shape first, and then a
label or some such text object, right?

If I add successive DisplayObjects to a VGroup, they go from top to
bottom, but if I add DisplayObjects to a Sprite they layer from back to
front, right?

Or is there a simpler way to do this that I'm not seeing?




See the below link for examples on how to use gradients
https://www.artima.com/articles/linear_gradients_in_flex_4.html