Using page overlays with FSI Pages

Introduction

Beginning with FSI Pages version 4 you can extend FSI Pages instances by custom Adobe Flash content like animations or FLV videos. You can specify one individual overlay for each page in an FSI Pages instance and the overlays will be displayed above the regular page content. Page overlay files are SWF files you can create using Adobe Flash editor. FSI Pages provides a light weight ActionScript interface you can use to adjust the size and position of your overlay content to the size of the FSI Pages instance at run time.
By nature creating your own overlay files requires Adobe Flash editor and good knowledge of ActionScript.
This tutorial provides a ready-to-use page overlay file and instructions on how to add streaming FLV videos to FSI Pages.

Using and Configuring Page Overlays

To add overlays to pages you need to add an child node to the FSI Pages plug-in definition of an FSI Viewer configuration file.
The configuration fragment below illustrates how to add the file “overlay1.swf” to page 4 and “overlay2.swf” to page 7.

Page Overlay Definition

 

Location for Overlay Files
All overlay files you want to use with FSI Pages need to be copied to the “/overlays” subdirectory of your FSI Viewer setup directory.

Location for Overlay files

Passing Values to Overlay Files
Most page overlay files you create or use will likely be dependent on parameters. Page overlays can access all attributes of their own definition node. As an example you might need to pass a color value to the “overlay1.swf” overlay on page 4 and a text value to your “overlay2.swf” file on page 7.
This is how to pass the parameters to your overlay files:

Page Overlay Definition

 

Defining a Default Overlay File
Besides defining individual overlay files for certain pages you might want to add an overlay file to all pages. In this case you need to add the XML attribute default=”true” to the default overlay file definition. You can nevertheless specify a different overlay or no overlay file at all to specific pages.
The sample below adds the overlay “defaultoverlay.swf” to all pages, except for page 10 (which should display “overlay2.swf”) and the front cover (page 1) which should not display an overlay at all.

Page Overlay Definition

 

Sample: Adding FLV Videos to FSI Pages using Page Overlays

After going through the basics of defining page overlays, it’s time to see how page overlays actually look like.
Below you can find the required steps to add one ore more videos to your instance of FSI Pages version 4.

Requirements:

  • Adobe Flash Player version 8 or above to view FLV videos
  • One or more videos in FLV format
  • The “videos.swf” overlay file

 

Step-by-Step Instructions how to add Videos to your FSI Pages Instance

1) Download and unpack the ZIP archive containing the files used in this sample.

2) Copy the files contained in the subdirectory of the ZIP archive to the corresponding FSI Viewer directories of your FSI Viewer setup

3) Upload the sample (or your own) FLV video file to a web server (HTTP) of yours

4) Open the FSI configuration file “/config/videooverlaysample.xml” in a text editor.
Replace the “videostreams” attribute of the overlay (“EDIT HERE”) with the URL to the FLV video you just uploaded.

Now we need to publish an FSI Pages instance using the configuration file above:

5) Log in to your FSI Server and choose a directory containing some pages (more than 5)

6) Click “Publish to Web” => “Publish as FSI Pages

7) At the top right find the “Additional Parameters” text area

8) Enter “cfg=videooverlaysample.xml” to the text area and click “Preview

You should now see the sample video on page 5 of your FSI Pages instance.

The size and position of the video very likely needs to be adjusted.
Please find below the parameters available for the videos.swf overlay file.

Parameter Reference of the “videos.swf” Overlay File

videostreams
Absolute URL to the FLV video to play. You can concatinate multiple URLs by “;” if you want to display more than one video on a page.

positions
The relative (0..1) position of the video on the page where 0 is left/top and 1 is right/bottom. You can concatinate multiple “x,y” coordinates by “;” for multiple videos on a page.
TIP: You can use the crop tool or the “selectframe” plug-in to get the x and y position for a video.

dimensions
The relative (0..1) dimension(s) of the video(s) on the page where 1 is the entire width/height. You can concatinate multiple “w,h” dimensions by “;” for multiple videos on a page.

volumes
The volume(s) of the videos (0..100). You can concatinate multiple volume values by “;” for multiple videos on a page.

video.swf overlay sample configurations