Creating an application with the CheckBox

The following procedure explains how to add a CheckBox component to an application while authoring, using an excerpt from a loan application form. The form asks if the applicant is a home owner and provides a CheckBox for the user to answer "yes." If so, the form presents two radio buttons for the user to indicate the relative value of the house.

To create an application with the CheckBox component:

  1. Create a new Flash file (ActionScript 3.0) document.
  2. Drag a CheckBox component from the Components panel to the Stage.
  3. In the Property inspector, do the following:
    • Enter homeCh for the instance name.
    • Enter 140 for the width (W) value.
    • Enter "Own your home?" for the label parameter.
  4. Drag two RadioButton components from the Components panel to the Stage and place them below and to the right of the CheckBox. Enter the following values for them in the Property inspector:
    • Enter underRb and overRb for the instance names.
    • Enter 120 for the W (width) parameter of both RadioButtons.
    • Enter Under $500,000? for the label parameter of underRb.
    • Enter Over $500,000? for the label parameter of overRb.
    • Enter valueGrp for the groupName parameter for both RadioButtons.
  5. Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:
    homeCh.addEventListener(MouseEvent.CLICK, clickHandler);
    underRb.enabled = false;
    overRb.enabled = false;
    
    function clickHandler(event:MouseEvent):void {
        underRb.enabled = event.target.selected;
        overRb.enabled = event.target.selected;      
    }
    

    This code creates an event handler for a CLICK event that enables the underRb and overRb RadioButtons if the homeCh CheckBox is selected, and disables them if homeCh is not selected. For more information, see the MouseEvent class in the  ActionScript 3.0 Language and Components Reference.

  6. Select Control > Test Movie.

The following example duplicates the preceding application but creates the CheckBox and RadioButtons with ActionScript.

To create a CheckBox using ActionScript:

  1. Create a new Flash file (ActionScript 3.0) document.
  2. Drag the CheckBox component and the RadioButton component from the Components panel to the current document's Library panel. If the Library panel is not open, press Ctrl+L or select Window > Library to open the Library panel.

    This makes the components available to your application but does not put them on the Stage.

  3. Open the Actions panel, select Frame 1 in the main Timeline, and enter the following code to create and position component instances:
    import fl.controls.CheckBox;
    import fl.controls.RadioButton;
    
    var homeCh:CheckBox = new CheckBox();
    var underRb:RadioButton = new RadioButton();
    var overRb:RadioButton = new RadioButton();
    addChild(homeCh);
    addChild(underRb);
    addChild(overRb);
    underRb.groupName = "valueGrp";
    overRb.groupName = "valueGrp";
    homeCh.move(200, 100);
    homeCh.width = 120;
    homeCh.label = "Own your home?";
    underRb.move(220, 130);
    underRb.enabled = false;
    underRb.width = 120;
    underRb.label = "Under $500,000?";
    overRb.move(220, 150);
    overRb.enabled = false;
    overRb.width = 120;
    overRb.label = "Over $500,000?";
    

    This code uses the CheckBox() and RadioButton() constructors to create the components and the addChild() method to place them on the Stage. It uses the move() method to position the components on the Stage.

  4. Now, add the following ActionScript to create an event listener and an event handler function:
    homeCh.addEventListener(MouseEvent.CLICK, clickHandler);
    
    function clickHandler(event:MouseEvent):void {
        underRb.enabled = event.target.selected;
        overRb.enabled = event.target.selected;      
    }
    

    This code creates an event handler for the CLICK event that enables the underRb and overRb radio buttons if the homeCh CheckBox is selected, and disables them if homeCh is not selected. For more information, see the MouseEvent class in the ActionScript 3.0 Language and Components Reference.

  5. Select Control > Test Movie.