Getting the width of a dynamically generated movie clip

[marilynn.fowler]

I have a photo gallery. On the mainstage I've placed a movie clip that is populated via XML with thumbnails. I have left and right arrows that allow it to scroll, but I'm having trouble formulating the maximum scroll.

This is the code on the movie clip:

import fl.transitions.Tween;
import fl.transitions.easing.*;

var imageLoader:Loader;
var xml:XML;
var xmlList:XMLList;

var bigPhoto;
var fadeTween:Tween;
var thumbSpace:Number = 61;

var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest("data/images.xml"));
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

function xmlLoaded(event:Event):void {
xml = XML(event.target.data);
xmlList = xml.children();

for(var i:int = 0; i < xmlList.length(); i++) {
imageLoader = new Loader();
imageLoader.load(new URLRequest(xmlList[i].attribute("thumb")));
imageLoader.x = (i * thumbSpace);
imageLoader.y = 0;
imageLoader.name = xmlList[i].attribute("source");
addChild(imageLoader);
imageLoader.addEventListener(MouseEvent.CLICK, showPhoto);
}
}

function showPhoto(event:MouseEvent):void {
/*this works as well
MovieClip(root).photoGallery.source = event.target.name;
*/
(root as MovieClip).photoGallery.load(new URLRequest(event.target.name));
fadeTween = new Tween((root as MovieClip).photoGallery, "alpha", None.easeNone, 0, 1, 1, true);
}


This is the code on the main stage ( I put question marks on the line I can't figure:
stop();
var minScroll:Number = thumbs_mc.x;
var maxScroll:Number = ?????????????;
var targetScroll:Number = thumbs_mc.x;
var scrollAmt:Number = 15;
var scrollDirection:Number = 0;
var easing:Number = 4;

function scrollLeft(event:MouseEvent):void {
setDirection(-scrollAmt);
}

function scrollRight(event:MouseEvent):void {
setDirection(scrollAmt);
}

function setDirection(dir:Number):void {
//thumbs_mc.x += dir;
scrollDirection = dir;
stage.addEventListener(Event.ENTER_FRAME, scrollThumbs);
stage.addEventListener(MouseEvent.MOUSE_OUT, stopScrolling);
}

function scrollThumbs(event:Event):void {
targetScroll += scrollDirection;
thumbs_mc.x -=(thumbs_mc.x - targetScroll) / easing;
if (thumbs_mc.x > minScroll) {
thumbs_mc.x = minScroll;
targetScroll = minScroll;
}
else if(thumbs_mc.x < maxScroll) {
thumbs_mc.x = maxScroll;
targetScroll = maxScroll;
}
}

function stopScrolling(event:MouseEvent):void {
scrollDirection = 0;
}

left_btn.addEventListener(MouseEvent.MOUSE_OVER, scrollLeft);
right_btn.addEventListener(MouseEvent.MOUSE_OVER, scrollRight);
thumbs_mc.buttonMode = true;


Is there a way for it to assess the width of the populated movie clip on the fly? I think that I somehow need to get the xmlList.length and multiply it by the width of the thumbs (in this case 60), but my programming knowledge is limited and it seems that there ought to be a more efficient way.

[jschumann]

In your setDirection function you could set the maxScroll each time it is called.

maxScroll = thumbs_mc.width;

[marilynn.fowler]

In your setDirection function you could set the maxScroll each time it is called.

maxScroll = thumbs_mc.width;

I tried that, but it thinks the width is 0 (I traced it).

[marilynn.fowler]

I have a variable on the thumbs_mc called stripWidth. I'm trying to set the value of stripWidth with the setStrip() function, to no avail. When I trace the individual line items within the function I get the expected values, but if I do a trace of setStrip() I get an error message. I also can't figure out how to get my mainstage script to recognize the thumbs_mc variables.

Here's my revised thumbs_mc script:
import fl.transitions.Tween;
import fl.transitions.easing.*;

var imageLoader:Loader;
var xml:XML;
var xmlList:XMLList;
var stripWidth:Number;

var bigPhoto;
var fadeTween:Tween;
var thumbSpace:int = 61;

var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest("data/images.xml"));
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

function xmlLoaded(event:Event):void {
xml = XML(event.target.data);
xmlList = xml.children();

for(var i:int = 0; i < xmlList.length(); i++) {
imageLoader = new Loader();
imageLoader.load(new URLRequest(xmlList[i].attribute("thumb")));
imageLoader.x = (i * thumbSpace);
imageLoader.y = 0;
imageLoader.name = xmlList[i].attribute("source");
addChild(imageLoader);
imageLoader.addEventListener(MouseEvent.CLICK, showPhoto);
}
setStrip()
}

function showPhoto(event:MouseEvent):void {
/*this works as well
MovieClip(root).photoGallery.source = event.target.name;
*/
(root as MovieClip).photoGallery.load(new URLRequest(event.target.name));
fadeTween = new Tween((root as MovieClip).photoGallery, "alpha", None.easeNone, 0, 1, 1, true);
}

function setStrip():Number {
var myStrip:Number = xmlList.length() * thumbSpace;
return myStrip;
}

[gnomeontherun]

Check your code for errors, I know its AS3, but some things look like minor errors.

I think that your function wasn't working because it wasn't sure what xmlList was. xmlList was outside of the scope for the function. Here is some code, not sure if it works since I don't know AS3 that well, but the idea is that you just need to remove that function. Its not needed more than on xml loading, so its unnecessary.

import fl.transitions.Tween;
import fl.transitions.easing.*;

var imageLoader:Loader;
var xml:XML;
var xmlList:XMLList;
var stripWidth:Number;

var bigPhoto;
var fadeTween:Tween;
var thumbSpace:int = 61;

var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest("data/images.xml"));
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

function xmlLoaded(event:Event):void {
xml = XML(event.target.data);
xmlList = xml.children();

for(var i:int = 0; i < xmlList.length(); i++) {
imageLoader = new Loader();
imageLoader.load(new URLRequest(xmlList[i].attribute("thumb")));
imageLoader.x = (i * thumbSpace);
imageLoader.y = 0;
imageLoader.name = xmlList[i].attribute("source");
addChild(imageLoader);
imageLoader.addEventListener(MouseEvent.CLICK, showPhoto);
}
xmlLength:Number = xmlList.length(); //
stripWidth = xmlxmlLength * thumbSpace;
}

function showPhoto(event:MouseEvent):void {
/*this works as well
MovieClip(root).photoGallery.source = event.target.name;
*/
(root as MovieClip).photoGallery.load(new URLRequest(event.target.name));
fadeTween = new Tween((root as MovieClip).photoGallery, "alpha", None.easeNone, 0, 1, 1, true);
}



As far as the maxScroll, that value is computed as soon as the flash file is run. The XML file is loaded afterwords, so calculating that value fails because it takes time to load that file and make its values accessible. Try setting the value in the xml loading section as well.

[marilynn.fowler]

Try setting the value in the xml loading section as well.

How do I do that? I had done it originally, but it never seemed to pass the value anywhere.

I really need to take a programming class.

[gnomeontherun]

Have the var maxScroll:Number = thumbs_mc.y; run after the xml is loaded, but putting it directly into the xmlLoaded function perhaps? You might need to make it a global variable though, which I'm not sure how to do in AS3, but perhaps Google does.