Tweeking the Custom Playbar skin in Captivate HTML5

1.Changing the spacing between button Icons
Under --> cp.PB.PlayBarButton=function(a,b,c)
this.currDiv.style.marginLeft="10px"};//Change the spacing between buttons

2. Setting PB background width
setBackGroundWidth:function(a){this.bkGrndDiv.width=a;this.bkGrndDiv.style.width=a*3+"px"

Creating Custom Playbar skin in Captivate 9 (Standalone and HTML5)

Creating custom playbar in Captivate 9

a. Creating Custom playbar for standalone.

To create custom playbar for standalone application please follow the below steps.
Part 1: Changing the colors of buttons
1. Opoen up any available playbar templates from C:\Program Files\Adobe\Adobe Captivate 9 x64\Templates\PlaybackFLA\AS3.
2. Save it with someother name under the same folder.
3.Enter into the "pbcBar_mc" movieclip and under that you can find all the available buttons from there which you can enter the root of each movieclip buttons and change their colors.
4. That's it now the first part of customisation is done by just changing the colors of buttons

Part 2: Rearranging the buttons
To rearrange the buttons follow the below steps.
1.  Enter the root of "pbcBk_mc" which is the backGround movieclip.
2 Paste the below AS3 code on timeline.

addEventListener(Event.ENTER_FRAME, OnEnterFrame, false, 0, true);
function OnEnterFrame(ae:Event)
{
    if(parent.pbcCC_mc.x != 15)
    {
        if(parent.pbcCC_mc)            parent.pbcCC_mc.x = 15;
        if(parent.pbcAudioOff_mc)     parent.pbcAudioOff_mc.x = 45;
        if(parent.pbcAudioOn_mc)     parent.pbcAudioOn_mc.x = 45;
        if(parent.pbcRewind_mc)        parent.pbcRewind_mc.x = 75;
        if(parent.pbcBack_mc)        parent.pbcBack_mc.x = 105;
        if(parent.pbcPause_mc)        parent.pbcPause_mc.x = 140;
        if(parent.pbcPlay_mc)        parent.pbcPlay_mc.x = 140;
        if(parent.pbcForward_mc)    parent.pbcForward_mc.x = 185;
        if(parent.pbcFF_mc)            parent.pbcFF_mc.x = 215; //additional forward buttons
        if(parent.pbcFF1_mc)        parent.pbcFF1_mc.x = 215; //additional forward buttons
        if(parent.pbcFF2_mc)        parent.pbcFF2_mc.x = 215; //additional forward buttons
        if(parent.pbcTOC_mc)        parent.pbcTOC_mc.visible = false; //toc button
        if(parent.pbcExit_mc)        parent.pbcExit_mc.x = 245;
        if(parent.pbcSlider_mc)        parent.pbcSlider_mc.x = 450;
        if(parent.pbcInfo_mc)        parent.pbcInfo_mc.visible = false;
    }
}
stop();

3. Publish the swf file and copy the same into C:\Program Files\Adobe\Adobe Captivate 9 x64\en_US\Gallery\Playbars\AS3.

That's it now the customized playbar for standalone is ready now lets create one for HTML5.

a. Creating Custom playbar for HTML5.
 Part 1: Changing the colors of buttons

1. To create a custom playbar first create a duplicate folder of any available playbar templates under C:\Program Files\Adobe\Adobe Captivate 9 x64\en_US\Gallery\Playbars\HTML .
2.Now enter the duplicate folder and replace all the .png images available under \PlaybarIcons folder with your new corresponding designs.
3.Launch captivate project and publish your project for HTML5.Now you can see in output that you have your customised buttons.

Part 2: Rearranging the buttons

 1.Open the js folder under assets  folder which was created once you publish your project.
2.Open up CPM.js file in Notepad++.
3. Search for "c=c+this.createButton(a,[cp.PB.Btns.kBtnRewind]", this is where the line of code where button is being started to created. This line of code "c=c+this.createButton(a,[cp.PB.Btns.kBtnRewind],this.firstRowArray,this.rewindHandler,c,10001)" explains the creation of Rewind button which is displayed at the left beginning of the playbar.

4. Now I want the CC button to appear at the very left end of playbar so I searched for the code which looks something similar to the above one as rewind button.
"c+=this.createButton(a,[cp.PB.Btns.kBtnCC],this.firstRowArray,this.ccHandler,c,10008);"
5. Now cut the above line of code and place it just before the Rewind button code. Please refer the image for more.

6. Now launch your index file to check out the result.

7. That's it you are done.

Disabling the playback timeline scrubber in the Captivate 9 - HTML5

There is no option avaliable to disable the timeline scrubber within captivate but you can do it by editing the CPM.js after publishing the files for HTML5.
To disable the time line scrubbing in Captivate 9 you need to follow the below steps.

1. Search for CPM.js it will be located under YOURPROJECT\assets\js
2. Open it using Notepad++ and search for "this.thumbDiv.id="playbarSliderThumb";" once you find this add this line of tag just after that" this.thumbDiv.style.visibility = “hidden”;"

3. Next search for "cp.registerGestureEvent(this.progressDiv,cp.GESTURE_EVENT_TYPES.TAP,this.moveSlider,!0);" and remove this line of code.

4. That's it save the CPM.js file and close. You are now done try launching the index.html file to see the result :-)