I’m working on my first website, and have mostly been using tutorials on Lynda.com which has been hugely helpful. I need several different scrollpanes in the site, one of which is a typical thumbnail gallery that uses XML to load the thumbnail images and displays full-size images & text when thumbnails are clicked. With a Lynda tutorial I was able to write the appropriate code and use the canned scrollpane in Flash, but even after changing some of the properties I really don’t like how it looks. I found another tutorial (http://www.developphp.com/Flash_tutorials/show_tutorial.php?tid=265) that shows a scrollpane I like better (after some modifications), and I’ve got it working perfectly elsewhere on the site… but I’m wondering if/how I can integrate the XML code I’ve already written into this new scrollpane so I can replace the canned one? If anyone has any tips or can give me any advice I’d really appreciate it…
Thank you!
I’m using Flash CS4/AS3
Macbook Pro
This is the code for the canned one with all the XML:
[INDENT]var titleArray:Array = new Array();
var descriptionArray:Array = new Array();
var largeimageArray:Array = new Array();
var thumbimageArray:Array = new Array();
var imageNum:Number=0;
var totalImages:Number;
//xml
//load xml
var XMLURLLoader:URLLoader = new URLLoader();
XMLURLLoader.load(new URLRequest(“insituportfolio/mainInSituGallery.xml”));
XMLURLLoader.addEventListener(Event.COMPLETE, processXML);
function processXML(event:Event):void {
var theXMLData:XML=new XML(XMLURLLoader.data);
totalImages=theXMLData.title.length();
for (var i:Number = 0; i < totalImages; i++) {
titleArray.push(theXMLData.title*);
descriptionArray.push(theXMLData.description*);
largeimageArray.push(theXMLData.largeimage*);
thumbimageArray.push(theXMLData.thumbimage*);
}
loadThumbnail();
}
mainScrollPane.source=thumbsMain;
// load thumbs
function loadThumbnail():void {
trace(imageNum);
var thumbLoader:Loader = new Loader();
thumbLoader.load(new URLRequest(thumbimageArray[imageNum]));
thumbLoader.y = 100*imageNum;
var thislargeimage:String = largeimageArray[imageNum];
var thistitle:String = titleArray[imageNum];
var thisdescription:String = descriptionArray[imageNum];
thumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
function thumbLoaded(event:Event):void {
thumbsMain.addChild(thumbLoader);
thumbsMain.buttonMode=true;
mainScrollPane.update();
thumbLoader.addEventListener(MouseEvent.CLICK,loadMainImage1);
function loadMainImage1(event:MouseEvent):void {
largeUILoader.source=thislargeimage;
selectedTitle.text=thistitle;
selectedDescrip.text=thisdescription;
}
}
//add to imageNum (1);
imageNum++;
if (imageNum<totalImages){
loadThumbnail();
}
}[/INDENT]
And this is the code for the Scrollpane I’d like to use:
[INDENT]// Scroll My Content function - AS3
function scrollMyContent () {
// Cache the TextField as a bitmap to improve performance.
content_mc.cacheAsBitmap = true;
// Event Listeners
scrollDragger.addEventListener(MouseEvent.MOUSE_DOWN, scrollDraggerPress);
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpOnStage);
// Set variables
var scrollbarHeight:Number = scrollbarBG.height;
var contentHeight:Number = content_mc.height;
var scrollDraggerHeight:Number = scrollDragger.height;
var maskHeight:Number = contentMask.height;
var scrollAmout:Number = (contentHeight-maskHeight)/(scrollbarHeight-scrollDraggerHeight);
var topBound:Number = scrollbarBG.y;
var bottomBound:Number = scrollbarBG.height-scrollDraggerHeight+scrollbarBG.y;
var startPos:Number = content_mc.y;
var leftBound:Number = scrollbarBG.x;
var absNumSet:Number = 0;
// When scrollDragger gets pressed we do this
function scrollDraggerPress(event:MouseEvent):void {
// Set bounds using some of the scroller BG properties claimed above
var bounds:Rectangle = new Rectangle(leftBound, topBound, 0, bottomBound);
scrollDragger.startDrag(false, bounds);
stage.addEventListener(MouseEvent.MOUSE_MOVE, reportStageMouse);
function reportStageMouse(event:MouseEvent):void {
absNumSet = Math.abs(scrollbarBG.y - scrollDragger.y);
content_mc.y = Math.round(absNumSet * - 1 * scrollAmout + startPos);
}
}
// When mouse is released while dragging we do this
function mouseUpOnStage(event:MouseEvent):void {
stopDrag();
}
}
scrollMyContent();[/INDENT]
