Skip navigation
APDamien
Currently Being Moderated

Designing Custom Buttons - do I need both Shapes and Sprites?

Sep 26, 2013 12:41 AM

Tags: #buttons

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.

CrStartMenu.png

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.

CrChoices.png



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 DisplayObjects (Off, Over, Down, HitTest).  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?

 

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

 
Replies
  • Currently Being Moderated
    Sep 26, 2013 12:30 PM   in reply to APDamien

    Why do you want to do this in Flex?

     

    SimpleButton is kind of a legacy object designed for the Flash/SWF format, usually when you're working with AS3 you use Sprite as your button, and set buttonMode = true. You could draw rectangle using a Shape and add a TextField.

     

    -Aaron

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 28, 2013 7:34 AM   in reply to APDamien

    My question about "why do this in Flex" was because it seemed like you knew how to do this perfectly well in Flash Pro, and IMO this sort of project is much better suited for Flash Pro. But your reason about the cost of Flash Pro answers that question.

     

    Yes, you've definitely noted some statements in the documentation that are subjective, and IMO not really in line with reality. Maybe it's out-dated, or just written from the Flash Pro perspective. MovieClips have no value outside of a timeline authoring tool. And the whole Flex universe really hides/supresses the timeline feature from you (the first of many things I don't like about Flex) and replaces it with an ActionScript framework for everything. When you're in Flex, you can pretty much forget about the SWF timeline, and that can lead to a lot of surprises if you're coming from Flash Pro, where the SWF timline was a familiar friend.

     

    This doesn't seem to make sense. We are told that starting with Flash CS4(?) (5?) , the movie you build with the Flash IDE is translated into AS3. But AS3 does not contain any method of building a MovieClip with Frames.

     

    Either the whole "timeline" and "keyframe" concept is translated into something completely different in AS3, or the Flash IDE somehow magically creates the MovieScript object with Frames in it and stores it in the SWF file, but that is simply not available programmatically.

     

    You are right about there being a difference. SWF and AS3 are not the same thing. The SWF is a binary format that defines things for the Flash Player to display/execute, described by "tags." ActionScript (and the execution of it) is just one of those tags. Flash Pro publishes almost all of the content you see on the stage to SWF display tags. MovieClips are essentially nested SWFs, and they support frames just like any SWF does. This is essentially the traditional world of Flash.

     

    The SWF format is openly published, you can read lots more about it online.

    http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/s wf/pdf/swf-file-format-spec.pdf

    http://www.the-labs.com/MacromediaFlash/SWF-Spec/SWFfileformat.html

     

    ActionScript is basically a programmer's API to Flash Player features, but there are some things not included in the API, notabe here is the manipulation of SWF frame data. There's other stuff, too, but almost all the Flash Player features are programmable with ActionScript.

     

    Now enter Flex. When you compile a Flex codebase you grind it through the Flex SDK, which turns practically *everything* into ActionScript. You end up with an unimpressive 2-frame SWF (frame 1 is the app loader, frame 2 is the application -- sound familiar?) with little more than a boat-load of ActionScript tag(s) to execute on frame 2.

     

    Hopefully that clears a bit up.

     

    -Aaron

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 28, 2013 7:38 AM   in reply to Aaron Beall

    And to create a button from a Sprite using only ActionScript is really not too hard, but does require some event handling. There are obviously a ton of different ways you can handle the mouse events (rollover, rollout, mousedown, click) and you aren't limited to swapping the display graphics, like SimpleButton does. You could animate a glow, animate the size, whatever you want. You could keep some elements in place (like a label that you want to be the same across all events) and change others.

     

    A very typical practice for many AS3 programmers is to create your own button class that extends Sprite. You can then extend that class (or link to library items in Flash Pro) to creates variants.

     

    -Aaron

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points