Friday, June 10, 2011

Creating a Flex Project in FlashDevelop

In this tutorial we will start learning Flex.

We've configured our FlashDevelop tool in the previous tutorial. Start the program, then go to Project > New Project > Flex 4. Specify a name and a directory for the project, then hit OK.

Now the project has been created. But what is a project?

It is basically a folder, which contains all the needed stuff for your project, such as script files, pictures, swf files, etc.

It is divided into 3 folders - bin, lib and src. Each of them has their own purpose. You are not obliged to structure your projects like that, but this is how it is used commonly.

  • bin folder - this is where all the exported files go, such as the final .swf file, HTML with embedded swf, etc.
  • lib folder - all the items that may be compiled into the final project, such as pictures, swc files, fonts, etc.
  • src folder - where all the .as, .mxml and .fla files are located.

Once again, it is not necessary to use this as an example, but a lot of developers structure their projects like this.

Now you can see that some of these folders are already filled with files.



The bin folder contains a js file called swfobject, which is a script for embedding swf files. It also has an index.html file, which would display the output swf file when it is generated. This folder also has the expressInstall.swf file, which will be used to ask the user that has an older version of flash player installed to update their flash player.

The lib folder is empty by default.

The src folder has one file called Main.mxml. Double click it to view it. Now you can see its contents on the left side of the screen. Here's what the file contains by default:

<?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">

<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

</s:Application>

This is the base of every mxml file. You can see that the file is structured like an XML file - it has tags. What might be new to you (or might be not) is the little prefixes in front of each tag name, such as s and fx. These are called namespaces.

Basically, those are the types of the tags. There are 3 namespaces in Flex 4, which reference 3 libraries of code in the Flex framework. The namespaces are: mx, fx and s. These namespaces are declared in the lines 2 to 4.

This is all for now.

Thanks for reading!

No comments:

Post a Comment