This actually relates back to something I did a while ago but I was thinking about it earlier today. As a rule there tends to be some confusion about the relationship of Flex to Flash and how they can live together in harmony…but I wont get into all that. What I will say is that there are a lot of features in Flash that are very useful to know about if you’re a Flex developer. Scale9 is one them.

If you’ve done any skinning in Flex using Flash then I’m sure you know that you can maintain an .fla with all of your skins as symbols in the library (provided the swf is as2/avm1 and you’ve provided a linkage identifier to export). The nice thing about vector skins of course is that they scale losslessly (if that’s an actual word) and if you have components that need to change in size this is key. Say an artist hands you a skin designed in a way that requires border style scaling; that is, a skin that can re-size while leaving its corners intact. If you’ve had a look at the halo theme’s programmatic border skins in Flex you’ll see code that does just this. What some might not realize is that Flash has the capability to do what is called “Scale9″ slicing which does something similar..and this can be used in Flex skins.

You enable Scale9 slicing in the properties panel of a symbol.

Once enabled then move the guides to the appropriate position for your graphic. Scale9 uses guides to define 9 boxes (3×3) for a symbol. The contents of the inner box get scaled. The contents of the outer boxes stay intact.

That’s it. Now when you use embed this symobol and use it as a skin in Flex it will keep the same behavior.

Let me note quickly that I’m using a frame-like graphic in the example here but that’s not to imply that this is an easy method to create border skins (the process of which is a bit different and requires creating a custom border class or creating a custom container with the Flex component kit for Flash CS3).

I should also mention that there does exist a method to define a Scale9 grid in directly in Flex, which I’m including for you glutton for punishment types.

 
Button
{
disabledSkin: Embed
   (source="images/Button_disabledSkin.png",
            scaleGridLeft="4",
            scaleGridTop="4",
            scaleGridRight="78",
            scaleGridBottom="18");
}

However, as you might guess this is very difficult to visualize so I really recommend using Flash here if you have it.

ian News

Fullscreen debugging in Flex Builder is one of those things that should work right out of the box – but doesn’t. This is because your html wrapper requires allowFullScreen=”true” be present in the object/embed tags for any SWF file that invokes fullscreen and, you guessed it, the default html wrapper generated by Flex Builder doesn’t include it. This means that whenever you debug an application and set your stage display state to fullscreen you’ll get the following security error.

SecurityError: Error #2152: Full screen mode is not allowed.

If you wanted you could make Flex Builder generate a fullscreen enabled html wrapper each time by editing the template wrappers directly in the SDK to allow fullscreen. Of course then you would need to edit it back in the case that you want to disable fullscreen from the wrapper level and, lets face it, editing files in an sdk directly is never good practice.

A better solution is to create a fullscreen enabled wrapper and create a custom debug profile in Flex Builder to launch it. You could use SWFObject and build a custom wrapper thats fully XHTML compliant, or you could do what I did and duplicate the default wrapper in place and add a few lines to enable fullscreen like this.

In order to create the custom debug profile go into your project properties, select “Run/Debug Settings” and click “New”.

Here I’ve created a new debug configuration named “Fullscreen”. Notice in the highlighted field I’ve changed the debug file to point to the fullscreen enabled wrapper that we’ve created. Make sure you save your configuration and the next time you click the debug icon you’ll see additional option for fullscreen debugging.

Thats it, now you’re able to debug an application in fullscreen.

ian News