Building the User Interface
To set up the UI, let's create a quick list of the items we'll need on the stage to handle our dictionary widget. We'll need the following:
A way to enter a word to define.
A big ol' text field that displays the word's definition. It would also be helpful if the text field auto-expands so scrollbars appear if the definition is longer than the text field.
A button to trigger the lookup process.
Labels for the text fields.
We'll use the UI components that come with Flash to take care of all this. To set it up:
Launch Flash MX Professional 2004 (Flash Pro) and save a new Flash document as dictionary.fla. Save it wherever you like.
Change the stage dimensions to 550x220.
Open the Components panel (Window > Development Panels > Components) and expand the UI Components set shown in Figure 1.
Drag a Label component to the stage and set the Text parameter in the Properties panel to Word to define:.
Drag another Label component to the stage and set its Text parameter to Definition:. You can also simply use static text for these two labels, created by using the Text tool.
Next, drag a TextInput component to the stage and name it input. This is where we'll enter words to define.
Drag a TextArea component to the stage and name it definition. This component will display the definitions of the words we look up.
Finally, drag a button component to the stage and set the Label parameter in the Properties panel to Define It.
Align everything on the stage to look similar to Figure 2.
Figure 1 UI components for both you and me. (Knee slapper, huh?)
Figure 2 A layout just begging for a better design.
Now that we have our UI set up, we can move on to accessing the web service and binding data to the components.