PostcardViewer-Pro User Manual

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

Index:

1. Using PostcardViewer-Pro
   1. PostcardViewer-Pro Folders
2. Customizing PostcardViewer-Pro
   1. Customizing XML Options
   2. Customizing ActionScript Options
   3. Customizing Library Symbols
   4. Customizing Source Code
   5. Republishing PostcardViewer
3. Embedding PostcardViewer-Pro
   1. Embedding PostcardViewer in a HTML page
   2. Embedding PostcardViewer in a Flash Movie
4. Upgrading Existing Galleries to PostcardViewer-Pro
   1. Upgrading the Picasa Template
   2. Upgrading the Lightroom Template
   3. Upgrading the Photoshop Script
5. PostcardViewer-Pro FAQ

1. Using PostcardViewer-Pro

PostcardViewer-Pro allows you to customize your PostcardViewer galleries.

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

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

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

1.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).

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

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

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

• Copy the PostcardViewer SWF that comes in the Pro download (at \web\viewer.swf) into the PostcardViewer Engine folder, replacing the existing file.The path to the PostcardViewer Engine folder is as follows:

  On Mac: Applications/Adobe Lightroom 2.app/Contents/Plugins/Web.lrmodule/Contents/Resources/galleries/postcardviewer.lrwebengine (To browse inside a package use ctrl-click and select "Show Package Contents").

  On Windows: C:\Program Files\Adobe\Adobe Photoshop Lightroom 2\shared\webengines\postcardviewer.lrwebengine

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

4.3 Upgrading the Photoshop PostcardViewer Script

To upgrade your Photoshop PostcardViewer Script installation to Pro:

• Copy the PostcardViewer SWF that comes in the Pro download (at \web\viewer.swf) to the PostcardViewer script folder inside the Photoshop application folder on your computer.
  
  On Windows: C:\Program Files\Adobe\Adobe Photoshop CSX\ Presets\ Scripts\ airtight_interactive / postcard_viewer
  
  On Mac: Applications/Adobe Photoshop CSX/ Presets/ Scripts/ airtight_interactive / postcard_viewer
  
  
• Restart PhotoShop. Any galleries you create from now on will use the Pro swf.

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.