10 Minutes with Flash: Creating an External Text File with JSFL
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
The purpose of today's journey is to create a panel that uses JSFL (JavaScript Flash—part of the new "extensibility layer" built into Flash MX 2004) to save a name=value pair to an external .txt file that can later be imported via a loadVars object. The act of loading text from an external source is common in Flash development, so I thought it would be a good excuse to illustrate some of the benefits of JSFL. The next time you need to store a variable in an external .txt file, this is a quick way to create it.
NOTE
If you read my earlier article in this series, titled "10 Minutes with Flash: Creating a Custom Panel," you'll be well-prepared for today's 10-minute tutorial. If not, you should still be able to get through it if you have a decent knowledge of ActionScript 2.0 or have made a Flash Dynamic Panel at least once before.
The GUI Part
First, you'll do all the layout work for the panel's UI, as follows:
Create a new Flash document with stage dimensions of 280x310 and save it as External Var Creator.fla. Save it wherever you want.
In the Publish Settings for the document, set the document to publish for Flash Player 7 by using ActionScript 2.0. Because this will become a panel inside Flash MX 2004, there's no reason to publish for an older version of the player.
Create a new layer in the timeline named actions and rename Layer 1 to assets.
To make the panel look more like the other panels in Flash, I used #F7F7F7 as the stage background color, but you can choose whatever color you want.
To create the panel, we'll need several things on the stage. First, we need a way for users (including you) to enter a name for the variable that will be saved into the .txt file. We also need a way to enter the value of the variable. To save the .txt file, we need to tell Flash where to save it. To handle this, we'll create variables that provide Flash the path to the user's desktop for various operating systems. On the stage, we'll give the user a combo box by which to choose their operating system. Finally, we need to know the user's OS username, which will be part of the path to the desktop, and a way to name the .txt file. We'll use components and ActionScript 2.0 to handle all of this.
Select frame 1 of the assets layer, open the Components panel, and drag the following UI components to the stage: four InputText components, one ComboBox component, and one Button component.
Arrange the components on the stage, as shown in Figure 1, adding text labels to each of them. (You can use the Label component if you like, but static text fields are fine.) The labels should read Variable name, Value, OS Username, and Save As. Also, add the label .txt to the right of the Save As field, so the user knows that he does not need to add the file extension to the name.
Select the ComboBox component; in the Component Inspector panel, click the labels field, and then click the small magnifying glass icon to add values to use as labels for the combo box, as shown in Figure 2. Add the labels Mac OS X, Win XP, and Win 2000. Set the rowCount to 3 and then click OK to close the dialog box.
Select each component one at a time and assign instance names to them as follows (instance names are shown in italics), as shown in Figure 3.
Select the Button component and enter Save the Variable into the label field in the Component inspector. The button should now reflect the change.
)
Figure
1 Our groovy new panel interface.
)
Figure
2 Add labels to the ComboBox component.
TextInput component beneath the "Variable name" label: varName TextInput component beneath the "Value" label: valueTxt TextInput component beneath the "OS Username" label: osUserName ComboBox comonent: osType TextInput component beneath the "Save As" label: saveAs Button component: saveBtn
)
Figure
3 Assign instance names to the component instances as shown here
Now we're ready to start scripting.