simpleviewer.netPRODUCTS | SUPPORT | NEWS | ABOUT

SimpleViewer-Pro v1.9 Support

This document applies to SimpleViewer-Pro version 1.9. SimpleViewer-Pro has been upgraded to version 2.3.0. View upgrade information.

This User Manual will help you customize SimpleViewer-Pro 1.9 to fit your requirements.


  1. Using SimpleViewer-Pro
    1. SimpleViewer-Pro Folders
  2. Customizing SimpleViewer-Pro
    1. Customizing XML Options
    2. Customizing ActionScript Options
    3. Customizing Library Symbols
    4. Customizing Source Code
    5. Republishing SimpleViewer
    6. Customizing the Preloader
  3. Embedding SimpleViewer-Pro
    1. Embedding SimpleViewer in a HTML page
    2. Embedding SimpleViewer in a Flash Movie
  4. Upgrading Existing Galleries to SimpleViewer-Pro
    1. Upgrading the Picasa Template
    2. Upgrading the Lightroom Template
    3. Upgrading the Photoshop Script
    4. Upgrading the Aperture and iPhoto Plugin
  5. SimpleViewer-Pro FAQ

1. Using SimpleViewer-Pro

SimpleViewer-Pro allows you to customize your SimpleViewer galleries.

To create a new SimpleViewer-Pro gallery, first use any of these methods to create a regular SimpleViewer gallery. Then upgrade the gallery to SimpleViewer-Pro by replacing the 'viewer.swf' file in your gallery folder with the one that comes in the Pro download (at '\web\viewer.swf').

To create galleries with a customized version of SimpleViewer-Pro, first create your customized SWF. Once you have a customized SWF, copy it into your existing SimpleViewer gallery folder, as described in the previous paragraph.

To upgrade an existing SimpleViewer gallery to SimpleViewer-Pro or to use SimpleViewer-Pro with a Template or Plugin, check here.

1.1 SimpleViewer-Pro Folders

The following folders are in contained in the SimpleViewer-Pro download:

2. Customizing SimpleViewer-Pro

There are 4 ways to customize SimpleViewer-Pro, by modifying:

  1. the XML Options
  2. the ActionScript Options
  3. the library symbols, or
  4. the source code.

Customizing SimpleViewer-Pro requires Adobe Flash Professional (CS3 to CS6) authoring software. A free 30-day trial of Flash Professional CS6 can be downloaded here.

2.1 Customizing XML Options

SimpleViewer-Pro uses the same XML and HTML options used by SimpleViewer. View SimpleViewer Config Options here.

To customize XML Options:

  1. Create a SimpleViewer gallery
  2. Edit the gallery.xml file that is in your gallery folder.
  3. Reload your gallery HTML file in a browser to see your changes.

2.2 Customizing ActionScript Options

SimpleViewer-Pro ActionScript Options are a set of ActionScript variables that you can edit to customize SimpleViewer behaviour. View the list of ActionScript Options here.

To customize ActionScript Options:

  1. Open \source\com\airtightinteractive\apps\viewers\SimpleViewer\ using a text editor (e.g. Notepad)
  2. Modify the values as required.
  3. Republish your SWF (See 2.5 Republishing SimpleViewer)

2.2.1 AutoPlay Support

SimpleViewer-Pro v1.9 supports AutoPlay mode via the AutoPlay options. When enabled, AutoPlay mode steps though the images without user interaction. An autoplay toggle button appears at the middle bottom of the current image. Manual navigation to an image turns off autoplay mode. Tapping the Spacebar toggles AutoPlay mode.

2.2.2 Back Button Support

SimpleViewer-Pro v1.9 supports an optional back button via the Back Button options. The back button appears as a text link in the top left of the gallery. Clicking the link steps back in the browser's history. The back button text is formatted in the same way as the caption text.

2.3 Customizing Library Symbols

To change the visual appearance of some elements in SimpleViewer-Pro, edit the Library Symbols in the simpleviewer.fla file.

The Library in simpleviewer.fla contains the following folders:

To customize Library Symbols:

2.4 Customizing Source Code

For customization not covered by the 3 methods above, you can directly edit the source code. SimpleViewer-Pro source code is AS2. Edit the class files (.as) using a text editor or Flash. Once you have made your changes, you will need to republish your SWF (See 2.5 Republishing SimpleViewer)

Please note that the SimpleViewer-Pro source code is provided 'as-is' to allow people with ActionScript experience to modify as required. Airtight Interactive cannot provide support for all possible modifications to the source code and cannot provide tutorials on how to code ActionScript.

SimpleViewer classes can be found in this folder: \source\com\airtightinteractive\apps\viewers\SimpleViewer\

