Manual positioning of playbar buttons in HTML5

[el_enka]

Hi,

I would like to use playbar with custom positioned buttons in Captivate project. I have found this article:

http://blogs.adobe.com/captivate/2010/11/playbars-demystified.html

which works greatly.

The only problem is that this doesn't affect HTML5 output.

I have read here:

http://forums.adobe.com/message/5658453

that I have to modify another files, that I have managed to locate. I can see how can I change the appearance of buttons, but I don't see, how could I change their position or ordering.

Can someone help me with this, please?

Thanks

[sfetchit · Accepted solution]

The order of the playbar buttons for HTML5 is established in the Captivate javascript code - contained in CPM.js in the published course.  The function in question is cp.PB.playBarConstruct.prototype.layoutPlaybar - I've overridden this function before in order to establish a different button order, but it does require looking at the code to gain a bit of understanding of what it is doing.  The code can be overridden in the playbar javascript code to avoid changing the Captivate core code directly, which is difficult as Adobe no longer provides access to as it is embedded in one of their DLL libraries until it is used in publishing.  Alternately the code can be patched post-publishing.  It would be helpful for Adobe to provide more open-source and/or documentation regarding some of that code to allow customers to more easily innovate project-specific enhancements.  That has become the case to a great extent over the years with Flash, for example with open-sourcing a lot of actionscript libraries, and automation using JSX/JSFL.  Hopefully the paranoia over competitors will subside and they will realize that being more open only serves to make their products more attractive to developers.  Of course I will say that the competition is not any better in that regard.  Other things I've done using patching/overrides in both the AS3 playbar code and the HTML5 playbar code are:

-Adding additional buttons

-Changing functionality of existing buttons

-Modifying functionality of the TOC, for example customizing how/when bookmarking occurs - currently a slide gets bookmarked by simply entering and exiting it by default

-Customizing TOC layout/positioning, for example below the top bar vs. over it

-Customizing interaction between the TOC and playback mode, e.g. closing the TOC when the course is in a play mode, stopping play when the TOC is opened and restoring when closed, etc.

-Adding disabled states and enabling and disabling playbar buttons based on the course state, e.g. not allowing "Next" until a slide has been viewed to completion

-Correcting animation rendering issues in HTML5 playback, such as the endemic issue where if a slide is scrubbed back or rewound after some animations have been viewed, and even in some cases regardless, that there are glitches and flickers of animation frames in incorrect states at the start of each element animation causing very distracting visual effects.

-Adding capabilities to Advanced Actions/variables in Captivate.

I have a lot of clients who have very specific requirements and expect professional results, thus requiring these kinds of changes if a tool like Captivate is to be used.  Clients are more and more wanting to have developers use such tools as opposed to what I've traditionally done with custom coded Flash and HTML5 courses.  This still requires some custom coding, however the bulk can be developed in Captivate with just patches applied in publishing.

I hesitate to publish such patches, as they are somewhat Captivate version specific, however a lot of so-called widgets are also very version specific.

[el_enka]

Thanks - It works great. I gave up searching the code before, but with your directions I finally managed to rearrange those buttons.

And I definitely agree that Adobe could make customizing easier. It would save a lot of us a considerable amount of time.

Thanks again

[bobbyl14302134]

How did you rearrange the buttons? Captivate typically has the Back and Forward buttons on the left and I want to move them to the far, right-hand side of the screen. Any suggestions?

[el_enka]

Hi,

this was CP7, there might be a different/better way in CP8 or CP9. But this is how I did it:

I have altered it in published output. if you open the file CPM.js (Published course -> assets -> js -> CPM.js), then almost at the end within the gigantic function cp.PB.PlayBarSlider.prototype (it has its own paragraph)

you will locate this line:

else{if(0===cp.D.pref.rkt){var a=a+this.createButton([cp.PB.Btns.kBtnRewind],this.firstRowArray,this.rewindHandler,a,10001),a=a+this.createButton([cp.PB.Btns.kBtnPlay,cp.PB.Btns.kBtnPause],,this.firstRowArray,this.playPauseHandler,a,10002),...

There you can see the numbers 10001, 10002 etc. - they are not important (for this anyway), they are only visual cue to find the right spot.

As you can see - there you construct the playbar by adding the buttons - hence a = a+this... means a (arrangement that will be = arrangement that I have + something to new I add to the end). If you modify this like so:

else{if(0===cp.D.pref.rkt){var a=a+this.createButton([cp.PB.Btns.kBtnPlay,cp.PB.Btns.kBtnPause],this.firstRowArray,this.playPauseHandler,a,10002), a=a+this.createButton([cp.PB.Btns.kBtnRewind],this.firstRowArray,this.rewindHandler,a,10001),...

In other words, you will rearrange the order of adding buttons.

This way, you will add play/pause button first and rewind button second. Since play/pause consists of 2 buttons - it has a little longer and different notation. But the important thing is to look for a = a + this...  this separates the buttons.

I should say - this works only for one row playbar. The two row version is defined above this portion of the code (in CPM.js), but I have not tried to figure out how it works.

And another thing is - you have to ask yourself a question whether it is worth to do it after every publish. We decided that it is not, so we have abandoned this system.

I hope this helps.