Slide Shows for your Web Page
Made using ProShow Gold

The object is to make a slide show of reasonable quality, but small enough that it's not too big to upload or view on-line. First, here's a summary of the results of all the experiments I tried:

1. Flash shows created by ProShow are not as small as can be created by Macromedia (now Adobe) Flash, but they're much easier to make.
2. The ProShow defaults produce huge shows and need to be changed.
3. Transitions lead to very poor quality shows unless the defaults are used, in which case the shows are too big.
4. The size of the show is determined by two settings on the "Output Options" tab you can access when creating a Flash Show: Framerate and Video bitrate.
5. Without sound I recommend a framerate of 5 and a video bitrate of 56K. This is the smallest show you can create with ProShow. A show made using the default options will be TWELVE times the size of this show.
6. With sound I recommend a framerate of 30 and a video bitrate of 256K. This show will be about 3 times the size of the same show without sound. And remember, with both of these recommendations, use a 0 second "cut" as the transition.

To create shows use the "Create / Flash Show" choice on the ProShow Menu. In this example we're creating a show of proof images from a studio shoot, so each image needs to be labeled so the customer can order the ones they like. For other shows you could either leave off the labels (called "Captions" by ProShow) or you could display various EXIF fields on the images (for example, if you caption your images using the EXIF comment field, you could display the comments with the Text Macro: \[exif UserComment], or you could display the date/time the image was taken with the Text Macro: \[exif DateTime].)

Here are the steps. You can click on any of them to jump to that step:

1. Set the show options
2. Add images, soundtrack, etc.
3. Create the Flash Show
4. Edit the HTML

Show Options

First let's look at some of the Show options I recommend. Under "Show / General Show Options":

Name the show, since this is the default name for saving it avoid spaces in the name. You might want to use all lower case since website names are case sensitive and this name is not displayed, it is only use in file names.

