The Checkbox component is usually used on forms where a question can
have more than one answer (for example, a "Click all that apply"
type question.) Typically, there are two ways that a checkbox can function
within your application: active and passive. For the purposes of this
tutorial, I'm going to classify an active checkbox as one that affects
something within the application the moment it is checked or unchecked.
For example, unchecking a certain checkbox might disable a certain portion
of the form with additional questions linked to the item being unchecked.
A passive checkbox, on the other hand, is one that we can safely ignore
until a form is submitted. In the first exercise, you will create a simple
active checkbox which, when clicked, will echo the state of the checkbox
into a TextInput component.
Start a new FLA and drag a Label Component and a CheckBox component
on the Stage, as shown below.
Using the Property Inspector (PI), give the label component the instance
name myLabel.
Similarly, give the Checkbox component an instance name of myCheckbox
and set its label to " This is an important option". (Notice
the space before the first letter of the label for formatting purposes.)
Notice that the Checkbox component's default size cuts off the label
you just entered. To fix this, select Modify -> Transform -> Free
Transform (or the Free Transform tool; Q) and resize the Checkbox component
to make it longer.
Similarly, use the Free Transform tool to resize the Label component
to make it wider so that it does not cut off the message you are eventually
going to display in it.
Create a new layer and call it actions and enter the following script
on Frame 1 of the Actions layer:
// create event listener object for checkbox
myCheckboxListener = new Object();
// click event handler
myCheckboxListener.click = function ()
{
if ( myCheckbox.selected )
{
myLabel.text = "You have checked the checkbox!";
}
else
{
myLabel.text = "You have unchecked the checkbox!";
}
}
// register the event listener
myCheckbox.addEventListener("click", myCheckboxListener);
// clear the label
myLabel.text = "";
Test the movie to see what it does. Check and uncheck the Checkbox
and note the resulting text in the Label component.
Look through the code to understand how this is achieved. You should,
by now, be familiar with how to add a listener to any component (if
you are not, read through the Button and Alert component examples again.)
Here, you have set up a listener to listen for the click event on the
Checkbox component. When the user clicks on the Checkbox component,
the click event handler gets called and it is here that you check the
selected property of the Checkbox component to see whether it is checked
or unchecked. Accordingly, you alter the text property of the Label
component to display the current state of the Checkbox.
Although you may use active checkboxes from time to time in your applications,
you will, for the most part be passively evaluating the values of checkboxes
when a form is submitted. The next example shows you one possible way
to achieve this.
Start a new FLA and use the screenshot below as a guide when laying
out your movie.
Create two new layers and name your layers, starting with the top
one, as Actions, Form Elements and Background Fills, respectively.
Drag a TextArea Component on stage and place it towards the very top
of the Stage. Using the Property Inspector (PI), give it an instance
name of statusMessage and set its text property to Please fill out the
form below and hit submit. Make sure that wordWrap is set to true.
(Optional; Eye-Candy) Underneith the TextArea Component, use the
Text Tool (T) to create a Static Text field and enter the following
text in it: I am... (check all that apply).
(Optional; Eye-Candy) In the Background Fills layer, create a light
blue rectangle.
Drag four Checkbox components and place them one under the other
as shown in the screenshot in Step 1.
Using the PI, give the Checkboxes the labels you see in the screenshot
in Step 1. Give the Checkbox components the following instance names,
starting with the one at the top: checkboxAmazing, checkboxLovable,
checkboxIntelligent and checkboxOutToLunch. The PI settings for the
topmost checkbox are shown below.
Drag a Button component on stage and place it at the bottom of your
form. Give the button component an instance name of submitButton and
change its label to read "Submit".
In this example, you are not concerned with doing anything when the
user clicks on a specific checkbox. However, you will want to do something
based on which checkboxes are checked once the user submits the form.
In this case, let's say that you want to change the text in the TextArea
component to display a message reflecting the adjectives the user has
chosen to describe herself.
Enter the code in the following steps in Frame 1 of the Actions layer,
in the order stated.
To start, set up a reference to refer to the timeline that the form
is on. In this case, this will simply refer to _root. However, if this
movie is at some point loaded in by another movie (as a child movie),
myForm will still contain the correct reference to the timeline. An
absolute reference to _root (e.g. myForm = _root) would break in such
a scenario, unless _lockroot is set to true for the movie. In my experience,
it pays to never use absolute references to _root in an application.
// save a reference to the timeline that contains the form
myForm = this;
Next, you need to somehow tie together the four checkboxes since
they all refer to the same question. For the purposes of this example,
you can do this simply by adding a new property to each of the textboxes
called group and setting the value of this property to the same string
constant, as shown below. This will let you find and check the states
of the checkboxes easily later on without having to hardcode the checks
using the instance names of the checkboxes (this is more scalable since
it means that you won't have to modify the code if you decide to add
or remove a checkbox later on.)
// create a common group for our
// checkboxes by setting a property called group
GROUP_NAME_STR = "firstQuestion";
checkboxAmazing.group = GROUP_NAME_STR;
checkboxLovable.group = GROUP_NAME_STR;
checkboxIntelligent.group = GROUP_NAME_STR;
checkboxOutToLunch.group = GROUP_NAME_STR;
Since you want to carry out the processing of the form when the form
is submitted, you need to set up a listener to listen for the click
event on the Submit button and register it as a listener. Write out
the skeleton code for this as shown below.
// create a listener object for the submit button
submitButtonListener = new Object();
// submit button listener, click handler method
submitButtonListener.click = function ()
{
// todo
}
// make the submit button listener listen for click events
submitButton.addEventListener("click",submitButtonListener);
In the step above, you left the body of the actual click handler
empty. This is where the bulk of your form processing will take place.
In order to keep the code more legible and uncluttered, you may even
want to call a different method from the click handler to handle the
form processing. For the purposes of this tutorial, you can place the
form handling logic inside the handler, as shown below.
Modify the click handler method on the submitButtonListener so that
it matches the listing shown here.
// submit button listener, click handler method
submitButtonListener.click = function ()
{
// user clicked the submit button
// start the message we are going to display:
INITIAL_MESSAGE_STR = "You are";
var msg = INITIAL_MESSAGE_STR;
// the string we use to join adjectives
AND_STR = " and";
// search for the checkboxes on the form
for (var i in myForm)
{
var currentFormItem = myForm [ i ];
// is the current form item a checkbox that is
// part of our group that contains adjectives?
if (currentFormItem.group == GROUP_NAME_STR )
{
// is the checkbox checked?
var isChecked = currentFormItem.selected;
if ( isChecked )
{
// add the current adjective to the message
msg += currentFormItem.label + AND_STR;
}
}
}
// check if the message is still equal to the initial message
// (ie., the user has not checked any of the boxes)
if ( msg == INITIAL_MESSAGE_STR )
{
msg += " not one to click checkboxes, it appears!";
}
else
{
// remove the last "and", it's extra
var numLettersToRemove = AND_STR.length;
var msgLength = msg.length;
msg = msg.substring ( 0, msgLength - numLettersToRemove );
// don't forget the trusty full-stop.
msg += ".";
}
// change the text in the TextArea component at the top
// to the message we just created
statusMessage.text = msg;
}
Test the movie. Click on some of the checkboxes to select them and
then click on the Submit button and note the message that appears in
the TextArea component.
The majority of the work in this example is performed in the click handler
of the submitButtonListener. Here, you go through all of the various elements
on the current timeline (myForm), and check to see if they have a group
property that is set to the string constant we defined in GROUP_NAME_STR.
When you find one that fulfills this test, you can be sure it is one of
the four checkboxes that belongs to your question and thus continue to
check its selected property to see whether or not is it checked. If it
is checked, you add its label to the string you are composing. The rest
of the code deals with making sure that the message makes grammatical
sense in English.
Download Source Files (5MB!) 
go to previous page 
