Customizing Photoshop’s Flash Web Galleries

Readers have been asking me me how to edit the Flash web galleries that come out of Photoshop’s Web Photo Gallery feature. It takes some coding, but it’s pretty easy to do if you know where to look and it doesn’t require the Flash application.

Back in November I wrote an article on Photoshop CS2’s ability to generate Flash-based web photo galleries, and how it gives anyone the ability to add the “rich media experience” of Flash to simple photo galleries online. It was a hit among readers but the question that kept coming up was, how do you customize these galleries? See below:

• “…how do you edit those galleries in Dreamweaver…to add navigations and other eliments (sic) in my templates?”
• “…How can I add description text for each projects in the flash Web photo gallery?”
• “I’m trying to change the background image of the flash galleries and am not having much luck. Is this something that has to be created in the flash source file or can this be edited in the xml file that accompanies the flash gallery?”

These are hard questions because Photoshop does not offer us a native Flash (.fla) file to edit, but a Flash movie file (.swf) that is uneditable by conventional methods. Photoshop’s Web Photo Gallery feature is not designed to give us the editing capability of the true Flash application. However, there is quite a bit of customization you can do to your Flash web galleries, and the key is in editing the XML files that come with the gallery.

ANATOMY OF THE PHOTOSHOP WEB GALLERY

Along with the “gallery.swf” file, which is the Flash movie, Photoshop generates several other files:

• “index.htm” and “index_2.htm”, which look to be exactly the same file. These HTML files allow the SWF file to play in web browsers.
• “photos.js” and “flashobject.js”, two JavaScript files that bring functionality to the HTML pages.
• “photos.xml” and “galleryconfig.xml” two XML files that deliver the actual data (image width and height, source image, titles, etc.) to the SWF file

How these files work together to create the web gallery is beyond the scope of this article, suffice it to say it involves a lot of advanced web programming and development. What we’re interested in are those XML files, because they make the data that drive the web gallery accessible and editable.

HOW TO CHANGE THE XML

XML is raw data with markup, editable by any text editor or web design layout application such as Dreamweaver. “galleryconfig.xml” controls aspects of the web gallery such as image size, the thumbnail navigation, controls and audio. It is commented, which means the author wrote in some helpful comments to help us understand what the code does. Here is a snippet (commenting and open/close tags removed):

IMAGE DISPLAY
width and height (in pixels) of border around main image
var symboltype=”number” name=”bordersize” value=”16″
color (in hex) of the main image preloader
var symboltype=”string” name=”imagePreloadColor” value=”000000″

Change the value of the variables, and the SWF file will respond accordingly.

“photos.xml” controls several other aspects of the web gallery, including color for background, text, links and more. There’s even empty tags for photographer, contact information and e-mail (lines 11–13) that you can fill in and they will display in the SWF file. If you don’t know anything about coding, all it takes to fill in these tags is to type in the data between the tags.

YOU ARE LIMITED BY THE FLASH MOVIE

The XML files allow for customization of several aspects of the SWF file, but you are limited by the makeup of the SWF file itself. The SWF file is only looking for specific XML data such as image source, width, height, photographer and more, and if you were to edit the XML file so a new XML tag (descriptive text, for example) the SWF file would not be looking for it so it’s a lost cause. The SWF file, like all Flash movies, is protected from editing even in Flash so you are stuck with its composition. If you are looking for more customization than the XML files can offer you, then it would be best to create your own Flash web gallery and control it from a native file. Or you may find some software out there designed to crack into SWF files. Or maybe in a future version of Photoshop the Web Photo Gallery feature would generate not only a SWF file but a native Flash file as well. Now that Adobe and Macromedia are one, the possibility of this is much greater.