The Flash ScrollPane Component

Posted 6/14/2006 10:51 AM by sleekdigital | Categories: Flash

I wish I had a dime for every flash forum post I have seen where the user was asking for very basic usage of the Flash ScrollPane component.  I think at least some of the confusion stems from the differences between the version 1 component and the version 2 component.  In v1 you could set the content to a movieclip that was already on the stage.  In v2 you have to use either an external asset or a movieclip that is in the LIBRARY. You use the linkage id of that movieclip as the contentPath of the scrollpane.


Sometimes users get frustrated because they think that does not allow them to put multiple items into the scrollpane, but that is not the case.  What you do is set the contentPath to the linkage id of an empty MC in your library (sometimes a movieclip with a small transparent square works better). Then use the scrollpane.content property to get stuff inside the scrollpane using attachMovie. Once you set the contentPath of your scroll pane, the scrollpane.content will give you a reference to the movieclip inside the scrollpane that represents the contents. You can attach content to that just like you would any other movieclip.

Another common issue I see in the forums is "the scroll pane does not update the scrollbars based on the size of my loaded content."  First, if you are setting the contentPath to an external asset (an image or another swf file for example), you need to determine when that assset has finished loading.  There are plenty of ways to do that using the complete event, or movieClipLoader class, or some logic involving getBytesLoaded / getBytesTotal etc...  When the content is finished loading, call the scrollpane's invalidate method and that will cause it to redraw and the scrollbars will be rendered to reflect the size of your content.  I've seen many people recommend calling redraw(true).  I do not recommend doing that.  This will cause the component to redraw on EVERY frame.  If you just call invalidate() at the proper time you are only making the component redraw when it needs to... much more efficient.

So the key points to remember...

  • ScrollPane.contentPath cannot be set to a movieclip instance on the stage... you must use the linkage id of a library asset or the url to an external asset.
  • Once you set the contentPath, you can reference the content movieclip with ScrollPane.content property.
  • Use the invalidate method at the proper time to get the component to redraw if you need it to.

Comments:

flashem | 7/10/2006 1:47 PM

Thank you.


jminnie | 10/12/2006 7:54 PM

Thank you. I've worked thru most of the issues you mention in your article & wish I'd found it 3 days ago!:) One remaining problem I have is that a CheckBox component within myMovieClip that I dynamically load into a blank Content mc and display in the ScrollPane causes erratic display. Remove the CheckBox and everything's fine. Any thoughts? TIA


Steve | 10/13/2006 10:18 AM

Sorry I can't be much help there. I've only done this with mCOM components and did not have a problem there.


Rossman | 10/31/2006 11:41 AM

Thanks for this article!
I was hoping the v2 ScrollPane component would let me add non-externally loaded files (ie. dynamically generated content), and thanks to you, now I know how! They should really add this information to the Flash Help Files.


Mark | 11/4/2006 5:41 PM

Yes, thanks very much. I've been trying to figure out exactly what to do about adding items dynamically to a scroll pane and having it recognize and add scrollbars accordingly. I hope I can figure this out... Is there a tutorial or linked examples anywhere? Thanks, Mark


Bill | 11/7/2006 8:18 AM

Thank You!


Marlin | 3/7/2007 8:03 PM

I too found this tutorial too late to be of use to me, but it describes the only approach that seems to work! A few things I would caution would-be scrollpane users 1. If your content dynamically gets taller or shorter (in my case I've got an accordion-like interface), the scrollpane can't seem to keep up with it and can't properly figure out where exactly the bottom of its content is. The result is sometimes you scroll to the bottom and there's an extra whitespace space there, but what's worse is in other cases you can't even get to the bottom no matter what! Note that I AM using the invalidate() method after each resizing. 2. The scrollbar behaves erratically. If you single click on an up or down arrow your content will move in the wrong direction. Click it again and it moves in the right direction, and you get back where you started. Subsequent clicks are correct until you click to go the other direction, then the problem repeats itself. Similar problems occur when you click to page up or down(click in the track but off of the thumbscroll). 3. Changing the numerical parameter values exacerbate the above problems. If you change things like how many pixels the content is scrolled when you click the arrows, etc., be prepared to change them back to default values if you run into problems. In my case I set the vPageScrollSize=200 and the vLineScrollSize=20, but since the first click on either of the controls that are governed by these two values initially moves the content in the wrong direction, you scroll more than just a little bit off course and it gets very confusing. So keep these numbers small!


Jeff | 3/31/2007 12:25 AM

Thank you! I was getting very flustered trying 10 different ways to do this, all wrong. invalidate !!!


Mark | 9/20/2007 6:17 AM

Great stuff. Here's a problem I am having. ScrollPane is on the root timeline, buttons are in a mc in the library with the correct linkage id. When I test the movie, the buttons work great. Then I load the movie into another movie and the buttons cease to work. Any help to get this working would be greatly appreciated. I've been at this for what seems to be forever. Thanks in advance, Mark.


Mark | 9/21/2007 5:09 PM

just to answer my question that I wrote above. I finaly figured it out... All I had to do was use this._lockroot = true; on the main timeline. thanks again. Mark.


baskarans | 1/22/2008 7:26 AM

Hi..thanks for this post.
I ve one problem. I am loading a swf file to Scroll pane, it's loaded correctly, no prob. But after loading i cant see the whole content of the swf file. I used invalidate but still it went wrong. Help me.
This is the code:
var completeListener:Object = new Object();
completeListener.complete = function(evt_obj:Object) {
evt_obj.target.invalidate();
};
// Add listener.
my_sp.addEventListener("complete",completeListener);
my_sp.contentPath = "test.swf";


SleekDigital | 1/22/2008 12:15 PM

I don't know how reliable the complete event is. I usually check getBytesLoaded/getBytesTotal == 1 to know when the content is loaded, then call invalidate. Another thing to consider is what the loaded swf does. For example if the loaded swf changes size after initial load you will need to call invalidate after the size change.


NG | 3/26/2008 11:13 AM

I wish I saw this article sooner. Thank you.

Post your comments:

Anti-spam Key
Please Type in the letters shown above (this helps prevent spam):

Name:

URL (Optional):


Your Comments:

Search



www This site

Blog Topics

Skip Navigation Links.