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

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:

source\ folder contains source files required to compile SimpleViewer.
web\ folder contains files to post to your website. This folder contains a version of the SimpleViewer swf without the download link. To use this with your existing galleries, copy the viewer.swf from this folder into your existing gallery folders.
examples\ folder contains examples of embedding SimpleViewer in a Flash or HTML document (see Embedding SimpleViewer)

2. Customizing SimpleViewer-Pro

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

the XML Options
the ActionScript Options
the library symbols, or
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:

Create a SimpleViewer gallery
Edit the gallery.xml file that is in your gallery folder.
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:

Open \source\com\airtightinteractive\apps\viewers\SimpleViewer\Options.as using a text editor (e.g. Notepad)
Modify the values as required.
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:

Download Link folder contains the symbols that comprise the download link. This is the link that appears in the bottom left.
Navigation Buttons folder contains symbols used for the image and thumbnail navigation buttons.
Preloaders folder contains the swf and image preloader symbols.
Text folder contains the title and caption text. Edit these to change the embedded font and character set.
Thumbnails folder contains symbols used in the thumbnails.

To customize Library Symbols:

Open \source\simpleviewer.fla using Adobe Flash Professional (CS3 to CS6).
Do Window->Library to show the Library.
Browse and modify the symbols in the Library.
Republish your SWF (See 2.5 Republishing SimpleViewer)

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:

StageManager - the main class that initializes the application. Handles stage layout, title and caption text
ImageArea - ImageArea is the holder that containd the large images. Handles image arrows navigation, showing image error icon, resizing, loading images in sequence.
ThumbArea - ThumbArea is the holder that contains thumbnails. Handle loading of thumbs, thumb page navigation.
XMLManager -Handles xml parsing. Sets app settings based on XML attributes. If XML values are missing, use default settings defined here. If override values defined in Options class, override values.
Options - SimpleViewer options. Change values in this file to modify the behaviour of SimpleViewer.
Image - One Image instance for each large image that is loaded. Handles Image loading + Transitions + Frame drawing.
Thumb - Handles UI for a SimpleViewer Thumbnail. Most thumb elements are drawn programmatically via the Drawing API. Some Elements are attached from the library.
RolloverButton - Button shifts on press/release. Used for image and thumbnail navigation buttons.

2.5 Republishing SimpleViewer

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

To republish SimpleViewer:

Open \source\SimpleViewer.fla using Adobe Flash Professional (CS3 to CS6).
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.
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:

"The class or interface 'StageManager' could not be loaded." This occurs when Flash cannot find the required ActionScript files. This can happen if 'simpleviewer.fla' has been moved relative to the 'source' folder. The subfolders of the SimpleViewer-Pro folder need to be kept intact for a publish to work.
"Error creating SWF movie file". This occurs when the 'source' folder has been moved relative to the 'web' folder. The subfolders of the SimpleViewer-Pro folder need to be kept intact for a publish to work.

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:

box example - example of a fixed width and height viewer inside a webpage
strip example - example of a 100% width strip viewer inside a webpage
multiple galleries example - example showing multiple SimpleViewer galleries with a menu to navigate between them

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:

Copy the SWF that comes in the Pro download (at \web\viewer.swf) to the template assets folder inside the Picasa application folder:
- Windows: \Program Files\Google\Picasa3\web\templates\simpleviewer_picasa_template\assets
- Macintosh: Applications:Picasa.app:Contents:Resources:web:templates:simpleviewer_picasa_template:assets (To browse inside a package, use ctrl-click and select "Show Package Contents")
Restart Picasa. Any galleries you create from now on will use the Pro swf.

4.2 Upgrading the Lightroom SimpleViewer Template

To upgrade your Lightroom SimpleViewer Template installation to Pro:

Copy the SimpleViewer SWF that comes in the Pro download (at \web\viewer.swf) to the SimpleViewer template folder inside the Lightroom application folder on your computer. The path to the Lightroom application folder is:
- Windows: \Program Files\Adobe\Adobe Photoshop Lightroom [version]\shared\webengines\ simpleviewer.lrwebengine
- Macintosh: /Applications/Adobe Lightroom.app/Contents/PlugIns/ Web.lrmodule/ Contents/ Resources/ galleries/simpleviewer.lrwebengine. (To browse inside a package use ctrl-click and select "Show Package Contents")
Restart Lightroom. Any galleries you create from now on will use the Pro swf.

4.3 Upgrading the Photoshop SimpleViewer Script

To upgrade your Photoshop SimpleViewer Script installation to Pro:

Copy the SimpleViewer SWF that comes in the Pro download (at \web\viewer.swf) to the SimpleViewer script folder inside the Photoshop application folder on your computer. The path to this folder is:
- Windows: \Program Files\Adobe\Adobe Photoshop CS2\Presets\Scripts\airtight_interactive\simple_viewer
- Macintosh: /Applications/Adobe /Adobe Photoshop CS2/Presets/Scripts/airtight_interactive/simple_viewer
Restart PhotoShop. Any galleries you create from now on will use the Pro swf.

4.4 Upgrading the Aperture and iPhoto Plugin

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

Copy the SimpleViewer SWF that comes in the Pro download (at \web\viewer.swf) to the desktop. Rename it to "SimpleViewer.swf". Copy this file into the folder specified below, replacing the existing file. (To browse inside a package use ctrl-click and select "Show Package Contents") The path to this folder is:
- Aperture: Users / "your user name" / Library / Application Support / Aperture / Plug-Ins / Export / FlashAlbumexporter.ApertureExport / Contents/ Resources
- iPhoto: Users / "your user name" / Library / Application Support / iPhoto / Plugins / FAE4iPhoto.iPhotoExporter / Contents/ Resources
Restart Aperture and/or iPhoto. Any galleries you create from now on will use the Pro swf.

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?

Open \source\simpleviewer.fla using Adobe Flash Professional (CS3 to CS6).
Do Window->Library to show the Library.
Open the 'Text' folder. Edit the 'Caption' and 'Title' symbols.
Select the text field on the stage. Select a font from the Properties-> Font drop-down menu. To use an embedded font, slect 'Anti-Alias for Animation' from the 'Use device fonts' drop-down. Then select the required character range in the 'Character Embedding' menu. For basic english language, select the 'Basic Latin' character set.
Note that if you require bold and/or italic fonts, you must also embed these versions of the fonts.