Creating a professional-looking slideshow

You already know that Fireworks is a great application for preparing web-ready photographs but how are you going to present all those images on a web page? Long web pages filled with photographs are slow to load and provide a less-than-optimal experience.

With Adobe Fireworks CS3 and the new Create Slideshow command, you can improve the experience and create a professional-looking slideshow in three steps. You just select an image folder, add transitions, and choose a template for the final output. Fireworks automatically batch-processes the required thumbnail and full-size images for size and image optimization. Additionally, with Fireworks CS3, you have a choice of five Flash-based players and one player that uses the Spry framework to produce an Ajax-enabled slideshow. No knowledge of Flash or Spry is required.

You can preview the Flash-based slideshows in any browser (on your computer) before being uploaded to a web server. The Spry player uses the Spry framework to produce an XML-based slideshow. You simply choose the Spry template for the final output and then upload the resulting folder and files to your web server for viewing.

Creating a slideshow

You can use the sample ZIP file accompanying this article to create a slideshow in Fireworks CS3.

1. Unzip the slideshow_images.zip file and open all of the images in Fireworks CS3.
2. Create an empty folder to contain the finished sideshow. (The Slideshow command will create an index.html file in the folder, so do not use a folder that already contains a file named index.html.)
3. Select Commands > Create Slideshow to open the Create Slideshow panel. Notice that the AlbumBook Properties panel is open by default in the accordion panel on the right (see Figure1).

4. Set all of the properties for your AlbumBook in the Create Slideshow panel, or make changes to an existing slideshow.

Figure 1 shows the Dreamworld – Green (Flash) player, which you will use in this tutorial. Several other players may be chosen from the pop-up menu. Notice that the "info" button lights up when you switch player types. This lets you know whether a player supports all or just some of the features. For example, Dreamworld supports all, but choose Player Black and you will see that the info button next to the pop-up menu lights up. Click it and it launches brief notes about the player.

AlbumBook properties

The images provided in the slideshow_images.zip file were taken with a small digital camera on an ocean fishing trip, so we'll call this AlbumBook Fishing and the description will be My Fishing Trips (see Figure 2).

Check the Auto-start Slideshow option to make the slideshow automatically start when a viewer opens the index.html page. You can also click the Allow Clicking Images option if you want viewers to be able to click an image to download it.

Album properties

Open the Album Properties panel in the accordion panel. Before you set the album properties, you will need to add an album. Select the plus (+) button (see Figure 3).

You will be presented with a choice to use all of the images which are currently open in Fireworks (see Figure 4). Click OK. If you have not already opened all the images, you can do so at this time.

The title and folder name are initially created from the name of the folder containing the open images. However, you can change these later. When you click the folder name, you will see the list of images displayed (see Figure 5).

Note: If you would like to modify or optimize images before you create a slideshow, open the Image Editing panel in Fireworks CS3 and make the necessary tweaks.

For the album properties, type Orange Beach for the Title and orangebeach1 for the folder name. For a description, use Deep Sea fishing with Orange Beach Charter. You will notice that this also changes the names on the left side of the panel (see Figure 6). Choose one of the images to use as a thumbnail.

Captions

Open the Captions panel in the accordion panel. For this album you will use one caption for all of the images (see Figure 7). If you want unique captions for each picture, just click and type in a caption next to the filename for each image.

Filters

Open the Filters panel in the accordion panel. Several filters, such as convert to Sepia Tone, are available to further enhance your slideshow. For this slideshow we will not apply special filters, so just leave the default "--Choose filter--" selected (see Figure 8).

Slideshow properties

Open the Slideshow Properties panel in the accordion panel. Several choices are available. You can set a time interval and apply it to all the albums in the AlbumBook. There are also several types of transitions available, and you can choose to scramble the display sequence. For this slideshow, leave the default settings selected (see Figure 9).

Export options

Open the Export Options panel in the accordion panel. Leave the default settings selected. For the Export path, browse and choose the folder that contains the slideshow files that you downloaded at the beginning of the tutorial. Click the Create button (see Figure 10).

You will be presented with an option to launch the slideshow in a browser. When the processing has reached 100%, click the box to launch the slideshow in the browser and click the Close button (see Figure 11).

You will now see a preview of your finished slideshow (see Figure 12).

Editing a slideshow

If you want to edit or make corrections to an existing slideshow, you can do it now or at a later time. For example, changing the Description to Ocean Fishing might be more appropriate (see Figure 13).

Also, you might decide that your seasick fishing buddy might not wish to be included in your slideshow. You can easily remove that image (see Figure 14). You can add images just as easily, and change the picture order, by clicking the up and down arrow buttons.

Note: Unfortunately, at this time it is not possible to edit the transition properties after the slideshow is created.

After you make these changes, click Create again and you will be asked if you want to overwrite the previous slideshow. Click OK to save your changes and view the modified slideshow (see Figure 15).

Flash or Spry?

When you use the new Fireworks CS3 Create Slideshow panel to make a slideshow, you have a choice between Flash- and Spry-based players. How to choose?

Flash

For years, designers and developers have used Flash to add animation and interactivity to web pages. More recently, developers use Flash to build and deliver rich Internet applications (RIAs), which typically transfer the processing necessary for the user interface to the browser and keep the bulk of the data back on the server.

Flash files require that the viewer have Flash Player installed. This is Adobe's free client-side runtime. More information, read Introducing Adobe Flash Player 9 by Emmy Huang.

Spry framework for Ajax

The Spry version of the Fireworks slideshow template uses a JavaScript library to produce an XML-based photo gallery. Ajax, an acronym for "asynchronous JavaScript and XML," is useful for updating data on web pages without requiring visible refreshes—thus providing users with a richer experience.

One advantage of using Ajax is that it does not require proprietary add-on technologies such as Flash, ActiveX, and Java client-side engines. Since some users avoid add-ons for security reasons, the use of the Spry framework for Ajax could increase the number of people who view your slideshow.

For more information about Spry, visit the Spry framework for Ajax technology page on Adobe Labs and read Introducing the Spry framework for Ajax by Paul Gubbay.

Where to go from here

Whether you choose Flash or Spry, creating a slideshow in Fireworks CS3 is a snap! You simply collect the images and Fireworks does all the rest. What could be simpler?

You might want to explore some other uses of slideshows besides simply displaying a series of digital images. There are many interesting possibilities:

• All of the screenshots from a tutorial article such as this could be combined into a slideshow. Here is a slideshow showing the screen shots used in this article.
• Distance courses often involve large Microsoft PowerPoint presentations that teachers create and distribute to students. PPT files can take a very long time to download, especially for people with slow Internet connection speeds. PowerPoint slides can be saved as JPEG images and then combined into a slideshow which has a much smaller file size and is more easily viewed by those with less than optimal connections. Here is a slideshow that I have converted from a course that I teach.
• Students who must learn the names of plants or animals (or anything else, for that matter) might use these slideshows as a study aid. Here is a slideshow of butterfly names.
• Using the slideshow command to create folders of images already optimized for the web is a great way to store the sets of images that people collect for sites like willoughbytownes.org. It is simple to switch one image for another on occasion (summer for winter, for example) without having to go back to the original set of images and resize and optimize it.

I am sure that you will be able to think of many more uses for this great new feature in Fireworks CS3. Let me know what you discover!

If you want to learn more about the slideshow or more about using the Image Editing panel, see the following articles:

• Creating Flash-based Slideshows with Fireworks (Alan Musselman)
• Using the New Image Editing Panel in Fireworks 8 (Ruth Kastenmayer)