PASZ.COM LABS

Saturday, July 29, 2006

Compiling Flex with FlashBuild and FlashDevelop

The future is here! This tutorial will explain how to create Flex 2 Projects from within FlashDevelop.

1. If you have not already done so, download and install FlashDevelop.
You might want to read the tutorials on the FlashDevelop boards and familiarize yourself with the program.

2. Download the "Free Flex 2 SDK" from Adobe (it's the last item to download on the page).
Unzip the SDK into C:\Program Files\Adobe\flex_sdk_2

3. If you don't have the Flash 9 standalone player, you'll probably want that too.
Click "Download the Windows Flash Player 9 Projector content debugger"
Since this .exe doesn't have an installer, you'll probably want to update your file associations, so when you open an SWF file it defaults to this program.

4. Download the FlashBuild plugin.

5. Make sure FlashDevelop is not running. Unzip FlashBuild.dll and drop it into C:\Program Files\FlashDevelop\plugins

6. Launch FlashDevelop and create a new Project (Project/New Project...). If you are Prompted to Auto-create FlashBuild.xml, click "Yes".

7. In the Project Explorer, right-click on the project name, and add a new file called hello.mxml
Paste the following code into the file.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/HelloWorld/index.html"
horizontalAlign="center" verticalAlign="middle"
width="300" height="160"
>
<mx:Panel
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"
title="My Application"
>
<mx:Label text="Hello Flex!" fontWeight="bold" fontSize="24"/>
</mx:Panel>
</mx:Application>


8. Edit the flashbuild.xml file that was created. Delete everything, and paste in the following code:


<?xml version="1.0"?>
<flashBuild>
<build name="Build 1" testMovie="hello.swf">
<flex2>
<!-- Input mxml or as file -->
<setting key="Input">hello.mxml</setting>
<setting key="generateframeloader">true</setting>
</flex2>
</build>
</flashBuild>


9. In the Build Menu, select "Build Current Profile". Voila. If all went well, the mxml file should be compiled, and your very own flex movie will appear in your project folder.

Tips


Chances are you will run into some problems. Here are some suggestions for getting things working.
  • I was not able to get the test movie feature of FlashBuild to work correctly, so I added the postProcess command flashbuld.xml to launch MyFirst.swf in a new window. The default flashbuild.xml file that gets created has lots of useful information for customizing your build.
  • If you have trouble, you might see if you can compile a Flex application from the command line first. Here is a helpful tutorial.
  • Once you're convinced Flex is working, if you're still having trouble, I recommend playing around with the "FlashBuild.bat" file that is generated from "flasbuild.xml".

Good luck!

This tutorial was written using FlashDevelop RC3 and FlashBuild v. 0.9

332 Comments: