Organizing buttons so that they arrange 'automatically'

[hurricaneone]

Hey there,

I've got about 40 buttons set up in three columns, with the text content of the buttons being imported from a txt file and the button symbols overlaying the matching text.

Check out the attached file for an example set up.


The txt file also contains the section headers which divide the buttons into categories.

My question is, can anyone suggest an efficient way to set up these buttons without hard-coding each of them with text, that would allow me to delete or add buttons and not have to realign the buttons over their matching text each time? I'm thinking that setting up hittest clips as buttons is the best solution (allowing each piece of dynamic text therein to have it's own custom text), but for 40 buttons or so? What a pain.

Any ideas, very welcome.

[marshdabeachy]

Add all the items into arrays (based on header), then loop through the arrays and set the x and y values of each item based on where your iteration is at. It's possible to do the whole thing through code (MX or later) - no symbols required.

If this is beyond your abilities, I can have a go at it. It'll have to wait until I get home though (about 1 or 2 hours from now). I could probably try it just in Notepad, but the result would have a high probability of having problems. It usually takes a bit of testing.

[hurricaneone]

I would lurv to see how you could set that up.



If you have the time, I'd be very interested in seeing a basic example, it sounds like it could save me a ton of brainaches.

If you can, I thank you profusely in advance.

[marshdabeachy]

Okay, I decided to do it in Notepad anyway. I make no claims that this will even compile, let alone work. I'll figure out any inevitable bugs when I get home.

code:

---

xspacing = 120;

ygap = 3;

xstart = 10;

ystart = 10;

ymax = 200;

headergap = 10;

headers = ["Section A", "Section B", "Section C"];

section0 = [];

section0[0] = {name:"button 1", shopnum:"jj", pos:4, ref:floorplan.marker};

section0[1] = {name:"button 2", shopnum:"ff", pos:5, ref:floorplan.lines};

section1 = [];

section1[0] = {name:"button 1", shopnum:"jl", pos:3, ref:marker.floorplan};

section1[1] = {name:"button 2", shopnum:"rr", pos:10, ref:hello.world};

section1[2] = {name:"button 3", shopnum:"ss", pos:1, ref:world.hello};

section1[3] = {name:"button 4", shopnum:"ab", pos:2, ref:floorplan.marker};

section2 = [];

section2[0] = {name:"button 1", shopnum:"bc", pos:100, ref:floorplan.lines};

format = new TextFormat();

format.font = "Arial";

format.size = 12;

headerFormat = new TextFormat();

headerFormat.font = "Arial";

headerFormat.size = 12;

headerFormat.color = 0xFF0000;

headerFormat.bold = true;

createEmptyMovieClip("buttons", 0);

createEmptyMovieClip("lines", 1);

var depth = 0;

var xpos = xstart;

var oldX = xpos;

var ypos = ystart;

for (var i = 0; i<headers.length; i++) {

	makeButton(headers[i], true, false);

	for (var j = 0; j<this["section"+i].length; j++) {

		var last = (j+1>=this["section"+i].length) ? true : false;

		makeButton(this["section"+i][j], false, last);

	}

}

function makeButton(ref, header, last) {

	if (oldX != xpos) {

		with (lines) {

			lineStyle(1);

			moveTo(xpos-10, ystart);

			lineTo(xpos-10, ymax);

		}

		oldX = xpos;

	}

	var clip = buttons.createEmptyMovieClip("clip"+depth, depth);

	depth++;

	clip.createTextField("label", 0, 0, 0, 100, 20);

	if (!header) {

		clip.label.text = ref.name;

		clip.label.setTextFormat(format);

	} else {

		clip.label.text = ref;

		clip.label.setTextFormat(headerFormat);

	}

	clip.label.selectable = false;

	clip.label.autoSize = true;

	clip._x = xpos;

	clip._y = ypos;

	if (!header) {

		clip.shopnum = ref.shopnum;

		clip.pos = ref.pos;

		clip.ref = ref.ref;

		clip.onRelease = function() {

			_root.shopnumber = this.shopnum;

			_root.position = this.pos;

			this.ref.play();

		};

	}

	ypos += last ? clip._height+headergap : clip._height+ygap;

	if (ypos>ymax-clip._height) {

		if (header) {

			removeMovieClip(clip);

		}

		ypos = ystart;

		xpos += xspacing;

		var title = headers[i];

		if (!last) {

			if (!header) {

				title += " cont'd";

			}

			makeButton(title, true, false);

		}

	}

}

---

[hurricaneone]

Hey, that is one sweet piece of code and despite your doubts, it seems to be working fine. That you are able to handcode that in Notepad is something that I can only marvel at.

If I may, I have just two or three questions.

