Part I - The Completed Project



Part II - Prepping the Images and Placing in Same Folder

The first step is create or edit images with a desired width and height and place them in same folder as where you save your flash file and swf. If you need sample images: 1, 2, 3, 4, 5, 6 and image size is 186 by 136 px.

Part III - Setting Up the File and Adding an Instance of Scroll Panel to the Stage

You must use Flash CS3 and have the Scroll Panel component for this tutorial. The first step is to create a new Flash file using ActionScript 3.0.

Assuming that you have Scroll Panel component installed, the first step is dragging an instance of the Scroll Panel component on to the stage using the component panel (Window > Components). Give the Scroll Panel an instance name of myScroll in the properties panel.

Part IV - Using the Component Inspector to Add Images

With the Scroll Panel selected, open the component inspector (Windows > Component Inspector). Click the "[]" next to the content property.

In the pop-up window, use the "+" to add an new image. Then fill out the values for path (URL path to image), data (link for the image), type (define if it is an image or instance), and a description for the image. Continue using the "+" to add all your images.

Part V - Change the Image Scale Properties in Scroll Panel

This is again done in the component inspector with the Scroll Panel selected, set the following properties in the contentStyle field.

• width to desired image width
• height to desired image height
• maintainAspectRatio to false
• scaleContent to true
• autoSize to false