As a first step I want to get something to run and have a basic idea of the environment I’ll be working in.

Here’s a quick summary of the steps I followed:

1. Create a new project and inspect the resulting project / package / class files
2. Play around with the new versus old Flex components
3. Try different skin templates

Create a new project

1. Open FlashBuilder and create a new Flex project (File > New > Flex Project)
2. In the configuration popup give your project a name and change and change the default settings if you wish

In the package explorer panel have a look at the project tree, the main folders / files you are interested in is

• src – contains the source / class files
• bin – contains the compiled .swf file + a generated .html file that displays your swf

Play around with the new versus old Flex components

First, lets start with layout components. In the new Spark component set, layout logic has been decoupled from the component. One can set the layout of a component declaratively in the mxml (as a property) and can change it at runtime. Layout containers in Spark deal solely with layout and are therefore more lightweight. This does mean that one cannot set  visual drawing properties such as background. They do support layout-specific properties such as padding.

I am teaching myself Flex 4 and will be documenting a series of examples as I go through the process. If you have not yet heard of Adobe Flex, here is a quick overview:

• Flex is a collection of class libraries released by Adobe for the purpose of building rich internet applications
• These classes are built ontop of the existing core Flash classes, such as Event and Sprite and are referred to as the Flex SDK [1]
• Flex can also be used to build desktop applications through the use of  Adobe AIR [2]
• Adobe’s proprietary program for creating Flex applications is Flash Builder, although there are other free open source alternatives

[1] Flex SDK (Software development kit): software framework that extends the existing Flash classes and runs in the Flash Player
[2] Adobe Integrated Runtime (AIR) is a cross-platform runtime environment for desktop applications

Flex started gaining popularity around 2005/2006 with the Flex 1.5 SDK. The new Flex 4 SDK was released in March 2010 along with Flash Builder (previously called FlexBuilder).

In my examples I will be looking at a brief  introduction into the new Flash Builder IDE [3] and Flex 4 classes. Next I’ll look at migrating an application from Flex 3 to Flex 4.

[3] Integrated development environment (IDE): a program / environment consisting of a collection of tools that assist with coding and developing applications

To follow these examples I would recommend that you install a version of FlashBuilder. The full trial is valid for 60 days:
http://www.adobe.com/cfusion/tdrc/index.cfm?product=flash_builder

A free alternative for a Flex development environment is to use Eclipse with the Flex plugin:
http://www.seanhsmith.com/2010/03/29/flex-for-free-setting-up-the-flex-4-sdk-with-eclipse-ide/

Another alternative is to use your favourite code editor and compile Flex with the command line compiler:
http://flanture.blogspot.com/2010/04/running-flex-4-sdk-and-flashdevelop.html
http://www.steamed-design.com/2009/07/free-flex-ide.html

Here is a comparison between FlashDevelop and FlexBuilder. Note that it compares FlexBuilder, the predecessor of the new FlashBuilder, which has a great improvement in performance:
http://cameronellis.posterous.com/flex-4-vs-flashdevelop-3

FlashBuilder is free for students and eligible educational institutions:
http://www.adobe.com/devnet/flex/free/index.html

To wet your appetite, here are some examples of what can be done with Flex:
http://flex.org/showcase
http://flex.org/tour
http://bkflex.wordpress.com/showcase/