6 Replies Latest reply on Sep 28, 2013 7:38 AM by Aaron Beall

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

    APDamien

      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?

        • 1. Re: Designing Custom Buttons - do I need both Shapes and Sprites?
          Aaron Beall Level 3

          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

          1 person found this helpful
          • 2. Re: Designing Custom Buttons - do I need both Shapes and Sprites?
            APDamien Level 1

            Thanks for the suggestion. This should make my code simpler. I note from the description of the buttonMode property:

            "Although it is better to use the SimpleButton class to create buttons, you can use the buttonMode property to give a sprite some button-like functionality...

             

            If you use the buttonMode property with the MovieClip class (which is a subclass of the Sprite class), your button might have some added functionality. If you include frames labeled _up, _over, and _down, Flash Player provides automatic state changes (functionality similar to that provided in previous versions of ActionScript for movie clips used as buttons). These automatic state changes are not available for sprites, which have no timeline, and thus no frames to label."

             

            So, if I can figure out how to create the frames and add them to the MovieClip, I can get that button behavior of changes to the appearance when it is hovered over or "pressed".  Otherwise, I think I either need the SimpleButton or I have to handle the events myself.

             

            fixed formatting errors

            • 3. Re: Designing Custom Buttons - do I need both Shapes and Sprites?
              APDamien Level 1

              Oh yes, Aaron Beall wrote:

              "Why do you want to do this in Flex?"

               

              The question seems ambiguous.  If you mean, why do _this particular thing_, the answer is that I want my own custom button design with up/down/over/onclick functionality (and with the automatic changes in appearance that occur when you hover over or click the button).

               

              If you mean, why do this _in Flex_, then the answer is that I don't have $600 to shell out for Flash Professional CS-whatever, so I'm building it in Flex.  What other language/programming system would you suggest?

              • 4. Re: Designing Custom Buttons - do I need both Shapes and Sprites?
                APDamien Level 1

                No, wait. There simply isn't any way to add frames to a MovieClip. I'm not sure where MovieClips with frames in them come from.  The MovieClip class references frames a lot, you can gotoAndStop, GotoAndPlay, get the total count of frames in the clip, associate frame numbers with labels.

                 

                But there simply isn't any method to add frames to the clip.

                 

                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.  Sort of like the way HttpServletRequest and Response objects seem to magically appear in Tomcat.  I grepped the entire source of Tomcat and there's nothing visible that creates those objects, but they are somehow available in the servlet or JSP.

                 

                Weird.    

                • 5. Re: Designing Custom Buttons - do I need both Shapes and Sprites?
                  Aaron Beall Level 3

                  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/swf/pdf/swf-file-form at-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

                  • 6. Re: Designing Custom Buttons - do I need both Shapes and Sprites?
                    Aaron Beall Level 3

                    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