[AS3] scrollPane contents

[Navarone]

How do I get the scrollPane component to scroll all of my content into view? As in this image the contents on the right are hidden slightly.

[CyanBlue]

What I normally do is to add a white dot(or the background color if different) 10 pixel right and below the bottom right corner where the pure green is... That way the actual width/height of the cotent will be 10 pixels bigger than the actual content which will let you scroll...

[Navarone]

Thanks CyanBlue, I found a solution myself but I am not sure why it is working. The colored squares are dynamically created by loading an XML file. The squares get added to a movieClip called mcHolder. I traced the mcHolder width right after I set the scrollPane source, it reveals 381. I thought that making this width wider it would cause the scrolling to go further, but it had the opposite effect. I actually had to make the width smaller to bring the squares into view. I posted my code because I am trying to figure out why its working this way. Can you see anything?


import flash.display.*;
import flash.events.*;
import flash.geom.ColorTransform;
import flash.display.BitmapData;
import fl.containers.ScrollPane;

//set grid variables
var w:int = 60;//width of cell
var h:int = 40;//height of cell
var i:int = 3;//number of rows var
var j:int = 5;//number of columns
var space:int = 20;//space between cells
var xt:int = 0;
var yt:int = 0;

//set up XML loader
var myXML:XMLList = new XMLList();
var XML_URL:String = "XMLcolor.xml";
var myXMLURL:URLRequest = new URLRequest(XML_URL);
var myLoader:URLLoader = new URLLoader(myXMLURL);
myLoader.addEventListener("complete", xmlLoaded, false, 0, true);

//create movieClip container to place XML data into
//use for scrollPane
var mcHolder:MovieClip = new MovieClip();

// Create the xmlLoaded function
function xmlLoaded(event:Event):void {
myXML = XMLList(myLoader.data);
var a:int=1;
var b:int=1;
//Run the "for each" loop to iterate through all of
//the menu items listed in the external XML file
for each (var ListItem:XML in myXML..ListItem) {
var listColor:String = ListItem.itemColor.toString();
var listLabel:String = ListItem.itemLabel.toString();
//trace(xt);
var rect:MovieClip = new MovieClip();
var color:Number = Number("0x"+listColor);
rect.graphics.lineStyle(1, 0x000000);
rect.graphics.beginFill(color);
rect.graphics.drawRect(10,10,w,h);
rect.graphics.endFill();
rect.x = xt;
rect.y = yt;
//this variable "myColor" added to pass color value
//of square into event handler below
rect.myColor = color;
// This all pertains to the text fields that give our
//boxes their labels, alter values to your liking
var myText1:TextField = new TextField();
myText1.text = listLabel;
myText1.autoSize = TextFieldAutoSize.LEFT;
//set location of text field.
myText1.x = xt+10;
myText1.y = yt+47;

//add cell
mcHolder.addChild(rect);
//add text of cell OVER the cell
mcHolder.addChild(myText1);

xt = xt+w+space;//set the spacing horizontal
b=b+1;//next column
//then changes must be done: prepare for next row
if (b>j) {
b=1;
yt = yt+h+space;//set the spacing vertically
xt = 0;
}
//add mouseEvents for squares
rect.addEventListener(MouseEvent.CLICK, getColorHandler);
rect.buttonMode = true;

}
myScrollPane.source = mcHolder;
trace(mcHolder.width);// ouput381
//setting this width larger causes the content to be hidden
mcHolder.width = 360;//bring squares into view

}

function getColorHandler(event:MouseEvent):void {
trace(event.currentTarget.myColor.toString(16));
var ct:ColorTransform = floorTile.transform.colorTransform;
ct.color = uint("0x" +event.currentTarget.myColor.toString(16));
floorTile.transform.colorTransform = ct;
colorText.text = "#" +event.currentTarget.myColor.toString(16);
}

// add scrollPane to stage and load XML grid of squares to it
var myScrollPane:ScrollPane = new ScrollPane();
myScrollPane.setSize(320, 200);
myScrollPane.move(10, 10);
myScrollPane.addEventListener(Event.COMPLETE, completeHandler);
addChild(myScrollPane);

//trace(myScrollPane.horizontalLineScrollSize)

function completeHandler(event:Event):void {
myScrollPane.update();
}