1 - Do I have to repeat this section of code (with changed labels, headers, etc) for each button? It looks like I have to, but I just want to check

code:

---

function makeButton(label, header, last) {

   var clip = buttons.createEmptyMovieClip("clip"+i, depth);

   clip.createTextField("label", 0, 0, 0, 100, 20);

   clip.label.text = label;

   clip.label.setTextFormat(format);

   clip.label.selectable = false;

   clip.label.autoSize = true;

   clip._x = xpos;

   clip._y = ypos;

   if (!header) {

      clip.onRelease = function() {

         // perform button functions here

      };

   }

---

2 - Is it possible to use an already-created clip for the button(s) to get a ready-made rollover effect?

3 - Is it easy to set this script up to change the color of the headers?

Thanks - I really appreciate your input.

[marshdabeachy]

Okay, I got home and was able to test it... there were some bugs, so I fixed it and updated the code above.

1. I don't really understand your question here. You listed a function... the purpose of a function is so that you only have to code something once. The code I gave is enough to generate ALL buttons. It isn't something that should be inside a button. It should be on the main timeline.

2. Yes, this can be altered to use a pre-existing clip. Set the linkage of the clip to something like "genericClip". Then replace the createEmptyMovieClip with attachMovie.

3. Text color is pretty easy as well. I included it in the updated code above.

If you have any more questions, just let me know.

Marshall

*edit* I found some more bugs when a header is the bottom y value before being wrapped around. Just so you know, the code isn't final yet.

[hurricaneone]

Originally posted by marshdabeachy
Okay, I got home and was able to test it... there were some bugs, so I fixed it and updated the code above.

Cool, thanks.

Originally posted by marshdabeachy
1. I don't really understand your question here. You listed a function... the purpose of a function is so that you only have to code something once. The code I gave is enough to generate ALL buttons. It isn't something that should be inside a button. It should be on the main timeline.

No, I'm not thinking the button action should be inside a button symbol - I'm trying to figure how to add the code in the script you gave to offer different actions for the multiple buttons created by the script. I'm thinking that I need to declare the function a number of times in the same keyframe, each with it's own button name and button-specific action. Does that sound about right?

Thanks for the advice on adding the other clip and also the header colors, though I will keep in mind you're not 100% satisified with the piece (although it loooks pretty darn nice to me).

[marshdabeachy]

I've almost got it working... I added vertical lines between sections and have one last bug to fix.

I see what you're saying with the individual buttons. If each button is going to do something COMPLETELY different and run a bevy of ActionScript and other stuff, you'll have to set up individual functions for each button. If they are goign to perform similar actions (for example, if each button were to perform a getURL on a different address), then that can be set up right from the array with no extra functions required. It depends on what you want to do with the buttons.

*edit* Okay, the finished code is up above. All bugs should be gone, and it should handle anything you throw at it.

[hurricaneone]

Hey there, marshdabeachy.

I saw what you meant about the bugs, the names being dropped if they were the last of that column, but you're update has solved that nicely.

As each of the buttons in this only have to do the following actions:

code:

---

on (release) {

    _root.shopnumber = "jj";

    _root.position = 4;

    _root.floorplan.marker.play();

}

---

I don't really need to declare a new function for each, right? I was wondering if you could show mw how to set up a couple of buttons in your script, so that I could follow the pattern for the remaining 38 or so, to be able to do something like the demonstrated actions above.

Cheers again.

[marshdabeachy]

Okay, I had to do a minor rewrite to the code to handle the new information. I presumed all three lines within the onRelease function you gave would be different for each button, so I included that in the updated code above. The only thing you need to worry about would be the new format at the top of the code.

As you can tell, each array element now stores an object which contains all the info necessary for each button. That info is assigned into the buttons when they are created, then put to use when the button is clicked.

Let me know how that works.

[hurricaneone]

Hi man, sorry to bother you again, but I was wondering if it's possible to set up the button action arrays so that they can send data to the _root.

For example, if possible, I would like to set up an array like this:

code:

---

section0[0] = {name:"buttonname", _root.shopnumber=="fourteen", _root.position==4, _root.floorplan.marker.play()};

---

Is that doable, do you think? I keep getting syntax errors and after multiple trial and errors, I'm still not getting any joy.

[hurricaneone]

By George, I think I've got it - I set up my other movieclip to point at non _root-based data, and it seems to be fine.

Sorry to bother.



And BTW, thanks very much for all your help, marshdabeachy. A stunning piece of code.

[marshdabeachy]

Glad to help.

BTW... The method you wanted to try earlier isn't possible. You can't put actions inside arrays. It will evaluate the term and store the result, which means it won't know what to do when you click the button.