3.2 The default application container - flex 3 and flex 4  (Page 4/12)

Create a new project

Once you have Flash Builder 4 running, pull down the File menu and select New/Flex Project . Enter the name of your new project into the dialog box, make certain that the radio button for Web application is selected, specify the compiler that you want to use (Flex 3 or Flex 4) and click the Finish button. If you wish, you can specify a disk location for your project other than the default location.

The project tree

A directory tree for your new project will be created having at least the following folders:

• .settings
• bin-debug
• html-template
• libs
• src

This directory tree appears in the upper-left panel of the IDE. (Note that the tree shows some other nodes such as default package and Flex x.x, butthey aren't actually disk folders.)

Flash Player output for a new Flex project

The bin-debug folder will contain several files including one with an swf extension and one with an html extension . As I mentioned earlier , if you double-click the file with the swf extension, it should open in Adobe FlashPlayer looking something like Figure 1.

(Note that the default background color for a new Flex 3 project is the gray color shown in Figure 1 while the default background colorfor a new Flex 4 project is white.)

Figure

Flash player output for a new flex project.

Browser output for a new Flex project

When you installed Flash Builder 4, you should have been given an opportunity to update one or more browsers to include a special version of the Flash Player that supports debugging. If you openthe html file mentioned above in one of those browsers, the output should look something like Figure 2 (with either a gray or white background depending on which version of the Flex compiler was used tocreate the project) .

Figure

Browser output for a new flex project.

The bin-release output

After you are satisfied with your program, you can create an output folder named bin-release by selecting Project/Export Release Build... The files in this folder are similar to the files in the bin-debug folder, but they may be smaller. This folder has been purged of debug information, and is the folder that is intended for deployment on a website.

Boring!

Granted, these outputs aren't all that exciting. However, they should help to confirm that you have Flash Builder 4 and Flash Player (version 10 or later) properly installed and linked to your browser.

The src folder

The folder in the directory tree mentioned earlier that will probably command most of your attention is the folder namedsrc. When you create a new Flex project, this folder will contain a file with an extension of mxml. If you double click on that file name in theupper-left IDE window, the mxml file will open in the text editor window of the IDE. If you selected the Flex 3 compiler, the skeleton code will look something like Listing 1. (It will be different for Flex 4, but I will get into that later.)

A skeleton mxml file

Listing 1 shows the skeleton mxml code for a new Flex 3 project. This is the XML code that you will modify and supplement as you add features to yourproject.