In this tutorial, you will use components to create a simple two-page form to enter a sweepstakes to win a free Stiletto electric car. The first page is used to gather the information, and the second page is used to display the results. You will follow these three steps to complete the form:
• Add components to the form
• Configure the components
• Add ActionScript to the document to make the components work
To get you started, we have included the background, text fields, and graphics for the form. You will add and configure components and ActionScript to make it an interactive form.
Add components
The first step is to add the components to the Stage and place them on the form. You will add a check box, a combo box, and a push button to the first page of the form. You will also add a push button to the second page.
To add components to a document, you can either drag elements from the Components panel to the Stage, or double-click them in the Components panel to place them in the center of the Stage. After you add a component to a document, it appears in the document’s Library panel.
It is a good idea to create a new layer for the components.
1 Choose File > Open and navigate to the Flash MX program directory. Open Tutorials/ Components/my_sweepstakes/mysweepstakes.fla.
2 Choose File > Save As and save the file with a new name, such as newsweepstakes.
3 Create a new layer and name it UI. You will place the components on this layer.
4 Click Frame 6 in the UI layer of the Timeline. Choose Insert > Blank keyframe to add a blank keyframe. This will be used for components on the second page.
5 Make sure the following panels are open:
• (Window > Library)
• Components panel (Window > Components)
• Property inspector (Window > Properties)
Add a check box
Use the CheckBox component to create a box with a value of either true or false.
1 Select Frame 1 in the UI layer.
2 Drag the CheckBox component from the Components panel to the Stage. Place it under the paragraph that asks if the user wants to enter the sweepstakes.
The component appears in the Flash UI Components folder in the Library panel.
Add a combo box
Use the ComboBox component to create a simple drop-down menu of items that can be selected by users. You can also use a ComboBox to build a more complex drop-down menu that automatically scrolls to a menu item starting with the letter or letters entered into the text field by the user.
• Drag the ComboBox component from the Components panel to the Stage. Place it under “Select your favorite color:”.
The component appears in the Flash UI Components folder in the Library panel.
Add push buttons
Use the PushButton component to create two push buttons. One button will be on the first page and will be used to submit the information on the form. The next button will be on the second page and will be used to return to the first page and repopulate it with the values that were previously submitted.
1 Drag the PushButton component from the Components panel to the Stage. Place it in the lower right corner of the form so it lines up horizontally with the name and e-mail text fields.
The component appears in the Flash UI Components folder in the Library panel.
After you have dragged a component from the Components panel to the Stage, you select additional instances of it from the Library panel.
• Add components to the form
• Configure the components
• Add ActionScript to the document to make the components work
To get you started, we have included the background, text fields, and graphics for the form. You will add and configure components and ActionScript to make it an interactive form.
Add components
The first step is to add the components to the Stage and place them on the form. You will add a check box, a combo box, and a push button to the first page of the form. You will also add a push button to the second page.
To add components to a document, you can either drag elements from the Components panel to the Stage, or double-click them in the Components panel to place them in the center of the Stage. After you add a component to a document, it appears in the document’s Library panel.
It is a good idea to create a new layer for the components.
1 Choose File > Open and navigate to the Flash MX program directory. Open Tutorials/ Components/my_sweepstakes/mysweepstakes.fla.
2 Choose File > Save As and save the file with a new name, such as newsweepstakes.
3 Create a new layer and name it UI. You will place the components on this layer.
4 Click Frame 6 in the UI layer of the Timeline. Choose Insert > Blank keyframe to add a blank keyframe. This will be used for components on the second page.
5 Make sure the following panels are open:
• (Window > Library)
• Components panel (Window > Components)
• Property inspector (Window > Properties)
Add a check box
Use the CheckBox component to create a box with a value of either true or false.
1 Select Frame 1 in the UI layer.
2 Drag the CheckBox component from the Components panel to the Stage. Place it under the paragraph that asks if the user wants to enter the sweepstakes.
The component appears in the Flash UI Components folder in the Library panel.
Add a combo box
Use the ComboBox component to create a simple drop-down menu of items that can be selected by users. You can also use a ComboBox to build a more complex drop-down menu that automatically scrolls to a menu item starting with the letter or letters entered into the text field by the user.
• Drag the ComboBox component from the Components panel to the Stage. Place it under “Select your favorite color:”.
The component appears in the Flash UI Components folder in the Library panel.
Add push buttons
Use the PushButton component to create two push buttons. One button will be on the first page and will be used to submit the information on the form. The next button will be on the second page and will be used to return to the first page and repopulate it with the values that were previously submitted.
1 Drag the PushButton component from the Components panel to the Stage. Place it in the lower right corner of the form so it lines up horizontally with the name and e-mail text fields.
The component appears in the Flash UI Components folder in the Library panel.
After you have dragged a component from the Components panel to the Stage, you select additional instances of it from the Library panel.
2 Go to the blank keyframe at Frame 6. In the Library panel, open the Flash UI Components folder and drag the PushButton component from the Library panel to the Stage. Place it in the lower right corner.
Configure the components
The next step is to configure the components so they are set up with the correct information for a user to select.
You set the parameters for a component using the Parameters tab of the Property inspector or the Components Parameters panel.
Advanced users can use API methods and properties for each component to set the parameters, size, appearance, and other properties of the component. The methods and properties available for each component element are listed in the ActionScript Dictionary under the name of the component.
Configure the check box
Select Frame 1 on the UI layer, then select the CheckBox component on the Stage. Its parameters are displayed in the Property inspector.
2 Type sweepstakes_box in the Instance Name text box.
3 Type Absolutely! in the Label text box.
4 In the Initial Value parameter pop-up menu, select True. This specifies whether the initial state of the CheckBox component is selected (True) or unselected (False).
5 In the Label Placement parameter pop-up menu, leave the default value set to right alignment. The label will be displayed to the right of the check box.
6 Do not alter the Change Handler parameter.
The Change Handler parameter is the function that you want to execute when the user selects an item. This function must be defined in the same Timeline as the component instance. This parameter is optional and needs to be specified only if you want an action to take place as soon as the user accesses a component.
When you finish, the Property inspector should look like the following:
You set the parameters for a component using the Parameters tab of the Property inspector or the Components Parameters panel.
Advanced users can use API methods and properties for each component to set the parameters, size, appearance, and other properties of the component. The methods and properties available for each component element are listed in the ActionScript Dictionary under the name of the component.
Configure the check box
Select Frame 1 on the UI layer, then select the CheckBox component on the Stage. Its parameters are displayed in the Property inspector.
2 Type sweepstakes_box in the Instance Name text box.
3 Type Absolutely! in the Label text box.
4 In the Initial Value parameter pop-up menu, select True. This specifies whether the initial state of the CheckBox component is selected (True) or unselected (False).
5 In the Label Placement parameter pop-up menu, leave the default value set to right alignment. The label will be displayed to the right of the check box.
6 Do not alter the Change Handler parameter.
The Change Handler parameter is the function that you want to execute when the user selects an item. This function must be defined in the same Timeline as the component instance. This parameter is optional and needs to be specified only if you want an action to take place as soon as the user accesses a component.
When you finish, the Property inspector should look like the following:
For more information about using the API methods of the FCheckBox component to set additional options for the component, see the FCheckBox (component) entry in the online ActionScript Dictionary in Flash Help.
Configure the combo box
Select the ComboBox component on the Stage. Its parameters are displayed in the Property inspector.
2 Type color_box in the Instance Name text box.
3 Make sure the Editable parameter is set to False. This prevents users from typing in their own text.
4 The Labels parameter displays a list of values users can select. Click the Labels field, then click the magnifying glass to open the Values pop-up window. Click the Plus (+) button to enter a new value.
5 Click in the default value field, then type Lightning for the first value.
6 Click the Plus (+) button to enter the next value. Click in the default value field, then type Cobalt for the next value.
7 In the same manner, add Emerald to the list. When you are finished, the Values pop-up window should look like the following:
8 Click OK to close the Values pop-up window.
The Data parameter is optional. It is used to specify the values associated with the items (labels) in the list box. There is no need to do that for this tutorial.
9 The Row Count parameter specifies how many rows are displayed in the window. Since there are three options, change the value to 3. There is no need to enter a Change Handler parameter name. When you are finished, the Property inspector should look like the following:
For more information about using API methods to change additional properties, see the FComboBox (component) entry in the online ActionScript Dictionary in Flash Help.
Configure the push buttons
Select the PushButton component in Frame 1.
The component’s parameters are displayed in the Property inspector.
2 Type submit_btn in the Property inspector Instance Name text box.
3 Type Submit in the Property inspector Label text box.
This text is displayed in the body of the button.
4 Type onClick for the Click Handler name. Later you will write ActionScript to define what the
Click Handler should do.
When you are finished, the Property inspector should look like the following:
5 Select the PushButton component in Frame 6.
6 Type return_btn in the Property inspector Instance Name text box.
7 Type Return in the Property inspector Label text box. 8 Type onClick for the Click Handler name.
For more information about using the API methods of the FPushButton component to change additional properties, see the FPushButton (component) entry in the online ActionScript Dictionary in Flash Help.
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 getResultsfunction 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");
}
}
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.
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);
}
}
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();
}
// 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:
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.
Test your movie
To see what the components look like, run your movie in the Flash Player 6.
1 Select Control > Test Movie.
The movie is run in the Flash Player.
2 Select and deselect the check box to be sure it works.
3 Select a color and make sure it appears on page 2.
4 When you are finished, select File > Close to close the movie in the player.
5 If you noticed any errors, use the Arrow tool to select the component, then make the corrections in the Property inspector. If necessary, retest the movie.
==============================================
.
Contents
Trademarks
CHAPTER 1 - Introduction to Flash MX Tutorial
CHAPTER 1 - What you should know
CHAPTER 1 - View the completed movie
CHAPTER 1 - Analyze the stiletto.fla file
CHAPTER 1 - Define properties for a new document and create a ...
CHAPTER 1 - Create and mask vector art
CHAPTER 1 - Tween bitmap effects within a movie cl...
CHAPTER 1 - Load dynamic text at runtime
CHAPTER 1 - Add animation and navigation to button...
CHAPTER 1 - Add streaming and event sounds
CHAPTER 1 - Organize your Library panel
CHAPTER 1 - Test download performance and publish ...
CHAPTER 1 - The next steps
.
CHAPTER 2 - Introduction to ActionScript Tutorial
CHAPTER 2 - View a completed movie
CHAPTER 2 - Initialize the movie
CHAPTER 2 - Save and retrieve information
CHAPTER 2 - Display information in a dynamic text ...
CHAPTER 2 - Write an expression
CHAPTER 2 - Control the flow ofthe movie
CHAPTER 2 - Create commands and reuse code
CHAPTER 2 - Use a built-in object
CHAPTER 2 - Test the movie
CHAPTER 2 - The next steps
.
CHAPTER 3 - Introduction to Components Tutorial
CHAPTER 3 - Types of components
CHAPTER 3 - View the completed form
CHAPTER 3 - Create a form
CHAPTER 3 - The next steps
.
==============================================
.
Contents
Trademarks
CHAPTER 1 - Introduction to Flash MX Tutorial
CHAPTER 1 - What you should know
CHAPTER 1 - View the completed movie
CHAPTER 1 - Analyze the stiletto.fla file
CHAPTER 1 - Define properties for a new document and create a ...
CHAPTER 1 - Create and mask vector art
CHAPTER 1 - Tween bitmap effects within a movie cl...
CHAPTER 1 - Load dynamic text at runtime
CHAPTER 1 - Add animation and navigation to button...
CHAPTER 1 - Add streaming and event sounds
CHAPTER 1 - Organize your Library panel
CHAPTER 1 - Test download performance and publish ...
CHAPTER 1 - The next steps
.
CHAPTER 2 - Introduction to ActionScript Tutorial
CHAPTER 2 - View a completed movie
CHAPTER 2 - Initialize the movie
CHAPTER 2 - Save and retrieve information
CHAPTER 2 - Display information in a dynamic text ...
CHAPTER 2 - Write an expression
CHAPTER 2 - Control the flow ofthe movie
CHAPTER 2 - Create commands and reuse code
CHAPTER 2 - Use a built-in object
CHAPTER 2 - Test the movie
CHAPTER 2 - The next steps
.
CHAPTER 3 - Introduction to Components Tutorial
CHAPTER 3 - Types of components
CHAPTER 3 - View the completed form
CHAPTER 3 - Create a form
CHAPTER 3 - The next steps
.
==============================================
