Setting AS 2.0 component styles the lazy way…

While producing component based applications it became very tiring to have to repeat the same process to apply styles to individual or groups of components while not resorting to using _global.styles.componentClassName and ‘tarring with the same brush’ so to speak. If you do this it can be a real pain to apply a clean variant to the mix. Plus I loathe using _global for anything if I can avoid it. So I decided to stop using it altogether and find a quicker (lazier) way of dealing with it :P.

I knocked together a quick utility method, that I use primarily within my component development framework. You could use it straight on the stage so to speak or add it into a class. I keep meaning to add it to a ‘wrangling’ class I have knocking around for dealing with other issues relating to components, once I do I’ll upload it for those interested.

Anyway for those who’d like to try it out here is the ‘raw’ method:

function setComponentStyle(obj:MovieClip, styleObj:Object)
	for(var prop in styleObj)
		obj.setStyle(prop, styleObj[prop]);

Now all you need to do is pass in a component instance and the style object containing the elements you want applied. For this I’m just going to use a Button component that calls the method itself. Below is the basic code of our ‘buttonStyle’.

var _color :Number = 0xFF0000;
var _fontSize :Number = 11;
var _font :String = "Arial";
var _weight :String = "bold";
var _embedFonts :Boolean = true;
// Don't forget to embed the font otherwise you won't see anything font related
var textStyle	:Object	= {fontFamily:_font, fontSize:_fontSize,
				fontWeight:_weight, color:_color, embedFonts:_embedFonts};

Now all we need to do is pass it to the component we wish to apply the style to

// btn is the instance name of a Button component
btn.onPress = function()
	setComponentStyle(this, textStyle);

If I wanted to add this to a selection of Button, or Label components I could easily do it as a block or via a loop:

// As individual calls
// First the Buttons
setComponentStyle(btn1, textStyle);
setComponentStyle(btn2, textStyle);
// Next our Labels
setComponentStyle(lbl1, textStyle);
setComponentStyle(lbl2, textStyle);
// Or in a loop
for(var i = 0; i < componentsPresent.length; ++i)
setComponentStyle(componentsPresent[i], textStyle);

Check out the simple example below.

placeholder for flash movie

Mike Jones


  1. So the benefit of this is that styles can be reused easily without using _global? Also, that function library you mentioned that you made sounds interesting.

  2. Yes, I tend to utilize it within component classes that has other components that are styled within it. The additional benefit is it gets rid of the _global call and allows finer control over which elements are styled – even if they are of the same type. The idea of having ‘pathed’ calls is a big no-no as far as I am concerned within a component class. So I don’t have _parent or _global in my any of my classes. Hence how this came into being…

    I’m trying to tidy up the functions library but I haven’t had time to sort it so it to such a degree that I’d be happy to release it. Should be ready soon though :P

Comments are closed.