Embedding the Flash Gallery in a Web Page using FlashVars
Many of you have been asking question about our recent posts concerning embedding the Flash Gallery in web pages. And there is some understandable confusion surrounding just how to accomplish this. The reason for this confusion is twofold. First, the html that we wrote for the gallery was (necessarily) complicated and hard to understand; second, the tips we wrote about html embedding were meant to demonstrate the default file pathing that is hard-coded into the gallery which led many of you to get the infamous ‘swirling circle of endless loading’. BUT, there is a better way to point the gallery at the right resources.
The Adobe Media Gallery was created so that the resource files (media group descriptor, style file, localization file, and the photos themselves) could be located anywhere on the internet that a URL can reach. The gallery knows where to look for these files based on FlashVars passed to the gallery from the object and embed tags in the html.
For those of you unfamiliar with Flashvars, the following Technote from Adobe is available here: Adobe FlashVars Technote
QUESTION: Why is the default html for the gallery so complicated?
When we created the html page that the AMG gallery would be embedded in there were several project requirements that led to the complicated html you see today.
For simplicity’s sake, both of these things have been removed from the html sample code below.
Here is a simple html page that embeds gallery.swf and uses the obejct and embed tag to set the required FlashVars. Below that you will find a discussion of the flashvars values and how to use them.
A value used when the livePreview mode of an embedding application (like Lightroom, Photoshop Elements or Bridge CS3) needs to be activated. You should leave this as false.
This value indicates the base URL for all references to the resource files. It is combined with each of the values below to creat the full URL path to the resource files. Setting this value to "" allows you to use fully-qualified URLs for each of the other values. (NOTE: notice the trailing slash in the default value)
The path to the media group descriptor file. This file holds file path and other media information for the gif, jpg, png or flv files that make up your gallery.
This points to the style file for the gallery which holds layout, color and config data dictating how the gallery looks.
This points the localization file where all string values for menus and interface elements are located.