Overview
Features
System requirements
Installation
File organization
XML structure
SpeedSense
Internationalization
Customization
    Interface icons
    Size of Flash movie and posititions of interface elements
    Colors
    Text formats and fonts
    Default file locations
License
Disclaimer
About author
Overview
exposé is a Flash-based software for creating photo and video slideshows for the Web. It is highly customizable, is driven by XML, supports nested albums, and comes with Windows and Mac OS X applications to help you efforlessly manage your multimedia collection.
Features
The following features are supported:
  • Nesting of albums, and assigning thumbnails to albums and album collections
  • Assigning a description and audio commentary to each image
  • Image strip view for previewing images
  • Full internationalization of the interface text through a string list file
  • Customization of the interface layout, sizes and and the button icons
  • Playing slide shows
  • Image pre-loading
  • Multiple streams per video
  • SpeedSense mechanism for automatic stream assignment based on the user's bandwidth
System requirements
To create your albums you can either use one of the manager applications downloadable from the exposé web site, or your own text editor that supports UTF-8 encoding. You can preview your albums using any browser that has the Macromedia Flash Player 7 installed.

You can post your photos on any web server. The end user will need to have the Flash Player 7 installed to view your albums.

Installation
After you create your first album you will have to upload expose.html, showpic.html, and the expose folder to your web server. They will have to go into the same folder on the server. You may also rename expose.html to something more appropriate for your situation, e.g. photos.html.

Anytime after that when you edit your photos albums you will have to upload/synchronize the xml and img subfolders found in the expose folder.

The exposé package comes with a sample album accessible through expose.html that you can delete before you start to create your own collection. To do that delete all folders in the img folder, all files found in the xml folder.

File organization
The files are organized as follows:
  • the Flash movie files (main movie, button icons, and font assets) reside in the swf subfolder inside the expose folder; this structure is necessary for the proper loading of these files, and can only be changed by recompiling the main movie SWF file
  • all images, videos and audio commentary MP3s go by default into the img subfolder inside the expose folder, where you can further categorize them by placing them into separate folders
  • the album and description data go into the xml subfolder inside the expose folder
  • the configuration, text formatting, and strings XML files reside in the config subfolder inside the expose folder

Each picture consists of two files -- one thumb-sized used in the image strip, and a larger one used in the full-size display mode -- which reside in the same folder. The general naming convention for the smaller image file is to use the file name of the larger image and prepend it with _sm_. For example if your full-size image file is chicago.jpg the thumb image would be named _sm_chicago.jpg. This nomenclature is not required, but helps when you view your files in a file manager on your operating system (e.g. Windows Explorer, Mac OS X Finder). An audio commentary MP3 file can also be bundled with a picture, and its file name is prepended with _au_, e.g. _au_chicago.mp3 for the chicago.jpg image. These naming conventions are only required if you are going to edit your albums using one of the provided manager applications.

The default setup that comes with the exposé package is suitable for thumb-size images not taller than 200 pixels, and full-size images not taller than 400 pixels. Check the Customization section to find out how to resize the movie and reposition the interface elements within it to be able to accomodate other image sizes.

The album and album collection thumbnail images should be no larger than 64x48 pixels if you use the default configuration.

It is prudent, but not required, to use all lower-case file extensions, e.g. jpg instead of JPG, and in some cases even lower-case file names, e.g. chicago.jpg instead of Chicago.jpg.

Videos consist of one or more streams, and thumbnail image representative of the video. It is easier to manage the different streams by giving them similar names, e.g. wedding_100k.flv, wedding_500k.flv, etc., and a similarly for the thumbnail file, _th_wedding.jpg. The 100k and 500k in the example denote the bitrate of each stream.

Refer to the Customization section to see how you can modify the default locations if you want to serve dynamic content, or use a folder structure that you prefer.

XML structure
Read this section if you will use a text editor to modify your albums, or if you want to serve dynamic content.

Your albums are defined succinctly in albums.xml. Only basic information such as titles and locations of the content XML files, etc. is specified there. Here's a simple example, and a discussion of its structure:

