Saturday, 17 May 2008

Using the scrollpane component

This flash tutorial will teach you how to use the scrollpane component. The scrollpane component allows you to have horizontal or vertical scrolling content. For this tutorial I have used free stock images of fruit and vegetable which is available at:

Using the scrollpane component in flash

Step 1

Create a new flash document.
Load your images into the library by selecting File > import > import to library.
Choose the images you want to use then click open.

Step 2

Drag your images on the stage. I am making the contents of my scrollpane horizontal, so have lined my images on stage horizontal. You can make the content of your scrollpane vertical, if you wish.

Don’t worry if your images go over the edges of the stage.

Step 3

Select all the content by selecting ctrl + A.
Convert to symbol by selecting F8 then add the following settings:

Step 4

Add the scrollpane component to the stage by selecting window > component > user interface then drag the scrollpane component onto the stage.
Using the selection tool (v), select the scrollpane components parameter tab and change the content path to “images”.

Step 5

Using the image_mc movie clip on the stage as guide drag your scrollpane component to an appropriate size.

Once you have your required size. Delete the image_mc movie clip from the stage. You should now only have the scrollpane component on the stage.

Step 6

Test your scrollpane Ctrl + enter.

You should now have a scrollpane component with scrolling content.
If you wish you can remove the border from the scrollpane.


Netto-Kun 1 June 2008 at 19:50  

Thank you.
this is the first clear and simple tutorial to use scrollpane i can find, it works perfect in Flash CS3.
Thank You again.
Follow this steps and no one can get lost

Anonymous 3 June 2008 at 22:12  

Very nice. Thank you. F8 does not work on my laptop, have to check my settings. otherwise, many thank you's.

aNNa 22 July 2008 at 18:22  

thanks for sharing the tutorial. i was wondering if you know how to do this in as3? i know that the identifier is no longer supported in as3. how do you call the (non-text) content?

iliketo 23 July 2008 at 03:15  

@anna Try selecting a actionscript 2.0 file when creating a new document.

wendi 27 April 2009 at 10:11  

thanks! that worked perfectly!

how would you do it so that the scrollpane has thumbnails, where each thumb nail could be a trigger for a higher resolution picture to load above it?

ren.kat 12 May 2009 at 03:30  

could kiss you- but I'll hit the paypal button instead...

iliketo 14 May 2009 at 16:34  


Thank you.

Anders, Sweden 5 November 2009 at 01:25  

Thanks for great tutorials, especially to get the frame from the scrollpane!

Problem though - I have a map with both horizontal and vertical scrolling. I want to have the content default to be in the right lower corner, and not on the top left corner when loaded, eg. scrolling will be up and to the left if you want to see more of the map. Is it possible?

iliketo 6 November 2009 at 14:48  


I don't think you can change the default location of the content.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP