How to Create a New Flex Project in Adobe Flex 2

This content requires Flash

To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.

Video Transcript

Let's open up the Flex Builder Integrated Development Environment and I will be referring to this as an IDE throughout the rest of the course and you can do that simply by double-clicking the shortcut that I have on my Desktop or by of course using the Start menu, and you will see that I open up the Flex Builder IDE and what our goal here is, is to actually define a project and actually build an application that will compile down into a SWF file and we will understand that process.

So notice, if I first open this open and I simply try to create a new file, for example a new MXML application, it tells me that I can't do that as you can see. So what we have to do is for every Flex Builder application, you have to actually define a project and I am just going to Cancel out of this and we will go back here in a moment. But what I would like you now to do is just right-click in your Navigational View and click New and choose Flex Project. This is the first step in terms of actually building an application. And you will see that it prompts that wizard whenever you click here and choose New Project.

Now a Flex application will access data, in this case we are just going to build a basic SWF file that can be deployed to any web server that you like. We are not going to use the data services at this point. So make sure that your basic radio button is selected and click Next. I would like you to give your Flex project a project name and this is understanding how to use Flex Builder IDE. So please call this FB2 and you will notice that the Use Default Location is checked. I would like you to uncheck that and point this to the files that you have installed and in this case I have installed my files to the Desktop. So I am just going to click Browse, Find My Desktop and go to my Project Files and this is Unit 02 where we understand how to use Flex Builder and throughout this series you will see more lesson folders as you continue on.

Don't be alarmed, it's just an effort to give you more training. So click on Unit 02 and click OK. This will define all of the files within this folder as part of my Flex Project. Click on the Next button and the next step is to simply define a main application file. This will be the main.mxml file that contains our Application tag and inside of this Application tag is where we will invoke other MXML components that we will learn about how to develop as we go further. But for now what I want you to do is just call this file FB2_wt1.mxml and this will automatically create this file and all this file is just simply a text file.

So you could use any Integrated Development Environment or IDE. We could even use something as simple as Notepad to code this, but you will find that the Flex Builder IDE offers multiple different advantages. So I am just going to click on the Finish button and you will see it defines my project. It automatically creates a folder to store the HTML in which is simply the wrapper for the SWF file that will be produced and the SWF file will be outputted to the Bin folder here and we will be able to take a look at that in a moment and you will see it created this file and it also built automatically, it added an Application tag as well as an XML name space and this XML name space simply points to a manifest file in the Program Files directory that points to all of the default components that come with Flex Builder.

So for example our Text controls, our Image Controls our Data Grid controls, everything we actually need to build an application and you could put these controls into your application simply by typing in here and coding. And we will be doing plenty of that but another tool that Flex Builder offers us that makes it very easy is using this Design Mode. So if we switch to Design Mode, we get a much more visual view of what's going on.