PostcardViewer-Pro Documentation

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

Index:

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

1. PostcardViewer-Pro Folders

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

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

2. Customizing PostcardViewer-Pro

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

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

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

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

To customize XML Options:

1. Create an PostcardViewer 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

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

To customize ActionScript Options:

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

2.3 Customizing Library Symbols

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

The Library in postcardviewer.fla contains the following folders:

• 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.
• Frame symbol is the asset used for the image frames.

To customize Library Symbols:

• Open \source\postcardviewer.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 PostcardViewer)

2.4 Customizing Source Code

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

PostcardViewer classes can be found in this folder: \source\com\airtightinteractive\apps\viewers\postcardviewer\

The classes that comprise PostcardViewer are as follows:

• Main - the main class that initializes the application. Handles stage layout.
• ViewArea - handles zooming between images
• XMLManager - handles XML loading and parsing.
• Image - there is one Image instance for each image loaded into app.
• TweenExtended - Handles tweening multiple properties
• Options - constants that can be set to modify PostcardViewer. View Options Descriptions.

2.5 Republishing PostcardViewer

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

To republish PostcardViewer:

1. Open \source\postcardviewer.fla using Macromedia Flash MX04 (version 7.2 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.

3. Embedding PostcardViewer

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

3.1 Embedding PostcardViewer in a HTML page

Check the \examples\HTML Embed\ folder for examples of embedding PostcardViewer 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 PostcardViewer galleries with a menu to navigate between them

3.2 Embedding PostcardViewer 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 that PostcardViewer 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 PostcardViewer galleries to PostcardViewer-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 PostcardViewer Template

To upgrade your Picasa PostcardViewer Template installation to Pro:

• Copy the viewer.swf that comes in the Pro download (at \web\viewer.swf) to the web\templates\postcardviewer_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 PostcardViewer Template

Lightroom currently exports to PostcardViewer v1.1. To use PostcardViewer-Pro v1.2 with Lightroom do the following:

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

  On Mac: Users/username/Library/Application Support/Adobe/Lightroom/Web Galleries/TTGPostcardViewerGallery.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\TTGPostcardViewerGallery.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\TTGPostcardViewerGallery.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. PostcardViewer-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.