How to customize the player to match your website - Blog on the Run

Step 1

Before starting this tutorial you need to be aware that you need Adobe Flash CS3 to edit and export the skin file. You can download a free 30-day fully functional trial from the Adobe website here Please note that you need to be registered on the Adobe website, which can be done free of charge, before being able to download it.

Also a basic amount of knowledge from Flash is assumed here, since no programming is required no ActionScript knowledge is required though.

For this tutorial you will need to download the default skin as well, which you can modify to your own needs, from [here=url]

Last but not least, some additional information about skinning the player can be found on [Jeroens's website=url].

Step 2

Apart from the skins you create yourself you can already view any available skins in the CMS itself. Under the players tab you can browse the skins that are already available for you to use. We will offer several skins for you to use but keep an eye out for any new skins to be added.

As a Bits on the Run user you can add your own skins and make them available to other users as well! So if you want to make a nice branded player that people can use and give you some exposure as well, by all means share it! Of course this also means you can get skins every now and then added that are created by other users.

But, I assume you want to make your own skin no so let's get to it and start skinning.

Step 3

If you haven't downloaded and opened the example file yet, please do so now.

What you will see are all the assets used by the player. The .swf file exported created by this .fla will contain just the graphics, all the code and logic is already contained in the JW player. All you need to do is upload the .swf file to the CMS and select it in the properties screen for a player.

In the combobox you will see all the available skins to choose from, feel free to experiment at your leisure. (see screenshot)

Step 4

Back in Flash double click the movieclip on the stage, called player, to see what's inside.

There are 4 layers in this movieclip, from top to bottom these are:

• controlbar: Contains all the graphics used in the controlbar, such as the play button, the volume control and play-bar.
• playlist: Contains the background graphic, thumbnail holder and textfields for the playlist.
• captions: The subtitles (not yet supported by Bits on the Run).
• display: Contains a logo clip, and the icons used in the player such as the 'spinning wheel' when loading.

Let's start by changing the looks of our control bar.

Step 5

Double click the control bar on the layer named controlbar to edit the controlbar. The controlbar clip contains 2 layers(1) again:

• buttons: all the interactive elements in the controlbar, this includes the timers as well.
• back: the background of the controlbar.

The easiest thing we can change is the background of the controlbar. Hide the buttons layer by clicking the dot in beneath the eye on the buttons layer. What you see now is the background graphic for the controlbar.

Click on the background clip and open the properties panel (Command+F3/Ctrl+F3) and select tint from the color dropdown menu(2). Use the color selector to change it to a color of your choice, in the screenshot I chose a nice apple-green color, and set the transparency to around 50% to preserve the 'glossy' effect(3).

Export the movie and preview the results in your browser. That was easy wasn't it?

Of course the buttons were designed to match the background as well so these need to be changed, and frankly...I don't like the original design that much. So let's change the shape of the buttons as well to something more funky.

Unhide the buttons layer and, instead of hiding the background layer, lock it by clicking the dot under the lock icon. This way you keep the background but you can't accidentally edit it, we could hide the background but this would make the buttons very hard to see (go ahead and try it).

Step 6

Since some of the buttons are placed on top of each other, such as the play pause one, we will be using the library for editing them. Just because I find it easier. Open the library (Ctrl+L/Command+L) and open the folder named controlbar.

Start by double clicking the playButton, which should open it on the stage. As you see it contains the arrow icon and a thing grey/white line. This is from the old design and we no longer want it so delete it and we can start with a clean slate.

Draw your own button design or use the one I provided for you in the library, it's in the folder 'custom graphics' and of course it's the one called 'playButton'.

Next select the pauseButton from the controlbar folder in the Library. Same as the playButton, delete the current graphics and draw your own or use the 'pauseButton' from the 'custom graphics' folder.

I'll leave at that regarding customizing the controls. You should have a basic understanding of how you can change the appearance of buttons, also feel free to resize and reposition anything just make sure everything is on the right side of the x-axis. The added screenshot shows you more clearly what I mean by that. Everything on the left side will be cut off and not shown in the player!

That's it for this time! A tutorial about styling the rest of the player will come soon, so stay tuned and check back on our tutorials regularly!

Return to the post overview