Introduction to Components Tutorial > Create a form > Write ActionScript to gather the data

 

Write ActionScript to gather the data

Some of the ActionScript will be for the entire movie, while some will be related to a particular frame. The following table will help you keep track of instance names.

Instance name

Description

color_box

Color combo box on page 1

sweepstakes_box

Sweepstakes check box on page 1

submit_btn

Submit push button on page 1

name

Input text box for name on page 1

email

Input text box for e-mail address on page 1

return_btn

Return push button on page 2

name_result

Dynamic text box on page 2 to display the user's name

email_result

Dynamic text box on page 2 to display the user's e-mail address.

color_result

Dynamic text box on page 2 to display the user's color selection

sweepstakes_text

Dynamic text box on page 2 that displays different text if the user has chosen or not chosen to enter the sweepstakes


 
Write ActionScript for the entire movie

ActionScript for components is placed in keyframes. The Click Handler parameter specifies what happens when the PushButton component is activated. The default value is onClick, which means that when the user clicks one of the push buttons, it is activated. We will begin by creating a function for onClick. This will be a branching function that will first determine whether the button pushed was the Submit or the Return button, then carry out actions accordingly.

1

Create a new layer and name it All Actions. This will be used for ActionScript that should run throughout the movie.

2

If the Actions panel is not open, choose Window > Actions.

3

Switch to expert mode by pressing Control+Shift+E (Windows) or Command+Shift+E (Macintosh), or by clicking the control in the upper right corner (a triangle with a check mark above it) and selecting Expert Mode from the pop-up menu.

4

First, enter the callback function for the push buttons. This is a conditional statement that branches depending on which button is clicked. If the Submit button is clicked, it will branch to the getResults function and go to page 2. If the Return button is clicked, it will go to page 1.

Enter the following code in the Actions panel.

// push button callback
function onClick(btn) {
	if (btn == submit_btn) {
		getResults();
		gotoAndStop("pg2");
	} else if (btn == return_btn) {
		gotoAndStop("pg1");
	}
}

Note: Although it is not recommended, if you don't want to write the ActionScript, you can copy the text from this tutorial and paste it into the Actions panel.

5

Now, write the getResults function. This gets the results from the sweepstakes check box and the color combo box. It gets the results from the combo box as a label so it can show the results.

// get results from pg 1
function getResults() {
	sweepstakes_result = sweepstakes_box.getValue();
	color_result = color_box.getSelectedItem().label;
	selectedItem = color_box.getSelectedIndex();
}

6

Next, write the initValues function. This initializes the values on page 1 with the values the user has previously selected. It is run when the user clicks the Return button.

// initialize the values on pg 1 with the values the user has previously selected
function initValues() {
	sweepstakes_box.setValue(sweepstakes_result);
	if (!started) {
		color_box.setSelectedIndex(0);
		started = true;
	} else {
		color_box.setSelectedIndex(selectedItem);
	}
}

7

Finally, add a call to the initValues function to the beginning of the ActionScript. When you finish, the ActionScript should look like this:

initValues();
// push button callback
function onClick(btn) {
	if (btn == submit_btn) {
		getResults();
		gotoAndStop("pg2");
	} else if (btn == return_btn) {
		gotoAndStop("pg1");
	}
}
// initialize the values on pg 1 with the values the user has previously selected
function initValues() {
	sweepstakes_box.setValue(sweepstakes_result);
	if (!started) {
		color_box.setSelectedIndex(0);
		started = true;
	} else {
		color_box.setSelectedIndex(selectedItem);
	}
}
// get results from pg 1
function getResults() {
	sweepstakes_result = sweepstakes_box.getValue();
	color_result = color_box.getSelectedItem().label;
	selectedItem = color_box.getSelectedIndex();
}

You have completed the script that needs to run for the entire movie. However, you still need to add script for the frames in page 1 and page 2.

 
Add ActionScript to each keyframe

Some of the ActionScript needs to be executed only when a user selects a particular frame. In order to make the ActionScript work, you need to name each keyframe.

1

Create a new layer and name it Frame Actions. Select Frame 1, then choose Insert > Blank Keyframe to insert a keyframe. Use the Property inspector to name the keyframe pg1. In the same manner, insert a keyframe at Frame 6 and name it pg2.

2

Select the keyframe in Frame 1 of the Frame Actions layer and write the following ActionScript to stop the movie at Frame 1 (pg1):

stop();

3

(Optional) If you want to display certain text if the user has selected the sweepstakes check box and other text if the user has not, you can write a conditional statement with text that will go into the sweepstakes_text dynamic text field on page 2. Select the keyframe named pg2 in the Frame Actions layer and enter the following in the Actions panel:

// sweepstakes text
if (sweepstakes_result==true) {
	sweepstakes_text = "You have been entered in the Stiletto Fantasy sweepstakes. Winners are announced at the end of each month.";
} else {
	sweepstakes_text = "You have not been entered in the Stiletto Fantasy sweepstakes.";
}

Note: Do not cut and paste this ActionScript into the Actions panel. It will not work properly, because there are line breaks between the first and second lines of text.