In order to skin the flvPlayerPRO, you should first create your graphics either directly in Flash or in an image editing application such as Adobe Photoshop, or Macromedia Fireworks. If you do not have a separate image editor, it is possible to save images in flash.
This component adheres to the Macromedia skinning technique which simplifies the process of skinning the component, meaning that all buttons and other assets must maintain the same instance names as the default component. Provided you do not change the instance names, identifiers and scripts inside the movieclips you can modify the graphics in any way that you choose.
1. After setting up the components on your stage as described in the FLVPlayerPro setup, from the menu in Flash, select Window > Common Libraries > flvPlayer Assets
This will open the skinning library which contains the default skin.
2. Drag and drop the flvPlayerSkin symbol from the default skin folder into the library of your current movie.
3. Double-click on the flvPlayerSkin movieclip. You will find two movieclips with instance names displayerSkin and controlSkin. It of most importance that you do not change the instance names of these two movieclips. displayerSkin represents the frame of the flvPlayer, which contains 9 movieclips arranged in a grid pattern. You should split the image that you have for the flvPlayer skin background into 9 pieces, in a similar way in which these movieclips are split.
4. Double-click on each of the 9 movieclips and replace the images with corresponding image pieces that you created for that position using your image editing application.
5. You can edit the appearance of the title of your flv movie by editing the textfield with instance name title_txt.
Press Ctrl+Enter (Windows) or Cmnd+Enter (Mac) to test your movie and you should find that the changes you made are reflected in the resulting SWF.
Please proceed below for instuctions on editing the control buttons and sliders.
Double click on the movieclip with the instance name controlSkin, which is located inside the flvPlayerSkin movieclip. All the buttons in the controlSkin movieclip are common buttons, meaning that a change made to one button will be reflected in all of the buttons. You can create your own button which includes all of the different states, and replace the one that's in the controlSkin movieclip.
Note: The buttons should all always retain the same instance names that they currently have (as shown in the image below).
Although you can replace the buttons with a movieclip or button symbol that you have created, in order to maintain a low file size, we recommend that you rather edit the graphics in the skin's native flvButton movieclip. To do this:
1. Locate the flvButton symbol in the library (flvPlayer Assets folder > button folder > flvButton).
2. Open the symbol from the library (by double clicking on it) and select the label layer. Inside this layer there is a movieclip with the instance name label. Inside the label moviclip you will find a set of keyframes containing the graphics for each of the button states (_up, _over, _down).
The flvButton is a universal button. It automatically switches to the graphic state according to the instance name given to it. For example, if the instance name of the button inside the controlSkin movie clip is play_btn, the flvButton will automaticaly display the play button graphic on this button, which is according to graphics found in btnLabel movieclip. With this method you, would change the background of the button in the flvButton movieclip and the individual button graphics (for example: play, stop, etc...) can be changed in the btnLabelmovieclip.
The image below shows the buttons where the graphics in the background layer have been changed.
Skinning the seekBar movieclip
The seekBar movieclip is located in the library under flvPlayer Assets folder > seekBar > seek_mc. Inside this moveclip there are several layers as well as four movieclips, having the instance names shown in the image below.
The movieclips follow_mc and buffer_mc are masks which mask the graphics located in the follow_gfx and buffer_gfx layers.
Note: The graphics in image above have been resized for presentation purposes only. All three bars (follow_mc, buffer_mc and progress_mc) must have the same width in order to function properly.
The volumeBar symbol can be skinned in a similar manner.