8 Replies Latest reply on Oct 23, 2009 11:49 AM by OnlyNK

    How to make a 'Close' Button



      How can I make al minimize, and close button?

      I'm very new in the world of flash builder.

      actually, I don't no anything about it...




        • 1. Re: How to make a 'Close' Button
          Truce Level 1

          A 'Close' Button is just like any other button.


          The actual logic of what the button does is added via FLEX/FLASH Builder with code.


          So create your UP, OVER, DOWN, DISABLED artwork and group them.

          Convert the group to button via the HUD "convert artwork to component"

          And then toggle the artwork (on/off) to match each state via the layer panel

          as you select the button state in the "Pages/States" panel.


          Hope that helps and wasn't too terse.




          • 2. Re: How to make a 'Close' Button
            Peter Flynn (Adobe) Adobe Employee

            Hi OnlyNK,


            Normally, applications you create in Flash Catalyst will run in a web browser.  The browser window already provides minimize, maximize and close buttons.


            If you want to create a floating panel within your app that has a collapse or close button, you can create a button from artwork as Truce described.  Then...


            • For a collapse button:
              • Make the whole panel into a custom component
              • Create a "collapsed" state where most of the artwork is hidden and the border is resized smaller
              • Use the Interactions panel to have the button "Play Transition to State" to the collapsed state
              • To have a single button that toggles collapsed/uncollapsed, you can add two On Click interactions to the same button and change "When in any state" appropriately.
            • For a close button:
              • You can follow the above steps but create an "invisible" state instead of "collapsed".  Or...
              • Have your button Play Action Sequence instad of using states
              • Select the artwork for the panel
              • In the Timelines panel, click Add Action > Fade
              • Adjust the length of the timeline bars as desired to make the fade gradual, fast, or even instantaneous


            Hope that's helpful!


            - Peter

            • 3. Re: How to make a 'Close' Button
              OnlyNK Level 1

              I want to test another application, that converts a flash file into an app. (mprojector).

              so, I import the flash file i've made with FC, select the flash shaped layer option and press "build application"

              the problem is, that I can't minimize or close that app when I run it (because it's a flash shaped layer).

              Mprojector is actually for Adobe Flash. in adobe flash you can make a close minimize and even a draggable window function:


              // Quit button


              quit_btn.onPress = function() {mApplication.quit(); }



              // Minimize button


              minimize_btn.onPress = function() { mWindow.minimize(); }


              // Draggable window frame


              window_frame_mc.onPress = function () { mWindow.startDrag(); }


              I thought maybe it works with flash catalyst at the same way...

              I'm trying this with FC, because it's simple, fast and you don't need to write a code for a simple button, or something else.

              I hope you didn't get confused, because my english is not very best, and, maybe it's hard to understand...



              • 4. Re: How to make a 'Close' Button
                Peter Flynn (Adobe) Adobe Employee

                Hi OnlyNK,


                I'm not familiar with mProjector, but their website says they support Flex.  If you import your Flash Catalyst FXP file into Flash Builder, you should be able to follow mProjector's instructions for Flex to add the type of functionality you're looking for via Builder.


                You can also get a lot of the same "standalone window"-type functionality simply by using Adobe AIR.  You can hook up close, etc. actions in Flash Builder and then export directly to AIR without needing to use mprojector.  Here's how:


                • In Catalyst, create Buttons for close/minimize (e.g. convert your button artwork to a Button component)
                • Import your Catalyst FXP into Builder
                • To target the project for AIR: right-click on the project and choose Add/Change Project Type > Convert to Flex Desktop Project.  Accept the default options and click Ok.
                • Open "Main.mxml" and switch to Design view
                • Select one of your buttons (let's say Close for example)
                • Switch to Code view -- you should be an <s:Button> tag highlighted
                • Add a new attribute to the tag: click='NativeApplication.nativeApplication.exit()' (use autocomplete when typing to automatically add the required import statement for NativeApplication to the top of your file).
                  • Repeat to add click="stage.nativeWindow.minimize()"
                  • And mouseDown="stage.nativeWindow.startMove()"
                • Open "Main-app.xml"
                • Find the line with the <systemChrome> tag and change it to <systemChrome>none</systemChrome>
                • Hit "Run" to test the application running in its own window
                • If it's working right, use Export Release Build to create an AIR file that's installable on Mac, Win, and Linux


                Hope that helps!


                - Peter

                • 5. Re: How to make a 'Close' Button
                  OnlyNK Level 1

                  Hi Peter,

                  i've a problem when i'm running the project.

                  when I press the 'Run' button, it opens a exec file named adl.

                  there appears no window, only the little icon in the dock

                  did I run the wrong file? what's adl? and why i can't see my project?


                  - OnlyNK


                  By the way, my flash builder trial is almost expired (10 days). I'm not  a flex builder 3 customer, so I can't get the serial.

                  Is there another way to get the serial, only for the beta releases?

                  • 6. Re: How to make a 'Close' Button
                    OnlyNK Level 1

                    Does anybody know the answer?



                    • 7. Re: How to make a 'Close' Button
                      Peter Flynn (Adobe) Adobe Employee

                      Hi OnlyNK,


                      When you run an AIR app from within the Flash Builder dev environment, "adl" is the name of the process that gets launched.


                      I can think of two things that might be causing you to not see a window when you run:

                      1. An error in the code is preventing the app from starting up -- try launching using the Debug button instead of Run.  If an exception is getting thrown, Flash Builder will jump you to the line of code where the error is occurring and we can troubleshoot from there.
                      2. Your window is entirely transparent and thus looks invisible -- try removing the "<systemChrome>" line in your Main-app.xml file.  If you now see a window frame with nothing in it, then we need to figure out why there's no content showing up in your window.


                      Lastly, regarding the FB trial... there's no way to extend the trial period unless you have a FB 3 serial number.  However, we just released a second beta of FB which you can install to get an additional 60 days of trial time.  You can download it at http://labs.adobe.com


                      - Peter

                      • 8. Still having problems....
                        OnlyNK Level 1

                        I've done what you said.

                        I deleted the string and I've checked the other strings.  still, there appears no window...

                        In the new beta of flash builder I have two options when i'm converting the the file to a Air project:


                        * Convert applicationtags to an WindowedApplication

                        * Do not re-write any code


                        The first option works, but I don't get a 'flash-shaped' layer. It has a default window, with a minimize, resize and close button.

                        The second option, When i'm selecting this one, and I inserted the changes you gave me... there's nothing happening...

                        Strange, isn't it?