Bluefire Blog

All AMG galleries have an about screen, and they are often under-used. Perhaps in part because most people don’t know that you can put all kinds of content in there by simply editing the group.xml file. It supports basic html formatting too. For a basic example of this, check out the “about” screen on our portfolio gallery at http://www.bluefire.tv/onlinePortfolio.html

To see how we did this, look at the group xml file here: http://www.bluefire.tv/resources/groups/featuredProjects.xmll

Look at the groupDescription node

After we released the 1.2.0 version of Adobe Media Gallery to SourceForge, we received many question about how to install the new gallery in Bridge CS3, Lightroom and Photoshop Elements. Well, we heard you! and are planning to write some posts, as time permits, about just how to do that.

Since by the far the greatest number of request were for Bridge on Windows that is where we will start. And although the specific steps below are for that product/platform they should help anyone trying to get AMG 1.2.0 running with menu commands.

(more…)

We’ve received lots of questions about how to add links to LR/AMG Flash Galleries. Here’s a couple tips on that:

The easiest way to add a link is to put one on the right side of the menu bar by simply typing your URL, ie http://www.bluefire.tv into the “Web or Mail Link” field in the “Site Info” panel in LR’s Web Tab. This will cause the text you put into the “Contact Info” field (in that same panel) to be a link to that URL. If you are already using that field for your email address and are looking for an additional way to add links there are many options:

1. Put links in the caption area: The only way to add other links from within LR is to add a link in either the “caption” or “title” text fields (appears just below the images) To do that, you’d go to the “Image Info” panel, and choose the “custom text” option in the drop down menu in either the “Title” or “Caption” area. Then type (more likely paste) your link tag in the custom text input field eg:
<a href=”http://www.bluefire.tv”>Bluefire</a>

2. Put links in the HTML page: Open the html page of your gallery in a text editor and add links above or below the gallery movie – If you don’t already know how to do that, refer to my blog post here which describes the most basic way to insert an image above the gallery movie for reference, but instead of inserting an image tag, you simply insert a link tag eg:
<a href=”http://www.bluefire.tv”>Bluefire</a> you can do the same thing on the bottom, just before the closing tag.

3. Make your Site Title or Collection Title a link: (This is the text that shows up in the header of the gallery) you can’t add the link from within LR, but it is really easy to do in a text editor. Simply open the group.xml file of an exported gallery in notepad or some other simple text editor and put a link tag in either place and save it. eg:
<a href=”http://blog.bluefire.tv”>bluefire blog</a>
<a href=”http://www.bluefire.tv”>bluefire</a>

4. Add menus/menu items that have links (more on that coming very soon)

Did you know that you can modify the menus and menu items in the Flash galleries generated by Adobe Photoshop Lightroom and Bridge CS3? Well, you can, and soon you can do even cooler things with those menus. You can add whole new menus that change styles on the fly (changing things like colors and layouts), menus that load a whole different set of images into the gallery, or menus with links to other html pages. You can even create menu items that do multiple things at once (e.g. load a new set of images AND change the style). To see what I’m talking about, check out this sample gallery.

(more…)

Many of you have been asking question about our recent posts concerning embedding the Adobe Media 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 therefore 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.

Unfortunately this 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.

read on…

We’ve had several requests for an easier way to add background music to the Flash galleries without having to know how to author Flash. This could have been done in such a way that an “add music” option appeared in the application UI’s, but that would take more time than I have at the moment (as I’d need to do three variations on that for the different app’s gallerymaker implementations). So I’ve put together a quick and dirty solution (albeit requires you to edit the XML -but that is easy!).

Basically it is a flash movie (bgmusic.swf) that you can insert into your exported gallery as a “background image” (though there is nothing “visible” in this movie) and which plays any mp3 file that you want.

Here’s how to do that in four easy steps:
1. right click on this link and choose “save link as” to save the bgmusic.swf to your hard drive in the “resources” folder of your Lightroom Flash gallery.

