1. Getting Started

AutoViewer-Pro allows you to customize your AutoViewer galleries.

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

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

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

1.1 AutoViewer-Pro Folders

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

  • source\ folder contains source files required to compile AutoViewer.
  • web\ folder contains files to post to your website. This folder contains a version of the AutoViewer swf without the download link. To use this with your existing galleries check here.
  • examples\ folder contains examples of embedding AutoViewer in a Flash or HTML document (see Embedding AutoViewer)

2. Customizing AutoViewer-Pro

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

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

Customizing AutoViewer-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

AutoViewer-Pro shares the same XML options as found in AutoViewer. View the list of XML Options here.

To customize XML Options:

  1. Create an AutoViewer gallery
  2. Edit the gallery.xml file that is in your gallery folder using a text editor (e.g. Notepad)
  3. Reload your gallery HTML file in a browser to see your changes.

2.2 Customizing ActionScript Options

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

To customize ActionScript Options:

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

2.3 Customizing Library Symbols

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

The Library in autoviewer.fla contains the following folders:

  • Buttons folder contains the Next, Back and Play buttons graphics.
  • Download Logo folder contains symbols used for the download logo. This is the logo that appears at bottom right.
  • Caption symbol contains the caption text. Edit this to change the embedded font and the character set.

To customize Library Symbols:

  • Open \source\autoviewer.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 AutoViewer)

2.4 Customizing Source Code

For customization not covered by the 3 methods above, you can directly edit the source code. AutoViewer-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 AutoViewer).

Please note that the AutoViewer-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.

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

The classes that comprise AutoViewer are as follows:

  • StageManager - the main class that initializes the application. Handles stage layout.
  • XMLManager - handles XML loading and parsing.
  • Image - there is one Image instance for each image loaded into app. Handles Image loading + Transitions.
  • RolloverButton - Handles the Next\Back and Play buttons.
  • Options - constants that can be set to modify AutoViewer. View Options Descriptions.

2.5 Republishing AutoViewer

Republishing AutoViewer creates a new version of the autoviewer.swf file from the source files.

To republish AutoViewer:

  1. Open \source\autoviewer.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\autoviewer.swf
  3. Replace the autoviewer.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 'actionscript' layer on the main timeline of the the FLA.

3. Embedding AutoViewer

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

3.1 Embedding AutoViewer in a HTML page

Check the \examples\HTML Embed\ folder for examples of embedding AutoViewer in a HTML document. There are 3 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 AutoViewer galleries with a menu to navigate between them

3.2 Embedding AutoViewer in a Flash Movie

Embedding AutoViewer-Pro in Flash requires the embedding movie to be ActionScript 2 and requires Adobe Flash 8 (or later) authoring software. Embedding AutoViewer-Pro in Flash requires a basic level of Flash authoring experience.

Check the example file here: \examples\Flash Embed\multiple_galleries.fla. This example shows how to load multiple galleries inside a container Flash movie.

Note that AutoViewer sets Stage.align to 'TL' and Stage.scaleMode to 'noScale' in the init() function at the top of the 'Main.as' file. 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 AutoViewer galleries to AutoViewer-Pro, you just need to replace the autoviewer.swf file in your existing gallery folders with the one that comes in the Pro download (at \web\autoviewer.swf).

4.1 Upgrading the Picasa AutoViewer Template

To upgrade your Picasa AutoViewer Template installation to Pro:

  • Copy the SWF that comes in the Pro download (at \web\autoviewer.swf) to the template assets folder inside the Picasa application folder:
    • Windows: \Program Files\Google\Picasa3\web\templates\autoviewer_picasa_template\assets
    • Macintosh: Applications:Picasa.app:Contents:Resources:web:templates:autoviewer_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 AutoViewer Template

To upgrade your Lightroom v2 AutoViewer Engine to AutoViewer-Pro:

  • Copy the 'autoviewer.swf' file that comes in the Pro download (at \web\autoviewer.swf). Rename the copy to 'viewer.swf'. Copy this file into the AutoViewer Engine folder, replacing the existing file.The path to the AutoViewer Engine folder is as follows:
    • Windows: C:\Program Files\Adobe\Adobe Photoshop Lightroom 2\shared\webengines\autoviewer.lrwebengine
    • Macintosh:Applications/Adobe Lightroom 2.app/Contents/Plugins/Web.lrmodule/Contents/Resources/galleries/autoviewer.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 AutoViewer Script

To upgrade your Photoshop AutoViewer Script installation to Pro:

  • Copy the AutoViewer SWF that comes in the Pro download (at \web\autoviewer.swf) to the AutoViewer script folder inside the Photoshop application folder on your computer.

    On Windows: C:\Program Files\Adobe\Adobe Photoshop CSX\ Presets\ Scripts\ airtight_interactive / auto_viewer

    On Mac: Applications/Adobe Photoshop CSX/ Presets/ Scripts/ airtight_interactive / auto_viewer

  • Restart PhotoShop. Any galleries you create from now on will use the Pro swf.

4.4 Upgrading the Jalbum AutoViewer Skin to AutoViewer-Pro.

To upgrade the Jalbum AutoViewer Skin to AutoViewer-Pro:

  • Copy the 'autoviewer.swf' file that comes in the Pro download (at \web\autoviewer.swf). Rename the copy to 'viewer.swf'. Copy this file into the \JAlbum\skins\AutoViewer\res folder, replacing the existing file. On Windows the skin folder may be in the 'C:\Users\my_username\AppData\Roaming\JAlbum' folder.
  • Restart Jalbum. Any galleries you create from now on will use the Pro swf.