Help! My Captivate Playbar and Closed Captions Disappear in Chrome on Big Monitors!

How to Fix Adobe Captivate’s Disappearing Playbar or Disappearing Closed Captions when in Chrome

TLDR: See the problem and solution below.

Problem: Overlayed Captivate playbars and closed captions disappear in the Chrome browser sometimes. This affects versions of Captivate that publish scalable HTML5 content (it has an unknown impact on other webkit browsers).

Solution:
Use these steps so your closed captions and overlaying your playbar works correctly; otherwise simply uncheck Playbar Overlay in the Skin Editor.

  1. In your published project’s unzipped folder, open index_scorm.html (or index.html if not SCORM) in a text (Notepad) or web (Dreamweaver) editor.
  2. Just before the </STYLE> tag, type the following:
    #playbar, #ccText {-webkit-backface-visibility: hidden;}

    Animated image showing where to add code inside the index.html file

    Click the image to enlarge it. You can use 1 or 2 lines for your code – it doesn’t matter!

  3. Save the index file and close/reopen the file in Chrome.

Let me know if this helps! I like feedback ūüôā


The Long Story

My Captivate 2019 project – a newly scalable, 1280 x 720, HTML5, SCORM 1.2, 60MB beast – worked perfectly! Uploaded to the LMS flawlessly! Played in IE! Played in FireFox! Played in Chrome! SVGs worked! Life was good.

Then, I tested it in a maximized Chrome browser on my 28″ monitor. The monitor has a max res of 3840 x 2160, but it was only set to 1920 x 1080.¬†And then‚Ķ alas.

My overlayed playbar just disappeared! Vanished! Both in the LMS and locally, they were gone on my big screen. I could hover over where the playbar should have been, and the tool tips would appear‚Ķ there just weren’t any buttons to go with them! I didn’t notice at first, but my closed captions were also gone, too.

I enlisted my husband, who opened the inspection panel in Chrome (press F12 to toggle the inspector open/closed) to inspect the playbar element. When the panel opened, suddenly the playbar reappeared! When we closed the panel, the WBT got bigger, and the playbar and CC reappeared.

We learned that the playbar would disappear at any width wider than 1357px. By opening the inspector panel, the available space shrunk to under 1358px, so it “magically” appeared again. After further inspection, we were able to trace it to a CSS issue. Since it was only Chrome and only , I¬†realized that this wasn’t a Captivate search, but a search in the web dev world. The first search on the list is the one that got me to where I needed to be.

Fixes:

I warned you this would be long!

At the top of the page is my recommended fix for the majority of users. It’s easy, and it’s precise. I wound up going with a different-but-similar solution in using a style on all div elements. The reason that I don’t recommend this option to most people is because divs are everywhere and apply to everything. I’m taking a risk that this stylesheet rule is benign enough not to wreak havoc on things. If you can shed more light on this, please let me know!

I wound up being able to fix this in the <style> tag of the index.html file.

Things I tried:

Option: Add code to your index.html file or index_scorm.html

(Note: this is the same as the TLDR at the top of the post).
This prevents both the playbar and the closed captions from disappearing, by adding a new css style for browsers that use the webkit calls (I added an FYI list of css support for many browsers at the bottom of this page). I found the div id for closed captions and added it to my code below, but it made me nervous that there may be some other object to which this could happen.

  1. Publish and unzip your project
  2. In your published project’s unzipped folder, open index_scorm.html or index.html in a text editor (Notepad) or web editor (Dreamweaver).
  3. Just before the </STYLE> tag, type the following:
    #playbar, #ccText {-webkit-backface-visibility: hidden;}
  4. Save the index file and then close/reopen the file in Chrome. If it doesn’t look like it’s working, make sure you’ve closed and opened the file before checking it out. A basic refresh (F5) will not update the file.

Option: In Skin Editor, uncheck Playbar Overlay. (option does not fix closed captions!)

This was the quickest solution, and it worked… but only for the playbar. It did not fix the closed captions. I also did not want the extra 36px of height at the bottom. If you are out of time, don’t use closed captioning, and can afford the extra space for the playbar, this will work for you. I was not thrilled with this answer, but I would have used this in a pinch.

Option: Add code to your index.html file or index_scorm.html