2. open the “style.xml” file found inside the “styles” folder there in that same resources folder with your favorite text editor

3. find the line of text that looks like this: <backgroundbgimg alpha=”100.00″ src=”"/> - about 2/3 of the way down (line 73 in the Lightroom version) and add the path to the bgmusic.swf into that tag. It should then look like this: <backgroundbgimg alpha=”0.00″ src=”resources\bgmusic.swf”/>
(Elements 5 users should be aware that the relative paths in their galleries are “hard coded” (via the baseref flashvar) to look in the “resources” folder, so it will not work if you include that folder name in the path. So your tweak to the style file would look like this: <backgroundBgImg alpha=”0″ src=”bgmusic.swf” /> )

4. take your background music clip (must be in mp3 format) and copy it into the resources folder as well, and rename it “bgmusic.mp3″

that’s it! Here’s a sample gallery that uses this approach.

Sound that automatically plays in websites is appropriate in some circumstances, and terribly annoying in others. This can be particularly true when you don’t offer volume controls or a mute button (which this movie does not have). So please be thoughtful about where and when to use this. When I have more time, I’ll make one with at least a mute button and post it.

Have fun!

If you’ve been following this blog, you know that Bluefire designed and developed the AMG Flash Gallery found in the web gallery export features of Lightroom 1.0 and Elements 5.0. Well, now it is in Bridge CS3 too! To be more precise, A beta version of the AMG engine (which adds AMG based HTML or Flash gallery export featuers to Bridge CS3) is available for download on Adobe Labs. This is good news for Flash developers, because you can make your own gallery templates and distribute them to users of Bridge, Elements or Lightroom (or all three). Keep in mind that the AMG system allows the gallery template to be ‘paired” with an XML file that causes customization controls to appear in the “host” application. So not only can you as a Flash developer create a gallery template, you can provide your end users with UI controls to customize the template in a wide variety of ways (colors, fonts, layout options, etc). For more info, check out this post on John Nack’s blog.

For more developer oriented info on AMG, read some of the prior articles on this blog, or check out this Adobe Devnet article. and Jeff Tranberry is posting some helpful info as well.

Today Adobe released the the source code for the swf (designed and developed by Bluefire) that powers the Flash web galleries exported from Photoshop Lightroom 1.0. To download the source code, visit the Adobe Media Gallery on opensource.adobe.com at http://opensource.adobe.com/amg/ and click on the “download” link in the left nav bar. The LR version is AMG 1.0.1

AMG source code was originally open-sourced back on Nov ‘06, but it was the version used in Photoshop Elements 5.0 which shipped several months before Lightroom 1.0. There are a couple of nice changes that were made in the LR version. The biggest feature change was the addition of the “image size rendition auto-swap” behavior. The biggest visual change was in the treatments of scroll bars (which also got their own style customization params). There were several other “under the hood” improvements made to the loading management routines, both in Live Preview mode and when published on the web that make large galleries load more intelligently. Also, LivePreview mode was beefed up considerably to allow for a real-time preview of more customization options.

Here are links to a couple sample AMG 1.0.1 galleries: The first is the sample gallery that is included in the download package. This other one is the “featured projects” page of our website - note that we only used two image size renditions for that. Both of these galleries use the “scrolling left” layout. I’m trying to find good examples of galleries using the “bottom scrolling” layout opttion and the “paged thumbnails” option. If you know of any, please add a comment.

For more info about AMG, check out this article in the Adobe Developer Center, and stay tuned to this Blog for more info coming soon.

Photoshop Elements 5.0 was the first Adobe application to ship with an AMG-based Flash Gallery export feature. And if the thousands of galleries Elements users have posted to Adobe Photoshop Showcase in the prior months are any indication, it has been a popular feature! In the past, most Flash based content on the web was created by creative pros. It is really neat to see this and other Adobe initiatives beginning to put tools into the hands of consumers that allow them to create and publish their own rich, interactive content.

