I had scroll functionality working with the following code:
scrolling = function () {
var scrollHeight:Number = scrollTrack._height;
var contentHeight:Number = contentMain._height + 85;
var scrollFaceHeight:Number = scrollFace._height;
var maskHeight:Number = maskedView._height;
var initPosition:Number = scrollFace._y=scrollTrack._y;
var initContentPos:Number = contentMain._y;
var finalContentPos:Number = maskHeight-contentHeight+initContentPos;
var left:Number = scrollTrack._x;
var top:Number = scrollTrack._y;
var right:Number = scrollTrack._x;
var bottom:Number = scrollTrack._height-scrollFaceHeight+scrollTrack._y;
var dy:Number = 0;
var speed:Number = 10;
var moveVal:Number = (contentHeight-maskHeight)/(scrollHeight-scrollFaceHeight);
scrollFace.onPress = function() {
var currPos:Number = this._y;
startDrag(this, false, left, top, right, bottom);
this.onMouseMove = function() {
dy = Math.abs(initPosition-this._y);
contentMain._y = Math.round(dy*-1*moveVal+initContentPos);
};
};
scrollFace.onMouseUp = function() {
stopDrag();
delete this.onMouseMove;
};
btnUp.onPress = function() {
this.onEnterFrame = function() {
if (contentMain._y+speed<maskedView._y) {
if (scrollFace._y<=top) {
scrollFace._y = top;
} else {
scrollFace._y -= speed/moveVal;
}
contentMain._y += speed;
} else {
scrollFace._y = top;
contentMain._y = maskedView._y;
delete this.onEnterFrame;
}
};
};
btnUp.onDragOut = function() {
delete this.onEnterFrame;
};
btnUp.onRelease = function() {
delete this.onEnterFrame;
};
btnDown.onPress = function() {
this.onEnterFrame = function() {
if (contentMain._y-speed>finalContentPos) {
if (scrollFace._y>=bottom) {
scrollFace._y = bottom;
} else {
scrollFace._y += speed/moveVal;
}
contentMain._y -= speed;
} else {
scrollFace._y = bottom;
contentMain._y = finalContentPos;
delete this.onEnterFrame;
}
};
};
btnDown.onRelease = function() {
delete this.onEnterFrame;
};
btnDown.onDragOut = function() {
delete this.onEnterFrame;
};
if (contentHeight<maskHeight) {
scrollFace._visible = false;
btnUp.enabled = false;
btnDown.enabled = false;
} else {
scrollFace._visible = true;
btnUp.enabled = true;
btnDown.enabled = true;
}
};
scrolling();
Then the client wanted to be able to update content via an external XML file. Here is the code that parses the XML:
var my_xml = new XML();
my_xml.ignoreWhite = true;
my_xml.onLoad = function(success) {
// has XML loaded
if (success) {
var recInfo = my_xml.firstChild.childNodes;
var itemCount = 0;
var yCount = 0;
for (var i = 0; i<recInfo.length; i++) {
var recLink = recInfo*.attributes.link;
var recTitle = recInfo*.attributes.title;
var recDesc = recInfo*.attributes.description;
var item = _root.contentBox.contentMain.attachMovie("recipeEntry_mc", "item"+itemCount, itemCount);
item.titleBox.text = recTitle;
item.descBox.text = recDesc;
item.link = recLink;
item.linkSymbol.onRelease = function() {
getURL(this._parent.link, "_blank");
};
item.descBox._height = item.descBox.textHeight + 8;
item._y = yCount;
yCount += item._height + 10;
itemCount++;
}
}
};
// load XML file
my_xml.load("sample.xml");
The problem is that the scroll functionality does not work with the XML derived content because for some reason it is not recognizing the height of the contentMain movie clip.
I’ve tried placing a fixed height object inside contentMain and the scrolling works based on the height of that object–but this does not solve anything as the height will change when recipes are added or taken away. I’ve tried sizing contentMain manually, which only stretches the data inside, and still is not recognized by the scrolling function. I would like the make sure that when contentHeight is defined in the scrolling function, that it regognizes the combined height of all instances of recipeEntry_mc that are generated within contentMain, thus allowing me to scroll this content as I could before when it was static.
Can anyone help, please?
