Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Task 3: Building a Form with UI Components
Building common user interface elements like drop-down menus and list boxes is a complex and time consuming process. What's more, Flash developers aren't usually trained in the intricacies of UI behavior, leading to non-standard form controls.
Flash MX Solution
A set of ready-made UI components is bundled with Flash. Flash MX Components replace and extend Flash 5 Smart Clips. Although components can be created for any purpose, the UI components are specifically for building forms and interfaces. Included are versions of all the standard HTML form controls, plus some extras:
RadioButton. This displays a single choice in a group of choices.
CheckBox. This displays a single choice.
PushButton. This triggers a script when the user clicks it or presses Enter or Return.
ListBox and ComboBox. These both display a list of choices.
ScrollPane. This provides a scrollable area for viewing movie clips.
ScrollBar. This adds a scroll bar to a text field.
Using these components is relatively straightforward; open the Components panel and drag the appropriate icon onto the stage. After that, it's a matter of customizing labels and options, and writing an ActionScript function for the component to trigger.
Try It
To build a form in under five minutes, complete the following steps:
Open a new document, and open up the Components panel.
Switch to the Text Tool, then draw out a dynamic text field about 150 pixels wide and several lines high.
Using the Properties inspector, assign the field the instance name myText.
From the Components panel, drag the ScrollBar icon onto the Stage. When it appears, drag it over the text field so that it snaps to the right hand side. The scrollbar is now linked to the myText field.
Next, drag a ComboBox onto the stage. Use the Properties inspector to set the Change Handler parameter to myFunction, and the labels parameter to [Section 1,Section 2,Section 3].
Click the first frame on the main timeline, and open the Actions panel. Paste or type in the following myFunction code:
function myFunction(comboBox) { section = comboBox.getSelectedIndex(); if (section == 0) { myField.text = "This is the first section."; } else if (section == 1) { myField.text = "This is the second section."; } else { myField.text = "This is the third section."; } }
When the combo box is changed, it will call myFunction and pass a reference to itself as the argument. myFunction then uses that reference to determine the current selection, and sets the value of myText to match.