November 12, 2010

Playbars demystified

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>\Templates\PlaybackFLA\AS3

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.

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();

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>\Gallery\Playbars\AS3

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.

Posted by Ravi Kishore3:26 PM
  • Pingback: Tweets that mention Playbars demystified « The Adobe Captivate Blog -- Topsy.com

  • http://pipwerks.com Philip Hutchison

    Excellent post, this is very useful information. Thanks, Ravi!

  • Jack Anzinger

    Is it possible to customize parent.onPBCBtnClick() ?
    Where is that script located?
    A tad Flash illitierate here…

    • Ravi Kishore

      Hi Jack,
      Its not possible to edit whats inside onPBCBtnClick(). That code is inside Captivate runtime. What you can configure is the parameter you can pass to this function. This parameter tells the action to execute when that button is clicked. Check the “Playbar Buttons” section above for more details.
      Hope this helps,
      Ravi.

  • http://www.cpguru.com Michael

    Thanks Ravi! Very useful information. I did manage to modify a couple of playbars, but it was always “hit and miss”. Now it will be easier in the future.

    /Michael

  • Matt

    Will playbars ever include a “view fullscreen” toggle?

    • Ravi Kishore

      Hi Matt,
      Please file a feature request for the same here

  • Mark

    When I use the fast forward button, the video speeds up but the audio does not. Is there a way to get the audio to still be played back at the faster speed as well?

    • Ravi Kishore

      No. As of now, there is no such support. You can file a feature request here

      But is there any reason why you want such a feature? Because users might not understand the audio which is playing at a faster pace.

  • Leticia

    How can I change the width of the playbar? I want my own graphic background and captivate resizes the graphic image on the playbar.

  • Derrin

    Hi Ravi,

    is it possible to change the length of the slider in Captivate 5? I have used the aluminium skin as a base for a custom playbar but i can’t fit my larger buttons in (and graphical elements) without reducing the length of the slider. I can’t work this out. Any help would be much appreciated,

    Thanks,
    Derrin

  • Russ

    I need to customize one of the playback skins. When I open the source fla in flash, it says that I am missing the Placard Condensed font.

    Is that something that comes with the ELS2 install?
    I don’t have that font and need to make a couple minor edits without breaking the layout.

    • Ravi Kishore

      You can go ahead and substitute it with any font. Final Playbar doesn’t need that font.

  • Emerson Simon

    I have been trying to find a way to turn on/turn off the forward button when the playbar loads based on the read of a “complete” status from the LMS. Is it possible to include this type of logic in the playbar when a course loads? I would be using the SCORM APIs from pipworkds.com to actually make the calls to the LMS.

  • http://- Kevin

    Hello,
    This article is very useful. I have modified a playbar in flash based on the default playbar in the templates file. I have exported the movie into the correct folder. When I open the project skins in captivate, I see my newly created playbar. When I select the playbat, Captivate crashes. Any idea what could be causing this? Is there a certain way I need to save the flash file? I am using Flash Professional 4 and Captivate 5 on windows xp.

  • http://CaptivateDev.com Jim Leichliter

    I’ve been through both the Manual and Auto reordering trick. Here’s what I found out. If you Manually fix the playbar buttons, you can match a design perfectly but not with out some serious side effects. First of all, your fixed buttons will only be good for a certain sized captivate project. Second, within that sized project, buttons will shift depending if you have the TOC turned on and whether it’s in overlay or separate mode. If you feel like creating 15 different versions of your playbar, have fun!

    To avoid 15 different versions, I chose the Auto reordering trick. But that also has some consequences. The article does mention about the multi-state buttons (play/pause, audio on/off, FF1/FF2/FF3), but it does not mention the TOC button. I switched the places of the TOC button and the “Back” button. The TOC button is only displayed on the playbar when you have the TOC turned on in the settings, AND only when it’s in overlay mode. Switching button places made that true for the “Back” button. On the flip side, when you have the TOC turned off, the TOC button is not removed off of the playbar, but the “Back” button is.

    So for those of you wanting to rearrange playbar buttons using the Auto reordering trick, let me save you some headaches:
    the following buttons should not be re-arranged and should stay in their current positions to avoid issues:
    * Play/Pause
    * Audio On/Audio Off
    * FF1/FF2/FF3 (Fast Forward buttons)
    * TOC
    (Play/Pause and Audio On/Off could switch places since they are both 2-state toggle buttons).

    The following buttons can switch places with each other:
    * Rewind
    * Back
    * Forward
    * CC
    * Exit

    I seriously hope that Captivate 6 has a better method to allow designers and developers to modify playbars and skins more easily. This was one painful ride!

  • Linda Nelson

    Hi,

    I want to start my Captivate Course in a mute state. I’ve already assigned the cpCmndMute with a 1 in Advanced Actions. I’ve modified the mute button in the playbar in Flash so that when the user clicks on the mute button, the button changes state. Unfortunately, the user has to double-click, which is very annoying. What can I do to change this?

    Any help would be greatly appreciated.

  • Mirza Imran Baig

    Hi,

    Mr. Ravi. Is there any possible way to stop the forward button working until the slide has completed playing. I have spent two days for this but couldn’t find a perfect solution.

    I would be grateful if you could help me with this.

    • Sachiko

      If you mean that the slides play automatically and you want the user to be able to stay on the slide until the user clicks the next button, then you have to add the next button.
      Just click insert button on your toolbar, go to the properties and set it up to go to the next slide. This will do it. The buttons are automatically set up to pause the slide until the user clicks/takes action.

  • Sachikogoodyear

    I like Disqus.. and this article is real helpful too.

  • Sathish BC

    We have modified the template Skin(progress bar) for our course requirement (ie., we have rearranged the buttons in the Progress bar.)

    Hence while publishing as a Single swf the rearrangement of the progress bar works fine.

    However when we aggregate more than one swf, the default template skin button arrangements appears upon loading the HTML file and then disappears in few seconds, leaving behind the original default progress bar.

    • Ravi Kishore

      Hi Sathish,

      Sorry I didn’t get exactly what you have tried.
      Aggregate more than one swf – What exactly does the playbars in these swfs contain (Are all of them same, Are all of them custom playbars)? Are you using the Aggregator application?

      Can you be a bit more specific.

      If possible, Can you attach the screenshots of the problem.

      Ravi.

    • Sathish BC

      Please Help me.

  • Kevin

    How can I change the width of the playbar??

    • Ravi Kishore

      You can’t. You can either stretch the playbar or not (options in Skin Editor). Nothing you do in the fla will set the width of the playbar.

  • Pingback: Adding more buttons in playbar? | free icons download

  • monica

    Hi Ravi,

    Do I need to create a new folder under “Gallery” folder to store the SWFs? Because there is no “Playbars” folder under Gallery in Captivate 5.

    Thanks!
    Monica

    • Ravi Kishore

      Hi Monica,

      Check in the following folder:
      C:Program FilesAdobeAdobe Captivate 5en_USGallery
      It might be en_US or en_GB or ja_JP depending on the language you have installed.

      -ravi

  • Alan

    Could you do a guide to customizing an HTML5 playbar in Captivate 6? I would like to put the buttons in a different order and can’t figure out how to do it. For example putting the playbar between the backward and forward buttons. Any ideas?

    • Alan

      I meant to say the play button between the backward and forward buttons.

  • franz

    Hi, I modify new playbar swf and placed it in
    GalleryPlaybarsAS3. And I want to publish it in HTML5. is it Possible that I could edit the playbar as much as I want that would be published
    in HTML5?

  • http://www.facebook.com/anuradha.gupta.161 Anuradha Gupta

    Hello, I want to modify the playbar skin, add a new button for Glossary, which on click either jumps to a slide in project itself or opens a url where the glossary is maintained (whichever option is feasible).
    Please provide pointers and guidance, how to achieve the same

  • Mark

    Hi. i want the playbar to be per slide just like in articulate. how can i do that?

  • Loading
  • Categories

  • Archives

  • Authors

  • Recent Comments

    • Tracy J Windsor: I am having this same issue — The button / Clickable area does not work in Mobile view...
    • PaulB: Ive just switched from storyline to captivate 8 and I am having trouble with the responsive projects. It seems...
    • David: I can not preview the responsive layout on my project in Captivate 8. Anyone know why?
    • Pete Flynn: Just tried to view the “Recording Link” . . . 413 Header Length too Large What???
    • Ariyo Usman Oluwafemi: I am representing a publishing company which I have already created the ebooks on an indesign...
  • Captivate & eLearning Videos

    Subscribe to Adobe eLearning on YouTube.

    Check out the latest eLearning Videos on AdobeTV

Recently Approved