Chapter Fourteen: Creating Slideshows in Flash Professional

One of the most frequently asked questions I encounter is: What’s the best way to create an attractive slideshow online? Whether you are displaying a portfolio, advertising products, introducing your company or organization, or just sharing a photo album, Flash Professional can create highly inviting presentations.

Flash Professional CS5 comes with templates that simplify and automate creating Flash slideshows. In this chapter, I’ll show you how to use them.

In the course of customizing the Flash CS5 Professional Photo Albums, I’ll show you techniques for editing templates, actions, and XML code that you can apply to working with other complex Flash interactive objects.

And, at the end of this chapter, I’ll address the challenges of making your SWF slideshows accessible in browsing environments that do not support Flash, including Apple iPhones and iPads.

#93 Creating a Simple Photo Album

The “Simple” Photo Album template in Flash Professional CS5 creates a flexible, easy-to-edit presentation that can display photos as a timed slideshow.

Start creating a slideshow by choosing File > New. In the New Document dialog, select the Templates tab. From the Media Playback category, choose Simple Photo Album. The template opens, with a visible instructions layer, and some rather garish default artwork (Figure 93a).

Figure 93a. Default settings in the Simple Photo Album template.

Choose File > Save, and save the Flash (FLA) file with any filename.

1. To edit the images and titles for the four default slides, select the first frame in the Images/Titles layer in the Timeline (you may need to expand the Layers area to see the complete Layer title).
2. Double-click on the image title text to select it, and type your own image title.
3. Delete the default image. Copy and paste your own image into the frame. Use the Free Transform tool to edit the image size as needed—hold down the Shift key to maintain height-to-width ratio while resizing (Figure 93b). In a similar way, customize the other four default slides.

   Figure 93b. Customizing a slide.

   

4. To add a slide, Control+click (Windows) or Command+click (Mac) to select the Controls, Images/Titles, Matte, and Background layers for frame 5, and choose Insert > Timeline > Keyframe (Figure 93c). You can repeat these steps in additional frames to add more slides.

   Figure 93c. Inserting a new frame to add an image to the slideshow.

   

   Saving to SWF Options... and Other Formats

   For an exploration of your options when exporting slideshows for the Web, see #96, “Exporting SWF Slideshows.”

To generate a Web-ready SWF that you can embed in Dreamweaver, choose File > Export > Export Movie. There are different export options, but you want to save the slideshow as a SWF file.

#94 Creating an Advanced Photo Album

The Advanced Photo Album converts a set of photos to sized images and thumbnails. It can display a set of photos either as an automatically timed slideshow or as a manual slideshow (the user clicks a thumbnail to see an image). You can define transition effects and timing.

The first step is to collect a set of images. For the purposes of this How-To, we’ll work with six images, but you can adjust that to your needs. The Advanced Photo Album will resize both large and thumbnail versions of your image, but I suggest starting with images in the 600-pixel-wide range for best display. Put all your images in a single folder, and rename them image1.jpg, image2.jpg, and so on (the images must have those exact names).

With your images organized and named, choose File > New. In the New Document dialog, select the Templates tab. From the Media Playback category, choose Advanced Photo Album (Figure 94a).

Figure 94a. Opening the Advanced Photo Album template.

Choose File > Save, and save the Flash (FLA) file (with any filename) in the same folder you used to store the images you’ll use in the slideshow.

Test the slideshow with default settings by choosing Control > Test Movie > in Flash Professional. The slideshow plays with the first four slides only, and with default background, timing, and other settings that you’ll adjust in the following steps:

1. In the Timeline, select the Actions layer. View the Actions panel (you’ll want to make it nice and wide so you can see the code). Scroll through the panel until you find the section // USER CONFIG SETTINGS =====.
2. Set the timing of your slideshow by changing the value in the line var secondsDelay:Number = 2; to another value (for example, changing 2 to 4 will present each image for 4 seconds).
3. You can turn off autostart (requiring a user to click the Play button to start the show) by changing var autoStart:Boolean = true; to var autoStart:Boolean = false;.

   Timelines?

   Choose Window > Timeline to display the Timeline if it is not visible. For a survey of how to navigate around the Flash Professional CS5 Timeline, see #88, “Creating a Timeline,” in Chapter 13.

4. You can turn off transitions by changing var transitionOn:Boolean = true; to var transitionOn:Boolean = false;.
5. To change the transition effect, substitute one of the listed effects for Fade in the code line var transitionType:String = "Fade";.
6. Add additional photos by copying and pasting <image title='Test 4'>image4.jpg</image> and changing the copied version of the coding to <image title='Test 5'>image5.jpg</image>. Do this as often as necessary for as many images as you placed in the slideshow folder.

   Test Anytime!

   At any time, while adjusting the slideshow settings, you can test your movie with the current settings. Save the file, and choose Control > Test Movie > in Flash Professional.

7. Edit the Image titles by changing Test 1, Test 2, and so on to actual captions for your images; for example, the coding for your first image might look something like <image title='scarab'>image1.jpg </image> (except that instead of scarab you’ll have a caption or title appropriate for your image).

