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

HTML Sample

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.

One was that the page needed to employ the “Express Installer” script that automates the installation of Flash Player.  This requires a lot of JavaScript.  The other was that the page needed to use the “Active Content Workaround” for Internet Explorer that enables the embedded swf to be active without first clicking on the control.

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.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gallery</title>
</head>

<body>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width="100%" height="100%"
codebase="http://download.macromedia.com/pub/shockwave/
cabs/flash/swflash.cab">

<param name="movie" value="resources/gallery.swf"/>
<param name="flashvars"
value="livePreview=false
&baseRefUrl=resources/
&groupxml=groups/group.xml
&stylexml=styles/style.xml
&localText=localization/localText.xml"/>
<param name="id" value="gallery"/>
<param name="quality" value="high"/>
<param name="align" value="middle"/>
<param name="name" value="gallery"/>
<param name="bgcolor" value="#f7f7f7"/>
<param name="allowScriptAccess" value="sameDomain"/>
<param name="menu" value="true"/>

<embed src="resources/gallery.swf"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
flashvars="livePreview=false
&baseRefUrl=resources/
&groupxml=groups/group.xml
&stylexml=styles/style.xml
&localText=localization/localText.xml"
width="100%" height="100%" quality="high" align="middle"
allowScriptAccess="sameDomain">
</embed>

</object>

</body>
</html>

FlashVars Values

livePreview default=false
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.

baseRefUrl default=resources/
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)

groupxml default=groups/group.xml
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.

stylexml default=styles/style.xml
This points to the style file for the gallery which holds layout, color and config data dictating how the gallery looks.

localText default=localization/localText.xml
This points the localization file where all string  values for menus and interface elements are located.