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:
- the XML Options
- the ActionScript Options
- the library symbols, or
- 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:
- Create an AutoViewer gallery
- Edit the gallery.xml file that is in your gallery folder using a text editor (e.g. Notepad)
- 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:
- Open \source\com\airtightinteractive\apps\viewers\autoviewer\Options.as using a text editor (e.g. Notepad)
- Modify the values as required.
- 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).
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:
- Open \source\autoviewer.fla using Macromedia Flash 8 (or later).
- Do File->Publish to publish your updated swf. The new swf will be created as: \web\autoviewer.swf
- 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
- 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.