Forum Discussion

DanielPringle-0's avatar
DanielPringle-0
Community Member
8 years ago

Can the Close Caption button's icon be changed?

Hello All, 

Does anyone know if there is a way to change the icon on the Closed Caption button in Storyline 3? The client in which I am building for requires the closed caption button to display a CC, and the default button on the Storyline player is just an image of a Caption box.

Thanks

26 Replies

  • Our brand standard calls for the use of the Classic player, but I have a stakeholder that want the button to say CC. Why is this not an option?

  • RobMorgan's avatar
    RobMorgan
    Community Member

    Will this ever be released as an update for SL3? Seems like a pretty standard option to have a CC button look like the industry standard CC button.

  • Hi there, Rob!

    While this one isn't currently on our immediate roadmap, we appreciate the feedback for a CC button and its importance. We promise to update you on any new developments!

  • Hello Mark!

    You're right, our team is hard at work building an accessible player! Based on the gravity of this project, we aren't sharing a timeline yet. The good news is that we are in Beta so we are receiving amazing feedback that will help us reach perfection with the accessible player! Thanks for checking in! You can always see what we are working on here.

  • Hi Lauren,

    I understand not wanting to give specific delivery dates, but can you let us know if it the play update is going to happen in the next 6 months?

  • Hi Mark,

    As Lauren mentioned, because of the massive effort in getting the accessible player ready for rollout, we hesitate to share any specific timeline details. Our current plan is to begin releasing those features early next year. As we get closer to release, we'll keep folks posted on any shift in that timing. I hope that helps give you an idea of its priority!

  • Hi, all.

    I'll share that I needed a better icon for captions than Articulate was providing, so I swapped out the icon myself. If you want to try it, it's a matter of editing the following two files (I'm using the latest version of Storyline 360):

    ./html5/lib/scripts/frame.mobile.min.js
    ./html5/lib/scripts/frame.desktop.min.js

    Use an HTML editor (I prefer Sublime Text) and search for "M14.8517422,14". You should find one instance of that in each of those files. You'll find that text as part of an SVG path, which is essentially the coordinates for making a vector graphic. You'll need to replace everything in that string (between the double quotation marks) with new coordinates for a CC icon. Here's the path I'm using for the "CC" icon:

    "M 1.5 3 C 0.675781 3 0 3.675781 0 4.5 L 0 11.5 C 0 12.324219 0.675781 13 1.5 13 L 13.5 13 C 14.324219 13 15 12.324219 15 11.5 L 15 4.5 C 15 3.675781 14.324219 3 13.5 3 Z M 1.5 4 L 13.5 4 C 13.78125 4 14 4.21875 14 4.5 L 14 11.5 C 14 11.78125 13.78125 12 13.5 12 L 1.5 12 C 1.21875 12 1 11.78125 1 11.5 L 1 4.5 C 1 4.21875 1.21875 4 1.5 4 Z M 5.5 5 C 4.125 5 3 6.125 3 7.5 L 3 8.5 C 3 9.875 4.125 11 5.5 11 L 7 11 L 7 10 L 5.5 10 C 4.664063 10 4 9.335938 4 8.5 L 4 7.5 C 4 6.664063 4.664063 6 5.5 6 L 7 6 L 7 5 Z M 10.5 5 C 9.125 5 8 6.125 8 7.5 L 8 8.5 C 8 9.875 9.125 11 10.5 11 L 12 11 L 12 10 L 10.5 10 C 9.664063 10 9 9.335938 9 8.5 L 9 7.5 C 9 6.664063 9.664063 6 10.5 6 L 12 6 L 12 5 Z"

    To be clear, that's replacing this path (the old icon):

    "M14.8517422,14 L20.008845,14 C21.1103261,14 22,13.1019465 22,11.9941413 L22,2.00585866 C22,0.897060126 21.1085295,0 20.008845,0 L1.991155,0 C0.889673948,0 0,0.898053512 0,2.00585866 L0,11.9941413 C0,13.1029399 0.891470458,14 1.991155,14 L8.09084766,14 L11.4712949,17.3804472 L14.8517422,14 Z M3,4 L13,4 L13,6 L3,6 L3,4 Z M14,4 L19,4 L19,6 L14,6 L14,4 Z M19,8 L8,8 L8,10 L19,10 L19,8 Z M7,8 L3,8 L3,10 L7,10 L7,8 Z"

    I'm attaching a screen cap of the results. Bear in mind, this change happens after the course is published and would need to be applied each time the course is published. The good news is that you don't need to republish the course to apply it.