Skin Package

We’re building an app at Bellsouth where the HTML pages & Flash are looking very similar since we’re using the same design assets to help in consistency & continuity. I didn?t want the plethora of graphics and bitmaps floating around my 7 main FLA?s, and I?ve given up on integrating Shared Libraries in my workflow because of they are a pain in the arse to modify later on if you need to make a change.

What I ended up doing in short was packaging all of my skins into an SWC and giving it one, static method to initialize all of the skins. That way, just because the SWC is in your library does not mean you need to use it. Because it?s an SWC, I only have one symbol for however many million of graphical skins I?ll get in the future, and it expedites my compile time.

If I ever update my skins, I have to update 2 things. First, I have to re-export my SWC; that?s not hard. You just save your file, right click on the Component, right click and export as SWC. Second, I then reload the components panel, and re-drag the SWC to the FLA(s) that are using it, and choose replace from the pop-up dialogue. Done. I don?t have to deal with the library insanities that would ensue in the past.

Creating it consists of 3 steps.

Step 1 ? Packaging the Assets

I first create my movie clip/component. I import my graphical assets, and test them. Once good, I drop them on frame 2 of my Skin component. I put a stop action on frame 1. I give it a linkage ID of ?GlobalSkinPackage? and a class path of ?com.skins.GlobalSkinPackage?. I put the same class path in the component definition panel. Assuming the class is already created, I then export it as an SWC.

Step 2 ? Creating the Class

The class is merely a skin variable over-writer. He, once initialized, will set the skin variables for the various components, thus causing them to use the graphics I tell it too instead of it?s defaults. It?s merely a static method so I can initialize when I?m ready to do so. Because it?s a class, you could add more finite control at a later date, such as only initializing the button skins, but not the scrollbar ones via a public static method (or was that static public??).

The class is below:

class com.skins.GlobalSkinSetter
        static public function initialize(Void):Void
                mx.controls.Button.prototype.falseUpSkin  = "sign in up";
                mx.controls.Button.prototype.falseDownSkin  = "sign in over";
                mx.controls.Button.prototype.falseOverSkin = "sign in over"
                mx.controls.Button.prototype.falseDisabledSkin = "sign in up";
                mx.controls.Button.prototype.trueUpSkin = "sign in up";
                mx.controls.Button.prototype.trueDownSkin = "sign in over";
                mx.controls.Button.prototype.trueOverSkin = "sign in over";
                mx.controls.Button.prototype.trueDisabledSkin = "sign in up";

Step 3 ? Using

To use, I drag the SWC from the components panel to the FLA I wish to use it in. Then, before attaching any components, I call it?s initialization method.