I used this option to get my playbar and closed captioning to appear in Chrome. This is almost the same as the last option, but changing div elements affect way more things. It worked 100% for me, and I think it could account for other unknown objects to which this same fix may be needed. HOWEVER, without knowing how you are uploading your file to the cloud, I cannot in good conscience recommend this for the masses. If you know your environment well, you can decide if you like this option.

    1. In your published project’s unzipped folder, open index_scorm.html in a text (Notepad) or web (Dreamweaver) editor.
    2. Just before the </STYLE> tag, type the following:
      div {-webkit-backface-visibility: hidden;}
    3. Save the index file and refresh/reopen the file in Chrome.

Option: Turn off HTML Scalability

Sure, this works, but I lose the ability to resize my web-based training training this way. I worked so hard to make things scalable! What’s the point of switching to SVG images if I can’t scale up? It’s painful to watch a tiny version of my training on my 28″ monitor, only to have the same training be slightly too large for my laptop. I don’t have time to change my resolution, so why would I expect this to be an answer to my users?

So, I do not recommend this… for my situation. If you use a lot of .jpg files that do not look nice at full-screen anyways, making not scalable could be the best answer for you, for now. After all, this set of problems didn’t start until I flipped the scalability switch!

Other things I tried that didn’t really work at all:

  • Resize your project larger. I can’t recommend this. Resizing is a pain (always backup!), and the playbar became too small to use. It also didn’t completely rid me of the problem.
  • Make the Playbar two rows. This did not work at all. It was not a fix.
  • Set the playbar’s alpha to 100%. This did not work at all. It was not a fix.

Special thanks to Dmitri Semenov, who posted:

http://help.dimsemenov.com/discussions/problems/858-weird-bug-in-chrome. I was able to take his solution for a similar issue and, with my husband’s expert help, to modify it for the Captivate playbar. I did not use -webkit-transform: translateZ(0); because it caused issues with my Captivate VR projects. Many, many thanks, Dmitri!

Nerd Stuff (Extra details provided by my husband. Thanks, Scott!):