<?xml version="1.0" encoding="utf-8"?>
<expose version="2.1">
  <collection>
    <collection>
      <title>A collection</title>
      <album>
      <loadfirst />
        <title>An album</title>
        <thumb>
          <url>thumb.jpg</url>
        </thumb>
        <contentnumber>10</contentnumber>
        <contentxmlurl>album_somealbum.xml</contentxmlurl>
      </album>
    </collection>
    <album>
      <title>Another album</title>
      <description>Pictures of my vacation</description>
      <contentnumber>20</contentnumber>
      <contentxmlurl>album_myotheralbum.xml</contentxmlurl>
    </album>
  </collection>
</expose>
As you can see the XMl file is enclosed in an expose element with a version attribute. This convention is used for all XML files used by exposť. The version attribute is used to determine the structure of the XML file.

Following the expose element is a collection element enclosing the remainder of the XML elements in albums.xml. The collection element is used to nest albums. It acts much like a folder, but it holds albums instead of files. You can place other collection elements in a collection element, or you can place one or more album elements. Each collection contains a title element used to display the collection inside exposé. An optional thumb element may indicate that the collection has a thumbnail image associated with it; this element is described in the next paragraph. You can see from the example above that there is a A collection collection inside your root collection. This collection in turn contains one album.

The album element similarly has a title element. In addition it may have a description element where you put a detailed description of the photos inside that album. The thumb element in the first album in the example indicates that the album has a thumbnail image and an url subelement points to the location and file name of that image, in this case thumb.jpg. A contentnumber element specifies the number of photos in the album, and a contentxmlurl specifies the URL of the XML file containing the descriptions of each photo in the album. This URL can either be absolute (using an http:// modifier) or relative, as is the case in the example above where the file name is used as the URL. More on the contentxmlurl element in the Customization section.

In addition, the album element may contain an empty loadfirst subelement. This subelement tells exposé to load that album when starting up, bypassing the album list panel. In the example above, the An album album will automaticaly load on startup.

The descriptions of each photo or video in an album are stored in a separate XML file, such as album_somealbum.xml as in the example above. Let's look at a simple case of such a file:

<?xml version="1.0" encoding="utf-8"?>
<expose version="2.1">
  <picture>
    <title>Downtown Chicago</title>
    <date>October 2004</date>
    <location>Chicago, Illinois</location>
    <description>A skyscape shot of Chicago. \n Sears tower 
      is in the left corner</description>
    <image>
      <url>cities/chicago.jpg</url>
    </image>
    <smallimage>
      <url>cities/_sm_chicago.jpg</url>
    </smallimage>
    <audio>
      <url>cities/_au_chicago.jpg</url>
    </audio>
  </picture>
  <picture>
    <title>Times Square in NYC</title>
<image> <url>cities/nyc_timessquare.jpg</url> </image> <smallimage> <url>cities/_sm_nyc_timessquare.jpg</url> </smallimage> </picture> <video> <title>Jack's wedding</title>
<thumb> <url>videos/_th_wedding.jpg</url> </thumb> <video> <stream bitrate="1000"> <url>videos/wedding_1000k.flv</url> </stream> <stream bitrate="500"> <url>videos/wedding_500k.flv</url> </stream> </video> </video> </expose>

Again all elements in the photo and video list are enclosed in an expose element with a version attribute.

Each picture is defined in a picture element. The picture has a title, specified in a title element. A date, a location, and a description can also be specified in elements with the same name, but they are optional. To insert new lines in a description use " \n " (without the quotes and with spaces surrounding the \n). This is necessary because the XML file is stripped of all whitespace.

The image files are defined in two elements - image and smallimage. An url subelement specifies the location of each file.

You can also specify an audio commentary MP3 file using an audio element, with a url subelement containing the location of the file.

Videos are enclosed in a video element. It contains title, date, and location elements similar to a picture element. A thumb element points to the thumbnail image for the video with a url subelement in it. A video element inside the video element lists the streams. Each stream is enclosed in a stream element. The stream element contains one attribute called bitrate, which indicates, in kilobits, the bitrate of that particular stream (this value is used by SpeedSense to select an appropriate stream for each visitor, dependingn their estimated bandwidth). A url element containing the URL of the stream goes inside the stream element.

The example above indicates that the album contains two pictures, the first of Chicago with audio commentary, and the second of Times Square in NYC without. It also contains a video of Jack's wedding.

For information about the XML structure of the configuration, formats, and strings XML files see the Customization and Internationalization sections.

SpeedSense

SpeedSense is the mechanism that exposé uses to determine a visitor's bandwidth and select an appropriate video stream that will make uninterrupted playback more likely.

This feature is turned off by default, and you can turn it on by editing the SpeedSense Emabled coniguration parameter in config.xml.

SpeedSense works by loading a dummy JPG file, located in expose/img/dummy.jpg, and measuring how much the user can download in roughly 3 seconds. The default dummy file is 200KB which should be enough to obtain a good estimate of the user's bandwidth.

If all your videos consist of a single stream each, you do not need to enable SpeedStream; that will only waste bandwidth.

Internationalization
exposť includes support for using your won language in the text interface. The strings.xml file in the config folder contains the list of strings used in the Flash movie. Each string has an identifier and text placed in one or more language elements. By default strings.xml comes with an English string list. The easiest way to use your own text instead is to replace the text in the english elements in strings.xml file.

Alternatively, you can add your own language elements for each string, and change the language parameter value in config.xml (more about parameters in Customization) to your language element name. For example if you use <german>...</german> elements, you will have to change the language parameter to german.

Also, you may want to check the exposé web site for downloadable language translations.

Customization
In this section you will learn how to modify the look & feel of exposť, including the artwork, and the layout and the positioning of interface elements in the movie.
Interface icons

The icons used in the Flash movie are imported at runtime from artwork.swf found in the swf subfolder inside the expose folder. If you have Flash MX 2004 installed, you can open artwork.fla in the fla folder to edit the icon graphics. Each button icon has several states labeled on the timeframe, and you will have to keep that organization. When done modifying the icons, simply publish the movie to export to artwork.swf.

You can also check on the exposé web site for downloadable icon sets.

Size of Flash movie and posititions of interface elements

The default configuration of exposé defines the Flash movie as 900 pixels wide by 510 pixels high, which makes it suitable for images up to 400 pixels tall. You can change the movie size by opening expose.html in an HTML editor. Then change the width and height parameters in the object and embed elements.

After you resize the Flash movie, open config.xml which is located in the config subfolder inside the expose folder. This file contains several parameters for the vertical position of the main panel, the image, the image strip, etc. Edit their values to reposition these interface elements.

Colors

The stock background color used by exposé is white. You can change it by opening expose.html and editing the values of bgcolor in four places - the two bgcolor parameters in the object and embed elements, and inside the FlashVars string in those elements (so you end up changing it in 4 places). The hexadecimal value in the FlashVars string has to be stripped of the # symbol normally used in HTML for specifying colors.

To change the colors used in the Flash movie, open config.xml in an XML editor and change the values of those parameters which identify color and transparency (alpha) values.

Text formats and fonts

exposé comes prepackaged with a set of two fonts. You can use your own fonts if you have Flash MX 2004 installed. You do that by opening the fonts.fla file in the fla folder, then specifying your own fonts for runtime sharing (the fonts used in that file are Verdana and Arial), and finally publishing to fonts.swf.

To change the formatting of the text in exposé, open formats.xml found in the xml subfolder of the expose folder. Each format element specifies in a subelement the font used, the size of the text, its color, etc. Enter your preferred values to format the text your way.

Default file locations

By default exposť will look in the xml subfolder of the expose folder for all data XML files, and in the img subfolder for all images and audio.

You can change the default file names and locations for albums.xml, strings.xml, formats.xml, and config.xml by modifying the corresponding xyzXMLURL parameters in expose.html.

You can also change the base URL for the rest of the XML files, the image files, and the audio files by changing the baseXMLURL, baseImageURL, and baseAudioURL parameters in expose.html.

Note that you will have to change each parameter in two places in expose.html in order to make it work in all web browsers.

License
exposé comes with the following license:
  • You may publish the free version of exposť on your web site if you do not use it to sell or advertise goods or services
  • A one-site license, which you can purchasec for $50 USD, allows you to use exposť on a a single organization web-site or intranet site for the display of images; if you want to use it on 4 or more different sites, please contact me for a discount
  • You may not sell exposé, and you may not redistribute exposé without prior permission.
Other licensing options and customization of the Flash interface are also possible. Email me for inquiries.
Disclaimer
I, the author, give no warranties to the suitability of this software. Your use of exposť signifies that you will not seek compensation from the author if harm in any shape or form results from that use.
About the author
The sole person (for now) reponsible for the development of exposé and applications for it is Ivan Dramaliev. You can reach him (me) at junker@slooz.com.
http://www.slooz.com