HelpXplain is a new kind of animated infographics program. It creates animated screencasts that you can embed in simple HTML pages, and they work without Adobe Flash (which is now no longer supported anywhere anyway). 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 HelpXplain 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.

HelpXplain is faster and more effective than HowTo videos

If you've ever tried to create a HowTo video you know how difficult, stressful and time-consuming it is. HelpXplain is different. You can create animated HowTo screencasts of anything on your computer screen that is just as effective as a video. It consists of a series of screenshots with animated transitions that can be edited or corrected at any time. You don't have to redo everything if you make a mistake, you just replace a screenshot and you're done. You don't have the stress of needing to get everything exactly right while making your screencast, and there is no time pressure. You can wait as long as you like between screenshots.

How does HelpXplain work?

A HelpXplain 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 http://www.HelpXplain.com for a demo and to download the HelpXplain program.

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

Adding a reference to HelpXplain so that Help+Manual can find it

Help+Manual compiles HelpXplain presentations in your project automatically when publishing the project. If you have the full version of HelpXplain installed it will use that for doing this, otherwise it uses its own HX compiler. Normally HelpXplain will be found automatically if it is installed. However, to make absolutely sure that the full version is used you can add the reference to it yourself in the Program Options. This also enables you to open HX projects directly from within Help+Manual, from the context menu displayed when you right-click on an Xplain in the HM editor.

You can include HelpXplain slides in print-style output

When you include Xplains (HelpXplain presentations) in your projects you will normally want them to actually run when the user clicks on them. This works fine in CHM, WebHelp and eWriter. But what about formats like Word and PDF, which are like printed pages without dynamic content? There you can opt to include either an image of the first slide that links to the online version, or static images of all the slides displayed in a tabular grid. See the instructions for HelpXplain in Inserting videos and online media for full details.

Configuring your CHM topic page templates for HelpXplain

HelpXplain 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 HelpXplain.

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.