Animated Slideshows

Products
Support
Company
Free Trial
News
Contact
Buy Now

Zoom Window Out
Larger Text | Smaller Text
Hide Page Header
Show Expanding Text
Printable Version
Save Permalink URL

Animated Slideshows

Creating an animated HelpXplain slideshow is quick and simple. Basically, you just add multiple pictures to the canvas and publish. HelpXplain generates the slideshow as a package of HTML files and scripts.

This topic only covers specific aspects of creating slideshows with HelpXplain and assumes that you already understand the basics of creating an animated Xplain. Start with Animated Infographics if you have not learned that yet.

Applying settings to multiple or all slides

You can apply settings to all slides by selecting the Slides Overview in the Slides list on the left.

1.Select Slides Overview at the top of the Slides list on the left.

2.Click in the canvas editing area where the slides are shown.

3.Press CTRL+A to select all slides or use SHIFT+Click to select multiple slides one after another.

4.Choose the settings you want to change in the Properties pane on the right.

1: Create an empty project and get set up

Create the project and configure the basic settings

Start by creating an empty HelpXplain project with New in the File menu. This will create a plain white canvas with a single empty slide on it.

Set up your display size and a background color. The display size defines the aspect ratio and dimensions of your slides in the browser window. Black or a dark color generally works best as a background for slideshows, to make the images in your slides "pop". You probably don't need a background image for this, although you might if you are animating your slides (see below).

Load your first picture and adjust the display dimensions

The first slide in your Xplain defines the viewport dimensions, so you want to load a picture into it and get it set up so that it works for you before proceeding with the other images. See Size & Background for details.

1.Select the first slide in the Slides list, then select the Pictures tool in the Home tab and load your first picture into it. It will not match the outline of the slide exactly. That is fine – for the moment you just want to match the aspect ratio of your images to that of the slideshow.

slideshow_sizeslide s

2.If the aspect ratio (relationship of width to height) of the slide doesn't match the image you can auto-adjust the slide to match the image: Right-click on the image in the slide, then select Fit Slide to Objects (AutoSize) in the Size context menu.

2: Load your additional pictures

Once you have got your first slide set up the dimensions and aspect ratio of the next slides you add will be based on the first slide. The show will usually look best if all the pictures have the same size and aspect ratio.

Tip: You can adjust the dimensions of all slides to match with the Change... option in Size & Background section of the Properties pane on the right.

1.Select the first slide in the Slides list, then select the Picture option in the New Slide tool in the Home tab to insert a new slide.

Note: New slides are inserted directly after the currently selected slide. This allows you to insert slides between slides.

2.Double-click on the picture icon in the new slide to insert your next picture.

3.Right-click on the picture and use the options in the Size context to fit it to the slide.

slideshow_fitslide

4.Repeat for all the remaining pictures in your slideshow.

3: Arrange and animate your slides

Slide arrangement is only important if you are animating slide transitions

When the slideshow plays, HelpXplain moves the canvas containing the slides so that the slides move into view in the browser window. If you are going to animate your slides their arrangement on the canvas will affect how they move in the animation: Slides in a single row will move horizontally only. Slides in multiple rows cause the animation to pan down to the next row as well as moving.

See Size & Background for details on arranging slides.

Setting or disabling slide animation

Select each slide in the Slides list on the left, then look in the Position & Timing section in the Properties pane on the right. Select one of the animation options under the Transition heading. See Animating Slide Transitions for details.

•If you choose an animation option the slides the canvas will move and possibly also zoom and rotate behind the browser window to show the next slide.

•If you set Show (no animation) the slides will just be replaced in the browser window, without moving.

Animating your slide images when slide animation is off

If you turn off slide animation you can animate the slide images so that they don't just "flash" on and off.

1.Select the slide in the Slides list, then click on the image in the slide to select it.

slideshow_animatepic

2.In the Animations tab select Fade In (best option) and make sure that Start: is set to Slide Entry (beginning of the slide display). Then set the duration of the fade. The Delay setting adds a pause before the fade in begins.

See Animating Slide Content for full details on this subject.

Previewing, saving and publishing

Previewing the slideshow in HelpXplain

You can select the Preview button on the left in the HelpXplain title bar at any time to get a live, interactive preview of the slideshow you are working on. This works in exactly the same way as the Xplain will work when it is displayed in a web page in a browser.

Saving and publishing

1.Select the Save tool in the title bar or Save in the File menu when you are finished and save your canvas as a HelpXplain project. Don't save as a static image – that would just be a single image and can't be used as a slideshow.

2.Select Publish in the File menu. This displays the Publish screen.

3.Click on the Format: bar at the top and select HTML Slideshow as the format to publish.

4.Choose an empty folder in the Output File: field to store your slideshow. This is advisable because the show consists of multiple HTML and other files.

5.Configure the other settings and then click on Publish on the right.

The slideshow will be generated and displayed automatically in your default web browser. HelpXplain uses its own integrated mini web server to create this preview.

See Publish for details on the settings in the Publish page and integrating your show in web pages.

Optional: Add an overview of all slides

The Overview Slide option in the New Slide tool in the Home tab adds a special slide that encloses all the other slides on the canvas. When this slide is displayed the canvas zooms out to show all the other slides.

Important: Create overview slides LAST!

It's best to insert overview slides last, because they need to be positioned so that they "contain" all the other slides on your canvas. This makes it difficult to move them in the slide order without disturbing the other slides.

If you make any changes to the other slides after inserting an overview slide just delete the overview slide and create a new one. Similarly, delete the overview slide and reinsert it in a different position instead of trying to move it in the slide order.

Chaining multiple slide shows

Instead of creating a single huge slideshow that can overload some browsers you can chain multiple shows with the link options. Just create a web page link pointing to the next slideshow in the last slide.

Please enable JavaScript to view this site.

Applying settings to multiple or all slides