Best way to skin flash player

Question

Is there a good pattern to creating a flash player that is easily skinned, providing different dimensions, buttons, background color, etc? I've considered 2 approaches:

1 The player skin is flat. The logos and buttons are on one large background image. The actual trigger areas are transparent sprites, positions and dimensions defined by xml or json externally.

The problems I see with this are that the skin is bottlenecked by the person designing the background and there's less that can be done in the UI (hover states on buttons, for instance). However this makes it very easy for someone to create a new skin by defining a new background image and position of transparent sprite triggers.

2 Another way I've considered is by turning all graphical assets into movie clips and/or bitmaps. This requires placing the assets into the stage of a swf that is loaded externally by the player. This method provides greater flexibility in positioning assets (and relatively if the player size changes in the browser) as well as hover states on buttons. The downside of course is more time spent in Flash getting the assets setup for the player.

Answer 1

Why not use Flex? Which has skinning functionality built in?

Answer 2

Hey, check these links for some inspiration:

http://www.bytearray.org/?p=109

http://www.bytearray.org/?p=137

The guy skins a component framework with scale-9-ed bitmaps that are automatically chopped and assigned to the different component states.

Answer 3

There is actually a template to download where you can reskin all standard components in Flash, Photoshop or Illustrator. All you do is hand the template over to the designer(s) and read the stylesheet in your application.

http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex_skins