Flash MX 2004 -- ScrollPane class

The properties of the ScrollPane class let you do the following at runtime: set the content, monitor the loading progress, and adjust the scroll amount.

Setting a property of the ScrollPane class with ActionScript overrides the parameter of the same name set in the Property inspector or Component inspector.

You can set up a scroll pane so that users can drag the content within the pane. To do this, set the scrollDrag property to true; a pointing hand appears on the content. Unlike most other components, events are broadcast when the mouse button is pressed and continue broadcasting until the button is released. If the contents of a scroll pane have valid tab stops, you must set scrollDrag to false; otherwise, each mouse interaction with the contents will invoke scroll dragging.

Each component class has a version property, which is a class property. Class properties are available only on the class itself. The version property returns a string that indicates the version of the component. To access this property, use the following code:

Method summary for the ScrollPane class

Method	Description
ScrollPane.getBytesLoaded()	Returns the number of bytes of content loaded.
ScrollPane.getBytesTotal()	Returns the total number of bytes of content to be loaded.
ScrollPane.refreshPane()	Reloads the contents of the scroll pane.

Methods inherited from the UIObject class

The following table lists the methods the ScrollPane class inherits from the UIObject class. When calling these methods from the ScrollPane object, use the form ScrollPaneInstance.methodName.

Method	Description
UIObject.createClassObject()	Creates an object on the specified class.
UIObject.createObject()	Creates a subobject on an object.
UIObject.destroyObject()	Destroys a component instance.
UIObject.doLater()	Calls a function when parameters have been set in the Property and Component inspectors.
UIObject.getStyle()	Gets the style property from the style declaration or object.
UIObject.invalidate()	Marks the object so it will be redrawn on the next frame interval.
UIObject.move()	Moves the object to the requested position.
UIObject.redraw()	Forces validation of the object so it is drawn in the current frame.
UIObject.setSize()	Resizes the object to the requested size.
UIObject.setSkin()	Sets a skin in the object.
UIObject.setStyle()	Sets the style property on the style declaration or object.

Methods inherited from the UIComponent class

The following table lists the methods the ScrollPane class inherits from the UIComponent class. When calling these methods from the ScrollPane object, use the form ScrollPaneInstance.methodName.

Method	Description
UIComponent.getFocus()	Returns a reference to the object that has focus.
UIComponent.setFocus()	Sets focus to the component instance.

Property summary for the ScrollPane class

Method	Description
ScrollPane.content	A reference to the content loaded into the scroll pane.
ScrollPane.contentPath	An absolute or relative URL of the SWF or JPEG file to load into the scroll pane.
ScrollPane.hLineScrollSize	The amount of content to scroll horizontally when a scroll arrow is clicked.
ScrollPane.hPageScrollSize	The amount of content to scroll horizontally when the scroll track is clicked.
ScrollPane.hPosition	The horizontal pixel position of the scroll pane's horizontal scroll bar.
ScrollPane.hScrollPolicy	The status of the horizontal scroll bar. It can be always on (`"on"`), always off (`"off"`), or on when needed (`"auto"`). The default value is `"auto"`.
ScrollPane.scrollDrag	Indicates whether scrolling occurs (`true`) or not (`false`) when a user drags on content within the scroll pane. The default value is `false`.
ScrollPane.vLineScrollSize	The amount of content to scroll vertically when a scroll arrow is clicked.
ScrollPane.vPageScrollSize	The amount of content to scroll vertically when the scroll track is clicked.
ScrollPane.vPosition	The pixel position of the scroll pane's vertical scroll bar.
ScrollPane.vScrollPolicy	The status of the vertical scroll bar. It can be always on (`"on"`), always off (`"off"`), or on when needed (`"auto"`). The default value is `"auto"`.

Properties inherited from the UIObject class

The following table lists the properties the ScrollPane class inherits from the UIObject class. When accessing these properties from the ScrollPane object, use the form ScrollPaneInstance.propertyName.

Property	Description
UIObject.bottom	The position of the bottom edge of the object, relative to the bottom edge of its parent. Read-only.
UIObject.height	The height of the object, in pixels. Read-only.
UIObject.left	The left edge of the object, in pixels. Read-only.
UIObject.right	The position of the right edge of the object, relative to the right edge of its parent. Read-only.
UIObject.scaleX	A number indicating the scaling factor in the x direction of the object, relative to its parent.
UIObject.scaleY	A number indicating the scaling factor in the y direction of the object, relative to its parent.
UIObject.top	The position of the top edge of the object, relative to its parent. Read-only.
UIObject.visible	A Boolean value indicating whether the object is visible (`true`) or not (`false`).
UIObject.width	The width of the object, in pixels. Read-only.
UIObject.x	The left edge of the object, in pixels. Read-only.
UIObject.y	The top edge of the object, in pixels. Read-only.

Properties inherited from the UIComponent class

The following table lists the properties the ScrollPane class inherits from the UIComponent class. When accessing these properties from the ScrollPane object, use the form ScrollPaneInstance.propertyName.

