Leaving the cave

About learning, technology and raising kids…

2012/09/12
by Dieter
0 comments

Must have apps

As from today, I will be using an interim laptop. My own workhorse has a broken VGA port, and will be send to the factory to be replaced.

Excellent opportunity to test out the apps I really need. This is pre-installed: Microsoft Office 2010 and the Adobe e-learning Suite 2.5.

First app I needed was Google Chrome, to sync all bookmarks, and my whole online history.

I guess I will install Notepad++ soon as well. But that has to wait until I really need it.

Let’s see what I will have installed in two weeks!

 

And that ****** azerty keyboard already bothers me.

2012/01/27
by Dieter
0 comments

Put your #AdobeCaptivate animation in the middle of the page

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.