Publishing Your Xplains

You can publish your Xplain project to any of the supported output formats at any time, either for testing or to produce the final product.

Productivity Tip

If you want to save a single slide as a static image, right-click on the slide in the Slides list and select Export.

Basic Procedure

1.Save your project, then select Publish in the File menu.

2.Click on the Format: bar at the top and select the format you want to create.

3.Configure the options displayed, then click on Publish to create the selected output.

Publishing Options

See the Publishing dialog reference for details on the output all the settings available for the individual output formats.

Advanced loader script embedding method:

In addition to the standard embedding method described here you can also use a more finely configurable option that accesses a special additional loader script. This method also allows you to control how and when the Xplains are loaded in you page.

See Embedding Xplains in Web Pages for full instructions.

Output format, skin and publishing options

Output format:

Save As menu

Note that the output format options can also be accessed via the Save As option in the File menu. Selecting the format options there takes you to the same screens described below.

Available output formats

When you click on the Format bar you can choose the following formats:

•HTML slideshow: Dynamic HTML infographic for embedding in a web page or display on its own as a web page.

•EWriter help file: Packages the full HTML slideshow in a compact, easily-distributable single help file with the .ewriter extension. Windows Store app installs automatically on Windows 8 and 10, viewer installer available for earlier Windows versions. See Dynamic eWriter and Ziphelp files for details.

•Ziphelp slideshow: Packages the full HTML slideshow in a zip archive help file with the .zhelp extension. See the Ziphelp website for details on this extremely flexible new format.

•PDF: Static images of your slides in a PDF document

•Series of static images: Static images of your slides in separate image files.

•Multi-Page GIF image: A single animated GIF image that shows your slides in order, but without any audio or animations within the slides. This is useful for posting little single-file tutorials.

Player skin and publishing options

You can choose a number of different layouts for your HTML slideshows here. Click on the Customize button to modify the settings of a skin.

See the Publishing dialog reference for details on the output all the settings available.

"Custom Skin" option in the skin selection list

The Custom Skin option that you see at the bottom of the skin selection list is for skins you have designed yourself. This is an option for developers and advanced users familiar with XML and HTML programming and design. See Custom Skins in the developers chapter for details.

Standard method for embedding Xplains in your web pages

The instructions below explain the general principles of deploying your animated Xplains on your website. The procedure is like embedding a YouTube video, and just as easy.

Files you need to upload

When you publish a an animated HTML infographic, HelpXplain creates the following files and folders in your output folder, which should be empty before you start. You should upload the entire folder with all the files it contains to a suitable location on your web server.

<xplain_filename>.html	This is the main Xplain file. It will usually be called index.html but you can give it any name you like. The name index.html will be opened automatically by web browsers on most web servers. However, you need to use different names if you want to put multiple Xplains in the same folder.
\<xplain_filename>\	This folder contains the photos and other graphical images used in your Xplain. It has the name of the main HTML file without the .html extension.
\js\	This folder contains the script files used to make your Xplain work.

Embed Code:

To get the specific code for each Xplain select the In Master Page option for previewing your Xplain in the Publish dialog. You will then be shown the specific folder names and embed code for deploying your Xplain on your website.

After publishing, the finished Xplain will be displayed in a master page with a How to Deploy bar on the left, like this;

publish_deploycode

Dimensions and embed code:

The defined display dimensions of your Xplain will be shown in the How to Deploy box in the Master Page preview. However, the absolute dimensions are not critical, because an Xplain is always responsive and automatically fits the screen where it is displayed. What is important is maintaining the aspect ratio (the relationship of width to height).

The code for embedding a responsive iFrame containing your Xplain in your own web page will look like the example below, but the individual settings may be slightly different depending on the settings in your individual Xplain.

You will need to adjust the path in the src= reference depending on where you store the Xplain files and folders relative to the web page containing the embed code.

Sample embed code:

<div style="position:relative; width:100%; height:0; padding:0 0 56.333333333333336% 0; overflow:hidden">

<iframe style="position:absolute; left:0; top:0; width:100%; height:100%; border:none"
src="./your-folder-name/index.html">
</iframe>

</div>

Please enable JavaScript to view this site.

Basic Procedure

Files you need to upload

Embed Code: