Ready to build a slideshow? Here we go.

Installation and setup

Step One: Install extension

Install the extension by following these instructions.

Step Two: Create a Flash document

Launch Flash. Select File > New from the application menu. If you are using Flash MX 2004 or Flash 8, select "Flash Document" from the left frame. If Flash CS3 or CS4, select "Flash File (ActionScript 3.0)" if you installed the ActionScript 3 version, or "Flash File (ActionScript 2.0)" if you installed the ActionScript 2 version.. Click Okay.

Next, select Window > Properties to open the Properties panel. Increase the frame rate of your movie to 31fps (the default 12fps is not recommended).

Step Three: Add SlideShowPro

Above: Components panel

Click on the "Window" menu item at the top of Flash, and select "Development Panels > Components" if using Flash MX 2004, or "Components" if using Flash 8 / Flash CS3/CS4. The "Components" panel will appear. Toggle the "SlideShowPro" item open, then click, hold, and drag the component to the Stage (the large white area underneath the timeline). An instance of SlideShowPro for Flash will appear.

Click on the component instance on the Stage to select it. Return to the Properties panel. Change both the X and Y fields to zero to align the component with the upper-left corner of the Stage.

Step Four: Create a project folder

You now need a place to save your FLA. Create a new folder named "slideshow" anywhere on your desktop. Save the FLA to your "slideshow" directory and name it "slideshow.fla".

Stop! How will you load content?

You've arrived at an important crossroad. SlideShowPro for Flash can load content from three different sources: content manually created by you (or generated by one of our Extras), Media RSS feeds (like Flickr), or albums/galleries in our CMS product SlideShowPro Director.

If you are using SlideShowPro Director, skip the rest of these instructions and continue with SlideShowPro Director's Quick Start guide.

If you are using Media RSS feeds, skip the rest of these instructions and continue with these instructions for loading Media RSS feeds.

If you are manually supplying your own content, continue on below!

Create slideshow content

Step Five: Create content directories

Again in your "slideshow" folder, create a new folder named "gallery." Open "gallery" and create a new folder named "album1." This folder will hold all the images for your first album. Finally, open "album1" and create a new folder named "large." Gather together the photos you wish to display and place them in the "large" folder.

Step Six: Create an XML document

Using a text editor (Dreamweaver, BBEdit, TextMate, Notepad, but not Microsoft Word or any rich text editor), create a new document and enter the following:

<?xml version="1.0" encoding="UTF-8"?>
<gallery>
   <album title="" description="" lgpath="">
      <img src="" />
   </album>
</gallery>

Above: Project folder

This is the basic template of your XML document. Save the XML file to the "slideshow" project folder and name it "images.xml."

Now we're going to fill the template with our gallery data. In the album element, add values to title and description, then add to the lgpath attribute the relative path to the "large" folder you created earlier, which in this case would be gallery/album1/large/.

Now for your images — edit the src attribute in the img element with the file name of the first image you’d like to show. If your image were named "tree.jpg," the element would be:

<img src="tree.jpg" />

For every additional image you wish to show, create another img element and fill it with the file name. Your XML file should now resemble the following:

<?xml version="1.0" encoding="UTF-8"?>
<gallery>
   <album title="Nature" description="Images of trees, lakes and flowers" lgpath="gallery/album1/large/">
      <img src="tree.jpg" />
      <img src="flower.jpg" />
      <img src="lake.jpg" />
   </album>
</gallery>

When you have one img element for every image in the "large" folder, save and close the XML document.

Publish

Select "File > Publish Settings" from the top menu. Click on the "Flash" tab. If using the ActionScript 2 version of SlideShowPro, ensure that "Version" is set to "Flash Player 7" (or higher) and "ActionScript version" is set to "ActionScript 2.0." If using the ActionScript 3 version, "Version" should be set to "Flash Player 9" and "ActionScript version" set to "ActionScript 3.0". Finally, click "Publish." Flash will export two files to your "slideshow" folder — slideshow.html and slideshow.swf. Double-click on slideshow.html to load it in your browser. Your images should now be appearing! If you’d now like to place this slideshow online, upload the "slideshow" folder (with the exception of the FLA file) to your web site with an FTP client.

When complete, navigate with a web browser to the HTML file in the "slideshow" folder you just uploaded. You should now see your slideshow online! You have successfully published your first slideshow.

Where to from here?

If you'd like to learn more about how to style, size, and customize the appearance of SlideShowPro for Flash, start reading the "Interface" section of the SlideShowPro for Flash User Guide.

If you'd like to learn more about how to create your own slideshow content and building an XML file, start reading the "Content Loading and Creation" section (also in) the SlideShowPro for Flash User Guide.