Making a Multi-page FVS Slideshow

Application scenarios: If you have installed the FVS plugin, you can view this article to learn about functions related to FVS templates.

Note: Mobile devices are not supported.

Version 

Scenario Introduction

This article mainly introduces using the multi-page design of FVS large screen editing mode to show slides.

Implementation Idea

1) Understand the content logic of the template, organize the framework of the template, and then collect the data needed for the template.

2) Design pages according to the sorted order and complete the content of template preliminarily.

3) Conduct visual design to optimize the visual effects of the template.

4) Supplement component animation, improve details, and achieve the final effect.

This article mainly introduces the realization of template functions such as pages switch, component animation, and pop-up box.

Switching Pages

1) When the FVS template contains multiple pages, you can set the preview playback mode. By default, Page Loop Playback and Show Switch Button are checked, but to have a better preview interface, here we uncheck Display Switch Button. As is shown below:

2) After unselecting the switch button, you can use the left and right keys on the keyboard to switch pages. If you still want to switch pages by clicking the page, you can use the page switching interface to achieve it.

For example, add an image component and Custom Upload a suitable image. As is shown below:

Add a JavaScript click event to the image. Enter duchamp.nextStory();, and you can go to the next page by clicking.

Component 3D Rotation

In a template, there may be many images with the same style but opposite directions. At this time, we can change the direction of the images by 3D Rotation in Component Attributes.

For example, the two sets of pictures in the following figure:

Setting the Z-axis to 0° and 180° is equivalent to a vertical flip. As is shown below:

Setting the Y-axis to 0° and 180° is equivalent to a horizontal flip. As is shown below:

Component Animation

Using Component Animation can make the template presentation richer and more beautiful.  For example:

Select the component, click Animation > Animation Settings, the default animation is fade in and fade out, choose the animation, as well as the duration and timing of the animation according to the desired effect.

When setting component animations, you can group multiple components together. As is shown below:

Pop-up box After Clicking

In the Outstanding Achievement part of the sample template, a click event is set up on the page, and clicking different events can pop up different images.

Creating a General Report That Displays Images

Note: For more information about setting up cells to display images, see Cell display image by HTML.

1) Click to download the images used in the sample template: activity.zip, and place the extracted folder in the %FR_HOME%\webapps\webroot\help\picture project path, as is shown below:

2) Create a general report in the designer and create an embedded dataset. As is shown below:

3) Add Template Parameters to the template to display different images by passing parameters. As is shown below:

4) Drag the Number and Image path fields from the dataset into cells A1 and B1 respectively.

Double-click cell A1, set the filter condition to Number Equal to p. As is shown below:

5) Insert the formula "<img style='height:400px;width:600px' src='" + B1 + "'/>" into cell C1. The displayed width and height of the image are defined in the formula as 600*400.

Set cell C1 Cell Attributes > Other > Display Content to Display by HTML. As is shown below:

6) Finally, hide columns A and B, and save the report.

Setting Click Event in the FVS Template

Note: For more information about how to set pop-up box after clicking, see FVS Click to Jump out of the Pop-up Box.

In the template page shown below, the rich text component does not support click events, so we place the image component above the rich text component and add a click event to the picture component.

The pop-up box Content URL should be the relative path /Annual event pop-up box.fvs. Set the parameter p to different numbers based on the event.

As is shown below:

In the general report, the formula in the cell C1 defines the width and height of the image as 600*400 px, so the style settings of the pop-up box should be adjusted appropriately according to the size of the image.

As is shown below:

Annual Report.zip