First Flex Project in Flash Builder 4 Tutorial

 

UPDATE: The tutorial was written for Flash Builder 4 but works just as well for Flash Builder 4.5

This beginners tutorial will teach you how to create your first Flex Project in Flash Builder 4. We will create a simple application that displays Hello World on the screen. You need no prior knowledge of Flash, ActionScript 3.0 or Flex to follow along with this tutorial.

This article describes how to create a Flex Project in Flash Builder 4. If you are looking for an article on how to create an ActionScript Project in Flash Builder then you can find that here.

First of you need the program Flash Builder 4 from Adobe. If you do not have this program on your computer then go get it from Adobes web page. You can download a 30 days free trial to get started. Install and start the program.

Okay so you have the program up and running. Now it is time to create your very first Flex Project. You have a menu bar at the top left corner. Locate File and click on it. Select New in the drop down menu that opens and then select Flex Project in the menu that opens to the right of the drop down menu.

Flex menu tree

This will open the Create a Flex project wizard. Enter the name of your project in the first text field. I choose HelloWorld as a project name. We can leave the rest of the settings as they are. Click on Finish at the bottom right of the window.

Flex project wizard

The project is created an the the file Main.xml is opened. Type <s:Label text="Hello World" /> at the end of the file between </fx:Declarations/> and </s:Application/>. Label is a text object that will display the string Hello World on the screen.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
   <fx:Declarations>
      <!-- Place non-visual elements (e.g., services, value objects) here -->
   </fx:Declarations>
   <s:Label text="Hello World" />
</s:Application>

The only thing left is to run the application. Do this by clicking on the Run button Run button in the button menu at the top of the Flash Builder window. A dialogue box will open asking you to save the Main.xml file. Click OK. Now a web browser window will open with the text Hello World displaying. You have now finished your first Flex Project in Flash Builder 4. Nice work!

This is the end of the tutorial on how to create your first Flex application in Flash Builder 4. Learn more about ActionScript, Flash Builder 4.5 and the Flex framework in our other tutorials on this site. I hope you found this guide to be helpful.