It is amazing to see how on one side the Flash platform is being embraced by many more hard-core developers, in part because of Flex and Apollo, and on the other hand consumers are getting into the act sharing their videos, photos, and expressing their creativity via a host of new Flash enabled web services and desktop apps. These two trends are clearly amplifying each other. It is a new day for Flash, and Bluefire could not be more excited to be playing a role in that.

There are a few features of Photoshop Lightroom Flash Web Galleries that I think are particularly cool - especially given that they are AS2 based. I’ll list them here and then discuss them in more detail in subsequent posts:
Fluid Layout
Auto-Swap Image Renditions
Style Customization via XML
Real-time Preview within Lightroom
Smart Loader
Synchronized Views
Multiple Media Type Support
HTML formatting
Adobe Media Gallery XML Specification Compliance

I’ve mentioned before that you can add FLV video clips to Flash Galleries created with Photoshop Lightroom. One important tip that I neglected to include however, is that the flv clips need to be placed in a file location that is “next to” or “under” the gallery.swf. Meaning that the flv clip needs to be anywhere inside the same directory as the gallery.swf (-the “Resources” folder). It can be in a sub folder though, so you could add a “Videos” folder inside “Resources” and put the clips in there. If you instead put the flv clip(s) into the “bin” folder along with the images, (which would otherwise seem to be the right place for it) it won’t work because that bin folder is not a child of “Resources”.

I’ve posted a bit of info in Tips #9 about advanced mode, here I’ll break down that panel a bit more and describe what each control does. To re-iterate, Advanced mode has been described as an experimental, unsupported feature. This appears to be accurate, as many of the controls do not “live preview” inside the app, and you’ll often need to “preview in browser” to see the effects of the settings. I personally find it more efficient to export a gallery first, and then edit the xml files. This way I can immediately “refresh” the preview and see the effects, without having to wait for the preview to be generated each time I make a tweak to a setting in the panels. That said, the panel controls can be very handy if you are exporting multiple galleries and already know the setting you want to apply.

read on…

When exporting a Flash gallery out of Photoshop Lightroom 1.0 it exports three rendition sizes of each image. Those three sizes are “relative” to the “preview size” setting, which you could kind of think of as setting the size for the “largest” of the three.

When the gallery is loaded into a browser, the gallery automatically detects the size of the window, looks at the rendition sizes available, and then downloads the largest rendition size that will fit into the window. It then does some pretty sophisticated pre-fetching of the other images of that size based on visitor behavior (linear vs non-linear browsing of the gallery). The gallery does not download the other renditions at all - unless the end user changes the size of their browser window such that a different rendition size should be used.

read on…

It appears that Flash galleries generated by Photoshop Lightroom 1.0 that have images in the header (for example, an Identity Plate) sometimes have a problem loading images. It seems to occur only on galleries hosted on certain web servers, and then only on certain end-user machines.

**Update This is fixed in LR 1.1

If you wanted an alternative method to put your logo above a gallery, you could add it to the html page itslef, and then “turn off” the header in the gallery.

Here’s how you’d do that:

Photoshop Lightroom 1.o will let you put a custom graphic/identity plate in the header of a Flash gallery. But, sometimes it is hard to tell how it will be scaled. Here’s some info on that. The gallery header can contain a graphic that is up to 46 pixels tall, and up to 600 pixels wide. If you have a long string of text in the right side of the header, it can cause the text on the right to truncate if the browser window is small, and when this happens the baseline of the text shifts downwards a bit (bug). So if you use a really wide graphic, make sure to preview it in a browser window at the smallest size that the gallery will fluidly scale down to (about 650 pixels wide). Note that you can put a .jpg, gif, or PNG graphic in there, or a SWF. To do this manually you’d edit a line of text in the style.xml file of an exported Flash gallery:

<pageTitleImg visible=”true” src=”bin/images/myheadergraphic.swf”/>

Note that it appears that galleries hosted on certain web servers, and then on some end-user machines have a problem loading images when a graphic is in the header. I’ve posted some additional info about that here