Ahmed Nuaman Freelance Designer and Developer

I’ve been working in Flex a lot recently and have rediscovered why coding with Flex is so great. Not only is it really fast to create prototypes, but styling is a doddle too. Anyone can use it!

But there will be times when the Halo skin doesn’t quite cut it and no matter how much CSS styling you use, you can’t make it look like you really want it to. So this is where skinning is so important.

In this series of posts, I’m going to cover different components that I’ve skinned, and if there’s enough demand for others, I’ll skin them too!

What Is Skinning?

Skinning is basically overwriting Flex’s standard Halo skin with your own visual components, now they can be display objects from SWCs, images and even SWFs. They can also be programmed classes as, at the end of the day, all vector work in Actionscript is pretty much a coded class, if you get what I mean.

Do I Have To Skin?

No you don’t have to skin, you can easily use CSS to do what you want. Also, there are plenty of sites out there that’ll provide you with tips and free skins to use. But skinning means that you can fulfill a brief with the speediness of coding in Flex as well as meeting the aesthetic design needs of the brief.

Let’s begin

So, in this example, I’m going to show you how quick and easy it is to skin a component, in this case it’s the HSlider Flex component.

First thing to do is to fire up your favourite IDE for developing Flex and Actionscript 3, there are lots you can use, so there’s no excuse. Create yourself a Flex project, I’m currently using the Flex 3.4 SDK, but it’s up to you which one you use.

Now within your application MXML file, just place a HSlider component like so:

Now, let’s say we want to change the track, you can do this in CSS by changing the colours and whatnot, I won’t digress in to that as you can have a play with the Flex Style Explorer.

Now since this is about skinning, we’ll be changing the track for something that we’ve created, either visually (so through the Flash IDE or even Illustrator and Photoshop) or coded up using the drawing API. First, I’ll start by creating a simple rounded rectangle in the Flash IDE. So create a new AS3 file and draw a rectangle like so:

And when you’re happy with it, convert it into a MovieClip by either dragging it into the library panel or pressing F8 or going to “Modify > Convert to symbol”. Call it “TrackBackground”, tick “Enable guides for 9-slice scaling” and “Export for Actionscript” and hit OK:

If you double-click in to the MovieClip now, you’ll see the guides for 9-slice scaling (like below), make sure you move them around so that the bits you don’t want to scale, such as the rounded corners are outside the rectangle the guides make in the middle:

So now we’ve got a visual asset that’s ready to be exported to Actionscript to be used to skin our HSlider. Last thing we need to do is just tell the Flash IDE compiler to export a SWC for us, so go to “File > Publish Settings…” and select the “Flash” panel, change player version to “Flash Player 9″ and select “Export SWC” under “SWF Settings”. Now just hit CTRL/CMD + ENTER and our SWC is ready!

Next thing to do is to update your Flex IDE so that it’s now picking up the new SWC, in Flex Builder this is done by right-clicking on the project in the navigation box, selecting “Properties”, then click on “Flex Build Path”, select the “Library Path” panel and click “Add SWC” and you can do the rest.

Once that’s done, let’s get back to some coding. We can quickly add the rectangle as our track skin by updating the “trackSkin” attribute of the HSlider, like so:

So you can see that we now have our slider background and since we used 9-slide scaling, it’s nicely formed! So, what about images I hear you say? Well we can embed them quite simple, like so:

But now, you’ll notice, we have a problem. When we created the rectangle in the Flash IDE, we applied a 9-slice scale grid, however, since we’re now using a bitmap, we can’t. And, as you may be aware, 9-slice grid doesn’t work on anything apart from pure vector art, that’s MovieClips and Sprites that contain only one child that’s a shape created in the Flash IDE or through the drawing API.

Shame eh? Well no fear, check out my “ScaleObject()” class. It’ll allow you to replicate the 9-slice scaling method on any display object (unless it’s animated). Now you can create visual bitmap assets in your favourite editors and still have them scale as components, like so:

Create and import your asset into a new class that extends the Sprite:

So as you can see, we “fake” the Sprite display object by overriding the “height()” and “width()” functions to resize the new “scaledImage”. This then creates this:

Awesome eh? I thought you’d like it!

But What About The Thumb?

Have no fear, I’m not done yet, let’s talk about the thumb. If you didn’t know what the thumb was, well that’s the little thing you drag. As standard it’s a little arrow, but we can replace it, using the “thumbSkin” attribute, like this:

But as you can see, it’s a bit tiny. However, the HSlider component gives us the ability to set the “sliderThumbClass”, which, as you can tell, is a class that allows us to manipulate the way the thumb is display, so create a new Actionscript class like so:

And we use it like this:

Giving us this:

So there we have it, everything you need to know about skinning the HSlider component in Flex! If there is anything else, just tell me! More to come! PS, you can download the entire code in this nice little zip file and you can find the “ScaleObject()” class on my Github.