This chapter assumes you intend to create optimized images formatted to fit SlideShowPro for Flash's Content Area (and not use scaling). This assumption is important, for you don't have to create a duplicate set of content. You may load any existing image or video (of an acceptable format) and it will be proportionally downscaled (if necessary) to fit the Content Area. But if you're particular about image file size and quality, you should create duplicate versions that are optimized for SlideShowPro's dimensions.

Before starting, make sure you have resized your SlideShowPro for Flash instance to the size you need, and that you've styled the in-line elements the way you want them to appear. This way you have a fixed Content Area width and height to work with. With all that in place, let's edit some images.

You'll need an image editing software application like Adobe Photoshop. Just about any image editor will do, but because Photoshop is the industry standard we'll be using it here.

Step One: Check content area size, turn off Content Scale

Before launching Photoshop, check the "Content Area" dimensions in the upper-left-hand corner of SlideShowPro for Flash's Live Preview. First number is the width, second is the height. These are your target dimensions.

Step Two: Create folder for content

Wherever you plan on loading your slideshow content with absolute or relative links from the XML file (see previous chapter), create a new folder to contain the images we're about to create. For the purposes of this walkthrough, we'll use relative paths by creating a "gallery" folder alongside our FLA, filling it with our first album ("album1"), and then creating a "lg" folder inside for our new images. (See right screenshot for an example).

Step Three: Edit image in Photoshop

Launch Photoshop and open the original photo you want to edit. Select Image > Image Size from the application menu. A dialog will appear (see left) that displays the width, height and resolution of the image you have opened. First set "Resolution" to 72. Next, using the Content Area dimensions from SlideShowPro, enter whichever value is the largest into the applicable field. The smaller dimension will automatically update so that your image is proportionally downscaled. When complete, make sure that "Resample Image" is selected, and that "Bicubic Sharper" is chosen in the drop-down. Click OK. Your image will resize to your new dimensions.

Step Four: Save and link

Select File > Save for Web and Devices from Photoshop's application menu. A new window will appear. In the right, select JPG as your image format, then experiment with Quality to find an acceptable compression level. When complete click "Save." Save the photo to the folder you created in Step One (which in our example would be gallery > album1 > lg). Then simply edit your XML document so that it links to the new image, like so:

<?xml version="1.0" encoding="UTF-8"?>
<gallery>
   <album lgpath="gallery/album1/lg/">
      <img src="image.jpg" />
   </album>
</gallery>

That's it! Simply repeat this process for each image you want to display.