Leaving the cave

In the second post in this series, I want to focus on the issues my colleagues and I encountered using both Captivate 6 versions.

Both the 6.0.1 and the 6.1 projects can be opened with each version, other than Captivate 5.0 and 5.5 projects.
I do understand the reason for this, as 6.1 was not considered a new version, but more an important patch.

Therefore, you would expect the projects to be interchangeable between the different 6 versions, when not using the new features (where the most important ones were Drag and Drop, Interactions,…).

There are three issues here to report. A very important one, and two smaller one.

Most important is this:
You build a template with version 6.1, with no special features.
When your colleague, using version 6.0.1, creates a project from your template, she/he is unable to copy/paste any object within the project.
This is a major issue, and according to me, a solution would be to prohibit using a 6.1 template to create a project in 6.0.1, as it is not really workable.

A second issue was for a specific project:
For one of our customers, we had these settings for the Skin Editor:

This gave several issues in version 6.1. These had to do with HTML Scaling and playbar visibility. I will not discuss these issues here.
The different projects were all developed with version 6.1, as the whole team migrated to this version (subscription model).
When the customer (using version 6.0.1) tried to make a minor change, and publish to HTML5, this issue arose:

On the left side everything is OK, but on some of the other slides, the right side of the image was showing.

The lesson learned here was that the publication of version 6.1 and 6.0.1 are not the same.

A third issue has to do with labeling slides:
When a project is switched from version 6.0.1 to 6.1 and back, at some point, you will no longer be able to change the labels of a slide, as the field on the Properties pane seems frozen. You can enter a label, but the field remains the same, whatever you try. From time to time, we are able to fix it by trying both version the one after the other until it works again. We can always fix it by pasting all the slides in a new project, but, as we will see in a next post, this will not always be the solution, because other issues can pop up then…

The main conclusion here is that a mixed environment is something that must be avoided. But this is more easy said than done. As said in the previous post, some customers still use version 6.0.1 and cannot upgrade due to company guidelines, restrictions,… you name it. This implies that we, as a content development team, must still support (and use) this version.

So, every member of our team should have Captivate 6.0.1 and 6.1 installed. This is not the case. In the next post, I will describe what I have learned from having the two Captivate 6 versions installed.

When you publish a Captivate project to HTML, the animation is always at the top of the page.

Let’s say you want the animation to be in the center of the screen, e.g. because the animation will run fullscreen. How can you do this?

You just have to change some of the HTML in the published .htm file.

This is the business part of the default htm file for a project of 1024*768 (lines 17 and 18 in HTML output, lines 212 and 213 in SCORM 1.2 output):

<div id="CaptivateContent">&nbsp;
</div>

The only thing you need to do is change the style of the <div> tag like this (found it here):

<div id="CaptivateContent" style="position:absolute; top:50%; left:50%; margin-top:-384px; margin-left:-512px;">&nbsp;
</div>

Let’s take a look at what this piece of code does.

1. Position: absolute
This is used to detach the div from the rest of the page content.

2. Top:50% and left:50%
This code sets the top left corner of the animation in the middle of the screen.

3. Margin-top:-384px and margin-left:-512px
We change the position of the div with negative margins half the amount of the size of the swf.

Let’s take another example:

<div id="CaptivateContent" style="position:absolute; top:50%; left:50%; margin-top:-300px; margin-left:-400px;">&nbsp;
</div>

Can you guess for what size of project the code above is?

Are all of your projects the same size and do you always want them centered?

For the HTML output, change the file “Standard.htm” in this (default Win7 64bit) location: C:\Program Files (x86)\Adobe\Adobe Captivate 5.5\Templates\Publish. This file is used as a template when publishing the project. All projects published after you changed this file, will have the changed code in it.

Easy, if you know it.

BTW, the project site of the last example is 800*600. I guess you figured it out by now.