Reskinning Flash Coponents in MX2004

On a recent project I was asked to create an mp3 player for the site. They wanted to play a list of tracks one after the other. Now Ive never had the chance to play with the flash media components before so I was looking forward to it.

What a minefield I stumbled into. There are several ways you can load mp3 tracks into flash, the easiest and least messy is to use the MediaController and the MediaDisplay components installed with MX2004. Basically you point the MediaController at an mp3 file then you 'associate' the MediaDisplay component with the Controller. The MediaDisplay component displays the progress bar and the control buttons.

With me so far?

My client sent a design on how he wanted the progress bar to look. THis is where it gets a bit sticky. You cant just reskin the component, oh no you have to open the component fla file and muck about with it.

heres the steps you must take:

1. Copy C:\Program Files\Macromedia\Flash MX2004\en\Configuration\ComponentFLA\SampleTheme.fla to newTheme.fla.
2. Open newTheme.fla and find the SampleTheme movieclip in the ‘Flash UI Components 2’ folder in the library and rename this to newTheme.
3. Edit the newTheme movieclip and swap the named graphics for the new versions for your theme.
4. You now have a reference library of your new graphic set / Theme.

Thtats the basic file taken care of. Then to edit the component do the following:

1. Open C:\Program Files\Macromedia\Flash MX 2004\en\Configuration\ComponentFLA\StandardComponents.fla.
2. Open a new blank Flash document and drag a copy of the component (and any subcomponents that this uses) which you wish to modify from the StandardComponents.fla library to the stage of your new blank Flash document.
3. Make sure you set the Class path in the Publish Settings in your new Flash document.
4. Delete the component instance from the stage of your new Flash document and Edit the version newly residing in it’s library, changing it’s graphics (and those of any sub components) to the new versions from your newTheme.fla graphic reference library.
5. When you’ve changed all the graphics (and any embedded sub-components), right click on the component in the library and chose ‘Export SWC File’. You need to have created a new directory in C:\Program Files\Macromedia\Flash MX 2004\en\Configuration\Components to reflect the home of your new skinned components and this is where you will save it.
6. You can now save your new Flash component FLA file as componentName.fla so it can be modified again later if we want to attach our own themed style to the new skinned components.
7. Go to your Components panel in the Flash IDE, click on it’s dropdown menu (in the top right hand corner of the panel) and click on Reload. The new Component directory and it’s component(s) should now appear.

I found this whole experience frustrating and very time-consuming to say the least. For every change you make you must eport the SWC file then go to your project file, remove the component fron the library, update the component in the component panel drop it back into the job then test it. You get the idea.