Runtime CSS Loading

This topic has been discussed quite a bit elsewhere so it is difficult to add much to the conversation, but I did experience a few issues that I haven’t seen described yet and some that bear repeating. 

The basic idea here is that we want to compile a CSS file into a swf and load it at runtime.  I used a configuration XML file to specify the actual style setting for my app rather than put an mx:Style node in my mxml anywhere, or hardcode the path to the style swf. 

Both Flex Builder 2 and the Eclipse plug-in for FB2 have the ability to compile CSS files for you.  I work in the Eclipse plug-in for FB2, so all of my experience is from that environment.  Supposedly, all you have to do is right click on them in the Explorer/Navigator window of the IDE and select “Compile to SWF”.  However I had multiple issues with this and found very few resources that describe the dependencies of the CSS compilation.  Through trial and error, this is what I have discovered. 

The CSS file must be at the root of the project.  If it is not, compilation will fail with mxmlc telling you that the source file is not correctly packaged.  If you try to package it in a similar fashion to an AS source file, you will receive a syntax violation. 

Also, if your CSS file uses any skins that utilize the ClassReference facility those classes and their entire class hierarchy must exist solely within your project.  If you utilize classes that exist in externally linked directories or classes that extend other classes in externally linked directories, compilation will fail with the type declarations of these externally linked classes being unrecognized.  The only workaround I found for this was specifying the source-path and library-path command line parameters for mxmlc myself and compiling manually.  Luckily I had access to an ANT script that was updated fairly easily to support this, but it is still annoying not to be able to compile certain skins directly within Flex Builder 2. 

If anyone knows how to circumvent these issues I would be all ears.  Otherwise, I hope this saves you some time from banging your head into your keyboard. 

-Casey

More Than Meets the Eye

I decided to continue my image theme from my last post. This time though I am going to talk about some interesting transformations I just did to some BitmapData objects. The most esoteric (for me) color transformations involved moving from RGB color to black & white (also called desaturation) or sepia. I accomplished this via the applyFilter function of the BitmapData object and passed it unique ColorMatrixFilters. The exact values within the matrices are the real trick here. Behold!

Black and White ColorMatrixFilter matrix:

(r_lum, g_lum, b_lum, 0, 0,

r_lum, g_lum, b_lum, 0, 0,

r_lum, g_lum, b_lum, 0, 0,

0 , 0 , 0 , 1, 0)

Where

r_lum = 0.212671;

g_lum = 0.715160;

b_lum = 0.072169;

OR

r_lum = 0.3086;

g_lum = 0.6094;

b_lum = 0.0820;

The selection of the “luminance vector” value will likely depend on your renderer, but it seems Flash likes the first more.

And the sepia ColorMatrixFilter matrix:

(0.393 , 0.749 , 0.189 , 0.0 , 0.0 ,

0.349 , 0.686 , 0.168 , 0.0 , 0.0 ,

0.272 , 0.534 , 0.131 , 0.0 , 0.0 ,

0.0 , 0.0 , 0.0 , 1.0 , 1.0)

If you are interested in a very dynamic color transformation utility, a class in AS2 that implements some cool functionality (in a very AS3 convertible form) is the ColorMatrix class by Quasimondo.

Implement sloppy borders cleanly.

I was recently tasked with drawing sloppy borders over a dynamically sized image which was draggable within its parent container and masked by that container.  The border could only be drawn around the visible portion of the image.  It took me awhile to grasp the math involved, so I figured I would share it for anyone else who might need to do the same thing. 

There were two pieces of metadata used in the calculations though you could get by with just one when using symmetric sloppy borders.  The top left point and the bottom right point within the border “window” are needed to understand how much visible space the image must take up. 

First, derive the viewable width and height of the image within the container, as well as its position.  You will need these values to scale and locate the border. 

Next find the ratio of the size of the entire border file to the size of the “window” in the sloppy border using the metadata you have for the particular file.  This ratio should be larger than 1 for each axis.  Set your loaded borders width and height to the size of the image multiplied by this ratio. 

Now find the ratio of the position (each axis respectively) of the top left metadata point to the total size of the border file.  Multiply these ratios by the width and height of the border you calculated previously, and subtract this value from the location of the image.  Presto!  You have a dynamically sized and positioned sloppy border on your image.  Damn it feels good to be a gangster. 

-Casey