Skinning Flash CS3 Actionscript 3.0 Playback Component

Skinning Flash CS3 Actionscript 3.0 Playback Component

I was looking at the playback components in flash CS3 and I was starting to wonder how to customize my own player. Although the skins that are already created are nice I like to spice mine up a bit. When I am creating a new skin for the playback component I typically like to open an existing playback component built into flash CS3. If you browse to C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\FLVPlayback Skins\ActionScript 3.0 you will find all the .fla documents. For this example I am going to open SkinUnderPlayStopSeekMuteVol.fla in flash CS3 professional.

Full Screen

The first thing I do once I have the file open is save it as a different file name. I am going to name mine nicolesnewskin.fla (Save it to the C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\FLVPlayback Skins\ActionScript 3.0 directory).

If you look in the layers you will notice a controls folder. In that folder is all of your control buttons like stop, seek etc...No need to modify any of the code here. I just use this as a reference for what areas I am editing by using the show/hide found above the upper left area of the timeline above the layers.
Find Out More...

The first thing I am going to modify is the play button. Open your library window (ctrl+L) if you don't already have it open. Open the play button folder. Open the assets folder. Double click on the PlayIcon.

This is going to be the play icon inside of your button. If you click on the icon and look in your properties you can pick the color of your choice. For mine I am going to choose #333333 (dark gray)

Now that we have changed the color of the play button you can go back to scene 1 and view the color change.
At this point you can test your player to view the change (ctrl+enter). Next I am going to edit my PlaybuttonNormal. Double click on play button normal. Now it is going to open up the button with the PlayIcon. You can not edit the play icon from here only the button surrounding it. I usually zoom in to about 400% here to make it a little easier to edit. Double click on the button. You will have several different areas to edit here. I am going to choose the outside ring first. You will notice that the current button uses a gradient. I want to keep the gradient but make mine a little darker gray. I can do this by modifying it in the color palette. I am also going to turn my alpha up a bit to 82%.

Next I am going to select the middle. Now when you change the middle of your button it will automatically change the color of your mute button also. I am using a gray again with an alpha of 17%.

Now lets change the background of the player. In your library panel open the Chromes folder. First I am going to open the UnderChromeFill. I am going to set mine to a dark gray #333333. Next I am going to select my UnderCromeOutline and change it to a dark gray #333333. I am also going to change my videoPlaceHolder outline to #333333. You can find this under seek bar.
This will give you the basics for creating the rest of your skin. The mute button, pause button buffering bar etc will all be edited the same way. Now you can create your own skin for your imported videos. All that's left to do is save your new .fla.

To start using your player create a new document (Actionscript 3.0) goto file-->import-->importVideo-->Choose your video click next. I typically choose Stream from Flash Video Streaming service and click next. You will have to select custom skin url and enter the path to your file C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\FLVPlayback Skins\ActionScript 3.0\nicolesnewskin.swf(or whatever you called your new skin.) That's it your done! Now you can create your own custom skins.