How to create a slideshow using Scroll Area

In this tutorial we will use the Creative Flash Scroller to create a slide-show. We will have a sequence of images encapsulated in a movie clip and we will scroll them by using two buttons. I want to start by reminding you that, in order for the tutorial to work, you need to do one thing. You have to have the Creative Flash Scroller component installed using Adobe Extension Manager (if you encounter any problems doing that, please refer to the „How to install an extension” tutorial).


Click here to download the source file and the required files for solving this tutorial.


1. Firstly, let's open Flash and create a new file. (For CS3 and CS4 users: in order to set-up the frame rate, right-click the stage and select "Document properties")

Create file

Create file

2. Use the Text Tool to create three messages on the screen: „Click on the buttons to navigate”, „Scroll left” and „Scroll right”; don't forget to use bold Static text. Follow the directions from the next image.

Stage view

Stage view

3. Select the blue texts one after the other and convert them to buttons by pressing F8. Name the one on the left - „Left” and the one on the right - „Right”.

Convert text to buttons

Convert text to buttons

4. Let's edit the buttons a little. Double-click button “Left”; as you enter symbol-editing mode, let's configure the button a little. Leave its “Up” state as it is, and Copy+Paste the keyframe in the “Over” state; select the text and disable its “Bold” attribute. Extend the keyframe for all the states by inserting a frame in the “Hit” state. Do the same for the “Right” button.

5.Open the Components and Component Inspector panels.

Open the Components and Component Inspector panels

Open the Components and Component

Inspector panels

6. Drag an instance of Scroll Area on the stage; let's configure its size and position properties as in the following image. Name the instance of the Scroll Area “myScroller”.

myScroller's size and position properties

myScroller's size and position properties

7. Let's add the movie clip we will use as our slide-show; you can find it in the attached “.fla” file's library under the name of “slideshow”. Copy it in the library of your own file. Your library should look like this at this moment:

Library view

Library view

8. The next step is to connect the Scroll Area to the movie clip; as we're going to use the movie clip directly from the library, we have to export it for ActionScript. Right-click “slideshow” and select Properties, select Advanced; tick the “Export for ActionScript” check-box.

Export for ActionScript

Export for ActionScript

9. Let's configure the Scroll Area now; select it and open the Component Inspector panel. In the General tab, make the following changes: select “Library item” as Target Type and insert “slideshow” for Target. Disable the Mouse Wheel Scrolling, but leave the visual effects enabled.

Configure the General tab

Configure the General tab

10. Because we would like to create a slide-show, we will disable the mouse scrolling fully and scroll only by using the two buttons. Select “Scrollbar only” as behavior.

Configure the Behavior tab

Configure the Behavior tab

11. In the Borders tab we will modify the Scroll Area's appearance as in the following screen-shot:

Configure the Borders tab

Configure the Borders tab

11. Create a new Layer rename it to actions, and under the first frame, press F9 to open the Actions Panel and let's write the following code in the Actions panel:

  Left.addEventListener (MouseEvent.CLICK, scrollLeft); 			
  Right.addEventListener(MouseEvent.CLICK, scrollRight);
 			 
	function scrollLeft(e:MouseEvent) {  				
              myScroller.stepScroll("Left", 82);	 			
               } 
  function scrollRight(e:MouseEvent) { 
			    myScroller.stepScroll("Right", 82);
			     }

What we did above is just scroll right or left with the specified amounts of points.

12. Preview your file.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Preview your file

Thank you for your time and I hope this tutorial was useful to you. I invite you to read the rest of our tutorials and check out our other products on www.extendstudio.com. If you have any questions please contact us at support@extendstudio.com.