Property	Description
UIComponent.enabled	Indicates whether the component can receive focus and input.
UIComponent.tabIndex	A number indicating the tab order for a component in a document.

Event summary for the ScrollPane class

Event	Description
ScrollPane.complete	Broadcast when the scroll pane content is loaded.
ScrollPane.progress	Broadcast while the scroll pane content is loading.
ScrollPane.scroll	Broadcast when the scroll bar is clicked.

Events inherited from the UIObject class

The following table lists the events the ScrollPane class inherits from the UIObject class.

Event	Description
UIObject.draw	Broadcast when an object is about to draw its graphics.
UIObject.hide	Broadcast when an object's state changes from visible to invisible.
UIObject.load	Broadcast when subobjects are being created.
UIObject.move	Broadcast when the object has moved.
UIObject.resize	Broadcast when an object has been resized.
UIObject.reveal	Broadcast when an object's state changes from invisible to visible.
UIObject.unload	Broadcast when the subobjects are being unloaded.

Events inherited from the UIComponent class

The following table lists the events the ScrollPane class inherits from the UIComponent class.

Event	Description
UIComponent.focusIn	Broadcast when an object receives focus.
UIComponent.focusOut	Broadcast when an object loses focus.
UIComponent.keyDown	Broadcast when a key is pressed.
UIComponent.keyUp	Broadcast when a key is released.

Comments

No screen name said on Aug 18, 2004 at 2:23 PM :

There is one very important method not listed here. If you want the ScrollPane component to re-adjust it's scroll bars for new dynamicly build content inside the scrollPane, lets say a dynamic menu, then call the "onComplete" method to have the component readjust the scroll bars for the newly generated content.

Example: After telling the content in the scrollPane to build a menu I then invoke the "onComplete" method to re-init everything.

_root.scrollPane_sp.content.initMenu();
_root.scrollPane_sp.onComplete();

Enjoy the new found functionality of this component.

Paul Nevins
Multimedia Designer III
Sprint

metric152 said on Aug 20, 2004 at 12:37 PM :

When I was having a problem with the scrollbar redrawing I used the .invalidate method at the very last step of my content generation in the movieclip to force a redraw of the pane.

Zokbari said on Oct 19, 2004 at 12:39 PM :

bug?: the pane can NOT "contain" dynamic loaded image.

the loaded image revealed over the pane and works with scroll-bar.

reload and reload....then it works fine. sometimes...
in this reason, i can not say what makes it crazy.

einaros said on Nov 18, 2004 at 4:37 AM :

Zokbari: Lower the frame-rate in the clip which contains the scrollpane, and the clip inside it. This has solved the problem many times for me.

antoine_viso said on Dec 7, 2004 at 9:59 AM :

Here is how to make the scrollPane scroll at the lower position after adding dynamically generated content :
myScrollPane.onComplete();
var h = myScrollPane.maxVPosition;
myScrollPane.vPosition = h;
Thanks to Sebastien and "no screen name" for the onComplete trick!
I hope this will help

superstooge said on Dec 14, 2004 at 2:52 AM :

hello gentlemen,
anyone can please explain me why the scrollbars in the scrollPane comp. fail to initialize when the instance is positioned into a loaded swf?
If i just reload the content a second after its first load everything goes fine..
I tryed to force the scrollBars to redraw, resize, export in first frame, DON'T export in first frame and whatever.. I also used the workarounds that I found here, but without success.
Any idea would be very appreciated. Thanks,
Federico

jepo said on Dec 15, 2004 at 6:25 PM :

superstooge,

Are you sure you have the latest version of Flash installed (7.2)? Try this code and see if that helps at all:

var spListener:Object = new Object();
spListener.complete = function(evt:Object) {
evt.target.invalidate();
};
my_sp.addEventListener("complete", spListener);
my_sp.contentPath = "http://www.flash-mx.com/images/image1.jpg";

I have a ScrollPane component on the Stage with the instance name "my_sp" and it seems to draw the scroll bars properly.

HTH,
Jen.

khaleroo said on Feb 16, 2005 at 7:59 PM :

Ok, this is action on the CLIP that the scrollpane loads. You know the drill.
THis solves the scroll bar issue in MX. Basically you set a non descript instance movieclip called ruler off to the right, and then refresh the pane. The scrollbars come back perfectly.
This is a mod to am image galler I found somewhere. It's ALL the code if you can believe it. (I will also paste the XML, there are redundant images just for testing.)
myPhoto = new XML();
myPhoto.ignoreWhite = true;
myPhoto.onLoad = function(success) {
//portfolioTag = this.firstChild;
numimages = this.firstChild.childNodes.length;
spacing = 70;
for (i=0; i<numimages; i++) {
picHolder = this.firstChild.childNodes[i];
thumbHolder = thumbnails.createEmptyMovieClip("thumbnail"+i, i);
thumbHolder._x = i*spacing;
thumbLoader = thumbholder.createEmptyMovieClip("thumbnail_image", 0);
//paneThumbLoader= thumb_scrollpane.content.emptyThumbs.createEmptyMovieClip("thumbnail_image", 0);
thumbLoader.loadMovie(picHolder.attributes.thmb);
//paneThumbLoader.loadMovie(picHolder.attributes.thmb);
//scrollpane.content.emptyThumbs.loadMovie(picHolder.attributes.thmb);
thumbHolder.title = picHolder.attributes.title;
thumbHolder.main = picHolder.attributes.main;
thumbHolder.onRelease = function() {
_root.loader.loadMovie(this.main);
_root.title_txt.text = this.title;
};
//_root.thumb_scrollpane.setScrollContent("emptyThumbs1");

ruler._x= ( (numimages*spacing) + (getProperty(thumbnails, _x )) );

_root.thumb_scrollpane.setHScroll(true);
_root.thumb_scrollpane.refreshPane();
}
};
myPhoto.load("xmlphoto.xml");