Once the Chrome window’s display width gets to double the transform: matrix scaleY (last) value, the object flips backwards, making it invisible (see https://css-tricks.com/almanac/properties/b/backface-visibility/). The solution is preventing it from doing so by using -webkit-backface-visibility: hidden;.

FYI: Browser CSS Support:

Firefox and other Mozilla browsers (IceWeasel, etc) use Gecko. Internet Explorer uses Trident. Safari, Google Chrome and Konqueror use Webkit. Opera 9+ uses Presto. (https://stackoverflow.com/questions/1306269/webkit-css-support-which-browsers)

Which solution worked for you? Do you have a solution to add? Feel free to comment!

Advertisements

Working with Lines in PowerPoint: Group your lines to resize many lines at one time

There are some great keyboard/combo shortcuts that I use all the time when re-sizing or moving shapes in PowerPoint. For example, when I want to resize objects at the same time, I select the objects, and then I hold down my Control key while using the mouse to drag the object larger or smaller. If I hold the control and shift keys down while using my mouse to resize a picture on a PowerPoint slide, it will change the shape of images and shapes equally, from both sides of the picture.

Here’s the problem: When using¬†Line Shape, you can’t make multiple¬†lines longer at

Find Shapes from the Insert ribbon.

Find Shapes from the Insert ribbon.

the same time by selecting multiple lines. Sure, you can select multiple lines at one, but if you try to resize them, you simply only resize one of them, not the bunch.

Lines are strange objects, and they do not follow all the same rules as other shape objects in PowerPoint. They have been working this way for a long, long time, and they still work this way in PowerPoint 2016

Here’s the solution: So… you can’t use the keyboard shortcuts on¬†lines¬†in PowerPoint…. but you can use the keyboard shortcuts¬†when you group your lines!!!! To do this, simply:

  1. Select the lines you want to manipulate
  2. Group the lines (keyboard shortcut Ctrl+G)

About keyboard shortcuts: For those who do not know about keyboard shortcuts, please check out my blog post: Useful Keyboard Shortcuts in PowerPoint. These special keyboard shortcuts and keyboard/mouse combos will help you master drawing tools and shape manipulation in PowerPoint 2007 (also PowerPoint 2013). I can’t list all of them, but you can find a¬†comprehensive list of keyboard shortcuts from Microsoft.com. I am only providing¬†a couple of cool keyboard combos and shortcuts here.

Printing PowerPoint Handouts to PDF and Retaining Hyperlinks

I have to make a web and a print version of my PowerPoint presentations, which go into a student book. For the PowerPoint presentations, I prefer to use a 2-page handout format. This saves a lot of paper, and 2 slides per page is fine for classroom handouts. Since both the print and web versions are a .pdf file, I’d like to simply have one .pdf that is optimized differently for the different versions.

The Problem:
When I chose to Save as PDF, my .pdfs printed a black background on all of the .png images I used. I had to make 2 versions of my book with 2 different sets of settings. For last minute changes, now I’m changing at least three different files (the presentation, the web version, and the print version)!

Other things that I didn’t want or didn’t work:

  • Saving each slide as one page (I want the 2-page handout) offered solutions, but it doubled my print job
  • Printing to .pdf wont retain hyperlinks, so I needed to store/fix 2 different output versions of my presentations

The Reason:

I finally discovered that the problem was arising only when I had “ISO 19005-1 compliant (PDF/A)” selected under the PDF Options. Deselecting that option causes the image to be displayed correctly.

It turns out that transparency in objects is not allowed in “ISO 19005-1 compliant (PDF/A)” formatted documents, so by setting it to be ISO compliant, it will automatically add a background color to images with transparencies.

Transparency is forbidden in “ISO 19005-1 compliant (PDF/A)” formatted documents, so the transparent portions of .png and .tif files are filled in.¬†

You can read about other restrictions of PDF/A files on its wiki page:  https://en.wikipedia.org/wiki/PDF/A

The Fix:
To fix, simply deselect the ISO 19005-1 option when saving your PowerPoint as a PDF. The .png images will display correctly. Here’s how:

  1. File > Save As PDF
  2. Click Options button
  3. In PDF Options (bottom), uncheck “ISO 19005-1 compliant (PDF/A)”

References:

I’ve been searching for this answer for years, and I finally found it on another answers.microsoft.com forum.

https://answers.microsoft.com/en-us/msoffice/forum/msoffice_powerpoint-msoffice_custom/png-lost-transparency-when-a-powerpoint-file-is/ca30823b-f21c-4697-af6e-a1513bbff97d

https://answers.microsoft.com/en-us/office/forum/office_2010-office_other/in-publisher-2010-save-as-pdf-causes-png-pictures/b1ca8dad-3776-e011-8dfc-68b599b31bf5?auth=1

Captivate 8 drag/drop caution: Event and Multi-slide Synchronized Videos have different properties

I recently took HTML5 Basics, a one-day virtual course taught by Joe Ganci. In his class, Joe demonstrated how to add a video to a project using the ribbon in Captivate 8. His video appeared on the slide, and he had player control options and other properties he could change on his video.

Event Video

Event Video with player controls

I repeated Joe’s¬†steps,¬†but¬†since I am accustomed to importing to the library first, I imported (the same video Joe used) and dragged it onto the slide. It seemed like such a harmless deviation from his steps. I was wrong. My video did not have any controls on it. Where did they go?¬†Both appeared in the Library. I was confused. Quickly, I backtracked and performed the exact steps Joe performed, and by inserting a video from the Media button on the ribbon worked (It is the same as Video > Insert Video or Ctrl+Alt+V). After the class, I dug around a bit to figure out what happened.

The Adobe help site has a simple write-up for the differences between an event video versus a multi-slide synchronized video, and it helped me understand what was happening. https://helpx.adobe.com/captivate/using/differences-event-synchronized-videos.html.

Here’s the long and short of what I learned:
DO NOT USE DRAG AND DROP TO INSERT VIDEOS FROM YOUR LIBRARY ONTO A CAPTIVATE 8 SLIDE. Sure, it will¬†work for multi-slide synchronized videos, but it creates problems in the long run. I’ve even been able to crash Captivate using the drag & drop method.

Here are the two tried and true options to use. Do not bother importing your videos first! Even if you import your video into Captivate first, you must still choose the location of the video on your computer from these steps.

Option 1: Use the video menu or its keyboard shortcut

  1. Click Video > Insert Video. You can also press the keyboard shortcut Ctrl+Alt+V
  2. Select either the Event Video or Multi-Slide Synchronized Video radio button at the top.

Option 2: Use the Media button on the Ribbon     event versus multislide media button

  1. Click the Media button on the ribbon.
  2. Select Video from the drop-down options

Below are the options that you can set. The options provided in the Insert Video window will change depending on which radio button you select.
event versus multislide options

 

 

 

Are you not sure which option to use? Try using this chart to determine which type of video you need.event versus multislide

 

 

 

 

 

 

 

Now that you know which video type you need, here are links to Adobe help to get you started on the many options available.

Important Bookmarks Getting Lost? Easily save a URL to your desktop

I am a bookmark¬†hoarder with the best intentions. Each time I see something very interesting on the Internet, I feel it must be saved, and I know that I’ll go back to it later.

The reality is that I spend close to 10 hours or more on the computer each day, and most of that time is spent searching, researching, or surfing randomly. If I were to try to view all of¬†my bookmarks, it would probably take me 20 hours per day, and they’d likely keep piling on as I look through everything.

There are many ways of organizing bookmarks and completing¬†projects¬†that will help you focus on specific groups of bookmarks. I am not explaining any of this. Instead, I’m going to show you¬†how you can¬†store¬†super-important bookmarks on your desktop or in any other folder on your computer.

It’s the simplest thing you will learn today. Simply:

  1. Open the page to save. It does not matter which browser you use.
  2. Ensure you can see the address and the location you want your shortcut.
  3. Highlight the address of the website where you want to save a link.
  4. Click and drag the address to your desktop

The weirdest thing is making sure you can see your desktop or another folder. I have two monitors, so it is very easy for me to do. If you have only one monitor, make sure your web browser is not maximized Рthat is, make sure the browser is only filling a portion of your screen.

Recommitting to my blog… again

Aside

“Your mind is for having ideas, not holding them.” – David Allen

I want to take a moment to document my struggles committing to my blog. In hearing others’ stories about their own experiences, I don’t think I’m alone. Though I’m writing about my blog, I¬†encounter this frequently in my life and I want to improve.

I enjoy writing, and I love my job. I thought writing an instructional design blog would be easy and fun. I have a great support team. I have followers. Work and life throw some roadblocks, but none are insurmountable, and certainly none have been so terrible that they’ve gotten in the way of writing a blog post.

Nearly every day, I find at least three or four things to write about. I always pause, and in my head I think of how¬†I will write¬†this amazing blog post which will help solve all of instructional design’s tremendously challenging or tremendously frustrating problems. When I do have a chance to write,¬†those ideas are gone, and I have some other distraction in front of me comforting¬†me – making feel¬†like I was just too busy or too overwhelmed or too whatever to complete my goals.

I tried combating this by starting drafts of blogs. Now I have three or four drafts which I could finish easily, but I got stuck in one paragraph and have become more afraid to finish. I spend more time thinking about distractions than the five minutes it would have taken to problem solve and complete an article.

What’s worse, I’m a terribly guilty person. Once I’ve identified that I am stuck and get past the distractions, I can’t quiet the final distraction¬†–¬†my mind pestering me¬†that I didn’t complete a task and just feeling bad about it.

I’ve decided that I need to focus on how to¬†motivate myself to complete tasks. One colleague recommended I look into¬†a concept called “Mind Like Water”. This is detailed on a site called Getting Things Done, and that is where I got the quote from at the top of this post. I will be learning more about the¬†five steps listed on their site and will share all the goodies I can:

  1. Capture
  2. Clarify
  3. Organize
  4. Reflect
  5. Engage

I may throw in a couple blog posts here and there to¬†provide a progress report for myself, but ultimately, I want to commit more to my personal-professional presence more than I have. I know motivation is a factor, and I don’t know how much Mind Like Water will help that, but I’m going to¬†find out.

I encourage you to find what motivates you to complete a project or fulfill a role you were determined to be in at some point. I encourage you to feel good about the small steps you make towards satisfying your goals, and I hope you find yourself excited to finish. While I do that for you, I will do that for myself!

As always, please share any thoughts you have on ways to motivate yourself and finish projects which you think may help myself and others out there.

… and special thanks to my colleague Hector for hearing me out and¬†offering some ideas to try and get my brain back in the right place!

Recording Audio for Web-based Training – Best Practices and Lessons Learned

I had the great pleasure of presenting at the annual ISO/RTO Training Working Group waveformconference on July 24, 2015. During this meeting, I provided details about how I have worked to improve the audio quality of my web-based training modules.

Below are two files which can be downloaded from the session. The handout includes the checklists and the references for the presentation. The links in the presentation to the supplemental materials shown in class are functional.

Thanks again for the wonderful opportunity! I hope those of you present will share some of your experiences in the comments below.

See you next year!