Tutorial: Using the checkbox component

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

The CheckBox component can save a significant amount of development time if this type of control is required on your webpage. The control is extremely useful to provide options that allow layers or detail to be optionally added or omitted from your movie.

To use the component, open the Components panel, and type check into the filter area. This will filter the available components and show only the components with check in their name.

Drag the component CheckBox onto the stage. If any panel is not visible, it can be enabled using the Window menu item.

Drag as many Checkboxes as you require.

In the Outline panel, click on the padlock symbol to unlock the component and allow its position on the stage to be modified.

 

To simplify naming, rename the objects cb1 and cb2.

Select cb2 in the Outline or Layout panels and adjust the parameters as required.

Do the same for cb1 but enter Rectangle for the Label. Note that the OnClick parameter is set to “Events” for both check boxes.

Event Processing

In the final movie, when either of the check boxes is clicked, the function whose name is defined by the OnClick parameter is called.

As “Events” has been entered into both check box OnClick parameters, a function named Events in the parent object (Scene_1) will be called.

The function has two parameters: n and v.

ie function Events(n,v)

n is the name of the calling object (either “cb1″ or “cb2″) and v is the current value of the checkbox. (true means checked, false means unchecked).

A simple events function as shown below can be used to alter the visibility of the circle and rectangle objects.

function Events(n,v) {
    switch(n) {
        case "cb1": rect._visible = v;
        break;
        case "cb2": circle._visible = v;
        break;
    }
}

Note that both the circle and rectangle object need to have their target checkbox ticked. In addition, as both the circle and rectangle are assumed to be initially invisible, this script is needed for each object to hide it after it loads:

onSelfEvent (load) {
    this._visible = false;
}

The example .swi file can be downloaded from here.

Using the Event Goto Parameters

Similar to other buttons the Checkbox parameters can be configured to goto a specific position on the timeline after it is clicked. As the playhead moves to the same position irrespective of the checkbox status, script at the destination frame should generally be used to determine the current status of the checkbox.

eg.
if (CheckBox_.checked) {
  ...
}

I would generally use the Events function in preference to the EventGoto option with Checkboxes as I don’t think the EventGoto option works well with checkboxes.

It may be useful if you wanted the checkbox to send the movie to a specific scene.

The example movie below demonstrates the use of the Event Goto parameter.

The timeline used in the movie is shown below:

On Frame 1, a stop command is used to halt the movie until the checkbox is pressed.

The parameter settings cause the timeline to progress to the frame with the label animate.

At this frame effects are applied to the ellipse and the checkbox.

At the end of the movie, the checkbox is removed (this causes its status to be reset when the movie loops).

The checkbox goto example can be downloaded from here.

Tags: , , , ,

7 Responses to “Tutorial: Using the checkbox component”

  1. David Petley says:

    Here is a real-life example where checkboxes are used for mapping objects, with objects initially both visible and invisible – http://davidp-inter.net/2012/?page_id=326

  2. CaptRon says:

    Tried to use the “Event Goto” and values(labels or keyframes) entered disappeared when leaving the input box. Basically wanted to try to make the circle and rectangle fade in by going to labeled frames on the time line.

    • jonh says:

      Hi, You raise a valid point. I have updated the article to show how to use the Event Goto.
      If entering a frame or label, you must also select a scene. Select current for the current scene.
      Personally I don’t think the Event Goto is well suited to the checkbox as it progresses to the same location irrespective of the checkbox status. Personally I would use the events function and code gotoAndPlay() commands within that function to respond to state changes.

      • David Petley says:

        My comment above is a little misleading, as that is what I have done with my map. The objects are movie clips with shapes placed or removed on the timeline. Ticking the checkbox tells the movie clips to go to the frame where the shape is showing (or, in the case of some checkboxes, where a shape is not showing).

  3. Hasan yüksektepe says:

    Thank you very much useful information for me.

    ——————————————————————————–

  4. Poele a bois says:

    An interesting post about the checkbox, but i’ve got some problems with the switch(n) command. Can i send you a mail somewhere ?


Switch to our mobile site