The dimensions of your project and of individual slides are set in Size & Background in the Properties pane on the right. If the Slides Overview is selected on the left the viewport size is displayed here. If an individual slide is selected the display shows the dimensions of the selected slide.

The Viewport Size setting

The Viewport Size is the size of the rectangular box in which your Xplains will be displayed in the web page in the browser. The dimensions shown here will be used for the entire Xplain when it is played. If individual slides have different dimensions they will be zoomed in or out to fit when they are displayed.

Changing the viewport size

By default, the viewport size will be the same as the dimensions of the FIRST slide in your Xplain. You can change these dimensions by selecting the Change... dialog. This includes an option to match (resize) all the slides in the project to the new viewport dimensions. If you don't match the slides to the viewport then all slides will have different dimensions and will be scaled to fit in the viewport when they are displayed.

Size of individual slides

By default, all the slides in your Xplain are created the same size. However, you can change the size of individual slides if you wish. Just select the slide in the Slides list, then select Change in Size & Background. If you do this, the slides and their contents will be scaled out or in to fit the display window when the Xplain is played.

Slides with different sizes cause zoom effects when slide animation is used

If you change the size of individual slides their contents will be zoomed in or out to fill the display window when the slide is animated into view. There will be no zoom effect if slide animation is disabled, because then the contents of the window are just replaced and the slide and its contents will be pre-scaled.

By default new slides are configured to fit in the viewport of your Xplain, so that they completely fill the viewport without a margin. You can also configure them with a margin or to fill the entire browser window.

Default settings are based on the settings of the FIRST slide

As with the viewport dimensions, the default position settings for new slides added to your Xplain are taken from the FIRST slide in the project. So if you change the settings below for the first slide, all new slides will also be created with those settings.

Procedure

Select the slide you want to configure in the Slides list on the left. Then open the Position & Timing section in the Properties pane on the right.

Fit in window: Slide fills the entire viewport window, zooming in or out to do so if necessary.

Fit with a margin: Slide fills the viewport window leaving a margin around it.

Fill browser window: Slide fills the entire web browser window.

Slide transition and animation settings can be configured independently for each slide. Default settings are applied for some Xplain types. For example, HowTo screencasts made with the screencast wizard have animated transitions disabled, and image sliders have them turned on.

Default settings are based on the settings of the FIRST slide

As with the viewport dimensions, the default transition and timing settings for new slides added to your Xplain are taken from the FIRST slide in the project. So if you change the settings below for the first slide, all new slides will also be created with those settings.

•Select the slide you want to configure in the Slides list on the left. Then open the Position & Timing section in the Properties pane on the right. Some of these settings are also available in a menu in the Animations tab.

Transition duration:

How long the animation will take, i.e how slowly or quickly the canvas is moved between the previous slide and this slide.

Transition type:

There are four transition options:

Autoplay duration:

How long the slide is displayed in in Xplains that play automatically. Note that this will be increased if the sum of the animations and their delays you have defined is longer than the autoplay duration.

Stop autoplay:

Stops autoplay at the selected slide. This can be necessary for interactive Xplains in which you want the user to choose options instead of just passively watching the animation.

Follow-up slide:

Which slide will be displayed after this slide. You can use this option to create "out-of-order" animations that move to slides out of the normal sequence shown in the Slides list.

The arrangement of your slides is simply how they are organized on the canvas workspace. When you select Slides Overview in the Slides list on the left you can move around and arrange the slides either manually or automatically. How you arrange your slides determines how they are animated and displayed in transitions:

Slide arrangement is only important if you are animating your slides

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.

If you don't animate your slides their arrangement isn't important. HelpXplain will switch between them without transitions and you will not see the movement between the slides.

Arranging your slides automatically

Select Slides Overview in the Slides list on the left. Then look in Size & Background in the Properties pane on the right and use the Arrange Slides option to arrange the slides on the canvas in a variety of different ways. This affects how the slides move in the browser window when the Xplain is played, when the canvas is moved behind the browser window to show the slides.

Arranging your slides manually

You can also arrange your slides manually with the mouse in Overview mode if you want to achieve special animation moving effects.

If you want you can just place the elements for your animation on a plain white background. Then you can skip this step – or add a background later whenever you choose to. Otherwise you can define a background color or use a picture for your background.

The background encloses the entire canvas

While the viewport has the dimensions of a slide (the first slide, by default), the background fills and even extends beyond the entire canvas. It is shown behind the slides as they are animated by moving the canvas to display the next slide inside the display window in the browser.

When you use an image as a background you need to choose one with quite large dimensions because the background needs to be larger than the borders of the canvas defined by the slides in your Xplain. If it wasn't that big you would see the edges of the image inside the window when the canvas is moved between the slides during the animation, and particularly when it is rotated.

The background image can be defined with a vertical distance for the canvas to create a 3D effect while panning and zooming. You can configure this with the Parallax Effect setting in the Properties pane on the right.

Define a plain background color on the canvas:

This is the simplest option. It just makes the entire background a specific color. This color fills the entire workspace, not just the canvas.

1.Select Sides Overview in the Slides list on the left .

2.Open the Size & Background section in the Properties pane on the right and choose a background color Color: option.

Use a background image

Selecting a background image puts an image of your choice as a background on the bottom layer of the infographic. You can define the background image to have a virtual distance between itself and the slides and their contents. This gives a 3D effect when panning and zooming.

1.Select Sides Overview in the Slides list on the left.

2.Open the Size & Background section in the Properties pane on the right, activate the Background Image option and choose an image file to use.

Background size

•The background needs to be larger than the canvas to prevent empty areas appearing during panning, rotating and zooming. Around 2.5X the size of the canvas is usually good value.

•The background image should be quite large so that it looks OK when zooming in on it.

Parallax Effect: 3D background effect

The Parallax Effect setting creates a virtual distance between the background and the slides in your Xplain, resulting in a dimensional depth effect on moving between the slides. Increasing the parallax effect level increases the intensity of the 3D effect.

Background image export format and size

The background image is always exported as a JPEG, and will be converted if necessary. This is required for Apple iOS devices, which place limits on the size of other image formats. This is also the only image in your Xplain that will always be exported in its full original resolution. All other images will be resized automatically when you publish the Xplain, if necessary.