Leaving the cave

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">  </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;">  </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;">  </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) 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 hope you figured it out by now.

2012/01/18
by Dieter
0 comments

Touch interface and games – Vice Versa

As discussed in a previous blogpost, the interface is important for a game. I gave an example of a PC game that was recoded for an iOS device.

This time it’s the other way around. If you are familiar with iOS games, you certainly know Angry Birds. Something similar is the game Cut The Rope (iTunes Link). Since a few weeks, it is available as a browser game, completely written in HTML5: http://www.cuttherope.ie/ (I tried it in IE9 and Chrome).

This game has been around for a while. If you do not know it, a look at the trailer will learn you a lot more: http://youtu.be/8xPUdFaraoQ.

Having played Cut the Rope from time to time, I really enjoy it. The only thing that can be frustrating is that sometimes I am not fast enough. Yes, you read that correctly, not fast enough. Even with TEN fingers.

If you are from time to time not fast enough with ten fingers, how can you be fast enough with one mousepointer in the browser version?

The developers are no idiots, and that’s probably one of the reasons why some levels from the iOS app are not available in the browser version.

Let’s take a look at two identical levels in the two versions:

As you can see, there is no real difference in look.

The difference is the interface. This game works great if you can control it with your fingers, and cut the ropes, or push the balloons. When using a mousepointer, you lose all the feeling.

On the plus side, the browser version is a great demo for the capabilities of HTML5.

2011/12/28
by Dieter
0 comments

Touch interface and games

I use my iPad for casual gaming, and discovered something annoying.

IMHO, it is not possible to transfer all games to a touch interface. Take these two examples.

1. Bejeweled Blitz (iTunes App Store link)

Most of you are familiar with the concept of this game, but for those who are not: you must score as many points as possible within 60 seconds by aligning three or more identical gems. You can only switch the position of two adjacent gems, if one of those gems will form a line of three or more. You tap the gems to select them.

This is the interface:

2. Diamond Dash (iTunes App Store link)

A very similar game. Within 60 seconds, you must score as many points as possible by removing three or more adjacent blocks. In order to remove the blocks, you need to tap on them.

This is the – rather equal – interface:

Here is the issue I face: being a lefty (and proud of it), and tapping along the right side of my iPad screen, I cannot see the left side of the screen. How can I play a game like that, when I cannot see half the interface?

Is it me? Should I use both my hands? Being in my early thirties, I am not yet trained to do that.

Or are the game developers jumping on the iOS cart, because it still is the mobile operating system with the largest user base?

Whatever the reason, it is not a given that everything that works on desktop computer with a mouse, can work as well on a touchscreen device. Just like learning content: because a presentation works in a classroom environment, it will not (a priori) work in standalone mode with a voiceover…