16 April 2007
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.
You can use the sample ZIP file accompanying this article to create a slideshow in Fireworks CS3.
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.
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.
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.
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.
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).
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).
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).
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).
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?
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.
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.
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:
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: