Captivate playbar swfs have a complicated structure. Though you can create a playbar from scratch, its advisable to duplicate an existing playbar FLA file and make changes in it to suit your needs. You can find the source FLA files for the canned playbars in the following location:

<Adobe Captivate Installed Directory>TemplatesPlaybackFLAAS3

Height of the playbar:

To change the height of the playbar, adjust the height of pbcBk_mc movie clip inside cpPlaybar symbol in Library. Also to get correct height, you need to change the height of the shape present in pbcBkHeight symbol in Library. pbcBkHeight symbol should contain a single shape (without stroke) and its height should equal to that of the background height set in pbcBk_mc.

Playbar Buttons:

Each playbar button except slider should follow this structure:

• icon_mc – A movie clip on which Button Icon color will be applied
• btn_mc  – Each btn_mc movie clip should follow this structure:
  • color_mc – A movie clip on which Button Face color will be applied
  • glow_mc – A movie clip on which Button Glow color will be applied
  • mouse states – Need frames with these labels – up, down, rollover. Whenever a mouse up event (or normal state) occurs on this playbar button, it will be asked to jump to the frame with label “up”. Similarly for “down” and “rollover” frames when mouse down and mouse over events occur respectively.
• actions  – A layer with action script in its first frame. It should have the following actions:
  • btnTipsId – a variable which specifies the index of the tooltip array to be picked up when mouse is hovered over the playbar button [More about this array in Tooltips section below]
  • onClicked  – A function which calls parent.onPBCBtnClick() with a valid action. These are the list of valid actions – “rewind”, “back”, “play”, “pause”, “forward”, “cc”, “audioOn”, “audioOff”, “exit”, “info”, “TOC”, “FastForward”, “FastForward1”, “FastForward2” and “print”. – Based on the functionality of the button you need to give appropriate name.

Slider should have the following structure:

• thumbBase_mc –background movie clip of the slider (Button Face color)
• proClr_mc – a movie clip to show the completed progress of the movie (Button Glow color)
• thumb_mc – a movie clip which indicates the play head (Button Icon color)
• actions – mouse up and mouse down listeners which will call parent.onSliderMouse(false) on mouse up and parent.onSliderMouse(true) on mouse down.

All the colors (Button Icon, Button Face, Button Glow) can be applied in Captivate Skin Editor. Background color in Skin Editor will be applied to the movie clip named pbcBk_mc inside cpPlaybar symbol.

Playbar:

Playbar movie clip is the movie clip which contains all the playbar buttons, background movie clip and a background height movie clip. It should have the following movie clips (specified below are instance names):

• pbcBk_mc  – Background movie clip
• pbcRewind_mc – Rewind
• pbcPause_mc – Pause
• pbcPlay_mc – Play
• pbcBack_mc – Backward
• pbcForward_mc – Forward
• pbcFF_mc, pbcFF1_mc, pbcFF2_mc – Fast Forward
• pbcSlider_mc – Slider
• pbcAudioOff_mc – Audio Off
• pbcAudioOn_mc – Audio On
• pbcTOC_mc – Table of Contents
• pbcCC_mc – Closed Captioning
• pbcExit_mc – Exit
• pbcInfo_mc – Info
• pbcPrint_mc – Print
• pbcBkHeight_mc – a movie clip to determine the height of the playbar [See Height of the playbar section for more details]

pbcBk_mc and pbcBkHeight_mc should be placed compulsorily. The rest of them are optional. However if all of them are present, user can choose either to have/not have them from Skin Editor.

pbcPlay_mc and pbcPause_mc are mutually exclusive at runtime. Only one of them can be visible. Similarly pbcAudioOn_mc  and pbcAudioOff_mc are mutually exclusive.

Finally place the playbar movie clip on the main timeline with the instance name as pbcBar_mc. You can have an optional auto play button placed on the main timeline with the instance name autoPlay_mc.

Tooltips:

To change the tooltips, find the MovieClip named Localization in the library. Open this symbol and go to its Frame 1. Here you can find the tooltips for the playbar buttons. Change them based on the requirement. Apply caution while changing the tooltips. Changing the order of the array elements will result in incorrect tooltips. If you want to change the language of the playbar, assign the appropriate array variable to pbcBtnTips variable. btnTipsId variable inside playbar buttons refer to the index in this array (pbcBtnTips).

Reordering Playbar buttons:

Playbar buttons will always be placed in the following order:

• pbcRewind_mc
• pbcPlay_mc/pbcPause_mc
• pbcBack_mc
• pbcForward_mc
• pbcFF_mc/pbcFF1_mc/pbcFF2_mc
• pbcSlider_mc
• pbcAudioOn_mc/pbcAudioOff_mc
• pbcCC_mc
• pbcTOC_mc
• pbcPrint_mc
• pbcExit_mc
• pbcInfo_mc

There is no direct way in which you can change this order.
Auto Reordering trick: However you can change atleast the order/layout of some of the buttons in this way: Renaming the instance names of pbcRewind_mc as pbcExit_mc and vice versa will swap the position of Rewind and Exit buttons.
However you might not be able to do this for every button because of some linking buttons play/pause, audio on/off and Fast Forward buttons.

Manual Reordering trick: If you want to hard code the positioning values, you can do so by adding an event like OnEnterFrame in background movieclip and then set the values for the button positions.

The code below will move positions for either Top or Bottom stretched. If you are using the playbar positioned on either side then you can change the x to y and play about with the values until the buttons are in the position you want. You need to check the registration point of the buttons and accordingly adjust the x and y positions.
Open the desired skin template FLA and open the symbol pbcBarBkColor in the library and add the following script in its first frame.

I’m also attaching a couple of sample playbars where the ordering is changed.

Re-ordering playbar buttons

Deployment:

If you have created a new playbar swf, you need to place it in the following location for Captivate to pick it up:

<Adobe Captivate Installed Directory><lang>GalleryPlaybarsAS3

Just close the Skin Editor if it is already open and open it again. You can check your new playbar in the playbar drop down.