Ok. Last post on Pixel Bender for today (I promise). This one is simple, but ties together my previous posts.

Now, that we know how to load and use Pixel Bender filters in Flex, and know how encapsulte Pixel Bender filters in an ActionScript class, lets combine the two to leverage custom Pixel Bender filters in MXML.

First, again, we need our custom Pixel Bender class:

Filter Class : TestFilter.as

Following up on my earlier post on how to embed Pixel Bender filters within a SWF, here is a super simple example that show how to use a Pixel Bender filter within a Flex application.

Compiled using the Flex 3.1.0.2710 SDK, and requires Flash Player 10.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    applicationComplete="onApplicationComplete()">

    <mx:Script>
        <![CDATA[
            import flash.filters.*;
            import flash.utils.ByteArray;

            //the file that contains the binary bytes of the PixelBender filter
            [Embed("testfilter.pbj", mimeType="application/octet-stream")]
            private var TestFilter:Class;

            private function onApplicationComplete():void
            {
                //Pass the loaded filter to the Shader as a ByteArray
                var shader:Shader = new Shader(new TestFilter() as ByteArray);

                shader.data.amount.value = [100];
                var filter:ShaderFilter = new ShaderFilter(shader);

                //add the filter to the image
                im.filters = [filter];
            }
        ]]>
    </mx:Script>

    <mx:Image right="288" left="40" top="26" bottom="108" id="im" source="@Embed(source='image.jpg')"/>
</mx:Application>

You can see an example of the filter here.

One of the cool things about FXG is that it works with Flex data-binding just as your would expect it to.

Below is a simple example (which requires Flash Player 10 RC), followed the code, that shows data-binding with FXG and Flex 4

As you can see, there are still some bugs in the rendering, but that is to be expected as these are very early Flex 4 builds.

If you have done Flash development using the Flash Authoring tool, or have done any low level work with the SWF format, then you should be familiar with the concept of symbols. Basically a symbol is a reusable object (graphics, buttons, MovieClip) that can be included in the SWF once, but referenced and used many times.

Flex 4 FXG has a similar concept of symbol, although the actual underlying implimentation is different. Using the Library and Definition elements, you can define a graphic symbol, which can then be reused multiple times within the FXG or MXML document.

As I mentioned the other day, the Flex team has released a ton of information on Flex 4. One of the new features which I am most excited about is the FXG graphic format being developed.

What is FXG? From the spec:

FXG 1.0 describes an XML-based graphics interchange format for the Flash Platform. FXG contains high-level graphical and text primitives that can be used to create, group, transform and visually modify basic vector and bitmap shapes. The FXG rendering model follows very closely the Flash Player 10 rendering model and exposes all graphics capabilities of the Flash platform as well as offering expandable support to accommodate future capabilities of the Flash Player. The specification below dives into the technical details governing every element of FXG 1.0.

About a month ago, the Flex team announced that nightly builds of the next version of Flex (code named Gumbo) were now available on the opensource Flex site. Along with early versions of the SDK, the team also posted a ton of other information, including specs and API docs.

Below is a listing of links and resources about Gumbo / Flex 4. Going through these will quickly get your up to speed on what is being worked on in Flex 4, and get your ready for playing around with the new builds.

Just a quick tip, but if you need to clear the content of a Flex 2 Image component, just set the source to null:

Here is a simple example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute">

	<mx:Image height="500" width="500"
		id="imageLoader"
		source="http://images.amazon.com/images/P/B0007NFMDK.01.LZZZZZZZ.jpg"
		completeEffect="Fade"  horizontalCenter="0"/>

	<mx:Button label="Clear Image" horizontalCenter="0" top="508"
		click="imageLoader.source = null"/>

</mx:Application>

It is simple, but took me a while to figure out.

I was working on some new mini chart apps over the weekend for the MXNA reports section, and had a DataGrid that contained dates. I wanted to allow the user to sort the datagrid by the DateField, but by default the DataGrid sorts dates with a string compare (calling toString on the Date instance).

I tried to set up a custom sort function for the DataGridColumn instance that contained the dates, but because I was using a custom label format function for the column, Flex passed the labels to me, and not the data items (which would allow me to get access to the Date instance). Because of this, I couldn’t sort on the date.

Now that there is a Free non-commercial license for Flex, I thought I would spend a little time playing around with it.

I went through this great tutorial by Robert Crooks, and was pretty impressed by how quick it was to put together the simple application. However, one thing felt weird to me, and that was mixing ActionScript in with my MXML. I am used to creating a class for my application controller. Including functions in an include file just felt weird to me (although behind the scenes they do get compiled into a class).

We have just released the initial version of Macromedia Flex and have updated the website with tons of information, including a new Flex Developer Center and an updated Flex product page.

I have also put together a Breeze presentation that talks about what Flex means for Flash developers and designers. Summary? While Flex is definitely targeted at developers who have not been able to use / understand the Flash authoring tool in the past, it does offer some potential opportunities for current Flash developers and designers.