3 Replies Latest reply on Aug 19, 2009 6:33 AM by the12thplaya

    GUI window style sizing problem

    the12thplaya

      Hi

       

      I've been trying to design movie clips that look like draggable & resizable windows/applications that you would expect in a typical OS environment but I seem to be having trouble visualising a way that I would tackle the resize part. At the moment when I resize the movie clip it resizes everything within it including the top bar and the grip button at the bottom right (see my example here: http://www.the12thplaya.com/desktop). In my example I have one movie clip for the window which has two movie clips within that one for the top bar and the grip at the bottom right.

       

      There's not many turorials on the web (not that I could find anyway) but I have stumbled across a couple of sites which have this feature; one of the sites being g.ho.st (you can go through as a guest account) and the other is bookmarked on my home computer so can't supply the link at the moment.

       

      I'm not really after code or .fla files but instead hoping for some suggestions on how these might work. Would these be done by using masking and is there a way to resize the mask dynamically without resizing everything around that mask (i.e. a window frame and title bar) and by resizing I mean not resizing the height or will I be experiencing the same problem I'm already experiencing in my example above?

       

      I would also like to mention that I'm not trying to tackle a fully working OS (like g.ho.st) on my own and that I only want it to feel like one in places. I'm actually working on a game idea, one that I started doing with php, css & javascript.

       

      Thanks in advance

       

      P.S. apologies if my example is too big for the browser. I've not looked into or had a need to auto fit it to the browser window yet.

        • 1. Re: GUI window style sizing problem
          RossRitchey Level 4

          Google "flash 9-slice scaling"

          1 person found this helpful
          • 2. Re: GUI window style sizing problem
            the12thplaya Level 1

            Thanks alot for the Google suggest. I'm using an old version of Flash which is why I would never of known to search for that. I've been searching for "sizing movieclips" and similar searches to that, but it's good to know that it can be done and it looks really easy. The very first search result covered it in 4 steps

             

            http://www.layersmagazine.com/flash-9-slice-scaling.html

             

            Knowing that it looks so easy in later versions would probably suggest I'd be wasting time and effort trying to do something that's probably not going to be achievable in my version.

             

            Thanks

            • 3. Re: GUI window style sizing problem
              RossRitchey Level 4

              There are ways and ways.

               

              While it is possible to approximate 9-slice scaling, it is a little more complex.

               

              What you want to do is create 2 separate clips, one for the draggable header, and one for the content area of the window.

               

              Then, when you startDrag on the header, use an enterFrame function to keep the content area with it.  And, on top of that, when you start a resize on the content area, use an enterFrame to match the width of the header to the width of the content area.

               

              Something like:

               

              header.onMouseDown = function(){

                   this.startDrag();

                   this.onEnterFrame = function(){

                        this._parent.content._x = this._x;

                        this._parent.content._y = this._y+this._height;

                   }

              }

               

              //This I am serving in leiu of your resize function

              function contentResize(){

                   content.onEnterFrame = function(){

                        this._parent.header._width = this._width;

                   }

              }