Cinestar Filmworks

Building a skin for your custom Zinc app is actually rather simple. Most of the actual programming and design work takes place in Flash.

Step 1:  Create a flash file containing two movie clips. These movie clips are simple graphics. One that will represent the corner part of your application window, and one that will be used for the solid portion of the windows such as the borders and title bar.


When creating movie clips whose position you will be manipulating via code, I highly recommend placing the clips registration point on the upper, left hand corner.

This will save us the trouble of also having to calculate the clips widths during the placement of the clips at runtime.

Corner – This movie clip will be used for the upper left and right corner of your window.

Solid – This is basically just a 1x1 pixel square to be used for the borders. It is a solid square so you can easilly resize it, duplicate it, and reuse it at will.

Once your movie clips are created, simply drag two instances of the corner symbol to the stage. And drag 5 instances of the Solid clip onto the stage as well.

Flip one of the corner symbols horizontally so that the registration point is now on the opposite end of the first instance. This will be the top right corner of your window.

 

For the sake of visually knowing what is what, change the size of your stage into a small 100x100 square area and place the left corner and the right corner on the stage at their respective positions.

Take one of the solid clips and resize it so that the height matches the height of corner. And the reposition and stretch it horizontally so that the width reaches from the one corner to the other.  Again this is something you don’t really have to do but it helps to better visualize what you are doing.

Next place one of the solids from the bottom of the left corner and stretch it vertically so that the height spans along the left border of the movie.

Take another instance of the solid symbol and place it on the along the right corner. But make sure you flip it horizontally so that the registration point is on the right side.

Take yet one more instance of the solid symbol and place it along the bottom border. Stretch its width so that its spans from the left border to the right border.

Finally take your last solid symbol and stretch it to fill the entire work area from the bottom of your top right corner symbol to the bottom right corner of the stage. Use the properties panel to change the tint of this symbol to something else such as white.

This will be used as the widow’s background so also make sure that you change it’s z-depth all the way to the bottom. (just select it and press CTRL-Down Arrow a few times until the symbols is all the way below everything else.)

Now lets give them all unique instance names so that we can identify them and manipulate them via code.

Top left corner = " wTL"
Top right corner = "wTR"
Top border = "wT"
Left Border = " wL"
Right Border = "wR"
Bottom Border = "wB"
Window background = "wBG"

If you want you can add a few more items at this point such as a minimize, maximize, and close buttons but I’ll leave you to figure that on your own the concept i sthe same and pretty much self explanatury at this point.

Now for the code.

First of we want to have the flash movie align itself to along the Top Left axis so we start our code with the following line.

Stage.aling = “TL”;

Next we want to set the scale mode of the movie so that it doesn’t scale. Our second line of code is this:
 
Stage.scaleMode = “noScale”;
 
And now for the fun stuff. Here we create a function that will rearrange the position and and resize our symbols.

function resizeUI() {
            wTL._x = wTL._y=wTR._y=wT._y=0;
            wTR._x = Stage.width;
            wT._x = wTL._width;
            wT._width = Stage.width-20;
            wL._x = 0;
            wL._y = 30;
            wR._x = Stage.width;
            wR._y = 30;
            wR._height = wL._height=Stage.height-30;
            wB._y = Stage.height-1;
            wB._x = 0;
            wB._width = Stage.width;
            wBG._x = 0;
            wBG._y = 30;
            wBG._width = Stage.width;
            wBG._height = Stage.height-30;
}

Notice that the width of my “wT” symbol is being told to be the same width as the flash stage except minus 20 pixels. This is because my left corner is 10 pixels wide and my right corner is also 10 pixels wide. This symbol is already starting at 10 pixels to the left, but also I want it to stop 10 pixels from the right side of the stage. By subtracting this number from the width I can ensure that my top bar doesn’t really extend past my right corner and I can keep my nice rounded corner.

If you notice that for the wR and wL symbols they are starting at y=30 because that what the height of my top bar is. But because I am using the hight of the stage to calculate their own height, I also have to subtract those thirty pixels from their height so that in the end they stop right at the bottom of my stage.
 
The background symbols is placed at x=0 by y=30. (Again, that’s because that’s the height of out top bar, and if we place it at 0x0 then the BG would get in the way of out nifty rounded corners.
 
Ok well that basically out function. But it really won’t do anything unless we call it. So lets just place the following like immediately below that.
 
resizeUI();

This ensures that the custom UI is resized immediately upon the start of the movie to match the size of your application. At any point after that if your form size changes you can place the same line of code
within your buttons event. Or maybe within a stage resize listener.

Ok now for the really fun stuff. To tell Zinc that the when ever the user clicks and rags along the top bar that this is to drag our whole application around. Our top bar is composed of three movie clips, the main border and the two corners so when have to make sure we include these as part of our function.

First the action for when the user pressed against the bar:
 
wTL.onPress = wT.onPress=wTR.onPress=function () {
            mdm.Forms.MainForm.startDrag();
};

 
And next, the action for when the user releases the mouse button:
 
wTL.onRelease = wT.onRelease=wTR.onRelease=function () {
            mdm.Forms.MainForm.stopDrag();
};

 
These functions effectively turn the respective movie clips into buttons, and because they are buttons flash automatically assigns the hand cursor to them upon roll over. We don’t want that because we don’t want it to be perceived as buttons, we just want it to be perceived as any regular old window title bar.

So let’s turn off the hand cursor for these clips:
 
wTL.onRelease = wT.onRelease=wTR.onRelease=function () {
            mdm.Forms.MainForm.stopDrag();
};
 
Before you publish your movie, change the size of the stage to what ever you want, for exaple 400x400. This way you can see how the visual assets we created are automatically resized and conformed to fid the new size of your stage.


Ok, publish your movie and import it into Zinc select the “Transparent” window option. Also get rid of the any check that may be in the scaling movie options and in the constrain aspect ration options. We're all ready controlling that with flash and we don’t want Zinc telling our movie do anything else other than what we want.

Compile your executable and behold a pixel perfect user interface without all that mucking about with bmp masks or third party skins. We didn’t put a close button on the movie so use the Esc key to close it when you’re done marveling at the thing.

Where to go from here:
 

1. Use a dynamic text field to place a caption on your window, maybe dispaly the applications name.
2. Use your own icon on the upper right hand corner (or where ever you like) to display a fancy icon that represents your cool new app.
3. Try adding a close window, resize/restore, and minimize buttons on the upper right hand side of te app window. Just add the instance name of the buttons to the resizeUI() function to automatically ajust their positions when along with the other UI elements.
4. Add a double-click function to the bar to make it maximize!
5. How about an interactive window resize button at the bottom right hand corner?
6. The possibilities are endless…

• You can use transparent clips for Vista-like effects.
• You can make window skins that look like they are upside down.
• You can use regular actionscript to interactively change the window ui at runtime, depending on the content you want to present.
• You can have the movie clips be part of an externally loaded swf file so your end user can make their own skins!

Have fun and remember we are available for hire, if you need a custom skin for your Zinc app or any kind of custom flash/zinc programing, were only a click away.