Coloring Flash With CSS
Adam Miller
Developer : Boston
topics: Programming Languages, Process, Creativity, and Technology Industry
filed under: Developers, Programming Languages, and Flash
So I’m working on a video player.
Big deal.
Big deal.
So I can change the color of the controls of the video player.
Big deal.
Big deal.
So I can change the colors with CSS.
Whoa.
Whoa.
Thats right! We’re working on a project right now where our onsite video player is going to get a lot of use. We’ve also got different areas of the site receiving different styling treatments which are getting applied with CSS (of course). So after a few days of having a video player that required coloring variables to be passed into, it hit me how uncouth this was. Styling rules should live in CSS, not in my javascript. So I set to work on teaching my JS embedding code how to read CSS.
At the time I wrote this code we had 6 color variables: primary_up_color, primary_over_color, primary_down_color, secondary_up_color, secondary_over_color, and secondary_down_color. So I declared these six CSS rules in our main stylesheet:
.video-player-primary-up{color:#FF0000;}
.video-player-primary-over{color:#660000;}
.video-player-primary-down{color:#330000;}
.video-player-secondary-up{color:#0000FF;}
.video-player-secondary-over{color:#000066;}
.video-player-secondary-down{color:#000033;}
Now, we’re using jQuery (if you’re gonna use a JS library, might as well use the best) and it’s gonna get a little jQuery dependent here. If you’re familiar with jQuery, you’ll know it’s got a great syntax for reading CSS properties of elements, however those elements have to currently exist on the page, and mine certainly did not. So the obvious next step was to add some elements with those class names. I decided to add them to the div I was going to replace with my flash file when it came time to embed the player, to keep cleanup of these elements easy.
$('#video-player').append('<div class="video-player-primary-up"></div>');
$('#video-player').append('<div class="video-player-primary-over"></div>');
$('#video-player').append('<div class="video-player-primary-down"></div>');
$('#video-player').append('<div class="video-player-secondary-up"></div>');
$('#video-player').append('<div class="video-player-secondary-over"></div>');
$('#video-player').append('<div class="video-player-secondary-down"></div>');
Awesome! Now we can read the styles of those things. The first thing I tried was:
alert($('.video-player-primary-up').css('color'));“rgb(255, 0, 0)!! What the ….”
No, that was not exactly what I wanted. So apparently we’ve got a little more legwork to do here. After a healthy amount of experimentation, I had a function that would take that rgb string and turn it into something like ‘0xFF0000’ that I could pass into flash. What’s not surprising is that IE, of course, returns something completely different from FF and Safari. What is surprising is that it’s closer to what I was expecting than what I initially saw in FF. Here’s what I ended up with:
function RGBtoHex(rgbString){
function toHex(N){
if (N==null) return "00";
N=parseInt(N); if (N==0 || isNaN(N)) return "00";
N=Math.max(0,N); N=Math.min(N,255); N=Math.round(N);
return "0123456789ABCDEF".charAt((N-N%16)/16)
+ "0123456789ABCDEF".charAt(N%16);
};
if(rgbString.indexOf('#') == 0){
//IE
return "0x"+ rgbString.substring(1);
}else{
//everything else
var rgbArr = rgbString.substring(4, rgbString.length - 1).split(/\s*,\s*/);
return "0x"+toHex(rgbArr[0])+toHex(rgbArr[1])+toHex(rgbArr[2]);
}
}
Now that we’ve got our conversion functions in place, it’s a simple matter of reading those values, translating them and assigning them to variables for later use
VideoPlayer.options['primary_up_color'] = RGBtoHex($('.video-player-primary-up').css('color'));
VideoPlayer.options['primary_over_color'] = RGBtoHex($('.video-player-primary-over').css('color'));
VideoPlayer.options['primary_down_color'] = RGBtoHex($('.video-player-primary-down').css('color'));
VideoPlayer.options['secondary_up_color'] = RGBtoHex($('.video-player-secondary-up').css('color'));
VideoPlayer.options['secondary_over_color'] = RGBtoHex($('.video-player-secondary-over').css('color'));
VideoPlayer.options['secondary_down_color'] = RGBtoHex($('.video-player-secondary-down').css('color'));
And that’s that. I’ve got my CSS defined color variables tucked away neatly into my video player’s options ready for embedding. Now for every new CSS look and feel we give to a particular area of the site, we can coordinate our video player to match.
3 comments