Broken ZIP File Issues
Some of the zip files you have downloaded are either corrupt or broken. If you need a file, please contact me and I will send it to you.

Internet Explorer Compatibility Issue
If you are running Internet Explorer v8 or v9, please use Compatibility View to view this site.

Please report broken links

Flex has the useful capability of binding a property of an object to another object or some function. Binding is usually done inline in mxml by binding to a value that has the bindable meta-tag set. Binding can also be done programatically using the BindingUtils class. This post will list some caveats with binding and show you how to bind programatically using the BindingUtils class.

Binding in mxml
First, have a look at a simple example of binding in mxml:

<!--mxml code-->
<s:Label text={controller.username} />

// Code inside Controller class:

// Option 1. the referenced value as a bindable variable
[Bindable]
public var username;

// Option 2. the referenced value as a bindable getter-setter
private var _username:String;
[Bindable]
public function get username():String {
	return _username
}
public function set username(value:String):void {
	_username = value;
}

Some notes:
Whether you choose to bind to a getter-setter or a simple variable, it’s up to you. Usually it is good practice to use getters & setters with binding. You can add a small optimisation by dispatching an event to trigger the binding:

// Option 2 Revised: binding on a specific event
private var _username:String;
[Bindable("usernameUpdated")]
public function get username():String {
	return _username
}
public function set username(value:String):void {
	if(_username != value) {
		_username = value;
		dispatchEvent(new Event("usernameUpdated"));
	}
}

When one sets the [Binding] metadata tag on a property, an update to that property listens for all events. By specifying the event on which to bind – [Binding("usernameUpdated") - an update to that property listens for that specific event.

Setting up binding programmatically
Next, here is an example of binding programmatically using the BindingUtils class. In this scenario we have a class (SomeClassA) that wants to have its property (propertyA) and function (functionA) bound to the property (propertyB) of another class (SomeClassB). Taking this further, there is another class (SomeClassC) whose property (propertyC) will also be bound to a property (propertyB).

// Code in SomeClassA
public var someClassB:SomeClassB; // we will be binding to the values in this class
public var someClassC:SomeClassC; // a value in this class will be bound
public var propertyA:String; // a value that will be bound
public function functionA(value:String):void { // a function that will be bound
	trace("The bound value is", value);
	// do some stuff with 'value'
}
// Set up the binding
public function setupBinding():void {
	BindingUtils.bindProperty(this, "propertyA", someClassB, "propertyB");
	BindingUtils.bindSetter(functionA, someClassB, "propertyB");
	BindingUtils.bindProperty(someClassC, "propertyC", someClassB, "propertyB");
}

... 

// Code in SomeClassB
private var _propertyB:String;
[Bindable("propertyBUpdated")]
public function get propertyB():String {
	return _propertyB;
}
public function set propertyB(value:String):void {
	if(_propertyB != value) {
		_propertyB = value;
		dispatchEvent(new Event(“propertyBUpdated”));
	}
}

... 

// Code in SomeClassC
public var propertyC:String;

It is important to note that the property being bound to is made bindable. If not changes to the updated property do not get detected.

Just like with event listeners, you have options in the BindingUtils parameters to auto flag the binding listeners for garbage collection. The BindingUtils functions have an additional parameter 'useWeakReferences' which flags the binding listener for garbage collection once all it's references are null. You can also remove a binding listener manually. The BindingUtils functions return a ChangeWatcher object. If you set this initially when you create the binding, you can call the 'unwatch' method on it. Here is a revised version of our example above

// Set up the binding
private var watcher1:ChangeWatcher;
private var watcher2:ChangeWatcher;
private var watcher3:ChangeWatcher;
public function setupBinding():void {
	watcher1 = BindingUtils.bindProperty(this, "propertyA", someClassB, "propertyB");
	watcher2 = BindingUtils.bindSetter(functionA, someClassB, "propertyB");
	watcher3 = BindingUtils.bindProperty(someClassC, "propertyC", someClassB, "propertyB");
}
// Call this when you are ready to remove binding
public function removeBinding():void {
	watcher1.unwatch();
	watcher2.unwatch();
	watcher3.unwatch();
}

One more note on binding is to use it wisely. That is, with the knowledge of what is actually happening in the background when you set a [Bindable] meta tag or set it up programatically. To the novice Flex programmer it may appear that you are simply adding a single line of code, but what is actually happening is that a lot of auto-generated code gets created in the background. So your simple single line of code is actually a huge block of actionscript code. This is fine for small projects, but might cause unnecessary bloat in large projects. See more about it here:
http://www.slideshare.net/michael.labriola/diving-in-the-flex-data-binding-waters-presentation

Summary
1. Optimise your mxml bindings by dispatching an explicit event to trigger the binding
2. You can bind programatically using the BindingUtils.bindProperty or BindingUtils.bindSetter functions
3. When binding programatically make sure that the property you are binding to has been set to [Bindable]
4. You can improve your code by explicitly removing unnecessary binding listeners using 'unwatch()' of a ChageWatcher.
5. Understand that the using binding creates large blocks of actionscript code in the background that could cause unnecessary bloat in your project.

My son recently bought Guitar Hero 5 with his birthday money. It is an incredible game and I recommend it to everyone.
The problem I faced was that my youngest son, who is too young to play Guitar Hero, also wanted a chance.
I managed to find Frets on Fire for him, which is a game for Windows, Linux and MAC OS X. It is a free game and as far as game experience goes, is pretty close to what Guitar Hero delivers. You hold the keyboard like a guitar or if you have the guitar controller, check out Using the Guitar Hero Controller with Frets on Fire.
You can download and play some of your favourite songs from Frets on Fire Songs.
So far, we have had incredible fun with this game and it is so easy to play against each other for the highest score.
Guitar Hero is still the real deal, but Frets on Fire will definitely impress you.

I recently upgraded to a Nokia E72 and have started playing with Flash Lite again as the phone comes with Flash Lite 3.0 on it.

Here is a list of great articles and code examples for developing Flash Lite apps for your Nokia device.

You must visit Khan Academy. It is the most incredible educational resource on the Internet.

Spend a bit of time watching and you’ll be hooked! Salman Khan offers one of the most generous, open source projects on the Internet today.

In his words:
“The mission of the Khan Academy is to provide a world-class education, for free, to anyone in the world. It consists of 1700+ (and growing) videos on YouTube covering everything from basic arithmetic to advanced calculus, chemistry and biology, along with a series of exercises that allow students to practice and assess their knowledge at their own pace.”

Check out Dive Into HTML5 by Mark Pilgrim. This is a great place to start learning about HTML5.

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

I recently started a new job, which I have been dedicating all of my time to. I will resume posting soon.

Please be patient. there is more to come.