Flash Tutorial: Creating a Slideshow with Audio
First, here's an example of what can be done with this tutorial: Ridiculously easy audio slideshow.
The key to this tutorial is preparation. Before you even think of starting, you need to make sure you have the following:
- Photos that have been cropped and optimized.
- An MP3 audio file that goes along with the photos.
Got all that stuff? If so, go to Soundslides.com and download a demo version of Soundslides (demos are available for Mac and Windows). Install the program on your computer. The tutorial picks up from here:
- Create a folder on your computer that contains the images and audio you want to include in this slideshow.
- Start Soundslides. If you are using the demo you'll see a screen that asks for your email address and Registration Key. Press the "Later" button.
- The next screen will give you the option of creating a New Project or loading an Old Project. Click the New button.
- A dialog box will appear. In the File Name field, choose a name for your slideshow project (make it something you'll remember). Save the file to a location where you can find it easily later.
- Soundslides will present you with a screen with two big buttons: JPG and SND. You'll also notice there's a small box labeled "Output Sizes." Keep the Output Sizes box set to "Standard Slide Show."
- Press the JPG button. A dialog box will appear. Navigate to the folder where you saved your images (JPG is short for "JPEG," which is a popular image format). When you find the folder, select it and click the "OK" button. Soundslides will import your photos.
- When Soundslides is done with the photos, press the SND button (this is short for "sound"). A dialog box will appear. Navigate to the folder where you saved your audio file (it should be an MP3 file). Select the file and click the Open button. Soundslides will import your MP3 file.
- If all goes well, Soundslides will then present you with a screen that looks like this:
- On the left, you'll see the first photo in your slideshow.
- On the right, you'll see thumbnail images of each photo in your slideshow. You'll also see five tabs across the top: Slides, Slide Info, Template, Project Info, Audio. We'll come back to these in a moment.
- On the bottom, you'll see a timeline that shows when each photo will appear. If you click the Play button, you'll hear your MP3 file (make sure your speakers are on).
- We're going to use this screen to customize the slideshow. Click the Slide Info tab toward the top of the screen.
- You'll see a text box for a caption. Type in a caption for your first picture. When you're done, click the Next button and type in a caption for the second picture. Continue adding captions for each of your pictures. Note: Make sure you include a PHOTO CREDIT in the caption of each picture.
- Click the Project Info tab. Give your project a headline and add in credits (this credits area is different from a photo credit -- you use this slot to include the names of the people who made this project).
- Next, go down to the timeline and click the Play button. Let the slideshow play and check to see if the audio matches up with the pictures. You can adjust the timing by grabbing the sliders between each timeline segment:
- When you're happy with the timing, click the Save button.
- The final step is to export the final slideshow. Click the Export button. Soundslides will present you with a dialog box that looks like this:
- All of the files in this folder need to be transferred to a Web server. I highly recommend you create a folder on your Web server and simply dump all this stuff in there. This will make it easier to keep things organized.
- Once you have transferred the files to the server, fire up a Web browser and type in the URL for the site and folder you created. You will be presented with your finished slideshow.
- Note: If you are using the demo version of Soundslides, your first slide will have an annoying "Made with Soundslides Demo" button. You will need to pay for the full version of Soundslides to make sure this doesn't appear in future slideshows you create.
- The slideshow you just created is a Flash .swf. You can embed this .swf within a Web page. This tutorial explains how to embed a Flash movie within a Contribute-based Web page.
- That's it!