SimpleViewer-Pro Documentation

This documentation will help you customize SimpleViewer-Pro to fit your requirements.

Index:

1. SimpleViewer-Pro Folders
2. Customizing SimpleViewer-Pro
3. Embedding SimpleViewer-Pro
4. Upgrading Existing Galleries to SimpleViewer-Pro
5. SimpleViewer-Pro FAQ

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:

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

Customizing SimpleViewer-Pro requires Macromedia Flash 8 (or later) authoring software. A free 30-day trial of Flash 8 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\Options.as using a text editor (e.g. Notepad)
2. Modify the values as required.
3. Republish your SWF (See 2.5 Republishing SimpleViewer)

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 Macromedia Flash.
• 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)

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.

Note: SimpleViewer uses the 'uni05_54' font for it's preloader text. You can download this font for free at: www.miniml.com/fonts/#free. It's also included in the 'source' folder.

To republish SimpleViewer:

1. Open \source\SimpleViewer.fla using Macromedia Flash 8 (or later).
2. Do File->Publish to publish your updated swf. The new swf will be created as: \web\viewer.swf
3. Replace the viewer.swf in your gallery folder with the new one, or run \web\index.html to test your new swf.

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

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

3.1 Embedding SimpleViewer in a HTML page

Check the \examples\HTML Embed\ folder for examples of embedding SimpleViewer in a HTML document. There are 2 example folders:

• 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 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.

Note you can use the _global.AVStageWidth and _global.AVStageHeight values to hard-code a fixed width and height for SimpleViewer to use.

Also note that SimpleViewer 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 just need to replace the viewer.swf file in your existing gallery folders with the one that comes in the Pro download (at \web\viewer.swf).

4.1 Upgrading the Picasa SimpleViewer Template

To upgrade your Picasa SimpleViewer Template installation to Pro:

• Copy the viewer.swf that comes in the Pro download (at \web\viewer.swf) to the web\templates\simpleviewer_picasa_template\assets folder inside the Picasa application folder on your computer.
• 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.
  • Windows: The Lightroom application folder is at:
    \Program Files\Adobe\Adobe Photoshop Lightroom 1.3\shared\webengines\ simpleviewer.lrwebengine
  • Macintosh: The Lightroom application folder is at: /Applications/Adobe Lightroom.app/Contents/PlugIns/ Web.agmodule/ Contents/ Resources/ galleries/simpleviewer.lrwebengine. To browse inside the Adobe Lightroom.app use right-click (or 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.
  On Windows this will be: \Program Files\Adobe\Adobe Photoshop CS2\Presets\Scripts\simple_viewer
  
• Restart PhotoShop. 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 Macromedia Flash version 8 (or later) authoring software to customize. A free, fully functioning 30-day trial of Flash 8 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.