Animated Goalfish presentations

<< Click to Display Table of Contents >>

Navigation:  Basic Working Procedures > Videos and Online Media >

Animated Goalfish presentations

Goalfish is a new kind of presentation program. It creates animated presentations that you can embed in simple HTML pages, and they work without Adobe Flash. Instead, they are based on modern HTML5, CSS3 and JavaScript technologies that work in all browsers on all platforms – especially including mobile platforms. This means you can use Goalfish presentations both when you are presenting to an audience yourself, and embedded in your own WebHelp or CHM documentation. And that is something that you definitely can't do with normal presentation tools like PowerPoint or Keynote.

How does Goalfish work?

A Goalfish presentation is basically a single large HTML page, with an optional background. Your "slides" in the presentation can be positioned anywhere on the page. When the presentation is viewed the page is zoomed so that each slide fills the browser window. The page then moves, zooms and rotates behind the window to bring the next slide into view. The effect is like a virtual video camera flying over the large presentation and zooming in over the individual slides, one after another.

Visit for a demo and to download the Goalfish program.

See Inserting videos and online media for instructions on how to insert Goalfish presentations in your Help+Manual projects.

Configuring your CHM topic page templates for Goalfish

Goalfish presentations are fully compatible with CHM help files using any of Help+Manual's current CHM skins or the standard templates in newly-created projects. If you are using an older skin or template, you need to make a small change in the topic page template to ensure compatibility with Goalfish.

1.Open the Help+Manual project (if you are not using a skin) or the .hmskin file (if you are using a skin).

2.Go to Configuration > HTML Page Templates > Default and look in the source code.

If X-UA-Compatible meta tags are already there:

If you find the following two lines, or any other version of the X-UA-Compatible meta tag:

<IF_CHM><meta http-equiv="X-UA-Compatible" content="IE=8" /></IF_CHM>
<IF_HTML><meta http-equiv="X-UA-Compatible" content="IE=edge" /></IF_HTML>

Replace them with this single line:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

If X-UA-Compatible meta tags are not already there:

Simply add this single line, together with the other meta tags:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

The final result should be that there is only one X-UA-Compatible meta tag, with the content IE=edge.