Home / Articles / Create an Image Slideshow in Flash Catalyst CS5

Create an Image Slideshow in Flash Catalyst CS5


  1. Importing the Images
  2. Creating a Component
  3. Cropping the Slideshow

Article Description

Brian Wood is a real fan of Flash Catalyst's power and ease of use. Follow his instructions to create a scalable slideshow that runs in a single state/page, and prepare to be equally impressed!

Like this article? We recommend

Adobe Flash Catalyst CS5 Classroom in a Book

Adobe Flash Catalyst CS5 Classroom in a Book


I love how easily Flash Catalyst lets me create really compelling content. Once you learn Flash Catalyst's basic features and methodology, you can just run with it, creating more and more complex (cool!) slideshows.

In this article, I'll show you how to create a slideshow in Flash Catalyst (see Figure 1). There are many ways to accomplish the same thing in this program, but I want to create a slideshow that's scalable and runs in only one state/page. That way, you can insert this slideshow into a project without taking up main states or pages.

Figure 1 Slideshow example.

We'll cover the following tasks in some detail as we build the slideshow:

  • Importing images
  • Creating a simple button
  • Creating components
  • Working with states/pages
  • Working with substates/subpages
  • Adding interactions
  • Working with the Timeline

Importing the Images

The first thing you need to do for your slideshow is to create a new project in Flash Catalyst:

  1. Choose File > New Project. Set the width and height to be 960 pixels wide and 300 pixels or so in height (depending on the size of the images you're using).
  2. Name the project, set a background color, and click OK.
  3. Now you'll add some images that you've created in another application. Choose File > Import and select the file type for your images. I usually wind up using Adobe Photoshop (PSD) files. Navigate to a picture and import it onto the artboard. Import all of the images you want to use in your slideshow.
  4. Align the images to each other and then spread them out, starting with the initial image in the center of the artboard and the rest aligned to the right (see Figure 2). They'll be positioned off the edge of the artboard. You can put in extra space between the images or not[md]that's up to you.

Figure 2 Images aligned on (and off) the artboard.

2. Creating a Component | Next Section