In this exercise you use Flash Builder to create a production build of the Flash application shown in Figure 1.

Figure 1. You create a production build of this application.

In this exercise, you will learn how to:

• Explore the bin-debug directory
• Create a production build
• View a production build

Requirements

In order to complete this tutorial, you need the following software and files:

Flash Builder 4

• Download
• Learn more

Exercise files:

• ex5_07_starter.zip (ZIP, 48 KB)
• ex5_07_solution.zip (ZIP, 1.7 MB)

Prerequisite knowledge

• Exercise 1.1: Creating and skinning an application

Exploring the bin-debug directory

In this section, you will explore the contents of the bin-debug directory.

1. Download the ex5_07_starter.zip file if you haven’t already and extract the file ex5_07_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex5_07_starter.fxp file.
4. Open the EmployeePortal.mxml file.

5. Run the application.

   You should see the Employee Portal page (see Figure 2).

   

   Figure 2. Run the application to see its preview in a browser.

6. Return to Flash Builder.

7. Within the Package Explorer view, expand the bin-debug folder.

   The bin-debug output files contain additional debug code and metadata that the debugger uses for tasks such as setting breakpoints or viewing variables.

8. Within the bin-debug folder, right-click the EmployeePortal.swf file and select Properties (see Figure 3).

   

   Figure 3. Right-click the EmployeePortal.swf file and select Properties.

9. Note the file size (see Figure 4).

   

   Figure 4. Note the file size for the bin-debug version of the EmployeePortal.swf file.

Creating a production build

In this section, you will create a release build version of the Employee Portal application.

1. Select Project > Export Release Build (see Figure 5).

   

   Figure 5. Select Project > Export Release Build.

2. Within the Export Release Build dialog, select the check box next to Enable view source (see Figure 6).

   Note that the export folder is named bin-release.

   

   Figure 6. Click the check box next to Enable view source.

3. Click Finish.

Viewing the production build

In this section, you will view the release build in a browser and use the source view option to view the code source.

1. Within the Package Explorer view, expand the bin-release folder.

2. Right-click the EmployeePortal.swf file and select Properties (see Figure 7).

   

   Figure 7. Right-click on the bin-release EmployeePortal.swf file and select Properties.

3. Note the file size.

   You should see the file size is considerably smaller (see Figure 8).

   

   Figure 8. Note that the file size of the production build SWF file is much smaller.

4. Click OK.
5. Double-click the EmployeePortal.html file to run it in a browser.

6. Right-click somewhere in the browser window and select View Source (see Figure 9).

   

   Figure 9. Right-click somewhere in the browswer window and select View Source.

You should see the source view open (see Figure 10). Note the Download source link in the bottom left corner.

Figure 10. Note the Download source link in the bottom left of the source window.

Test your knowledge

In this exercise, you learned about the bin-debug folder and its contents and how to create a production build of a Flex application as well as enable view source for the application.

What type of build should be created for the final version of an application that will be deployed?

A production build.

What dialog box contains the option to Allow view source?

The Export Release Build dialog box.

About the author