<gallery>
<image title="Balanced Breakfast" main="images/breakfast.jpg" thmb="thumbnails/breakfast.jpg"/>
<image title="Found this Bug" main="images/bug.jpg" thmb="thumbnails/bug.jpg"/>
<image title="Barbeque Lunch" main="images/bbq.jpg" thmb="thumbnails/bbq.jpg"/>
<image title="Evening Boat Ride" main="images/boat.jpg" thmb="thumbnails/boat.jpg"/>
<image title="Found this Bug" main="images/bug.jpg" thmb="thumbnails/bug.jpg"/>
<image title="Barbeque Lunch" main="images/bbq.jpg" thmb="thumbnails/bbq.jpg"/>
<image title="Evening Boat Ride" main="images/boat.jpg" thmb="thumbnails/boat.jpg"/>
<image title="Found this Bug" main="images/bug.jpg" thmb="thumbnails/bug.jpg"/>
<image title="Barbeque Lunch" main="images/bbq.jpg" thmb="thumbnails/bbq.jpg"/>
<image title="Evening Boat Ride" main="images/boat.jpg" thmb="thumbnails/boat.jpg"/>
<image title="Found this Bug" main="images/bug.jpg" thmb="thumbnails/bug.jpg"/>
<image title="Barbeque Lunch" main="images/bbq.jpg" thmb="thumbnails/bbq.jpg"/>
<image title="Evening Boat Ride" main="images/boat.jpg" thmb="thumbnails/boat.jpg"/>
<image title="Found this Bug" main="images/bug.jpg" thmb="thumbnails/bug.jpg"/>
<image title="Barbeque Lunch" main="images/bbq.jpg" thmb="thumbnails/bbq.jpg"/>
<image title="Evening Boat Ride" main="images/boat.jpg" thmb="thumbnails/boat.jpg"/>
</gallery>

WildEye said on Feb 21, 2005 at 7:29 AM :

Assuming yr scrollpane instance is called Scroller_sp and is on the _root timeline, and contains a MC ImageHolder_mc (the linkage identifier specified in the library), you can control scrolling from the other controlling movieclip (on a click or some event)--

//scroll 50 pixels downward - zero indicates no scrolling - the top of the //MC shows
_root.Scroller_sp.vPosition = 50;

//scroll 30 pixels to the right - zero indicates no scrolling or the left of the MC shows
_root.Scroller_sp.hPosition = 30;

djtechwriter said on May 24, 2005 at 3:34 PM :

ScrollPane.onComplete() is not documented because it is not supported. Try using the UIObject.invalidate() method in conjunction with the ScrollPane "complete" event. Then your scroll pane will be updated in the next frame. See Jepo's post above on Dec 15, 2004 for an example.

jepo said on Jun 6, 2005 at 7:41 PM :

Thank you for your comments. This site is for documentation feedback only. Some comments with general questions about how to use components, bug reports, or feature requests for the Flash product, have been removed. Please use the Flash webforums for questions about how to use components: http://webforums.macromedia.com/flash. Please use this form for feature requests or suspected bugs: www.macromedia.com/support/email/wishform/.

Kerrdo said on Jul 4, 2005 at 8:44 PM :

Why is ScrollPane.loadScrollContent not listed in the documentation. After a few hours of trying to get the contentPath and refreshPane() to work, with no luck, loadScrollContent worked fist go. I found it withing the AS of the component itself. Should this be part of the documentation?

jitendramr said on Dec 2, 2005 at 11:16 PM :

Just use:-

<path>.<scrollPane instance name>.refreshPane()

This will work...
Jitendra Madhav

nerdabilly said on Apr 11, 2006 at 12:01 PM :

In Flash 8, ScrollPane no longer has setScrollContent or getScrollContent. I discovered this after many hours of trying to get them to work. Finally I just downloaded the UI components from MAcromedia and the older version of the ScrollPane worked exactly as expected.

jdehaan said on Apr 11, 2006 at 2:36 PM :

Those also aren't in Flash MX 2004. I believe you are using the V1 components from Flash MX (6), which had get/setScrollContent. In Flash MX 2004 and Flash 8, you use .content.

You can install and work with those V1 components in MX 2004 or 8, if you wish.