SlideShowPro for Flash can load H.264, FLV, or F4V as slideshow content (more info on formats here). When loaded, auto-playback of your slideshow stops and a Media Player interface appears to control playback. In this walkthrough we'll create an H.264 video using Adobe Media Encoder CS4 (which comes free with Flash CS4).
Notes on H.264: We recommend encoding videos using H.264 because you'll be able to view the video in and out of SlideShowPro for Flash. Adobe's proprietary FLV is an older format that can only be viewed in the browser using the Flash Player. If you use Flash CS3 or older, you will need to use a third party encoding application to create H.264 videos.
Size and style the SlideShowPro component however you want. When complete, check to see what the Content Area width and height values are in the upper-left-hand-corner of the component live preview. Those are your target dimensions for the video you'll create next.
Open Adobe Media Encoder CS4 (or higher). Drag the video(s) you'd like to convert into the empty area. With your video(s) added, select all videos, then click the "Settings" button.
A window will open with a lot of options, but we're only going to edit two (other settings are fine for most users). First, change the "Format" in the "Export Settings" box to "H.264" (see screenshot on left).
Next, we need to change the output size. To do that, click on the bottom-right "Video" tab (see screenshot on right). In the "Basic Video Settings" box, you'll see "Frame Width" and "Frame Height". These are the output dimensions of your video. Using the Content Area dimensions you acquired in Step One above, adjust the Frame Width or Height using the largest value. That way the other (smaller) dimension will be proportionally scaled.
When finished editing both of the above, click "OK." You'll return to the first screen. Click the "Start Queue" button on the right-side of the window. Video exporting will begin.
With your new video(s) exported, it's time to load them in SlideShowPro for Flash. If you are using SlideShowPro Director, go ahead and upload the H.264 video(s) you created. If your server supports FFMpeg, video thumbnails and preview graphics will be automatically generated. Go ahead and try loading the album you uploaded the video(s) to by copying and assigning the album's XML File Path to SlideShowPro. If all went well, you should be done!
If you are not using SlideShowPro Director, you will need to handle the video and thumbnail image generation yourself. We'll explain how next.
Move the video to the directory you're building your slideshow content in. 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.mp4" />
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 need images for those areas.
To create images from your video, we recommend using the free video player VLC. 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 were named "myvideo123.mp4", 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.mp4" 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.mp4"
tn="http://mydomain.com/gallery/album1/tn/tree.jpg" />
</album>
</gallery>
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 video 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.mp4" 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.mp4"
tn="http://mydomain.com/slideshow/gallery/album1/tn/tree.jpg"
vidpreview="http://mydomain.com/slideshow/gallery/album1/lg/myvideo123_preview.jpg" />
</album>
</gallery>
Publish a new movie from Flash, and your video should load and playback!