Choose "Custom" from the Aspect Ratio pull-down and set the custom ratio to 1 x 1. (Using a 1 x 1 ratio will allow you to create shows with both portrait and landscape images and have them be the same size.

Then on the "Show Captions" tab click on the green plus sign to add caption text. In the box under "Selected Caption", enter \f which will display the file name (without the extension).

Choose a font and font size. I use Aerial 14 and also recommend checking the Drop Shadow box which will then say "On". Under Text Effects, be sure all the pull-downs are set to "None".

Next choose right-aligned under Caption Placement:

Then place your cursor over the caption such that the cursor turns into a hand and move the \f into the upper left-hand corner. Put it in the gray area outside the center box; ProShow uses this to outline the safe-area, but since you're not going to display the show on a TV this gray area is always part of the show. As you move the \f around you'll note the "Position Coordinates" change. Once you decide roughly where you want the caption, you might find it easier to just type round numbers as Position Coordinates instead of dragging the caption around. This also has the advantage always placing your image name in exactly the same place. In my example, using 97 x 6 seemed to work well and place the last letter of the file name equidistant from the sides:

Because i never know when the caption text might get lost in the background of the image, I'm going to repeat the image name in the bottom left as well. Click on the green plus sign to add another "caption", enter \f for the caption text. This time I'm going to set the color to red (the first caption defaulted to white):

Be sure your font and font size are set correctly and drop shadow is turned on. This time choose left-aligned for Caption Placement. Drag the \f to the bottom left corner, or fill in the position manually. Here 4 x 93 worked for me:

Another option to make the caption (image name) stand out might be to turn on "Outline" and set the color to something that contrasts with the caption color. (Equivalent to using stroke in Photoshop.)

You can use the Soundtrack tab to add music to you show:

Alternatively you can drag and drop the music onto the soundtrack below your show's time-line.

TIP: To make it easy to manage your shows, my recommendation is to either(1) copy the music for your soundtrack into the folder with your images and use that copy or (2) if the images for each of your shows are in parallel folders, create another parallel folder for your music and use those in your shows.

Speaking of managing shows, either save your ProShow show in the same folder with your images, or if you are going to make a single show and/or DVD with a menu containing several different shows, save the ProShow files at the level above your images ... this makes it much easier to add all the other shows to your final show.

By default the background for your show is black. You can choose a different color on the Background tab:

Use the color wheel, or click on either RGB or HEX and enter the value. Here I choose a gray, HEX "#999999":

Adding Images

I'm assuming you already know how to use ProShow Gold. Add all your images to the time-line. Transitions tend to reduce the quality of a flash show. Therefore, I recommend you select all the images (Ctrl-A) and change the transition to "Cut" and the transition time to 0. While all the slides are selected, change the time each will be displayed. Recommendation: 3 to 6 seconds, I used 5 seconds in the example below. I also recommend your show end with a blank slide. Create it by right-clicking on the last image in the time-line and choosing: "Insert / Blank Image". Set its time to something like one or two seconds:

By clicking on the time-line at the beginning of the last slide (arrow above) you can see the time the last slide starts (1 minute and 25 seconds in the example above).

Then on the Show / Soundtrack tab, you can choose "Edit fades and timings" to fade out the sound at the end of the show:

First move the triangle at the top to the left until the sound track ends when the last slide ends of slightly thereafter (in the second screen shot below you can see that in this example I had it end after 1 minute and 26.5 seconds). Then move the square at the bottom a few seconds to the left of that, this is where you the fade will start:

After moving both your soundtrack will look something like this:

When you preview the show you can move individual captions if the background makes them un-readable.

Creating the Show

Now you're ready to create the show. Choose "Create / Flash Show". On the Menus tab choose "no menus":

Specify a title (make it look nice use spaces and capitol letters as appropriate). Also choose "Custom" on the Aspect ratio pull-down and fill in 1 x 1 as the aspect ratio.

Since your slide show is only a single show, there's nothing to set on the "Shows" tab. Just make sure the "Include Intro Show" box is NOT checked:

Conversely "Output Options" tab has setting that are important. They control the size and quality of the show:

If your show has a sound track I recommend the settings above: (1) Video for 256K Broadband (higher rates greatly increase the size of the output file and are probably not necessary if transitions are not used. (2) A resolution of something like 420 x 420 (or 450 x 450). (3) A framerate of 30 (the default). (4) Be sure to check the "Create HTML" box.

Next it will ask you where to create your show and the name to give it (it will default the the name you specified on the "General Show Options" tab). Make your life easy, always create your shows in the same folder. For example a "shows" or "proofs" folder under wherever the pages for your domain are stored locally on your computer.

Note: If you don't include a soundtrack in your show you can use a Video Bitrate of "Video for 56K modem" and your show will be about one-third the size. Just be sure to avoid transitions.

Editing the HTML

When you create the show, ProShow will create 3 files in the folder you specify. Before uploading to your website I recommend the following changes to the HTML file. Change "My Slideshow" to the name of your website:

Change the bgcolor from #FFFFFF (white) to whatever is appropriate for your website:

For example, for a black background use #000000. Depending on what else you add below you might also want to follow the bgcolor setting by the text color. For example, with a black background you might specify bgcolor="#000000" text="#FFFFFF".

Next scroll down and find the "Created by ProShow" text, highlight it as shown below and click on the "Hyperlink" icon to replace it with a link to a page on your website.

The Hypertext dialog box will look like:

Since the page you're linking to is probably one level above your "shows" folder, start the path with "../".

The "height=15" attribute (at the beginning of the line where the selection above starts) may also cause you some trouble depending on the font sizes you're using. Another other alternative is to select the three lines shown above (starting with <tr and ending with "</tr>):

and replace them with appropriate HTML you have developed for your website.

Once you've edited the HTML, copy the 3 files (.html, .swf, and .flv) to your website. Link to the .html file from a page on your website or send your customer a link to the HTML file.

Back to:    Resource Index

Visits since February 27, 2008:  6058