The classes that comprise SimpleViewer are as follows:

2.5 Republishing SimpleViewer

Republishing SimpleViewer creates a new version of the viewer.swf file from the source files.

To republish SimpleViewer:

  1. Open \source\SimpleViewer.fla using Adobe Flash Professional (CS3 to CS6).
  2. Do File->Publish to publish your updated swf. The new swf will be created as: \web\viewer.swf. Check there are no errors in Flash's output window. If errors are reported check section 2.5.1 below.
  3. Replace the viewer.swf in your gallery folder with the new one, or run \web\index.html to test your new swf.

Note: SimpleViewer uses the 'uni05_54' font for the preloader text. This font is included in the 'source' folder.

2.5.1 Fixing Errors on Republish

If you see errors in the Flash output window when publishing, this means the new swf has not been created. The most common errors are:

2.6 Customizing the Preloader

Code related to the SWF and XML preloader is contained in the FLA (all other code is in the class files described in 2.4.) The preloader code is placed on the main timeline of the 'preloader' symbol in the FLA library. This is the place to edit the default path to the 'gallery.xml' file. To alter the appearance of the preloader edit the 'loader' symbol in the FLA.

3. Embedding SimpleViewer-Pro

When displaying SimpleViewer-Pro on your site you can use the standard full-page HTML template, or you can embed SimpleViewer-Pro inside a HTML page or another Flash Movie.

3.1 Embedding SimpleViewer-Pro in a HTML page

To embed SimpleViewer-Pro in an existing HTML Page, check the instructions and example here.

The following embed examples are in the \examples\HTML Embed\ folder:

3.2 Embedding SimpleViewer-Pro in a Flash Movie

Check the example file here: \examples\Flash Embed\multiple_galleries.fla. This example shows how to load multiple galleries inside a container Flash movie. SimpleViewer is written in ActionScript 2, therefore the container SWF must also be ActionScript 2.

Open multiple_galleries.fla and take a look at the ActionScript in the 'code' layer of the main timeline to see how to load in the SimpleViewer swf. Use the _global.AVStageWidth and _global.AVStageHeight values to hard-code a fixed width and height for SimpleViewer to use.

In the example, the SimpleViewer SWF is masked. You can remove the mask layer if you don't need it. Note that the system font will not show when masked so if you want captions you should embed a caption font (check the Pro FAQ, Q4 below) or remove the mask layer.

Note that the SimpleViewer FLA sets Stage.align to 'TL' and Stage.scaleMode to 'noScale' in the second frame of the fla. You may need to remove this code if the embedding movie uses a different align or scalemode.

4. Upgrading Existing Galleries to Pro

To upgrade existing SimpleViewer galleries to SimpleViewer-Pro, you need to replace the 'viewer.swf' file in your existing gallery folder with the one that comes in the Pro download (at '\web\viewer.swf').

To use a customized version of SimpleViewer-Pro with an exsiting gallery, first create your customized SWF. Once you have a customized SWF, copy it into your existing SimpleViewer gallery folder, as described in the previous paragraph.

If you are using a template to create your galleries, you can replace the template SWF with the Pro SWF. Any galleries that you create from now on will use the Pro SWF. Instructions for specific templates are below:

4.1 Upgrading the Picasa SimpleViewer Template

To upgrade your Picasa SimpleViewer Template installation to Pro:

4.2 Upgrading the Lightroom SimpleViewer Template

To upgrade your Lightroom SimpleViewer Template installation to Pro:

4.3 Upgrading the Photoshop SimpleViewer Script

To upgrade your Photoshop SimpleViewer Script installation to Pro:

4.4 Upgrading the Aperture and iPhoto Plugin

To upgrade the Flash Album Exporter plugin for Aperture and iPhoto to Pro:

5. SimpleViewer-Pro FAQ

1. How do I move the caption or the thumbnails to somewhere different?

In the AS options, set fixedLayout to true. Then use the Fixed Layout Positions in the AS Options to set the x and y positions of the different elements.

2. When I publish the SWF I see a bunch of errors that say 'There is no method with the name 'Delegate'.

SimpleViewer-Pro requires Adobe Flash Professional (CS3 to CS6) authoring software to customize. A free, fully functioning 30-day trial of Flash Professional CS6 can be downloaded here.

3. How do I position the captions somewhere other than under the thumbnails?

To position the caption text at the lower-left corner of the image, set the captionUnderThumbs AS options to false.

To position the caption somewhere else, you can use the fixedLayout AS options to specify a fixed caption postion. Other layout scenarios are not supported by the AS options and will require you to modify the stage layout code in the StageManager.doLayout() function.

4. How do I change the caption font?