Recipe 11.8 Aligning Radio Buttons Automatically

11.8.1 Problem

You want to align all the radio buttons in a group into one or more columns.

11.8.2 Solution

Create and invoke a custom setPositions( ) method for FRadioButtonGroupClass.

11.8.3 Discussion

Another problem that very quickly presents itself after you add more than one radio button is that of placement on the Stage. You can position each radio button (each of which is a movie clip) individually using the _x and _y properties. On the other hand, you can also add a custom method to FRadioButtonGroupClass that automatically aligns all the radio buttons within the group. You can use the radioInstances property (see Recipe 11.7) to loop through each button in a radio button group and space them evenly.

Our custom setPositions( ) method accepts up to four parameters:

x

The x coordinate within the parent movie clip where the first radio button should be placed. If undefined, then 0 is assumed.

y

The y coordinate within the parent movie clip where the first radio button should be placed. If undefined, then 0 is assumed.

cols

The number of columns into which the radio buttons should be organized. If undefined, the radio buttons are aligned in one vertical column.

spacing

The vertical spacing between the radio buttons, in pixels. If undefined, defaults to 15. The horizontal spacing is five pixels more than the widest item in the column

Here, then, is our custom setPositions( ) method, which you should add to your Form.as file for easy inclusion in future projects:

FRadioButtonGroupClass.prototype.setPositions = function (x, y, cols, spacing) {
  
  // Set the spacing to 15 pixels, if undefined.
  if (spacing == undefined) {
    spacing = 15;
  }

  // If the value of cols is either undefined or greater than the number of items,
  // use one column.
  if ( (cols == undefined) || (cols > this.radioInstances.length) ) {
    cols = 1;
  }

  // The itemsPerColumn array is used to determine how many items are placed into
  // each column. Initialize remainingItems to the number of elements in the
  // radioInstances array.
  var itemsPerColumn = new Array(  );
  var remainingItems = this.radioInstances.length;

  // Determine how many items to place in each column.
  for (var i = 0; i < cols; i++) {

    // Divide the number of items remaining by the number of columns minus i. This
    // tells you how many items should go into the column.
    itemsPerColumn[i] = Math.round(remainingItems / (cols - i));

    // Update the number of remaining items for the next iteration.
    remainingItems -= itemsPerColumn[i];

    // If this is the last column, add all remaining items to the column.
    if (i == (cols - 1)) {
      itemsPerColumn[i] += remainingItems;
    }
  }

  // The index variable is incremented with each iteration through the nested for
  // loop to successfully loop through each element of the radioInstances array.
  var index = 0;

  // maxW stores the maximum width of any item in a column.
  var maxW = 0;

  // colStartX is used to track the x coordinate for each column. The initial x
  // coordinate is specified by the x parameter.
  var colStartX = x;
  var item;

  // Loop through each item in each column using nested for statements. i is the
  // current column, and j is the current item within the current column.
  for (var i = 0; i < itemsPerColumn.length; i++) {
    for (var j = 0; j < itemsPerColumn[i]; j++) {

      // Set item to the current radio button reference.
      item = this.radioInstances[index];

      // Record the width of the widest button in the column so far, in maxW.
      maxW = Math.max(item._width, maxW);

      // The x coordinate is the same for each radio button in a given column. The y
      // coordinate depends on the y and spacing parameters plus the item number
      // within the column.
      item._x = colStartX;
      item._y = (j * spacing) + y;

      // Increment index to refer to the next radio button the next time around.
      index++;
    }
 
    // To set the starting position for the next column, add the maximum width of
    // this column plus five pixels to provide some spacing between columns.
    colStartX += maxW + 5;

    // Reset maxW so that it does not carry over to the next column
    maxW = 0;
  }
};

You should call the setPositions( ) method only after you have added all the radio buttons to the group using the setGroupName( ) method for each radio button. Here is an example that uses setPositions( ) to place four radio buttons in two columns:

#include "Form.as"

// Create four radio buttons, named emailPrefs0_rb through emailPrefs3_rb, and assign
// them to the "emailPrefs" group.
_root.attachMovie("FRadioButtonSymbol", "emailPrefs0_rb", 1);
_root.attachMovie("FRadioButtonSymbol", "emailPrefs1_rb", 2);
_root.attachMovie("FRadioButtonSymbol", "emailPrefs2_rb", 3);
_root.attachMovie("FRadioButtonSymbol", "emailPrefs3_rb", 4);

emailPrefs0_rb.setGroupName("emailPrefs");
emailPrefs1_rb.setGroupName("emailPrefs");
emailPrefs2_rb.setGroupName("emailPrefs");
emailPrefs3_rb.setGroupName("emailPrefs");

// Add labels and data.
emailPrefs0_rb.setLabel("once a day");
emailPrefs0_rb.setData ("day");
emailPrefs1_rb.setLabel("once a week");
emailPrefs1_rb.setData ("week");
emailPrefs2_rb.setLabel("once a year");
emailPrefs2_rb.setData ("year");
emailPrefs3_rb.setLabel("no email");
emailPrefs3_rb.setData ("none");

// Position the radio buttons.
emailPrefs.setPositions(10, 10, 2, 30);