Support

Back to Support

9. How to Add Interactive Features

One of the key advantages of CoverPage Publisher is the possibility to define interactive sections with different functions. You can choose from five interactive multimedia modules:

  1. Gallery tool
  2. Video tool
  3. Sequence tool
  4. Scroll tool
  5. Sound tool

And three other interactive modules working with web content or HTML-based modules:

  1. Hyperlink tool
  2. Webview tool - HTML + CSS
  3. Attachment tool

9.1 Gallery tool Gallery tool

The Gallery tool is used to display a group of pictures in form of a full-screen presentation or on the current page. The reader can open it either by tapping or scrolling over the gallery interactive section.

To add a gallery, proceed as follows:

  • Choose the Gallery tool.
  • Draw an interactive section above the page.
  • Set the Gallery properties in the Inspector toolbar.

  • Title
  • Region

  • Picture – use either the Browse files button or drag the pictures from the disk directly to Drag images here in the Inspector toolbar. All the pictures will appear directly in the Inspector toolbar. Change the order of the pictures using your mouse – grab the picture with the left mouse key and drag it to the desired position. PNG and JPG formats are supported.

  • Settings

  • Add icon
    On page gallery - upon checking this checkbox, the pictures will be displayed on the page in the selected section. This way, the user can go from picture to picture directly on the page.

The user can enlarge the gallery to fit the whole screen by placing two fingers on the edges of the picture, and similarly, to close it. If the On page gallery option is not checked, the gallery will open to full screen upon tapping the interactive section.

Individual pictures can be easily removed using the Inspector toolbar. Hover over the image preview you wish to remove with your mouse; an “x”-button will appear. Click on it to remove the picture from the gallery.

Size - Resolution for Retina displays is 1536x2048 which is recommended.
Pictures larger than 2048 at the long side will be downsized automatically by Publisher.

Gallery tool options

9.2 Video tool Video tool

The Video tool is used to play videos. Two viewing modes are supported. Videos can be viewed either in full-screen mode or directly on the page from which the full-screen mode can also be activated by using two fingers.

To add a video, proceed as follows:

  • Choose the Video tool
  • Draw an interactive section above the page.
  • Set the video properties in the Inspector toolbar.

Title
Region

File - click Browse for file to select a video from a directory. The file has to be in MP4 format (H264 codec) and it is also advisable to adjust the video size to the overall size of the project.

Video tool options

Settings

  • On page video - Videos can be viewed directly on the project page from which the full-screen mode can also be activated by using two fingers. If this option is not checked, tap the highlighted section to play the video in full-screen mode.
  • Load from web (url) - use, if the video is not supposed to be a direct part of the project. The video will be downloaded via an available internet connection each time it is played. This is convenient for the reader, because the downloaded file is smaller.

When you are using Load from web feature url address has to be linked to the existing video resource (on server available for public) and the hyperlink should look like this: http://www.coverpageapp.com/video/05_iPad.mp4

If you want to use YouTube or other resource the application will automatically open native app forYouTube on the device.

Remember that the device will not always be connected to 3G or WiFi. If the device is not connected to the internet, a window informing about the unavailability of the video will appear. It is advisable to graphically preset the page for this possibility using either a picture or written information.

  • Autoplay - the video will start automatically after the page is opened. If the Auto play-box is not checked, the video will start after the user clicks the “Play”-button.
  • Loop - the video will be automatically replayed until the user leaves the page or manually stops it. If the Loop box is not checked, the video will only be played once. The Loop is used mainly if the Video is on the page as an addition to the content.
  • Stop other sounds - if the video is being played, all other videos and sounds will stop. Otherwise, if music is playing in the background, the video and sound will be playing simultaneously.
  • Add Icon - In case of On page video your video icon will be placed on even though you do not check the checkbox. The reason is the device limitation. Video can't start playing without tapping the button.

If you have two videos, do not deal with this feature. The tablet does not allow playing two videos at the same time. If another is launched, the previous will automatically stop.

9.3 Sequence tool Sequence tool

The Sequence tool is used to increase user interactivity. It enriches the project with 3D rotation, motion, and interactivity. The user starts it by moving his finger over the screen form right to left and vice versa or up and down. The picture will be set in motion upon touching. The Sequence of pictures can also be controlled by tilting the tablet, if hardware and software are connected (check the Use Accelerometer box in the Inspector tool).

To add a sequence of pictures, proceed as follows:

  • Choose Sequence tool from the toolbar
  • Draw an interactive section above the page.
  • Set the following properties in the Inspector toolbar.

Title
Region

Pictures - choose the group of pictures using the Browse files button. It is also possible to open a picture directory containing the desired pictures; select and use the Drag and Drop function. Simply drag the pictures to the Inspector tool using your mouse. The pictures must be either in JPG or PNG format. You can add an unlimited number of pictures that are in proper order and create an animation / rotation / motion effect. The number of pictures is not limited, but it is necessary to optimize it in accordance with the performance of the device.

Scroll bar - preset the picture which will mark the beginning of the motion.

