Working with Flash Builder [Part I]

Creating a New Project:

To create a new project in the flash builder navigate to the File > New > Flex Project from the opening screen of the Flash Builder.

Now it will ask for the Project Name give the name you like, then you have to specify the project location, you also go for the Use Default location option. Then it is require specifying the application type. Choose the Web(runs in Adobe Flash Player). Then it will ask for the Flex SDK version you want to use. I suggest to prefer the “Use default SDK “ option , for the maximum application features.

Then Server technology you prefer for the data services. The options available are ASP.NET, Cold Fusion, J2EEE, and PHP. Select the server technology you want to use. This option can also be configured later while doing the programming. The conversion from the application type from desktop to web is also possible but there are some conditions for that, which program must to satisfy.

Next option you need to give is the Output folder location use default or give folder you prefer.

Then it will ask for the library path, select the component set as “ MX + Spark “ , select the Framework linkage as Default. Then give the name for the main source folder, it wil be “src” in default. Also give the name for the main application file. Now click finish to start the programming.

Now it will build the project workspace and within a few seconds with progress bar you can see the programming environment like below. From which you can start programming. The <s:Application> tag will be opened already, within those tag you can write the program. <mx:Application> can also be used in the case you are using the MXML coding. The declaration can be done anywhere, but in case if you want a variable to be accessed from any part of code prefer declaring in the <fx:Declaration> tag.


The flash builder has two modes “Source” and “Design”. These tabs found below the main menus. The source tab is for doing editing through the Codes and Design mode is to create components visually. For example for inserting a button, it can drag dropped from the Component toolbar in Design Mode whereas in Source you can do this by typing the appropriate code. However, these two synchronize with each other i.e. when you insert a button by drag & drop, then you can see the appropriate code get added in the Source.

To Run:

To run the Program, press Ctrl + F11 or Navigate to menu Run and select Run.. The Flash Builder will compile and make the code in compressed SWF and launch you default browser showing your swf output.

Basic Coding:

Variable Declaration:

Variables can declared at any place of code. The variable data types available are Boolean, Date, int, Number and String. The syntax to declare a variable is


var num:Number = 4;
var flag:Boolean = true;
var str:String = "foo";

Simple Numeric Functions Example:

Simple String Functions Example:

Conditional Statement

The conditional statements checks for the particular condition and execute the code block only if the condition is true. There are 2 types available in the Flash builder.  They are IF statement and SWITCH statements

IF Statement

if (condition) {
Code block1
else {

Code block2

Switch Statement:

The switch statement is similar to the if statement but multiple the codition checking on a particular variable is possible.


switch (expression) {
case 0:
<code block>



The loops are the statement which repeat the particular code block for the a specified number of times. There are many loop type available in our case let us see for,while and do..while loops.

Scopes of Variables


A variable, constant, or method that available only to the class the declares it.


private var str1;
private const strc;


A class, variable, constant, or method is available to any caller.

public var str1;
public const strc;


A variable, constant, or method that available only to the class the declares it and also to its sub class

protected var str1;
protected const strc;



Panel is like a form, which can hold other controls like scroll bar, button, label and text boxes in. It will have a title bar with a border with shadow and other common properties like height, width, top and left. If you want to create the panel through coding type code below

<s:Panel id="panel" title="Panel Sample">

It can also be inserted from components tab by se.Then use the other components you want inside the panel and close the tab with code “</s:Panel>”. If you want the panel to appear in center use the parameters like (horizontalCenter="0" verticalCenter="0") while defining the panel.

Creating Menu:

 IN the flash builder menus can be created by using the “<mx:MenuBar>” tag. For adding the menus elements start “<mx:XMLList>” tag and  use  <menuitem > tag for creating elements. The attributes


<?xml version="1.0"?>
<mx:MenuBar labelField="@label">
<mx:XMLList >
<menuitem label="Menu 1">
<menuitem label="Item 1"/>
<menuitem label="Item 2"/>
<menuitem label="Item 3" enabled="false"/>
<menuitem label="Menu 2">
<menuitem label="Item 1"/>
<menuitem type = "seperator"/>
<menuitem label="Item 2"/>
<menuitem label="Check Example">
<menuitem label="Check 1" type="check"/>
<menuitem label="Check 2" type="check"/>
<menuitem label="Check 3" type="check"/>
<menuitem label="Radio Example">
<menuitem label="Radio 1"
type="radio" groupName="one"/>
<menuitem label="Radio 2"
type="radio" groupName="one"/>
<menuitem label="Radio 3"
type="radio" groupName="one"/>

Creating Text Input Area:

 The input during run time got from the text area, the input may be of any form. This text area is inserted from the components or if you want to create through code use <mx:TextArea>.


<mx:TextArea width="400" height="100" editable="false" selectable="true" range=”/0-9/”>
<mx:text>This is a text</mx:text>

 The above example will create a text area in which, text can be selected by using the mouse but cannot be edited and it allow only numerical data.

Using Date Chooser:

The date chooser component is to select the date by viewing the user the graphical calendar. It can be used for the input in form of date.

Using Color Picker:

The color picker control is used to select a color by viewing multiple color ser. This is useful when user need to specify color without remembering the html color code. This control can be created by using <mx:ColorPicker>

 <mx:ColorPicker id="colpick" showTextField="true" selectedColor="0xFFFFFF"/>