Flash MX ScrollPane Tutorial

In this Flash tutorial we are going to do a slideshow, using the scrollpane to scroll through thumbnail buttons. When the user clicks on the button in the scrollpane, a larger picture will appear above the scrollPane Component.

• Make the Flash movie 400 x 400 by selecting menu items, "Modify" - "Document" and change the width and height parameters.
  
• Create a new MovieClip by clicking on the bottom-left icon in the library window.
• 
• Select Behaviour "Movie Clip" and in the name textbox write "scroller".
• Tick the "Export for Actionscript" box and put the name "scroller" in it.
• Import the button pictures to the movieclip And align them using the align window.
• Put them in a line evenly spread.
• 
• Go back to the main timeline.

Add ScrollPane Component

Select menu item "Window" - "Components" , and drag a Scrollpane component to the stage.
Select your scrollPane, Open the properties window and in the "properties" tab, write width as 400, height as 100 and position it at (0,300).
Select the "Parameters" tab, and in the "ScrollContent" textbox, write "scroller" , your actionscript name you put in the linkage window.
For "Horizontal Scroll" select True and for Vertical Scroll select False. Leave DragContent at false.

Creating ScrollPane Buttons

1. Go into the scroller movieclip and select the first thumbnail. Click key "F8" and select Button behaviour.
2. Call it btn1 or whatever you like.
3. Double click on the btn1 symbol in the library window.
4. Click on frame 1 , and hit key F6 to make keyframes on the over, down, hit frames.
5. Repeat steps 1 to 4 for the rest of the thumbnails
6. 

Are you interested in going after a job in programming? There are many online college degrees in Information Technology, so you can live your dreams. Find school grants as well as education grants to enable your success.

Adding Actionscript to ScrollPane Buttons

1. Create a new MovieClip by selecting menu item "Insert" - "New Symbol" . Tick the Moviclip option and name it "big01" and in its linkage window, give it the actionscript name of "big01" - same.
2. Drag the first large picture onto the movieclip's stage. centre it.
3. Repeat for the rest of the big pictures
4. You should end up with 7 movieclips called big01 - big07.
5. Open up the scroller movieclip and click on button1 and open the Actions window and put this code in:

   on(release){
   	_root.attachMovie("big01", "screen",1);
   	_root.screen._x =200;
   	_root.screen._y =150;
   }
   

6. Select the second button and put this code in its action window:

   on(release){
   	// attach movie to main timeline
   	_root.attachMovie("big02", "screen",1);
   	// position mc
   	_root.screen._x =200;
   	_root.screen._y =150;
   }
   

7. Repeat the above operations for the rest of the buttons. But change "big02" for "big03", "big04" etc.
8. Hit Control + Enter to test the movie.

Actionscript for ScrollPane Component

ScrollPanes can load in movies from the library via their Actionscript name. Or they can load in external .swf files or .jpg files. To load in an external .swf file, put something like "logo.swf" in the ContentPath parameter. Here is a test script that contains some of the ScrollPane methods. The instance name of the scrollpane is "scroll1". The content of the scrollPane is the movieclip "scroller" in the library.

// set the size
_root.scroll1.setSize(400,100);
// set position
_root.scroll1._x = 0;
_root.scroll1._y = 300;
// set the content path
_root.scroll1.setScrollContent("scroller");
// make it scroll horizontal
_root.scroll1.setHScroll(true);
// get rid of vertical scroll bar
_root.scroll1.setVScroll(false);
//make scroll pane content draggable
_root.scroll1.setDragContent(false);

Resources

More flash MX tutorials
"Macromedia Flash MX 2004 ActionScript : Training from the Source" by Derek Franklin