dsigntutorial

You can use Macromedia Flash UI components to quickly and easily add simple user interface
elements to your Flash document.
This tutorial is designed to introduce components to beginner and intermediate Flash users and
show how they can be used to easily create a simple application. Before taking this tutorial, you
should complete the Introduction to Flash MX Tutorial and the Introduction to ActionScript
Tutorial, which you can access by selecting Help > Tutorials.
After completing this tutorial, you will know how to do the following tasks:

• Add components to a Flash document
• Configure the components
• Add ActionScript to make the components work

Action
Radio button : Represents a single choice in a group of mutually exclusive choices.
Check box : Represents a single choice.
Push button : Carries out a command when the user clicks it or presses Enter or Return.
Combo box : Displays a list of choices.
List box : Displays a list of choices.
Scroll pane : Provides a scrollable window pane for viewing movie clips.
Text scroll bar : Adds a scroll bar to a text field.

How you can use components
Here are some ways you can use components:
Web form Design a form that asks for a user’s address, telephone, e-mail address, and other
personal information, then validates the data before submitting it to a server.
Build your car Create a Web form that allows users to order a car by selecting various graphic
options instead of typing in the information. The fields are generated from the graphical
interactions.
Survey Build a multiple-question, multiple-part survey that instantly tallies the results and
charts the resulting survey data.
Photo album Create a personal photo album that takes a directory of images and thumbnails
and wraps them with the Flash interface and navigation elements.
Loan calculator Design an online amortization calculator that calculates loan payments.
Web-based presentation template Create a template for slide-based presentations with simple,
prebuilt navigation elements and a layout for images and text.

View the completed form
You can navigate through components in a form by doing the following:

• Click the component to select it.
• Press Tab to move forward; press Shift+Tab to move backward.
• Use the arrow keys to navigate through menu items.

1 Choose File > Open and navigate to the Flash MX program directory. Open Tutorials/Components/Finished/sweepstakes.swf. This is the completed movie.
2 Use the navigation techniques described above to test each of the buttons and boxes on the form.
3 Now open sweepstakes.fla. Choose File > Open and navigate to the Flash MX program directory. Open Tutorials/Components/Finished/sweepstakes.swf. This is the Flash document that generated the movie. Two keyframes are included in the Timeline.
4 Examine page 1. It contains the check box, combo box, and push buttons that are used to gather information. It also has two input text fields for the user’s name and e-mail address.
5 Examine page 2. It is the results page and contains several dynamic text boxes to show the resultsof the information gathered on page 1. To save time, we have already created them for you.

Create a form
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:

• Library panel (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.




The next step is to configure the components... C U Guy..