Adobe Captivate Alignment Toolbar

Adobe Captivate Alignment Toolbar

I’m always looking for shortcuts in online learning design. One of my favourites is the Adobe Captivate Alignment Toolbar. To use for each session you will need to check Enable custom workspaces/panel undocking in your Adobe Captivate Preferences. This option can be found in the General Settings Category.

Preferences Window

As the entry suggests you will need to restart Adobe Captivate for the changes to take effect, but the advantage is that you will be able to permanently turn various toolbars on or off as you see fit. Those changes will be persistent each time you start Captivate. You can then turn on the Adobe Captivate Alignment Toolbar by selecting it from the Window drop-down menu.

Once the Alignment Toolbar appears in your Captivate interface you can save time aligning, resizing, and ordering your on-slide objects with ease. Sure you can right click your objects and select the same settings, however, this requires two mouse clicks. Having the toolbar up on your screen saves you a mouse click for each of these alignment adjustments. Over the course of a lifetime of Captivate projects, the toolbar will save you time and many clicks.

Here is a simple and FREE job aid on what each icon from the toolbar can do for you. The link takes you to my website where you can download this job aid.

https://www.paulwilsonlearning.com/articles/alignment

 

Fixing alignment of TOC checkmarks

There’s an issue with the alignment of the checkmark icon for visited table of contents (TOC) entries in the HTML5 output from Captivate 9. The problem occurs when entries are grouped and the “Collapse All” TOC runtime option is enabled. This post provides more information and a workaround to fix the alignment.

Example TOC entries show some rows with misaligned icons

Problem

The screenshot shows a demo project (started with all default settings) with TOC enabled, two TOC entries grouped, and the “Collapse All” runtime option enabled in the TOC settings. If the group is expanded and the slides are visited then then checkmark icons for the grouped entries appear offset upwards by 20px. In this example the visual difference is minor. But with different themes or other customization there can be much more of a problem. Workarounds such as not grouping TOC entries or not enabling the “Collapse All” runtime option may work for some applications, but are not ideal.

Root cause

The top margin for each checkmark icon is set to half the difference between the height of the tocEntryContainer div and the height of the icon image div. This calculation is set up at runtime when each TOC element is added to the page, but the expression isn’t evaluated until the onload event of the image div. The problem is that collapsed entries have a height of 0px by then. So the calculation of ((40px –  17px)/2)=11.5px becomes ((0px – 17px)/2)=(-8.5px). The top margin attribute will be offset by -0.5 times the height of the tocEntryContainer div.

Solution

One solution is to determine the height of the tocEntryContainer div while setting up the calculation (before it’s collapsed). The value can be stored and used instead of the current height when the expression is evaluated. This way the expression returns the correct value for the icon’s top margin attribute, even if the entry is collapsed.

1. Publish the project with HTML5 output enabled
2. Find the CPM.js file

Open the published HTML5 output, open the assets folder, open the js folder, and open CPM.js using a text editor.

3. Find this section of code (You can search for “createVisited:” )

createVisited:function(a){var b=cp.newElem("img");a.appendChild(b);b.onload=function(){b.style.marginTop=(parseFloat(window.getComputedStyle(a).height.replace("px",""))-b.getBoundingClientRect().height)/2+"px";b.style.marginLeft=parseFloat(window.getComputedStyle(a).width.replace("px",""))-cp.toc.tocRightMargin-cp.toc.scrollBarWidth-b.getBoundingClientRect().width+"px"};b.src=cp.toc.loadedAssetArr.visited.src;this.visitedDiv=b;cp.toc.tocPersistanceManager.getVisited(this)||
(b.style.visibility="hidden")},

4. Replace with this modified code

createVisited:function(a){var b=cp.newElem("img");a.appendChild(b);var c=parseFloat(window.getComputedStyle(a).height.replace("px",""));b.onload=function(){b.style.marginTop=(c-b.getBoundingClientRect().height)/2+"px";b.style.marginLeft=parseFloat(window.getComputedStyle(a).width.replace("px",""))-cp.toc.tocRightMargin-cp.toc.scrollBarWidth-b.getBoundingClientRect().width+"px"};b.src=cp.toc.loadedAssetArr.visited.src;this.visitedDiv=b;cp.toc.tocPersistanceManager.getVisited(this)||
(b.style.visibility="hidden")},

The modification defines a variable c to store the height of element a (the parent tocEntryContainer div) returned by the getComputedStyle method, and then calculates marginTop using the value of c rather than by calling the getComputedStyle method.

5. Save the modified CPM.js file

