Compiling MXML files with FlexBuilder

On this page, you will be guided, to code and compile a flex application on adobe Flex Builder. This adobe product is eclipse based therefore many of eclipse features can be seen inside the flex builder.
I have the evaluation copy of flex builder and using this only, i am going to guide you. So before starting you too have this adobe ide installed in your system, if not then first visit the link below and get Flex Builder.

http://www.roseindia.net/flex/flex_builder_ide.shtml

Now i after getting flex builder i know you are ready for learning the coding and compiling process of flex on adobe flex builder.
So lets start, first trigger the binary file of flex builder.

After the launcher file is triggered, flex builder opens.

When flex builder ide main page opens close the OutLine tab, Problems tab and Flex Start Page tab. This will provide more coding space.

Now after closing the above three window tabs, you will get the ide main page view as below shown.

Now for coding a flex application first we have to create a flex project, like we create for Java and C/C++ in eclipse. For this click File -> New -> Flex Project.

After this a New Flex Project window opens. In the Project name: column type the name of your project , here i have written neo as project name. After that click on Finish button.

After this a project with name neo comes in your Flex Navigator window and by default a neo.mxml file is opened.

Now if you want you can start coding with neo.mxml file or you can open another mxml file too. For this click on
File -> New -> MXML Application

or right click on your flex project neo and click on File -> New -> MXML Application.

After this a New MXML Application window opens. On this, type your file name in Filename: column and click Finish. Here i have written my file name as rachel, so a MXML application with name rachel.mxml will be created and opened.

After this you can start coding on the new file rachel.mxml.

For getting maximum coding space minimize the Flex Navigator window.

After this i coded an application in which i have added wipe effect in four flex control buttons. You all have to just copy code from here or download at the end of the page and paste the code in your mxml application.

rachel.mxml


<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">



  <mx:WipeDown id = 'wipe_down' />

  <mx:WipeLeft id = 'wipe_Left' />

  <mx:WipeRight id = 'wipe_Right' />

  <mx:WipeUp id = 'wipe_Up' />



  <mx:Style>

    .baadshah {color : #00FF00}

    Panel{font-size : 18pt}

    Button{font-size : 10pt}

  </mx:Style>

  

  <mx:Panel title = 'Baadshah Khan' titleStyleName="baadshah">

  



  <mx:ControlBar horizontalAlign = 'center'>

  

      <mx:Button label = 'Rachel Weisz' rollOverEffect = 'wipe_down' color="#990033" />

      <mx:Button label = 'Angelina Jolie ' rollOverEffect = 'wipe_Left' color="#6600FF" />

      <mx:Button label = 'Halle Berry' rollOverEffect = 'wipe_Right' color="#336600" />

      <mx:Button label = 'Roseindia.net' rollOverEffect = 'wipe_Up' color="#000099" />

      

  </mx:ControlBar>



  

  </mx:Panel>

</mx:Application>

For compiling press F11 or click on Run -> Run Rachel or Run -> Debug Rachel.

After this on your default browser, following out is displayed.
This output is your swf file which is executed. The output swf is generated inside your project bin-debug folder.

rachel.swf

So like this a flex application is coded, compiled and at last is executed inside the Flex Builder. Flex Builder contains Adobe Flash Player inside Player\10\win folder, you can switch here and execute the FlashPlayer.exe. After this a window shown below opens.

You can drag-drop your swf file from the neo\bin-debug folder into the Flash Player and the rachel.swf file will be executed.

Now you know how to code, compile an flex application and also to execute the swf file with browser as well as with the flash player, congrats.

Download the code