Shaun Mccran

My digital playground

02
O
C
T
2009

Dynamically colouring swfs using Flashvars to match generic templates

One of the application frameworks that I regularly work in is an entirely generic, white box solution. It builds itself based on some instantiation variables. This includes the CSS for that instance of the application. More recently I was integrating a swf object that would be used on hundreds of instances of this application, but it was generically coloured, which just wouldn't work. I needed to somehow have the flash object fit the CSS style of that instance of the App.

Solution

The flash object accepts a series of Flashvars that are passed into it on load. Like this:

view plain print about
1var flashvars = {};
2    flashvars.path = "value";
3    flashvars.upload_url = "value";
4    flashvars.color = "value";
5    flashvars._border_color = "value";

So all I had to do was find a common element in the framework, pick its colour CSS property out, and inject it into the Flashvars object. Using the prototype method of 'getStyle' we can pass in the id of an element, and retrieve its CSS property, IE the background-color.

view plain print about
1var swfBg = $('element id').getStyle('background-color');
2swfBg = swfBg.parseColor().replace('#','');
3alert(swfBg);

This returns an RGB value, so we run it through the 'parseColor' method, and strip the hash. This gives us a valid Hex colour value, which we use in the Flashvars instead of a hard coded colour code.

view plain print about
1var flashvars = {};
2    flashvars.path = "value";
3    flashvars.upload_url = "value";
4    flashvars.color = swfBg;
5    flashvars._border_color = "value";

TweetBacks
Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Back to top