AutoViewer-Pro Documentation

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

Index:

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

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 Macromedia Flash 8 (or later) authoring software. A free 30-day trial of Flash 8 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 Macromedia Flash.
• 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)

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 Macromedia Flash 8 (or later).
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.

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 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 AutoViewer galleries with a menu to navigate between them

3.2 Embedding AutoViewer 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.

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

Also note that AutoViewer 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 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 autoviewer.swf that comes in the Pro download (at \web\autoviewer.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 AutoViewer Template

Lightroom currently exports to AutoViewer v1.3. To use AutoViewer-Pro v1.4 with Lightroom do the following:

• Install the TTG AutoViewer Gallery Template 1.1
• Copy the AutoViewer SWF that comes in the Pro download (at \web\autoviewer.swf) to the AutoViewer template folder inside the Lightroom application folder on your computer.

  On Mac: Users/username/Library/Application Support/Adobe/Lightroom/Web Galleries/TTGAutoViewerGallery.lrwebengine To browse inside the gallery package use ctrl-click and select "Show Package Contents".

  On Windows XP: C:\Documents and Settings\username\Application Data\Adobe\Lightroom\Web Galleries\TTGAutoViewerGallery.lrwebengine In Windows XP, the “Application Data” directory is usually hidden. You must enable “show hidden folders” in the folder options before you can browse to it.

  On Windows Vista: C:\Users\username\AppData\Roaming\Adobe\Lightroom\Web Galleries\TTGAutoViewerGallery.lrwebengine

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

To upgrade existing galleries to v1.4, check the FAQ Q7.

5. AutoViewer-Pro FAQ

1. How do I change the caption font?

Edit the 'Caption' symbol in the FLA (see section 2.3 above). Select the text field. 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.