Bluefire Blog

Photoshop Lightroom 1.0 does not support importing video clips into the Library, but because the Flash gallery feature of Lightroom is based on AMG, which does support video clips, you CAN have .flv video clips in a Falsh gallery that has been exported from Lightroom - you'll just have to add those manually.

When you do have a video clip in a Flash gallery, it is treated in a similar manner as an image. This means that it has a thumbnail (in all layouts other than "Slideshow Only") and a transition will occur between images and videos. When the gallery is put into "play" mode, the video clip will automatically play when it is displayed, and when the end of the clip is reached, it will automatically tansition to the next image or video. The difference is that when video clips are displayed, video playback controls (play, rewind, volume, etc) also appear. Just like everything else in the Flash gallery, the playback controls appearance can be customized.

You can see an example of a video item in our portfolio gallery. Click on the thumbnail with the laptop in it.

OK, so how do you to this? First, you'll need to create an .flv file. There's lots of tools that will do that for you (Adobe Premiere® Pro 2.0, Macromedia Flash Professional 8, and many others). Next, you'll need a thumbnail image (if you are using a gallery layout that includes thumbnails). Before creating that, you'll want to look at the thumbnail size that your gallery is set up for. To find that look in the "group.xml" file in the mediaGroupData folder in your exported gallery. For some reason the group.xml files on my machine does not open correctly in Dreamweaver so I use Notepad. Near the top you'll see:

<sizes>
<imageSize size="thumb" maxwidth="96" maxheight="96" />
<imageSize size="small" maxwidth="800" maxheight="450" />
<imageSize size="medium" maxwidth="1040" maxheight="520" />
<imageSize size="large" maxwidth="1150" maxheight="650" />
</sizes>

Here you can see that the thumbnails are 96x96 pixel max extents in this particular gallery. So you'd want to make a thumb image that fits.

While you are looking at the "sizes" node of group.xml, you'll want to add a video size within it:

<imageSize size="video" maxwidth="640" maxheight="480"/>

Once you've made the thumbnail, you'll want to place it into \bin\images\thumb and you'll want to place your video file into a gallery sub folder as well. That could be anywhere, but for this example I'll assume that you've created a folder called "video" inside \bin\images\

Now you'll need to add the path to the video in the group.xml file. If you have multiple items (images and videos) in a gallery, each one is found within an "item" node in group.xml. So decide where in the sequence you want the video to appear and add a new item node there. It would look like this:

<item>
<title>My Video Clip </title>
<description>A descriptive caption could go here .</description>
<mediaType category="video" format="flv"/>
<renditions>
<rendition size="thumb" width="96" height="96" src="\bin\images\thumb\videothumb.jpg" />
<rendition size="video" width="640" height="480" src="\bin\images\video\myvideo.flv" />
</renditions>
</item>

Your video is now added to your gallery. Next you might want to "style" your video playback controls. To do that, open style.xml and edit the following bits:

<videoCtrl>
<videoCtrlBgColor alpha="100.00" color="000000"/>
<videoCtrlBorder color="666666" alpha="80.00" width="1.00"/>
<videoDropShadow enabled="true"/>
<videoCtrlBtnFore color="FFFFFF" alpha="100.00"/>
<videoCtrlBtnBorder color="9F9F9F" alpha="100.00"/>
<videoCtrlBtnBackground color="3E3E3E" alpha="100.00"/>
</videoCtrl>

Note that the styles applied to the video control button parts (for example the button border - <videoCtrlBtnBorder color="9F9F9F" alpha="100.00"/> - also get applied to the timeline scrubber, so it takes a bit of tweaking to get just the right color combos.

You can also control how the video will scale in the browser window. You can choose to allow your video to scale up to be as big as it can be in the window (or to be more specific, whithin the image canvas area of a gallery, which itself scales in proportion to the window). Or you can choose to limit your video to only scaling up to its "native" size and then stop. The parameters for controlling this are found in the style.xml file:

<mediaPosition y="0.00" positionType="auto" fitAtStart="true" videoScale="upDown" imageScale="fitToScreen" x="0.00" height="264.00" width="360.00"/>

Valid params for "videoScale" are "upDown" and "downOnly". I have found that video scales up nicely, so I often use "upDown".

Also note that, in a gallery, video clips do not "pre-fetch", and unfortunately they do not "buffer" either. So it is worth thinking about bandwidth issues when encoding your flv.