How to I customize HTML5 output for playbars?

[ryan_vontrapp]

Hello:

I am taking the default playbar (default.fla) and modifing it by adjusting the background height and button heights.

I have successfully modified the default.fla file and published it as a SWF.  I placed this SWF into the en_US > Gallery > Playbars > AS3 folder and can select it from the skin editor menu in Captivate 7.

When I publish in SWF, the playbar looks and acts exactly the way I want it to.

But, the default playbar appears when I publish in HTML5 output.

I can see the HTML folder and associated files under Templates > PlaybackFLA > HTML, but am wondering where I save the modified scripts so that the playbar will look the same in SWF and HTML5 output.

Thank you,

Ryan

[RodWard]

It's not as simple as that.  You'd need to build a fully functional HTML5 playbar in JavaScript that replicated the appearance and functionality of your SWF playbar.  Captivate isn't magically transforming your SWF into HTML5.  It's replacing it entirely with an HTML5 playbar that was built from the ground up.

[ryan_vontrapp]

I understand that playbar widgets (.wdgt) packages contain an XML description file, then folders for the AS3 and HTML assets/scripts.  But, it appears that the playbars which are selectable from the Skin Editor > Theme > Playbar dropdown menu are stored as SWFs in the en_US > Gallery > Playbars > AS3 folder.

I am just trying to figure out where Captivate stores the HTML versions of those same theme playbars ("Captivate Default", "Aluminum", "BlackGlass", etc.) that I can select from the playbar dropdown menu.  That way I will know where to save the HTML5-compliant version of my custom playbar.

Ryan

[RodWard]

Try here:

C:\Program Files\Adobe\Adobe Captivate 7 x64\HTML\assets

[ryan_vontrapp]

I am not seeing any of the playbar files in there.

The templates folder (Templates > PlaybackFLA > HTML) contains the following files for each of the skin editor HTML playbars:

• A folder: PlaybarIcons
  • (several images files; forward, backward, play_icon, etc.)
• playbarScript.js
• playbarStyle.css

There also appears to be ini files for each of the playbars located in Gallery > Themes.

I am not sure if the skin editor playbars are developed like HTML5-compatible widgets, or if Captivate 7 somehow references the above files to generate an HTML5 version of the playbar.

Any ideas?

Ryan

[RodWard]

In HTML5 a playbar is not a single file.  It's made up of many files including images, spritesheets, CSS and JS code, maybe even some HTML as well.  It's a complex component, not a single file like in the case of an SWF playbar or skin.

[Mayank_Mahajan]

Hello Ryan,

HTML5 Playbars are not customized with SWF.

There is separate set of files (as you have mentioned) that needs to be modified.

For each Playbar, you need to goto Templates > PlaybackFLA > HTML and then modifiy the below :

1. images 2. css 3. js

Following steps may be useful:

1. Place the modified swf counter part of the Playbar at <installed directory>\en_US\Gallery\Playbars\AS3\<xyz>.swf

2. Goto to <installed directory>\Templates\PlaybackFLA\HTML and create HTML counterpart of the playbar. [Make sure the name of the folder is same as swf counterpart]

3. Please create the HTML counterpart similar to already existing playbars.

Following the above steps: You can modify the images and styling of the Playbar.

The HTML playbar created above won't be previewed in Skin Editor.

There are some playbar widgets available at <installed directory>\Gallery\PlayBars (with some limitations)

Thanks,

Mayank

[ryan_vontrapp]

Turns out that this was easier than I thought.

Here are the steps:

• Copy one of the existing FLAs for a playbar and re-name it.  Edit this playbar in Flash, without changing the names of any of the movieclips, etc., in the file.  Publish this file to <installed directory>\en_US\Gallery\Playbars\AS3.
• Copy the HTML directory (<installed directory>\Templates\PlaybackFLA\HTML) that is related to the original FLA file and rename that directory as the name of the new SWF (myNewPlaybar.swf = myNewPlaybar directory).
• Modify the images in the myNewPlaybar\PlaybarIcons directory and modify the playbarStyle.css file so that the HTML5 playbar style matches that of the SWF playbar.  Captivate 7 will just fetch the HTML components of the SWF playbar from this location and include it in the content package when published.

When I select the new playbar in the skin editor and then preview as HTML5 output, the new playbar is displayed.

It seems like I am limited to only using the buttons that are available in the skin editor (back, next, TOC, etc.), but this is way easier than creating a new widget.

As a side note, I have no idea what the .ini files stored in <installed directory>\Gallery\Themes\ are used for, but the absence of a file related to the new playbar seemed to have no effect on the playbar working properly.

Thank you,

Ryan

[mirzadaffodil]

Hi Ryan,

I have followed the steps written by you and was successfully able to modify the HTML5 playbar. Thanks for the help!

Now I also need to change the positioning of the buttons in my playbar namely next, back, progress bar and exit and the biggest challenge here is to rotate the progress bar to 90 degrees anti-clockwise.

I don't have good knowledge in CSS but a colleague told me that the styles written in the "playbarStyle.css" like ".playButton, .playButton:hover, .playbarBackGround" are defined somewhere in the Program Files folder.

Guys, can you please help me out from this.

Lilybiri RodWard Captiv8r www.cpguru.com

Best Regards,

Mirza

[Dave.Cox]

Hi Rod,

Yes, the images, and some javascript settings for the html5 playbars are located at this location. But where is the rest of the code that builds and controls the functionality for the playbar? I'm very familiar with HTML5, CSS and Javascript, but so far I haven't found the actual code that builds the playbar.

I can use AS to modify the behavior of the Flash widget, but where is the code to modify the behavior of the HTML5 playbar. Modifying the AS doesn't help me at all when I'm developing for responsive design, as that creates HTML5 only presentations.

Thanks for your help.

[yuji544]

Hi guys.  I've actually found the files you will need to modify.

After you publish your files, you can modify the exported files of your project.

You can do this 1 of 2 ways:

Modify the css file in <Project Location>\assets\css\CPLibraryAll.css

This will be overwritten every time you publish though.

OR

You can link another css file with your specific formatting in your index.html file.

<link rel="stylesheet" type="text/css" href="assets/css/layout.css">

You may need to specify the "!important" attribute on some of the parameters. Also you may need to add media queries for responsive layouts.

This may be a better option, but make sure you save the css file in a different location since republishing removes the files. Just add it back after publish and add the link in the html file.  A little tedious, but it gets the results you're probably looking for.

Good luck

-ED

[Insane Ninja]

Hello All,

I found a solution to customize play bar skins.

If you are in need of it please have a look at the below link.

My Learning's: Creating Custom Playbar skin in Captivate 9 (Standalone and HTML5)

Thanks

Guru