Waldo Smeets .com

I’ve been playing around with 9-slice support in Adobe Flex 2 for quite a bit. I’m pleased to show with this example that the process of making your own expressive designs for the Adobe Flex Framework, through skins, has been dramatically improved in the new framework. A mayor new feature is that it includes support for 9-slice MovieClips from the Adobe Flash Professional 8 IDE!

Here is the application demo, and you can download the source code by right clicking in the application and choosing View Source to see all MXML etc. Note how the corners of the AccordionHeader do not scale, whilst the other areas do. In the past, this was very hard to realize for skinned components.

The customization of the UI framework has always been one of my favourite experimental focus areas. Simply because a lot of designers think it’s almost impossible to do. Those are the challenges that I like :o) .

Read on for the details.

How it worked in Macromedia Flex 1.5
In Macromedia Flex 1.5 there were two ways of skinning your application;

• through modification of the FLA files that were packaged in
  esources hemesgraphic, or;
• through programmatic skins;

Customizing the FLA file is a nice visual approach, but is very time consuming because you need to modify a lot of library items to change just one component, and it’s a very pixel-precise job. Especially defining custom ‘stretch’ areas was a hell of a job. So in the real world customizing the FLA was only acceptable for simple UI modifications.

In my opinion the programmatic skins are a very powerful alternative if you want advanced custom skins. Unfortunately, in Flex 1.5 they are not documented in detail. They allow you to make highly dynamic custom interfaces, but with the downside that this approach complete breaks the designer/developer integration workflow.

Skinning in Adobe Flex 2
In Adobe Flex 2, there is going to be a new way of creating skins the visual way. This time creating the MovieClips in Adobe Flash Professional 8 is going to be much easier than before. Why? Because the new skinning framework now allows you to simply assign, using MXML attributes, MovieClips from SWFs to act as a skin in a specific state of a component. Even better; each component state can now be rendered with one library item with 9-Scale specified, instead of one library item build out of 3 MovieClips or more.

This is a really cool feature. Now all you need to do is build separate MovieClips for each state that you would like to support, enable 9-Scale, give it a linkage ID, publish the SWF to your server directory and last but not least refer to it from your MXML code. See the code sample for all details.

And no, you don’t need to wait for Blaze, the Flash Authoring IDE with the ActionScript 3 compiler. This already works with 9-Scale library items created in Adobe Flash Professional 8!

Trio Custom Accordion Header Sample
This example highlights part of a Flex version of the famous Trio Service Manager RIA that Macromedia showcased back in the Flash MX days. I always use it as a proof that you can build such typical Flash interfaces using Flex, but faster. I’ve build a custom skin to render my own AccordionHeader in the Accordion.

This is what the original Flash accordion UI looked like. It was not a real component, it simply were two animated movieclips so very inflexible but it looked OK.

As you see, the AccordionHeaders are not a typical square button. They actually have very specific edges and height variations.

I already tried building  a custom skin for this in Flex 1.5 the visual way, but that proved to be almost an impossible job. Mainly because I wanted to be able to give the accordion any width, without scaling the corners and + or  buttons because that would look horrible.  I managed to get it working with programmatic skins, but a designer should not have asked me to make small changes because it was quite a lot of Drawing API code, no fun.

Adobe Flash Player 8 introduced a new feature that I am going to use now to make this process much easier; 9-slice scaling. From the documentation:

About 9-slice scaling and movie clip symbols

You can use 9-slice scaling (Scale-9) to specify component-style scaling for movie clips. This lets you create movie clip symbols that scale appropriately for use as user interface components, as opposed to the type of scaling typically applied to graphics and design elements.

The movie clip is conceptually divided into nine sections with a grid-like overlay, and each of the nine areas is scaled independently. To maintain the visual integrity of the movie clip, corners are not scaled, while the remaining areas of the image are scaled (as opposed to being stretched) larger or smaller, as needed.

Adobe Flex Framework 2 combined with 9-slice scaling rocks!
Now with Adobe Flex 2, due to the new skinning framework, we can finally leverage all this great stuff and quickly customize the standard components.

First of all I created the visual assets in Adobe Flash Professional 8. In /assets/9Scale.fla you’ll see that the library contains two items with a linkage ID. I’ve enabled the guides for 9-slice scaling and published the SWF.

Now in Flex, to customize the AccordionHeader, I’ve created a new component that has AccordionHeader as a base class (see notes below). In this component I use regular Flex 2 skinning mechanisms to embed my SWF and point to its library items from the skinClass variable definitions.

Then all that’s left in my main application is to define a new headerClass for the Accordian component instance.

Feel free to play with the demo, download the code and of course send me your feedback!

Please note that currently there are several smaller issues with the beta:

• I had to use a trick to get around an error generated by the compiler and thus I created a second namespace definition, pointing to the mx.containers.accordionclasses.* package. I haven’t been able to verify whether this workaround is justified or not;
• Currently the focus area rectangle is not resized when the skin is resized, this seems to be a known issue in the framework;
• This skin doesn’t render in Flex Builder. I will check with the team whether this is a know issue or not;