Create Your First Flex Project

The first step to develop your Flex application is to create a new Flex project. You can easily do it by using Flex Builder.

Step 1

On the Flex Builder menu bar, Click File -> New -> Flex Project

flex-tutorial-create-new-flex-project

Step 2

In the New Flex Project window,

  1. Give a name to your Flex project. As a best practice, use Upper CamelCase as the name format (e.g. HelloWorld).
  2. Choose the project location or use the default flex workspace.
  3. Choose the application type: Web Application or Desktop Application. In our example, choose Web Application.
  4. Choose the server technology (J2EE, .Net, PHP, etc.). In our demo, just simple chose None.

Click Next to continue.

flex-tutorial-choose-project-name

Step 3

Configure the output folder for the compiled Flex application. Here we just use the default folder: bin-debug and click Next.

flex-tutorial-choose-flex-application-output-folder

Step 4

Set the build path for your new Flex project. Build path includes: Source Path and Library Path. Those are for Flex Builder to locate additional source files and libraries(like swc) when compiles the project. In this simple demo, we just leave them empty.

By default, the main source folder is src, and the main application file is a MXML file named after your project name (e.g. HelloWorld.mxml).

Click Finish to let Flex Builder create a new Flex project for you.

flex-tutorial-select-build-path

Congratulations!

You have successfully created your first Flex project. Let’s take a look at what show on the Flex Builder after it.

flex-tutorial-create-your-first-flex-project

As you can see, a new project (HelloWorld) appears on the Flex Navigator panel with four sub-folders:

  • bin-debug – output folder for the compiled Flex application
  • html-template – contains the html wrapper template
  • libs – for additional Flex libraries
  • src- the main source file folder.

Our main application file is HelloWorld.mxml and Flex Builder has already created a base code template in the source editor view.

You may notice that there are two small icons associated with HelloWorld.mxml.

flex-tutorial-mxml-application-icon

The green arrow means this is a Flex MXML application and the blue ball means this is a default main application for your Flex project.