You will need to modify the CPM.js file each time you publish the project. Luckily this issue only affects the appearance of the TOC, so the fix isn’t necessary when the project is published for testing purposes.

Hopefully this guide will help anyone else stuck in the same situation!

(Tested with Captivate 9.0.2.437)

The problem was also encountered by:
rchil (TOC checkmark alignment)
en6geh77 (Table of Contents Tick/Check is not properply aligned)

Cheat with Reference points!

Intro

The origin of this article is (again) due to a forum question: “I want to rotate a triangle around a certain point” using the Rotation effect. It is time to explain the importance of the reference or registration point for objects in Captivate. In other Adobe applications like Illustrator, InDesign, Animate you have lot of control over that point. Look at this small screenshot: it shows that reference point in two different locations. Sorry for the low resolution, it is very small in Illustrator: left image shows the reference point in the left center, the right image at the bottom right. It was that last point that was wanted by the OP in the forum, but … Captivate doesn’t allow changing the reference point.

Reference points Captivate

The Reference/registration point in Captivate is used in different situations. In some situations it is located at the top left corner of the bounding box, in other situations in the center of the bounding box. The ‘bounding box’ is the rectangle surrounding the object or the object group. You’ll see it during editing, when selecting an object or a group.  The visual presentation of that box on the stage is not looking always exact, it can look larger than it really is. The correct size (px) of that box can only be seen in the Options tab of the Properties panel.

Location, resizing, rotating “1” or “2”?

The X and Y value in the Options tab are the coordinates of one of the registration points: the top left corner of the bounding box, as you can see in this screenshot:

The red lines in this screenshot are guides. The dotted square is the bounding box. The blue circle indicates the first reference point, which is top left and has its coordinates in X and Y in the Options tab. If you uncheck the ‘Constrain Proportions’ option, and increase the Width (W) or the Height (H) you’ll see that the reference point will not move, increasing width will move the right border of the bounding box, increasing height will move the bottom border.

However, if you use the Rotation button on the stage, or the Rotation option in the Options tab, the used reference point is no longer the one indicated by the blue circle, but the center of the bounding box, which is indicated with a white circle in the screenshot. Same point is used for Flipping and 90° rotation buttons in the Options tab. The reference point will (weirdly) not change in the X, Y coordinates when you rotate an object as is visible in the next screenshot: you see that the X/Y still references to the blue circle center, which is no longer part of the bounding box of the shape:

Aligning “?”

If you align two or more objects (use the Align Toolbar which you can open by Window menu) the result can be surprising. Have a look at this first screenshot: I kept the rotated arrow, added a rectangle with exactly the same width (300px), and having the reference point at the same X value. That means that the center point of both shapes has the same X value as well, centering the shape will not move them.  In a first test, I selected the arrow first for alignment (see right image in screenshot).

The result for left align is to be seen in the left image: the most left point of the bounding box of the arrow has been used as reference. When the bounding box is turned off, there seems to be no ‘alignment’ between the shapes. The second image looks better.

Same alignment rules when you use grouped objects instead of single objects. The bounding box of the group is what matters.

Effects “2”

For all effects the center point of the bounding box (white circle in the very first screenshot) is the absolute reference point. It is the case for all categories of Effects. Especially for motion effects, the new Guides are very handy to locate the start, end and intermediate points of the motion path as I showed in this post: Guides Rule!.

That was the original question which I mentioned in the introduction: how can you rotate an object, not around its center but around another point.  Since version 9 it is possible to apply an effect to a group. You cannot have individual effects for objects that are grouped (which is a pity). But in this case effect on a group provided a workaround for this particular question:

  • Add an object that is ‘invisible’ to the end user, like a shape with a Fill Alpha = 0 and a stroke = 0.
  • Group that object with the object to be rotated, in such a way that the center of the group bounding box coincides with the rotation point you want to use.

This sounds more complicated than it is really. Have a look at this visual presentation: the wanted rotation point was the right bottom point of the triangle. Duplication of the triangle with rotation provided me with that ‘dummy’ object which I made invisible to the user (here I added a light grey border to make it visible):

Cheat this way:

The red lines are guides which will not be visible on publishing. You see in this screenshot that the bounding box looks bigger than it really is, because its exact size is indicated by the red guides.

Conclusion

If you followed my blog, you know that I love cheating on Captivate. But in this case I would be more than happy if we could control the reference point for a lot of use cases. Imagine having to rotate that triangle again around another rotation point? Or having to rotate a hexagon around one of its points? It is fun to use workarounds, but it takes …..time.

Please help supporting this request by entering it, which can be done right from this portable, look to the right, under Contribute!