14 Replies Latest reply on Sep 8, 2010 4:41 PM by Ned Murphy

    Dynamic text spacing problems

    daymonic Level 1

      Hi guys,

       

      I've been following an xml tutorial webdesign tutorial, as I'm pretty new to the whole coding side of things, I've copied their code into my own design, which has been going fine up until this point.

       

      In the tutorials the dynamic menus were alligned vertically, in my site I want them to run horizontally, well I  managed to suss out how to realign them, the problem is that the spacing between each button is set according to the end of each (invisible) button.

      This makes each gap a different size and makes the layout look really clunky.

       

      I'm wondering if theres a line of code I can insert, which defines the size of each button according to the size of the text, or alternately, that starts the spacing from the end of the text rather than the button.

       

      dont know if it helps, but here is the code I am currently using

       

      function SS_createButtons() {

      _root.btn_projects_main._visible = 0;

      btn_xPos = _root.btn_projects_main._x;

      btn_yPos = _root.btn_projects_main._y;

      btn_xDistance = 100;

      btn_yDistance = 50;

      btn_numOfRows = 1;

      btn_yMax = btn_yPos + ((btn_numOfRows - 1) * btn_yDistance);

      for (count = 0; count < _root.projectCount; count++) {

      duplicateMovieClip(_root.btn_projects_main, "btn_projects" + count, count);

      _root["btn_projects" + count]._x = btn_xPos;

      _root["btn_projects" + count]._y = btn_yPos;

      _root["btn_projects" + count].text = namesArray[count];

      if(btn_yPos == btn_yMax){

      btn_xPos = btn_xPos + btn_xDistance;

      btn_yPos = _root.btn_projects_main._y;

      } else {

      btn_yPos = btn_yPos + btn_yDistance;

      }

      }

      SS_load_project(0);

      tellTarget(_root.btn_projects0){

      gotoAndPlay(3);

      }

      _root.curButton = "0";

      }

       

      any help/ideas would be massively appreciated

        • 1. Re: Dynamic text spacing problems
          Ned Murphy Adobe Community Professional & MVP

          The TextField class has a textWidth property that you can probably use to adjust the size of the button.  The textWidth property is the width of the text itself, not the width of the TextField.

           

          Unless I am missing it, I don't see where the button width is used for determining spacing, unless the button width is 100.  So you may need to change it to use the actual width and not a fixed value.

          • 2. Re: Dynamic text spacing problems
            daymonic Level 1

            Each new button is a duplicate of instance of btn_projects_main which is hidden in the swf,

            the spacing is added onto each button, making the gaps between buttons with less text in them appear bigger, will the text width properties sort this out? How do I adjust it? (sorry I am very new to coding and flash full stop)

            • 3. Re: Dynamic text spacing problems
              Ned Murphy Adobe Community Professional & MVP

              What is that object that you duplicate?  I have to question that because in the duplicates it gets assigned some text to a "text" property, which is normally a property of a textfield.  So if it is a textfield, then I need to see how the button fits into the picture.  As is, I don't see any button involved in the code, so I cannot tell you ow to manipulate it.  To manipulate it, it needs to have an instance name so that code can target it to set its _width property.

               

              In the code, the _x placements are based on...

               

              btn_xPos = btn_xPos + btn_xDistance;

               

              where btn_xDistance = 100.  You want to make btn_xDistance to change, to have the value of the width of the text just added (plus some added space probably).  I could offer that you want to change that line to be...

               

               

              btn_xPos = btn_xPos +  _root["btn_projects" + count].textWidth;  // + a few pixels

               

              except I cannot say _root["btn_projects" + count] is just a textfield.

              1 person found this helpful
              • 4. Re: Dynamic text spacing problems
                daymonic Level 1

                Hi Ned,

                 

                Thanks for your help so far - it deffinatly sounds like we're in the right area, but perhaps due to my lack of coding experience I am having major problems getting it to work.

                 

                I've tried adding your suggested text, but it just leads to the buttons piling up on top of each other, and this error message

                Target not found: Target="_root.btn_projectsundefined" Base="_level0"

                 

                In answer to your question (and possibly the problem) _root["btn_projects" + count] is not just the textfield, it is an instance of the main button (which is hidden), which contains the textfeild, as well as actions and an actual button. the count bit I think refers to the number of projects in the xml, and it creates a new button for each new project, based on the contents of  "btn_projects"

                 

                Not sure if the issue is the btn_xPos, and wether it is possible to change the distance to something like

                 

                btn_xDistance = 100 + _root["btn_projects" + count].textField

                 

                I've tried this and it resulted in the same errors - would it help to give the text box and instance name?

                 

                once again thanks for your time and help, I swear this shouldn't be this complicated - but its no doubt part of my learning curve!

                 

                cheers D

                • 5. Re: Dynamic text spacing problems
                  Ned Murphy Adobe Community Professional & MVP

                  Inside whatever that thing is, is there a variable defined as "text", or a textfield inside with a variable "text" assigned to it via the properties panel?  If so, that needs to be undone and redone in a more proper manner so that you have better control of it.

                  • 6. Re: Dynamic text spacing problems
                    Ned Murphy Adobe Community Professional & MVP

                    If what I am imagining is the case, then you will do well to assign instance names to both the textfield and the inside button so that you can manipulate them using code.  That will allow you to extract the textWidth value from the textfield so that you can set the button width based on that value.

                    • 7. Re: Dynamic text spacing problems
                      daymonic Level 1

                      Hmm Ok will try that (not by my computer at the mo), but will that work with dynamic buttons? I mean if each one is a different number of charcters and therefore a different width to the btn_projects_main text field sure that needs to be accounted for in the code???

                      • 8. Re: Dynamic text spacing problems
                        Ned Murphy Adobe Community Professional & MVP

                        I don't follow what you are asking.  The buttons inside whatever those things are need to have instance names assigned to them so that you can specify their width property after you determine it from the textWidth property of the textfield.

                        • 9. Re: Dynamic text spacing problems
                          daymonic Level 1

                          Sorry mate - I really havn't explained this very well.

                           

                          I think part of the confussion is me going on about a button, looking closer at it, I can see that the main button (btn_projects) is actually a movie clip which contains a button but also three frame, which include the text box in various states (eg if hit it goes to frame two which changes the text to red).

                          Screen shot 2010-09-06 at 23.25.32.png

                          The problem is, the tutorial I'v been using was for a vertical menu, in order to make it horizontal I've simply reduced the number of rows to 1.

                          As the code has been written for a vertical menu, the horizontal spacing wasn't really an issue, I'm guessing that all it needs it needs a bit of extra code to add on the text width.

                          As you can see the menu currently looks well out of wack, the spacing is the width of the buttons plus the 100 points, I really need t change to xdistance to include the textWidth, but obvious this will be a different size for each project.

                          screen.jpg

                           

                          I have tried giving the text an instance name, (text_main) but wasn't really sure how to write the new code.

                          Also, does the text field need to be converted to an object? (I tried this but seemed to throw up a world of errors when loading)

                           

                          I don't know if it helps to put it in context, but here is the original script with the instructions included.

                           

                           

                          function SS_createButtons() {

                          // First of all we want to hide the master button on the stage (btn_projects_main)

                          // because we'll be making duplicates of it in the next part of the function

                          _root.btn_projects_main._visible = 0;

                           

                          // Work out the X and Y positions of the main button so our new buttons start in the same place

                          // (Which means where ever you position the main button is where the navigation will start).

                          btn_xPos = _root.btn_projects_main._x;

                          btn_yPos = _root.btn_projects_main._y;

                           

                          // Set the distances between your buttons and the number of rows

                          btn_xDistance = 100;

                          btn_yDistance = 100;

                          btn_numOfRows = 1;

                          // This figure is used to work out when to start a new column of buttons

                          btn_yMax = btn_yPos + ((btn_numOfRows - 1) * btn_yDistance);

                           

                          // Loop through the projects array and create a button for each one by duplicating the original.

                          for (count = 0; count < _root.projectCount; count++) {

                          duplicateMovieClip(_root.btn_projects_main, "btn_projects" + count, count);

                          // As the button is created, set it's X, Y & text properties

                          _root["btn_projects" + count]._x = btn_xPos;

                          _root["btn_projects" + count]._y = btn_yPos;

                          _root["btn_projects" + count].text = namesArray[count];

                           

                          // set the X position for the next button

                          if(btn_yPos == btn_yMax){

                          // if the last buttons was the last row in the column (based on it's Y position) then start a new column

                          // by resetting the Y position and adding 100px (btn_xDistance) to the the X position.

                          btn_xPos = btn_xPos + btn_xDistance;

                          btn_yPos = _root.btn_projects_main._y;

                          } else {

                          // if it's not the last one in a row, simply move it along the Y axis.

                          btn_yPos = btn_yPos + btn_yDistance;

                          }

                          }

                           

                          // Load the first project (number 0) to avoid an empty screen

                          SS_load_project(0);

                           

                          // Make the first project button highlighted

                          tellTarget(_root.btn_projects0){

                          gotoAndPlay(3);

                          }

                          // Set the current button variable so we know which button to switch off when another one is pressed

                          _root.curButton = "0";

                          }

                           

                           

                          Sorry if this confuses matters further, and once again thanks for taking time to help - D

                          • 10. Re: Dynamic text spacing problems
                            Ned Murphy Adobe Community Professional & MVP

                            What you described is pretty much what I figured you have, so here's what you can do... first edit the btn_projects_main movieclip by assigning an instance name of "txt" to the textfield that's inside it, and the instance name "btn" to the button that's inside it.  Then replace your code with the code below...  I've removed all the unnecessary _y related code.  The textfield will adjust to the size of the text that fills it, and the button will also.

                             

                            var spaceBetween = 10; // space between buttons

                             

                            function SS_createButtons() {

                                 btn_projects_main._visible = 0;
                                 btn_xPos = _root.btn_projects_main._x;
                                 btn_yPos = _root.btn_projects_main._y;

                             

                                 for (count = 0; count < namesArray.length; count++) {

                                        duplicateMovieClip(btn_projects_main, "btn_projects" + count, count);
                             
                                        this["btn_projects" + count]._x = btn_xPos;
                                        this["btn_projects" + count]._y = btn_yPos;


                                        this["btn_projects" + count].txt.autoSize = "left";
                                        this["btn_projects" + count].txt.text = namesArray[count];

                             

                                        //set the button width
                                        this["btn_projects" + count].btn._width = this["btn_projects" + count].txt._width;


                                        // determine the new x placement value based on the current button's width
                                        btn_xPos = btn_xPos + this["btn_projects" + count]._width + spaceBetween;
                                 }

                                 // anything from here down I have no idea if it's needed, so I left it


                                 SS_load_project(0);

                             

                                 tellTarget(_root.btn_projects0){
                                   gotoAndPlay(3);
                                 }

                             

                                 _root.curButton = "0";

                            }

                             

                            SS_createButtons(); // to kick off the function

                            • 11. Re: Dynamic text spacing problems
                              daymonic Level 1

                              Wow thank you so much - I havn't had a chance to test it as am on me way to work, but will get on it as soon as I get home.

                               

                              just wondering - would that code replace everything I sent you (eg start where that one starts and finish where it finishes?)

                               

                              Once again ten thousand thank yous for all the help!

                              • 12. Re: Dynamic text spacing problems
                                Ned Murphy Adobe Community Professional & MVP

                                It would replace everything in the code you showed in your original posting.  I didn't bother looking at the other code you planted later on.  It takes a slightly different approach than what I originally described primarily due to having the textfield itself sizing to match what it contains... This way the textfield width can be used instead of the textWidth of the text inside it, and you can have any length for a label.

                                1 person found this helpful
                                • 13. Re: Dynamic text spacing problems
                                  daymonic Level 1

                                  wayhey it worked!

                                   

                                  Thanks so much for giving up your time for free - definitely earnt some developers karma points there!

                                  • 14. Re: Dynamic text spacing problems
                                    Ned Murphy Adobe Community Professional & MVP

                                    You're welcome