Having customized the slideshow content, timing, and effects, a remaining element in creating a customized slideshow is to change the background. The background artwork in this template is somewhat complex, and some of the background elements are essential to the slideshow and cannot easily be edited. But you can change the background color by first unlocking the Background layer (click the lock icon in the layer), selecting the main background rectangle, and assigning a new color in the Properties panel (Figure 94b).

Figure 94b. Adjusting the background color of the slideshow.

Each time you adjust and customize the slideshow, test the presentation (Figure 94c).

Figure 94c. Testing a presentation.

A final but critical step: Choose File > Export > Export Movie. Save the SWF file in the same folder as the images. When you embed the slideshow in a Dreamweaver CS5 Web page, copy both the SWF file and all the images to the same folder (or subfolder) in the Dreamweaver Web page.

#95 Publishing Slideshows as SWFs

When you publish a slideshow as a SWF, you can choose which version of the Flash Player will be required to play the slideshow. In general, newer versions of the Flash Player support more effects, and publishing to the Flash Player will preserve more controls than publishing to Flash Lite, which is geared to mobile devices. You can also control the quality of embedded JPEG images when you define Publish settings.

Follow these steps to export a Flash (FLA) slideshow to a SWF file, playable on the Web, and an HTML page with the SWF file and player embedded within that page:

1. Access Publish settings by choosing File > Publish Settings. The relevant settings for the Flash slideshows explored in this chapter are in the Flash tab of the Publish Settings dialog.
2. Choose a Player version from the Player pop-up menu.
3. You can reduce file size a bit and not distribute unnecessary information by deselecting the Include Hidden Layers and Include XMP Metadata check boxes. And no other check-box options in this tab are needed—they can all be deselected.
4. Select JPEG quality. The JPEG Quality slider defines the quality (file size) of the JPEG images you embedded in the slideshow. The higher the setting, the better the image quality (but the longer the download time).
5. Finally, use the Formats tab in the Publish Settings dialog to define the file name and folder to which your files (SWF, and if you choose, HTML) will be saved (Figure 95a). Use the blue Select Publish Destination folder icons to define a target folder.

   Figure 95a. Defining filenames for SWF and HTML files.

   

   Generating an HTML Page

   You can use the HTML Tab in the Publish Settings dialog to define parameters for an HTML Web page that is generated when you publish your slideshow. This creates a page, with the slideshow in it, that can be opened and edited in Dreamweaver. The Flash Only template works for most situations.

6. Choose File > Publish Preview, and choose a format to preview how the published SWF file will look with the settings you selected.
7. To publish all the selected files (in this case, HTML and SWF), choose File > Publish.

#96 Exporting SWF Slideshows

Because Flash is not supported on iPhones, iPads, or in some other mobile environments, you might well want to generate an alternate version of your slideshow for those viewers. You can export the Flash Simple Photo Album explored in this chapter as a QuickTime movie in h.264 format that will play in those devices, and generally the player controls will be supported as well.

The following set of steps will export a slideshow to a QuickTime movie playable on an Apple iPhone 4. You can easily adjust the steps for other environments:

1. With your Flash slideshow file open, choose File > Export Movie. In the Export Movie dialog, navigate to the folder to which you wish to save the slideshow, enter a filename in the Save As box, and choose QuickTime Movie from the Format pop-up menu.
2. Click Save. The QuickTime Export Settings dialog opens. The default settings export your slideshow just as you defined it, without additional effects or trimming, so there is no need to adjust these. But click the QuickTime settings button. The Movie Settings dialog opens.
3. In the Video section of the dialog, click the Settings button to open the Standard Video Compression dialog. From the Compression pop-up, choose h.264. This compression setting is widely supported on mobile devices, and particularly promoted by Apple. Leave all the settings at their default values, except that you can adjust the Quality slider in the Compressor section to adjust the quality (and download time) of the exported video. Higher-quality compression takes longer to download but produces better image quality (Figure 96a). Click OK in the Standard Video Compression dialog.

   Figure 96a. Exporting to the highest-quality h.264 compression video setting.

   

   Filters?

   The Movie Settings dialog has a Filters button that allows you to apply QuickTime filters. You can experiment with filters like Black and White if you wish.

4. Click the Size button. The Export Size Settings dialog opens. To enter specific values, choose Custom from the Dimensions pop-up menu, and enter values in the two boxes (since many mobile devices can be turned sideways, there is no “height” and “width” box per se). The dimensions for the iPhone 4, for example, are 960 pixels by 640 pixels. Select the Preserve Aspect Ratio Using check box to prevent distortion, and choose either Letterbox (leaving black strips on the top or side as needed) or Crop (cutting off part of the image that doesn’t fit in the viewing environment). Click OK in the Export Size settings dialog (Figure 96b).

   Figure 96b. Defining size and letterboxing for a slideshow exported for an iPhone 4.

   

   No Sound

   The settings in the Sound section of the Movie Settings dialog is not relevant for the (silent) slideshows created in this chapter.

5. After finalizing your export settings, click OK in the Movie Settings dialog and click the Export button in the QuickTime Export Settings dialog. The resulting h.264 compression QuickTime movie is ready to be embedded in Web pages in Dreamweaver CS5.