Creating a KDP Skin and Using it

Introduction

KDP3 Introduces an FLA based skins, these skins are compiled to swf files by Flash IDE and are loaded by KDP in runtime. The loaded skin is designated by the uiConf under the layout element as the skinPath attribute.
Designers, can download the attached default-skin.fla file or use the skin.fla in the KDP3 project (It is the same FLA. The FLA attached here for easier reference), modify the FLA, compile it using Adobe Flash IDE (Download a trial here), and reference the KDP3 to load the plugin by using the additional parameters section inside the Kaltura Application Studio (KMC > Studio > Edit a player > Features > Additional Parameters abd Plugins), by change the skinPath value in flashvars or modifying the KDP3 uiConf.

Creating your skin swf file

The default-skin.fla (Right Click > Save As...) contains all the default KDP3 component skins.
On the stage of the FLA, you will find the components organized by their position in the player (e.g. scroll bar, buttons, playlist, etc.), every component inside a designated MovieClip - Double click a MovieClip to edit it's design and save the FLA when you finish editing all the components you want to change.
Compile the skin swf file (File Menu > Publish).

Testing your skin

The easiest way to test your skin before uploading it, is to add the following to your KDP flashvars:
full.skinPath
-Note: 'full' is in fact your layout id as defined in the KDP uiConf. If you're using a default KDP, you can use 'full', if your KDP is custom made uiConf - check the uiConf for its id attribute in the layout element.

Follow these steps to test your skin localy

• Download the KDP3 Skin Test and set it up on your localhost.
• Copy the skin swf file you created to the same library as the checkKdp3Skin.html file.
• Edit the checkKdp3Skin.html file.
• Find the following line: //DEFINE CUSTOM SKIN URL -
• Below the above comment, you will find the url linking to the skin swf file to load (variable: flashvars['full.skinPath']).
• Change the value of flashvars['full.skinPath'] to the name of your skin swf file.
• Load the page in your browser, you should now see the KDP with your new skin.

Upload the skin swf file (Kaltura Exchange)

If you'd like to share your skin with other Kaltura users, follow these steps for publishing your new skin on the Kaltura Exchange.
Hosting the skin file can be done by creating a new KDP3 Skin on the Kaltura Exchange.

• Open the Kaltura Exchange, login with your Exchange credentials or register for a new account.
• Click the "Add your Application to the Exchange" link under the "Create your applications" title inside the left actions menu.
• Complete as many details as possible and describe your new Skin.
• In the "Application Category:" drop down, select "Themes and Skins".
• On the second page of the "Add your Application to the Exchange" wizard, Click browse and select your SWF file as the first resource under the "Resources" title. Click upload to upload the skin file.
• Complete the wizard adding information about your skin and click the "Save" button.
• Your Skin is now ready to be used, see the application Overview tab for an example and instructions of how to use the new skin in your players.

- Note: If you would like to keep your skin private, email the swf file as an attachment to your Kaltura project manager requesting to make the skin available only to you.

Use your skin file

After uploading your skin file to a web server that is accessible by your clients (The KDP instance loaded by your clients should be able to access the skin swf file), you can use the following instructions of using the sking in your players via the KMC Application Studio:

To use this skin in your player:

• Login to your KMC account using your partner email and password.
• Open the "Studio" tab.
• Create a new player or edit an existing player.
• Open the "Features" tab and click on "Additional parameters and plugins".
• Click "Add" (text link in Blue).
• In the text box with the text "key" add the following text: full.skinPath
• In the text box with the text "value" add the following url (the url to your skin):
• Click the "Preview" button.
• You should now see the new skin loaded to the player.
• Click "Save Changes".
• Now your player is ready to be used.

Note: After adding the skin as described above, you can edit the colors of the skin under the "Style" tab when editing the player.

Downloading the FLA files

If you experience issues downloading the FLA files, use the following method: Right Click the url and choose the "Save As..." option from the menu.