SlideShowPro for Flash can load either FLV or H.264 encoded MOVs (more specifics about formats here) as part of slideshow content. When loaded, auto-playback of your slideshow stops, and a Media Player interface appears to control playback. In this walkthrough we'll create an FLV for SlideShowPro for Flash to load using the Flash Video Exporter application that ships with Flash CS3 (Flash 8 and Flash CS4 have Video Exporters as well). You may use a third party encoder, but the encoder must embed metadata in the FLVs it creates.

Step One: Check Content Area size, turn off Content Scale

See "Step One" in Creating slideshow content: images.

Step Two: Create FLV

Above: Flash Video Encoder

Open Adobe Flash CS3 Video Encoder. Drag the video you'd like to convert into the large, empty white area. If you'd like to encode more than one, and you're okay with processing each video using the same quality / size settings, drag more videos into this space as well. This will create a queue for the encoder to work on.

When complete, click on the "Settings" button in the right column. There are a lot of options in the Settings window, so we'll stick to the basics. First, select an encoding profile in the "Profiles" tab. For general web audiences, "Flash 8 - Medium Quality (400kbps)" is acceptable. Next click on the "Crop and Resize" tab. In the middle of the panel (shown right) is a "Resize" option with inputs for "Width" and "Height." The default values are the original dimensions of your movie.

Above: Resize utility

Next, using the Content Area dimensions from SlideShowPro for Flash, enter whichever value is the largest into the applicable field. The smaller dimension will automatically update so that your video is proportionally downscaled. For example, if the Content Area displays "483 px / 373px," enter "483" into the "Width" field. The "Height" value will automatically be calculated so that your original aspect ratio is maintained. When finished, click "OK."

Finally, click the "Start Queue" button on the right-side of the Video Encoder. After a few minutes, an FLV will be created alongside your original video.

Step Three: Move FLV and edit XML

Now that you have an FLV, move the video to the directory you're building your slideshow content in.

Then open the XML file that SlideShowPro loads and enter the path to your video as an img element. (See the "Creating an XML document" chapter for more information about XML). For example:

<img src="video.flv" />

Step Four (optional): Create navigation thumbnails

If you plan on using the "Thumbnails" style of NAVIGATION/Appearance and/or have NAVIGATION/Link Preview Appearance set to "Visible" (more on both here), then your video will require a separate bitmap image to display in those areas.

To do so, we recommend using the free, cross-platform, open source video player VLC. When installed, open your video in VLC, then pause the scrubber on the frame you'd like to use. Select Video > Snapshot, and VLC will save a PNG of that frame to your Desktop (OS X) or your Pictures folder (XP / Vista). You can either use this PNG as-is, or open in a photo editing app to resize, crop, or save in a different file format.

When you have your image ready, we recommend saving it to the "tn" folder for your album with the same file name as the video file it's associated with. For example, if your video was named "myvideo123.flv", you'd save your thumb as "myvideo123.jpg."

When complete, edit your XML file to include the video thumbnail. For example:

<gallery>
   <album title="My videos" description="My vacation videos" 
         lgpath="gallery/album1/lg/" tnpath="gallery/album1/tn/"> 
      <img src="tree.flv" tn="tree.jpg" />
   </album>
</gallery>

...or if using absolute links...

<gallery>
   <album title="My videos" description="My vacation videos">
      <img src="http://mydomain.com/gallery/album1/lg/tree.flv"
         tn="http://mydomain.com/gallery/album1/tn/tree.jpg" />
   </album>
</gallery>

Step Five (optional): Create video preview image

As outlined in the Media Player chapter, your video will load and auto-start when viewed. If you would rather not auto-start, you have the option of displaying a preview graphic for your video that appears in front of the video when loaded. You don't have to create a preview, but if you'd like to using a keyframe of your video, here's how.

First, click on SlideShowPro on the stage to select it, then open the Component Inspector panel. Set the Video Auto Start parameter to "Off."

Second, follow the instructions in Step Four above to create a bitmap from a keyframe in your video. When your bitmap file is complete, move the image to the same directory your FLV is in, and edit the XML file with either a relative or absolute URL in a vidpreview attribute. If you are using relative links with an lgpath attribute in your album element, copy that value to vidpreview, plus the file name of your image. Like so:

<gallery>
   <album title="My videos" description="My vacation videos"
         lgpath="gallery/album1/lg/" tnpath="gallery/album1/tn/">
      <img src="tree.flv" tn="tree.jpg" vidpreview="gallery/album1/lg/myvideo123_preview.jpg" />
   </album>
</gallery>

...or if using absolute links...

<gallery>
   <album title="My videos" description="My vacation videos">
      <img src="http://mydomain.com/slideshow/gallery/album1/lg/tree.flv"
         tn="http://mydomain.com/slideshow/gallery/album1/tn/tree.jpg"
         vidpreview="http://mydomain.com/slideshow/gallery/album1/lg/myvideo123_preview.jpg" />
   </album>
</gallery>

Step Six: Publish

Publish a new movie from Flash, and your video should load / playback in SlideShowPro for Flash!