Settings

  • On Page - the sequence can be viewed either directly on the page or in full-screen mode without auto-play. If the box stays unchecked, an interactive sequence of pictures in full-screen mode will appear upon tapping the section.

    Image Sequence tool options

  • Add Icon
  • Use accelerometer - connect hardware to software. Enables interaction between the tilting of the device and control over the sequence of pictures. If the tablet is tilted, the sequence of pictures will be set in motion.
  • Continuous - used mainly with 360° rotations. If the Continuous box is not checked, the sequence of pictures will only allow the user to get to the last picture of the sequence and will then force them to return to the first picture by going in the opposite direction. If the Continuous box is checked, the user will be able to move the sequence in one way over and over in an endless loop.
  • Horizontal and Vertical - determins the motion in the interactive section (or when tilting the device) from top to bottom or right to left which the user has to do to activate the sequence of pictures. Only one can be chosen and it is advisable to adjust it to the nature of the sequence of pictures.

9.4 Scroll tool Scroll tool

The scroll tool makes the page layout more effective, since it allows for more content on one page. It also improves the design of the page layout and thus makes it more appealing. The user activates it with a top to bottom and back motion or right to left motion in the scroll area of the interactive section.

To add the Scroll tool, proceed as follows:

  • Choose Scroll tool from Toolbar.
  • Draw an interactive section above the page.
  • Set the following properties in the Inspector toolbar:

Title
Region
File - choose the content throught which the user will be able to scroll using the Browse for file. Choose one picture from the directory. A picture (or graphically processed text) saved as a PNG or JPG file can be used.

Scroll tool options

Settings

  • Bounces - eases the motion when the user gets to the margin of an object.
  • Horizontal and Vertical settings – sets the motion from top to bottom or right to left which the user has to do to activate the Scroll tool. It is possible to choose both directions at the same time if needed.
  • Add Icon

9.5 Sound tool Sound tool

The Sound tool is used for playing audio recordings used in the project. The user can activate it by tapping on the interactive section of the audio. The sound can also be played automatically so that the user does not have to tap the screen.

To add an audio file, proceed as follows:

  • Choose Sound tool from the Toolbar.
  • Draw an interactive section above the page.
  • Set the following properties in the Inspector toolbar.

Title
Region
File - choose the audio file using the Browse for file button. Choose an audio file from the directory. It is only possible to use MP3 and M4A files.

Settings

  • Autoplay - the audio will start automatically after the page is opened. If Autoplay is not checked, the audio will start after the user taps the interactive section.
  • Loop - the audio will be automatically replayed until the user leaves the page. If the Loop box is not checked, the audio will only be played once. The Loop is used mainly if the audio is on the page as an addition to the content. Together with the Autoplay feature, the audio will be played as Background music.

    Sound tool options

  • Stop other sounds - if the audio is being played, all other audios and sounds will stop. Otherwise, if music is playing in the background, two or more audio files would be playing at the same tame; this also applies to video files and the video and audio would thus be playing simultaneously.
  • Add icon

9.6 Hyperlink Hyperlink tool

The Hyperlink is used to refer to web pages and their display in either the device browser or directly in Coverpage Reader in a slide window.

To add a hyperlink, proceed as follows:

  • Choose Hyperlink tool from the Toolbar.
  • Draw an interactive section above the page.
  • Set the following properties in the Inspector toolbar.

Title
Region
URL address to which the hyperlink will be linked.

Settings

  • Open in external browser - the web page will open in an external browser. After tapping the interactive section, the user will access the desired web page. If the Open in external browser box is unchecked, the content will open directly in CoverPage Reader. The internal browser does not have the necessary control tools and does not allow navigation to other web pages. It stays within the project environment.
    However, it does have a button in the upper left corner; if the user taps it, the page will open in an external browser. The user can continue to browse in a fully functional browser and make use of all its features. Hover over the Hyperlink for a few seconds using your fingers; a menu will appear and one can choose to either open the hyperlink in an external browser, send it via email or save it.
  • Add icon

    Hyperlink tool options

9.7 Webview tool (HTML, Javascript and CSS) Webview tool

HTML object bring the full variety of the web browser features right into your project. There are several ways to use them. Add animations that will appear on the page to the project, make the pages move, increase user interactivity by posting a quiz that can be answered directly.

Inform about current events that are showing up on Facebook or Twitter. This is the only feature that requires some previous knowledge of coding. Basically, it is possible to insert any script that will operate in CoverPage Reader along with the user directly into your project.

To add a HTML object, proceed as follows:

  • Choose Webview tool from the Toolbar.
  • Draw an interactive section above the page.
  • Set the following properties in the Inspector toolbar.

Title
Region
Select Folder - – it is important to remember to link the whole directory, not just the HTML-file, if HTML uses other files (JavaScript or CSS), as well.

Webview tool options

Load from web - the web page (html) saved on the external server, will load directly onto the project page. Just insert the URL address. For example, a survey which is saved on an external server and is displayed directly in the project on the tablet. The survey can be filled out in real-time. For this feature to work, the device has to be connected to
the internet via 3G or WiFi. Otherwise, the HTML object will not open. It is advisable to graphically set the page for this possibility using either a picture or warning.

9.8 Attachment tool Attachment tool

The Attachment tool is used to open attachments (PDF, PowerPoint presentations, Excel sheet, and/or Word documents). The user opens it by clicking the interactive section of the attachment.

To add an attachment, proceed as follows:

  • Choose Attachment tool from the Toolbar.
  • Draw an interactive section above the page.
  • Set the following properties in the Inspector toolbar.

Title
Region
File click Browse for file to select a file from a directory. The document can be in .ppt, .pptx, .doc, .docx, .xls, .xlsx, or .pdf format.

Settings

Add icon

Attachment tool options

Back to Support