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/

If you are running your SWF file at 100% of the browser window’s size, you can use this example to dynamically position objects on the stage based on the window size i.e. when the browser is resized, all objects will dynamically move to their allocated positions relative to the window size.

(This file will open in Flash CS3) (Preview File)
Get Source

Here is a useful banner ad rotator. It loads a random image or swf file via XML everytime the page loads or is refreshed.

I have included error handlers for the XML file and banners.

(This file will open in Flash CS3) (Preview File)
Get Source

I was asked if it is possible to apply external CSS properties to the XML instead of applying the formatting within the XML document itself.

Flash offers limited support for CSS properties, but I have used as much as I can.

I have also embedded multiple styles of the font, so you are able to apply normal, bold and italic styles to the text field via the stylesheet.

If you want to add error handlers for the XML and CSS files, please have a look at my XML News Ticker code.

(This file will open in Flash CS3)
Get Source

I was thinking about the simplicity of swapDepths() in ActionScript 2.0 and thought that you might be curious as to how one swaps the depths of objects on the stage in ActionScript 3.0.

I have created a practical example which swaps the depths of images on the stage at regular intervals to create a slideshow. I have used the Tween class for the transition effect. My example makes use of:

1. setInterval() – Swap pictures at a specified time interval.
2. swapChildrenAt() – Swaps the depths of two pictures at specified index positions.
3. getChildAt() – Returns the picture at the specified index position.
4. Tween() – Used to tween the position of the top picture.

(This file will open in Flash CS3) (Preview File)
Get Source

One thing which bugged me for a bit was not being able to trace to the output panel using trace(). However, FlashDevelop has its own method of tracing messages to the output panel.

Just add import org.flashdevelop.utils.FlashConnect;to your code and whenever you want to trace a message to the output panel, simply use FlashConnect.trace('your message');

That’s it.

Although I have played with it in the past, I have started developing using FlashDevelop, which is “a free and open source (MIT license) code editor”.

It is a fantastic environment for ActionScript 3.0 coding and the compilation of SWF files. A big advantage of coding in FlashDevelop apposed to the Flash IDE is speed, code completion and code generation. FlashDevelop is an alternative to Adobe Flex which costs around US$250 and FlashDevelop uses the Flex SDK anyway.

I still use the Flash IDE and timeline based coding, however, I feel that completely dynamic projects are best compiled in FlashDevelop.

Have a look at FlashDevelop’s features or view the feature tour.

Here is the final version of the ActionScript 3.0 XML News Ticker. I tried using the Tween class as well as Tweener and both produced very little improvement to the scrolling animation. My method gives you easier control over the speed of the animation.

I have also embedded multiple styles of the font, so you are able to apply normal, bold and italic styles to the text field via xml. Depending on what font you choose to embed, you can add all styles of that font simply by adding the additional styles to the library and setting their linkage.

I am going to add a tutorial on how to work with text fields and embedding fonts. One very exciting thing in ActionScript 3.0 is the ability to align your text to tabs in a text field.

I have also added an error handler to check whether the xml loads or not. If it does not, a default error message appears in the text field. This can be customized in the fla file.

(This file will open in Flash CS3) (Preview File)
Get Source

Here is an ActionScript 3.0 XML News Ticker. I have embedded the font so that it displays in the masked area. I still need to figure out how to add bold and italic formatting to the embedded font via xml. When I do, I will update the post.

(This file will open in Flash CS3) (Preview File)
Get Source