Tutorial: Radio Buttons

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Radio buttons, along with Check boxes and Combo controls are some of the most familiar interfaces on the web. Every component enabled version of SWiSH Max and SWiSH miniMax (versions 2, 3 and 4), come with a radio button component: Buttons | Radiobutton | Radiobutton. Knowing how to use this component could save you a considerable amount of time when creating your movie.

Fundamentals

A fundamental principle of radio button operation is that exactly one button within a group can be selected. Operation is analogous to a radio that allows channel selection by pressing one of a number of push button channel presets.

In the example above, there are two defined groups: radio_Red for Radio Buttons 1, 2 and 3 and radio_Blue for Radio Buttons 4, 5 and 6.

It is important to understand that each radio button must be assigned to a group. Buttons in different groups can work independently of each other. Within a specific group only one button can be selected at the one time. If multiple simultaneous selections are necessary, consider using the Check box component instead.

Use

To use the component, drag one onto the stage from the Components panel / Buttons | Radiobutton | Radiobutton. Max4 and miniMax4 users can use the search filter in the Components panel to rapidly find the component.

Look at the parameters for the radio button in the Parameters panel and adjust to your requirements before duplicating the button. If the Parameters panel is not visible it can be enabled using the Main menu option: Window.

Using this method, the initial button becomes a “prototype” button for the remaining buttons in the group. The remaining buttons should be copied from the prototype button. Using a “prototype” button will minimize the number of parameters that need to be altered for each individual button.

The parameters are described in detail below:

Parameters

On Left?

Default false. This defines the position of the radio button. Generally radio buttons appear on the left as this simplifies alignment. In most cases, this parameter should be set to true.

Label

This is the text that appears beside the radio button. If you add additional text it is possible that the text will split into two lines. See the section “Text Properties” for tips on how to correct this. As a guide, insert your longest text field in the prototype button as you will get a better idea of how the overall layout will look.

Group Name

This defines the name of the group of radio buttons. In the example shown above, the group names were radio_Red and radio_Blue. The name can be anything you choose however it should be a valid Action Script 2.0 variable name. (ie no spaces, no reserved words).

Value

This is the value that identifies the button within the group. Each button within the same group must have a different value.

Alignment

This defines how the radio button is aligned with multi line text.

Check Color

The color of the check circle. Typically all buttons in the same group should use the same check color. Black, Green, Red and Blue are popular choices.

OnClick

This defines the name of the function that is called when the button is pressed. Generally all buttons within the same group should call the same function. Buttons in different groups could, if desired, also call the same function.

The function is called with two parameters: n and v

n is the name of the group that the button belongs.

v is the value of the button which is defined by the value parameter.

The function is expected to reside in the parent object. For example: if the radio buttons are placed in the main movie then the OnClick function is expected to exist in the main movie.

Text Properties

The text properties for the label field can be adjusted by expanding the radio button then selecting the Label object in the Outline panel. The Properties panel can then be used to adjust the Text Properties of the Label.

Properties that may require adjustment include Font, Font Size, Color, Justification, Enabling / Disabling of margins indent and manually adjusting the width and height of the text field.

The chosen justification will often depend on the chosen value for the parameter On Left?

Example

Consider the creation of a movie clip similar to the one shown to the right.

Drag a radio button onto the stage and adjust its parameters:

  1. On Left?: true
  2. Label: Square

Leave the other parameters in their default configuration.

Creating Multiple Buttons

Once the parameters are set, duplicate the button by selecting it in the layout panel and using Edit | Copy Object, Edit | Paste Object.

In the new radio button, modify the Label to be “Circle” and the Value to be 2. Position this button below the first. Use Edit | Paste Object to paste a third radio button. Modify the Label to be “Star” and Value to be 3. Position this button under the second button.

After pasting the buttons it is good practice to rename them so that they end with _1, _2 etc. This is much tidier than the automatically assigned names RadioButton__Copy, RadioButton__Copy_2 or RadioButton __Copy__Copy etc.

After creating 3 buttons and renaming the outline panel should look like the one above.

Once all of the required buttons have been created, final alignment can be done by selecting all of the buttons (select RadioButton_3 in the outline panel then select RadioButton_1 while pressing the Shift button). Once selected, right click and select Align | Left. Then right click and select Align | Space Evenly | Vertically.

Default Button

The RadioButton component does not have an option to define which of the buttons is the default button. The default button is determined by the order of creation when the movie is played. In the above example RadioButton_1 will be the default button as it is lowest in the outline panel. Re-order the buttons in the outline panel if a different default button is required.

Add Movie Clips to hold the objects

Add 3 movie clips mc1, mc2 and mc3 to hold the objects that are to be displayed when a radio button is selected. In the example, mc1 holds a shape (square) and some text “Square”, mc2 holds a shape (circle) and text: “Circle”. mc3 holds an autoshape (star) and text: “Star”.

Grouping multiple items within a movie clip allows the grouped items to be displayed or hidden using a single line of script:

mcN._visible = true; // Displays the items,

mcN._visible = false; // Hides the items.

In this case mcN is the name of the movie clip.

Add an Events (OnClick) Function

When any of the buttons are clicked, the Events function defined by the OnClick parameter is called. This allows actions to be implemented in response to the user event.

The function is assumed to reside in the parent object. In the case of the above example, this will be Scene_1. The function has two parameters, n and v as described above.

An example script is shown below:

function Events(n,v) {
    if ("radio1" == n) {
        // the group name of the radio button matches, process it

        // the movie clips mc1, mc2 and mc3 contain objects
        // that are to be made visible when
        // a specific radio button is selected.
        mc1._visible = false;
        mc2._visible = false;
        mc3._visible = false;
        switch (v) {
            case 1:
                // perform action for radio button 1
                mc1._visible = true;
                break;
            case 2:
                // perform action for radio button 2
                mc2._visible = true;
                break;
            case 3:
                // perform action for radio button 3
                mc3._visible = true;
                break;
        }
    }
}

Default Condition

It should be noted that the Events function is only called after one of the radio buttons is pressed. It is therefore necessary to setup other screen elements to match the default selection. In the above example, RadioButton_1 is the default. Therefore it is necessary to make mc1 visible and mc2, and mc3 not visible. This is easily achieved by adding the following script to mc2 and mc3:

onSelfEvent (load) {
    _visible = false;
}

Note: As the onSelfEvent script is within the movie clip. The name of the movie clip is implied when accessing a property such as _visible. The alternate script:

this._visible = false;

could have also been used.

Downloads

Both of the example files were authored in Max4. They are contained in this zip file.

 

 

Tags: , , , , ,

Comments are closed.


Switch to our mobile site